MediaWiki:Chameleon.css:修订间差异
MediaWiki界面页面
更多操作
创建页面,内容为“→---------------------------------------------------------- 1. 顶部导航栏 ----------------------------------------------------------: .navbar, .navbar-default, #mw-navigation .navbar { background: #ffffff; border: none; border-bottom: 1px solid var(--gmtv-border, #e2e6ec); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 0 16px; min-height: 56px; } →Logo / 站名: .navbar-brand, .navbar-default .navbar-brand { font-weight: 8…” |
无编辑摘要 |
||
| 第2行: | 第2行: | ||
1. 顶部导航栏 | 1. 顶部导航栏 | ||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
.navbar, | .navbar, .navbar-default, #mw-navigation .navbar { | ||
.navbar-default, | background: #fff; | ||
#mw-navigation .navbar { | |||
background: # | |||
border: none; | border: none; | ||
border-bottom: 1px solid | border-bottom: 1px solid #e5e7eb; | ||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) | box-shadow: 0 1px 3px rgba(0,0,0,0.04); | ||
min-height: 54px; | |||
min-height: | |||
} | } | ||
.navbar-brand, .navbar-default .navbar-brand { | |||
.navbar-brand, | |||
.navbar-default .navbar-brand { | |||
font-weight: 800; | font-weight: 800; | ||
font-size: 1. | font-size: 1.15em; | ||
color: # | color: #2d7dd2; | ||
padding: 14px 12px; | padding: 14px 12px; | ||
} | } | ||
.navbar-brand:hover { | .navbar-brand:hover { color: #1b5eb5; } | ||
} | |||
.navbar-nav > li > a, .navbar-default .navbar-nav > li > a { | |||
.navbar-nav > li > a, | color: #4b5563; | ||
.navbar-default .navbar-nav > li > a { | |||
color: # | |||
font-weight: 500; | font-weight: 500; | ||
font-size: 0. | font-size: 0.9em; | ||
padding: | padding: 16px 14px; | ||
transition: color | transition: color .15s; | ||
} | } | ||
.navbar-nav > li > a:hover, | .navbar-nav > li > a:hover, | ||
.navbar-default .navbar-nav > li > a:hover, | .navbar-default .navbar-nav > li > a:hover, | ||
.navbar-nav > li.active > a { | |||
color: #2d7dd2; | |||
color: # | |||
background: transparent; | background: transparent; | ||
} | } | ||
.navbar-nav > li.active > a { | .navbar-nav > li.active > a { | ||
border-bottom: 2px solid # | border-bottom: 2px solid #2d7dd2; | ||
} | } | ||
.navbar-nav .dropdown-menu { | .navbar-nav .dropdown-menu { | ||
background: # | background: #fff; | ||
border: 1px solid # | border: 1px solid #e5e7eb; | ||
border-radius: | border-radius: 10px; | ||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); | box-shadow: 0 8px 24px rgba(0,0,0,0.10); | ||
padding: 6px 0; | padding: 6px 0; | ||
} | } | ||
.navbar-nav .dropdown-menu > li > a { | .navbar-nav .dropdown-menu > li > a { | ||
color: # | color: #1a1d24; | ||
padding: 8px 18px; | padding: 8px 18px; | ||
font-size: 0. | font-size: 0.88em; | ||
} | } | ||
.navbar-nav .dropdown-menu > li > a:hover { | .navbar-nav .dropdown-menu > li > a:hover { | ||
background: # | background: #e6f0fb; | ||
color: # | color: #2d7dd2; | ||
} | } | ||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
2. | 2. 内容区背景透明(让 Common.css 的卡片样式显露) | ||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
#content, | #content, #mw-content-container, .mw-body { | ||
#mw-content-container, | |||
.mw-body { | |||
background: transparent; | background: transparent; | ||
border: none; | border: none; | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
.skin-chameleon #mw-content-text { | |||
background: transparent; | |||
. | |||
} | } | ||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
3. 侧边栏面板 | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
.skin-chameleon .panel, .chameleon-sidebar .panel { | |||
background: #fff; | |||
.skin-chameleon .panel, | border: 1px solid #e5e7eb; | ||
border-radius: 14px; | |||
.chameleon-sidebar .panel { | box-shadow: 0 1px 3px rgba(0,0,0,0.05); | ||
background: # | |||
border: 1px solid # | |||
border-radius: | |||
box-shadow: 0 1px | |||
margin-bottom: 16px; | margin-bottom: 16px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.skin-chameleon .panel-heading, .chameleon-sidebar .panel-heading { | |||
background: #2d7dd2; | |||
.skin-chameleon .panel-heading, | color: #fff; | ||
.chameleon-sidebar .panel-heading { | |||
background: # | |||
color: # | |||
font-weight: 600; | font-weight: 600; | ||
font-size: 0. | font-size: 0.88em; | ||
padding: 10px 16px; | padding: 10px 16px; | ||
border: none; | border: none; | ||
} | } | ||
.skin-chameleon .panel-body a, .chameleon-sidebar .panel-body a { | |||
color: #4b5563; | |||
.skin-chameleon .panel-body a, | |||
.chameleon-sidebar .panel-body a { | |||
color: # | |||
display: block; | display: block; | ||
padding: 6px 16px; | padding: 6px 16px; | ||
font-size: 0. | font-size: 0.86em; | ||
transition: color | transition: color .15s, background .15s; | ||
} | } | ||
.skin-chameleon .panel-body a:hover, | .skin-chameleon .panel-body a:hover, .chameleon-sidebar .panel-body a:hover { | ||
.chameleon-sidebar .panel-body a:hover { | color: #2d7dd2; | ||
color: # | background: #e6f0fb; | ||
background: # | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.skin-chameleon .panel-body ul { list-style: none; margin: 0; padding: 0; } | |||
.skin-chameleon .panel-body ul li { border-bottom: 1px solid #f3f4f6; } | |||
.skin-chameleon | .skin-chameleon .panel-body ul li:last-child { border-bottom: none; } | ||
} | |||
.skin-chameleon | |||
} | |||
.skin-chameleon .panel-body ul li:last-child { | |||
} | |||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
4. 页脚 | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
footer, | footer, #footer, .mw-footer { | ||
#footer, | background: #fff; | ||
.mw-footer { | border-top: 1px solid #e5e7eb; | ||
background: # | |||
border-top: 1px solid # | |||
padding: 20px 24px; | padding: 20px 24px; | ||
margin-top: 40px; | margin-top: 40px; | ||
font-size: 0. | font-size: 0.8em; | ||
color: # | color: #9ca3af; | ||
text-align: center; | text-align: center; | ||
} | } | ||
footer a, | footer a, #footer a { color: #4b5563; } | ||
#footer a { | footer a:hover, #footer a:hover { color: #2d7dd2; } | ||
} | |||
footer a:hover, | |||
#footer a:hover { | |||
} | |||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
5. 页面操作标签(编辑/历史/讨论) | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
.nav-tabs, | .nav-tabs, #p-views ul { | ||
#p | border-bottom: 1px solid #e5e7eb; | ||
border-bottom: 1px solid # | |||
} | } | ||
.nav-tabs > li > a, #p-views li a { | |||
.nav-tabs > li > a, | color: #4b5563; | ||
#p-views li a { | font-size: 0.86em; | ||
color: # | |||
font-size: 0. | |||
padding: 8px 14px; | padding: 8px 14px; | ||
border: none; | border: none; | ||
border-bottom: 2px solid transparent; | border-bottom: 2px solid transparent; | ||
transition: color | transition: color .15s, border-color .15s; | ||
} | } | ||
.nav-tabs > li > a:hover, | .nav-tabs > li > a:hover, #p-views li a:hover { | ||
#p-views li a:hover { | color: #2d7dd2; | ||
color: # | |||
background: transparent; | background: transparent; | ||
border-bottom-color: # | border-bottom-color: #2d7dd2; | ||
} | } | ||
.nav-tabs > li.active > a, | .nav-tabs > li.active > a, #p-views li.selected a { | ||
#p-views li.selected a { | color: #2d7dd2; | ||
color: # | |||
font-weight: 600; | font-weight: 600; | ||
border-bottom-color: # | border-bottom-color: #2d7dd2; | ||
background: transparent; | background: transparent; | ||
} | } | ||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
6. 按钮 | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
.btn-primary, | .btn-primary, .mw-ui-progressive, input[type="submit"] { | ||
.mw-ui-progressive, | background: #2d7dd2; | ||
input[type="submit"] { | |||
background: # | |||
border: none; | border: none; | ||
border-radius: | border-radius: 8px; | ||
color: # | color: #fff; | ||
font-weight: 600; | font-weight: 600; | ||
padding: 8px 20px; | padding: 8px 20px; | ||
font-size: 0. | font-size: 0.88em; | ||
transition: background | transition: background .15s, box-shadow .15s; | ||
} | } | ||
.btn-primary:hover, | .btn-primary:hover, .mw-ui-progressive:hover, input[type="submit"]:hover { | ||
.mw-ui-progressive:hover, | background: #1b5eb5; | ||
input[type="submit"]:hover { | box-shadow: 0 2px 8px rgba(45,125,210,0.25); | ||
background: # | |||
box-shadow: 0 2px 8px rgba( | |||
} | } | ||
.btn-default, | .btn-default, .mw-ui-quiet { | ||
.mw-ui-quiet { | background: #f3f4f6; | ||
background: # | border: 1px solid #e5e7eb; | ||
border: 1px solid # | border-radius: 8px; | ||
border-radius: | color: #4b5563; | ||
color: # | |||
padding: 8px 20px; | padding: 8px 20px; | ||
font-size: 0. | font-size: 0.88em; | ||
transition: background | transition: background .15s; | ||
} | } | ||
.btn-default:hover, | .btn-default:hover, .mw-ui-quiet:hover { | ||
.mw-ui-quiet:hover { | background: #e6f0fb; | ||
background: # | color: #2d7dd2; | ||
color: # | border-color: #2d7dd2; | ||
border-color: # | |||
} | } | ||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
7. 编辑页面 | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
#editform textarea, .mw-editfont-default { | |||
font-family: "JetBrains Mono", "Fira Code", monospace; | |||
font-size: 0.88em; | |||
border: 1px solid #e5e7eb; | |||
border-radius: 10px; | |||
#editform textarea, | |||
.mw-editfont-default { | |||
font-family: "JetBrains Mono", "Fira Code | |||
font-size: 0. | |||
border: 1px solid # | |||
border-radius: | |||
padding: 14px; | padding: 14px; | ||
background: # | background: #fff; | ||
line-height: 1.7; | line-height: 1.7; | ||
} | } | ||
#editform textarea:focus { | #editform textarea:focus { | ||
border-color: # | border-color: #2d7dd2; | ||
box-shadow: 0 0 0 3px rgba( | box-shadow: 0 0 0 3px rgba(45,125,210,0.12); | ||
outline: none; | outline: none; | ||
} | } | ||
/* ---------------------------------------------------------- | /* ---------------------------------------------------------- | ||
8. Bootstrap 杂项覆盖 | |||
---------------------------------------------------------- */ | ---------------------------------------------------------- */ | ||
.well { | .well { | ||
background: # | background: #fff; | ||
border: 1px solid # | border: 1px solid #e5e7eb; | ||
border-radius: | border-radius: 14px; | ||
box-shadow: 0 1px | box-shadow: 0 1px 3px rgba(0,0,0,0.05); | ||
} | } | ||
.panel-default > .panel-heading { | .panel-default > .panel-heading { | ||
background: # | background: #f3f4f6; | ||
border-color: # | border-color: #e5e7eb; | ||
color: # | color: #1a1d24; | ||
} | } | ||
/* | /* 副标题 */ | ||
. | #contentSub { color: #9ca3af; font-size: 0.82em; margin-bottom: 10px; } | ||
#siteSub { color: #9ca3af; font-size: 0.8em; margin-bottom: 10px; } | |||
} | |||
2026年6月2日 (二) 20:55的版本
/* ----------------------------------------------------------
1. 顶部导航栏
---------------------------------------------------------- */
.navbar, .navbar-default, #mw-navigation .navbar {
background: #fff;
border: none;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
min-height: 54px;
}
.navbar-brand, .navbar-default .navbar-brand {
font-weight: 800;
font-size: 1.15em;
color: #2d7dd2;
padding: 14px 12px;
}
.navbar-brand:hover { color: #1b5eb5; }
.navbar-nav > li > a, .navbar-default .navbar-nav > li > a {
color: #4b5563;
font-weight: 500;
font-size: 0.9em;
padding: 16px 14px;
transition: color .15s;
}
.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
color: #2d7dd2;
background: transparent;
}
.navbar-nav > li.active > a {
border-bottom: 2px solid #2d7dd2;
}
.navbar-nav .dropdown-menu {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
padding: 6px 0;
}
.navbar-nav .dropdown-menu > li > a {
color: #1a1d24;
padding: 8px 18px;
font-size: 0.88em;
}
.navbar-nav .dropdown-menu > li > a:hover {
background: #e6f0fb;
color: #2d7dd2;
}
/* ----------------------------------------------------------
2. 内容区背景透明(让 Common.css 的卡片样式显露)
---------------------------------------------------------- */
#content, #mw-content-container, .mw-body {
background: transparent;
border: none;
box-shadow: none;
}
.skin-chameleon #mw-content-text {
background: transparent;
}
/* ----------------------------------------------------------
3. 侧边栏面板
---------------------------------------------------------- */
.skin-chameleon .panel, .chameleon-sidebar .panel {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 16px;
overflow: hidden;
}
.skin-chameleon .panel-heading, .chameleon-sidebar .panel-heading {
background: #2d7dd2;
color: #fff;
font-weight: 600;
font-size: 0.88em;
padding: 10px 16px;
border: none;
}
.skin-chameleon .panel-body a, .chameleon-sidebar .panel-body a {
color: #4b5563;
display: block;
padding: 6px 16px;
font-size: 0.86em;
transition: color .15s, background .15s;
}
.skin-chameleon .panel-body a:hover, .chameleon-sidebar .panel-body a:hover {
color: #2d7dd2;
background: #e6f0fb;
text-decoration: none;
}
.skin-chameleon .panel-body ul { list-style: none; margin: 0; padding: 0; }
.skin-chameleon .panel-body ul li { border-bottom: 1px solid #f3f4f6; }
.skin-chameleon .panel-body ul li:last-child { border-bottom: none; }
/* ----------------------------------------------------------
4. 页脚
---------------------------------------------------------- */
footer, #footer, .mw-footer {
background: #fff;
border-top: 1px solid #e5e7eb;
padding: 20px 24px;
margin-top: 40px;
font-size: 0.8em;
color: #9ca3af;
text-align: center;
}
footer a, #footer a { color: #4b5563; }
footer a:hover, #footer a:hover { color: #2d7dd2; }
/* ----------------------------------------------------------
5. 页面操作标签(编辑/历史/讨论)
---------------------------------------------------------- */
.nav-tabs, #p-views ul {
border-bottom: 1px solid #e5e7eb;
}
.nav-tabs > li > a, #p-views li a {
color: #4b5563;
font-size: 0.86em;
padding: 8px 14px;
border: none;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.nav-tabs > li > a:hover, #p-views li a:hover {
color: #2d7dd2;
background: transparent;
border-bottom-color: #2d7dd2;
}
.nav-tabs > li.active > a, #p-views li.selected a {
color: #2d7dd2;
font-weight: 600;
border-bottom-color: #2d7dd2;
background: transparent;
}
/* ----------------------------------------------------------
6. 按钮
---------------------------------------------------------- */
.btn-primary, .mw-ui-progressive, input[type="submit"] {
background: #2d7dd2;
border: none;
border-radius: 8px;
color: #fff;
font-weight: 600;
padding: 8px 20px;
font-size: 0.88em;
transition: background .15s, box-shadow .15s;
}
.btn-primary:hover, .mw-ui-progressive:hover, input[type="submit"]:hover {
background: #1b5eb5;
box-shadow: 0 2px 8px rgba(45,125,210,0.25);
}
.btn-default, .mw-ui-quiet {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #4b5563;
padding: 8px 20px;
font-size: 0.88em;
transition: background .15s;
}
.btn-default:hover, .mw-ui-quiet:hover {
background: #e6f0fb;
color: #2d7dd2;
border-color: #2d7dd2;
}
/* ----------------------------------------------------------
7. 编辑页面
---------------------------------------------------------- */
#editform textarea, .mw-editfont-default {
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 0.88em;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px;
background: #fff;
line-height: 1.7;
}
#editform textarea:focus {
border-color: #2d7dd2;
box-shadow: 0 0 0 3px rgba(45,125,210,0.12);
outline: none;
}
/* ----------------------------------------------------------
8. Bootstrap 杂项覆盖
---------------------------------------------------------- */
.well {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.panel-default > .panel-heading {
background: #f3f4f6;
border-color: #e5e7eb;
color: #1a1d24;
}
/* 副标题 */
#contentSub { color: #9ca3af; font-size: 0.82em; margin-bottom: 10px; }
#siteSub { color: #9ca3af; font-size: 0.8em; margin-bottom: 10px; }