MediaWiki:Common.css
外观
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
:root {
--ccw-primary: #4c97ff;
--ccw-primary-dark: #3373cc;
--ccw-bar-height: 56px;
}
/* 顶栏 */
.ccw-topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--ccw-bar-height);
background: var(--ccw-primary);
box-shadow: 0 2px 6px rgba(0,0,0,.15);
z-index: 1000;
font-size: 15px;
}
.ccw-topbar-inner {
max-width: 1280px;
height: 100%;
margin: 0 auto;
padding: 0 16px;
display: flex;
align-items: center;
gap: 20px;
}
.ccw-topbar a,
.ccw-topbar a:visited { color: #fff; text-decoration: none; }
/* Logo */
.ccw-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.ccw-logo img { vertical-align: middle; }
/* 导航 */
.ccw-nav { display: flex; align-items: center; gap: 4px; }
.ccw-nav a {
padding: 8px 14px;
border-radius: 8px;
transition: background .15s;
white-space: nowrap;
}
.ccw-nav a:hover { background: rgba(255,255,255,.2); }
/* 搜索 */
.ccw-search { flex: 1; max-width: 360px; margin-left: auto; }
.ccw-search form { margin: 0; }
.ccw-search input[type=search] {
width: 100%;
box-sizing: border-box;
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 18px;
background: rgba(255,255,255,.25);
color: #fff;
outline: none;
transition: background .15s;
}
.ccw-search input::placeholder { color: rgba(255,255,255,.8); }
.ccw-search input:focus { background: #fff; color: #333; }
.ccw-search input:focus::placeholder { color: #999; }
/* 用户区 */
.ccw-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ccw-user a { padding: 6px 14px; border-radius: 18px; }
.ccw-user a:last-child { background: #fff; color: var(--ccw-primary-dark) !important; font-weight: 600; }
.ccw-user a:first-child:hover { background: rgba(255,255,255,.2); }
/* 给页面让出顶栏高度 */
body { padding-top: var(--ccw-bar-height); }
/* Vector 旧版:隐藏自带的顶部个人工具栏避免重复(可选) */
/* #mw-head { display: none; } */
/* 窄屏:隐藏导航 */
@media (max-width: 800px) {
.ccw-nav { display: none; }
.ccw-search { max-width: none; }
}