MediaWiki:Common.css:修订间差异
外观
?? Vector ??????? |
小无编辑摘要 |
||
| 第1行: | 第1行: | ||
:root{--jsb-red:#b52e24;--jsb-green:#246044; | /* Brand colors – light default, automatically adapt in dark mode */ | ||
:root { | |||
--jsb-red: #b52e24; | |||
--jsb-green: #246044; | |||
. | --jsb-gold: #c69b4b; | ||
} | |||
html.skin-theme-clientpref-night { | |||
--jsb-red: #d94a3d; | |||
--jsb-green: #3a8a66; | |||
--jsb-gold: #d4a84c; | |||
} | |||
/* Evidence | /* Base layout – use Vector theme variables */ | ||
.jsb-evidence,.jsb-source-note{margin:1em 0;padding:.75em 1em;border:1px solid | body { | ||
.jsb-evidence{border-left:4px solid | background: var(--background-color-base); | ||
.jsb-source-note{font-size:1rem;color: | color: var(--color-base); | ||
} | |||
.mw-page-container { | |||
background: var(--background-color-base); | |||
border-color: var(--border-color-subtle); | |||
box-shadow: none; | |||
} | |||
/* Typography */ | |||
.mw-body h1, | |||
.mw-body h2, | |||
.mw-body h3 { | |||
font-family: "Noto Serif SC", "Songti SC", "STSong", serif; | |||
color: var(--color-base); | |||
} | |||
.mw-body h1 { font-weight: 700; letter-spacing: -.02em; } | |||
.mw-body h2 { border-color: var(--jsb-red); } | |||
/* Links */ | |||
a { color: var(--jsb-green); } | |||
a:hover { color: var(--jsb-red); } | |||
/* ── Hero ── */ | |||
.jsb-hero { | |||
margin: 0 0 28px; | |||
padding: 34px 30px; | |||
background: var(--background-color-base); | |||
color: var(--color-base); | |||
border: 1px solid var(--border-color-subtle); | |||
border-top: 5px solid var(--jsb-red); | |||
} | |||
.jsb-kicker { | |||
font: 700 1rem monospace; | |||
color: var(--jsb-red); | |||
letter-spacing: .14em; | |||
} | |||
.jsb-title { | |||
font: bold clamp(3rem, 8vw, 6rem)/1.05 "Noto Serif SC", "Songti SC", serif; | |||
letter-spacing: -.06em; | |||
margin: .12em 0; | |||
} | |||
.jsb-title span { color: var(--jsb-red); } | |||
.jsb-hero p { max-width: 700px; font-size: 1.08rem; } | |||
.jsb-actions a { | |||
display: inline-block; | |||
color: var(--jsb-green); | |||
border: 1px solid var(--jsb-green); | |||
padding: 6px 12px; | |||
text-decoration: none; | |||
} | |||
.jsb-actions a:hover { | |||
color: var(--color-inverted-fixed); | |||
background: var(--jsb-green); | |||
} | |||
/* ── Card grid ── */ | |||
.jsb-grid { | |||
display: grid; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 22px 0; | |||
} | |||
.jsb-card { | |||
padding: 18px; | |||
background: var(--background-color-base); | |||
border: 1px solid var(--border-color-subtle); | |||
box-shadow: none; | |||
} | |||
.jsb-card > b { | |||
color: var(--jsb-red); | |||
font: 700 1rem monospace; | |||
} | |||
.jsb-card h2 { border: 0; margin: .2em 0 !important; } | |||
/* ── Portals / relation / note ── */ | |||
.jsb-portals, | |||
.jsb-relation, | |||
.jsb-note { | |||
padding: 16px 20px; | |||
margin: 18px 0; | |||
border: 1px solid var(--border-color-subtle); | |||
background: var(--background-color-base); | |||
} | |||
.jsb-relation { | |||
border-left: 4px solid var(--jsb-green); | |||
line-height: 1.9; | |||
} | |||
.jsb-note { | |||
border-left: 4px solid var(--jsb-gold); | |||
background: var(--background-color-base); | |||
} | |||
html.skin-theme-clientpref-night .jsb-note { | |||
background: #1c1610; | |||
} | |||
/* ── Infobox ── */ | |||
.jsb-infobox { | |||
float: right; | |||
width: 290px; | |||
margin: 0 0 20px 22px; | |||
background: var(--background-color-base); | |||
border: 1px solid var(--border-color-subtle); | |||
box-shadow: none; | |||
} | |||
.jsb-infobox-title { | |||
background: var(--background-color-interactive-subtle); | |||
color: var(--color-base); | |||
font: bold 1.4rem serif !important; | |||
border-bottom: 3px solid var(--jsb-red); | |||
} | |||
.jsb-infobox > div { | |||
padding: 10px 14px; | |||
border-bottom: 1px solid var(--border-color-subtle); | |||
} | |||
.jsb-infobox small { | |||
display: block; | |||
color: var(--color-base--subtle); | |||
font: 700 1rem monospace; | |||
} | |||
/* ── Tables ── */ | |||
.jsb-table th { | |||
background: var(--background-color-interactive-subtle); | |||
color: var(--color-base); | |||
border-bottom: 2px solid var(--jsb-green); | |||
} | |||
.wikitable { | |||
background: var(--background-color-base); | |||
border-color: var(--border-color-subtle); | |||
} | |||
/* ── Evidence & source notices ── */ | |||
.jsb-evidence, | |||
.jsb-source-note { | |||
margin: 1em 0; | |||
padding: .75em 1em; | |||
border: 1px solid var(--border-color-subtle); | |||
background: var(--background-color-base); | |||
} | |||
.jsb-evidence { border-left: 4px solid var(--jsb-green); } | |||
.jsb-source-note { | |||
font-size: 1rem; | |||
color: var(--color-base--subtle); | |||
} | |||
/* ── Responsive ── */ | |||
@media (max-width: 720px) { | |||
.jsb-grid { grid-template-columns: 1fr; } | |||
.jsb-infobox { float: none; width: auto; margin: 0 0 20px; } | |||
.jsb-hero { padding: 26px 20px; } | |||
.jsb-title { font-size: 18vw; } | |||
} | |||
2026年7月14日 (二) 12:43的最新版本
/* Brand colors – light default, automatically adapt in dark mode */
:root {
--jsb-red: #b52e24;
--jsb-green: #246044;
--jsb-gold: #c69b4b;
}
html.skin-theme-clientpref-night {
--jsb-red: #d94a3d;
--jsb-green: #3a8a66;
--jsb-gold: #d4a84c;
}
/* Base layout – use Vector theme variables */
body {
background: var(--background-color-base);
color: var(--color-base);
}
.mw-page-container {
background: var(--background-color-base);
border-color: var(--border-color-subtle);
box-shadow: none;
}
/* Typography */
.mw-body h1,
.mw-body h2,
.mw-body h3 {
font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
color: var(--color-base);
}
.mw-body h1 { font-weight: 700; letter-spacing: -.02em; }
.mw-body h2 { border-color: var(--jsb-red); }
/* Links */
a { color: var(--jsb-green); }
a:hover { color: var(--jsb-red); }
/* ── Hero ── */
.jsb-hero {
margin: 0 0 28px;
padding: 34px 30px;
background: var(--background-color-base);
color: var(--color-base);
border: 1px solid var(--border-color-subtle);
border-top: 5px solid var(--jsb-red);
}
.jsb-kicker {
font: 700 1rem monospace;
color: var(--jsb-red);
letter-spacing: .14em;
}
.jsb-title {
font: bold clamp(3rem, 8vw, 6rem)/1.05 "Noto Serif SC", "Songti SC", serif;
letter-spacing: -.06em;
margin: .12em 0;
}
.jsb-title span { color: var(--jsb-red); }
.jsb-hero p { max-width: 700px; font-size: 1.08rem; }
.jsb-actions a {
display: inline-block;
color: var(--jsb-green);
border: 1px solid var(--jsb-green);
padding: 6px 12px;
text-decoration: none;
}
.jsb-actions a:hover {
color: var(--color-inverted-fixed);
background: var(--jsb-green);
}
/* ── Card grid ── */
.jsb-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 22px 0;
}
.jsb-card {
padding: 18px;
background: var(--background-color-base);
border: 1px solid var(--border-color-subtle);
box-shadow: none;
}
.jsb-card > b {
color: var(--jsb-red);
font: 700 1rem monospace;
}
.jsb-card h2 { border: 0; margin: .2em 0 !important; }
/* ── Portals / relation / note ── */
.jsb-portals,
.jsb-relation,
.jsb-note {
padding: 16px 20px;
margin: 18px 0;
border: 1px solid var(--border-color-subtle);
background: var(--background-color-base);
}
.jsb-relation {
border-left: 4px solid var(--jsb-green);
line-height: 1.9;
}
.jsb-note {
border-left: 4px solid var(--jsb-gold);
background: var(--background-color-base);
}
html.skin-theme-clientpref-night .jsb-note {
background: #1c1610;
}
/* ── Infobox ── */
.jsb-infobox {
float: right;
width: 290px;
margin: 0 0 20px 22px;
background: var(--background-color-base);
border: 1px solid var(--border-color-subtle);
box-shadow: none;
}
.jsb-infobox-title {
background: var(--background-color-interactive-subtle);
color: var(--color-base);
font: bold 1.4rem serif !important;
border-bottom: 3px solid var(--jsb-red);
}
.jsb-infobox > div {
padding: 10px 14px;
border-bottom: 1px solid var(--border-color-subtle);
}
.jsb-infobox small {
display: block;
color: var(--color-base--subtle);
font: 700 1rem monospace;
}
/* ── Tables ── */
.jsb-table th {
background: var(--background-color-interactive-subtle);
color: var(--color-base);
border-bottom: 2px solid var(--jsb-green);
}
.wikitable {
background: var(--background-color-base);
border-color: var(--border-color-subtle);
}
/* ── Evidence & source notices ── */
.jsb-evidence,
.jsb-source-note {
margin: 1em 0;
padding: .75em 1em;
border: 1px solid var(--border-color-subtle);
background: var(--background-color-base);
}
.jsb-evidence { border-left: 4px solid var(--jsb-green); }
.jsb-source-note {
font-size: 1rem;
color: var(--color-base--subtle);
}
/* ── Responsive ── */
@media (max-width: 720px) {
.jsb-grid { grid-template-columns: 1fr; }
.jsb-infobox { float: none; width: auto; margin: 0 0 20px; }
.jsb-hero { padding: 26px 20px; }
.jsb-title { font-size: 18vw; }
}