MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary Tag: Reverted |
||
| Line 18: | Line 18: | ||
.mw-parser-output on every page load via applyFontSize(). | .mw-parser-output on every page load via applyFontSize(). | ||
The 20px here is the no-JS fallback only. | The 20px here is the no-JS fallback only. | ||
────────────────────────────────────────────────────────────────── */ | ────────────────────────────────────────────────────────────────── */ | ||
.mw-parser-output { | .mw-parser-output { | ||
| Line 39: | Line 38: | ||
} | } | ||
/* ── Headings | /* ── Headings ───────────────────────────────────────────────────── */ | ||
.mw-parser-output h1, | .mw-parser-output h1, | ||
.mw-parser-output h2, | .mw-parser-output h2, | ||
| Line 495: | Line 494: | ||
transform: translateX(-50%) translateY(0); | transform: translateX(-50%) translateY(0); | ||
} | } | ||
. | |||
background: # | /* ════════════════════════════════════════════════════════════════ | ||
Grantha — Wiki chrome styling | |||
Reskins the existing MediaWiki UI to match Grantha's palette. | |||
Nothing is hidden — just restyled. | |||
════════════════════════════════════════════════════════════════ */ | |||
/* ── Page background ── */ | |||
body { | |||
background: #f5f4f0 !important; | |||
font-family: system-ui, -apple-system, sans-serif; | |||
} | } | ||
/* ── Top header bar (Vector 2022) ── */ | |||
.mw-header, | |||
.vector-header { | .vector-header { | ||
background: | background: #1a2e40 !important; | ||
border-bottom: none !important; | |||
box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important; | |||
} | } | ||
/* | /* Site name / logo text */ | ||
.mw-logo- | .mw-wiki-title, | ||
color: # | #p-logo a, | ||
font-weight: 700; | .vector-header .mw-logo { | ||
font-size: | color: #fff !important; | ||
font-weight: 700 !important; | |||
font-size: 15px !important; | |||
opacity: 1 !important; | |||
} | } | ||
/* | /* Search box */ | ||
. | .vector-search-box input, | ||
.cdx-text-input__input { | |||
background: rgba(255,255,255,0.1) !important; | |||
border-color: rgba(255,255,255,0.2) !important; | |||
color: #fff !important; | |||
border-radius: 20px !important; | |||
} | } | ||
.vector-search-box input::placeholder, | |||
.vector- | .cdx-text-input__input::placeholder { | ||
. | color: rgba(255,255,255,0.45) !important; | ||
color: rgba(255,255,255,0. | |||
} | } | ||
.vector-search-box input:focus, | |||
.vector- | .cdx-text-input__input:focus { | ||
background: rgba(255,255,255,0.18) !important; | |||
border-color: rgba(255,255,255,0.5) !important; | |||
box-shadow: none !important; | |||
} | } | ||
# | /* User/personal tools in header */ | ||
.vector-user-links a, | |||
.mw-portlet-personal a, | |||
#pt-login a, | |||
#pt-createaccount a { | |||
color: rgba(255,255,255,0.8) !important; | |||
font-size: 13px !important; | |||
} | } | ||
. | .vector-user-links a:hover, | ||
.mw-portlet-personal a:hover { | |||
color: #fff !important; | color: #fff !important; | ||
} | } | ||
. | /* ── Left sidebar ── */ | ||
#mw-panel, | |||
.mw-sidebar, | |||
.vector-sidebar, | |||
.vector-sidebar-container { | |||
background: #fff !important; | |||
border-right: 1px solid #e8eaed !important; | |||
} | } | ||
/* | /* Sidebar headings */ | ||
. | .vector-menu-heading, | ||
.mw-portlet-nav-heading, | |||
color: # | #mw-panel .portal h3, | ||
.vector-sidebar .vector-menu-heading { | |||
font-size: 10px !important; | |||
font-weight: 700 !important; | |||
text-transform: uppercase !important; | |||
letter-spacing: .09em !important; | |||
color: #8a9bb0 !important; | |||
padding: 16px 16px 6px !important; | |||
border: none !important; | border: none !important; | ||
background: none !important; | |||
} | } | ||
/* | /* Sidebar links */ | ||
#mw-panel .portal .body a, | |||
.vector-sidebar a, | |||
.mw-portlet-nav a { | |||
color: #1a2e40 !important; | |||
font-size: 13px !important; | |||
padding: 5px 16px !important; | |||
border-radius: 6px !important; | |||
display: block !important; | |||
transition: background .1s !important; | |||
} | |||
.vector- | #mw-panel .portal .body a:hover, | ||
.vector-sidebar a:hover, | |||
.mw-portlet-nav a:hover { | |||
background: #f0f4f8 !important; | |||
color: #1a2e40 !important; | |||
text-decoration: none !important; | |||
} | } | ||
/* | /* ── Page action tabs (Edit, History, Talk …) ── */ | ||
#p-views ul, | |||
.mw-portlet-views ul, | |||
.vector-page-tools ul { | |||
background: none !important; | |||
border: none !important; | |||
gap: 2px !important; | |||
} | |||
.vector- | #p-views li a, | ||
color: | .mw-portlet-views li a, | ||
.vector-page-tools li a, | |||
#ca-edit a, #ca-ve-edit a, #ca-history a, #ca-talk a { | |||
font-size: 12.5px !important; | |||
color: #4a5568 !important; | |||
padding: 5px 12px !important; | |||
border-radius: 6px !important; | |||
border: 1px solid transparent !important; | |||
background: none !important; | |||
transition: background .12s, border-color .12s !important; | |||
} | } | ||
. | |||
#p-views li a:hover, | |||
.mw-portlet-views li a:hover, | |||
#ca-edit a:hover, #ca-history a:hover { | |||
background: #f0f4f8 !important; | |||
border-color: #dde3ea !important; | |||
color: #1a2e40 !important; | |||
} | } | ||
. | #p-views li.selected a, | ||
.mw-portlet-views li.selected a { | |||
background: #1a2e40 !important; | |||
color: #fff !important; | |||
border-color: #1a2e40 !important; | |||
} | } | ||
.vector- | /* ── Footer ── */ | ||
#footer, | |||
.mw-footer, | |||
.vector-footer { | |||
background: #1a2e40 !important; | |||
border-top: none !important; | |||
color: rgba(255,255,255,0.5) !important; | |||
font-size: 12px !important; | |||
padding: 20px 24px !important; | |||
} | } | ||
.vector- | |||
#footer a, | |||
.mw-footer a, | |||
.vector-footer a { | |||
color: rgba(255,255,255,0.65) !important; | |||
} | } | ||
. | #footer a:hover, | ||
.mw-footer a:hover { | |||
color: #fff !important; | |||
} | } | ||
/* ── Site notice ── */ | |||
#siteNotice { | |||
background: #eef3ff !important; | |||
border: 1px solid #c8d8f5 !important; | |||
border-radius: 8px !important; | |||
color: #1a2e40 !important; | |||
font-size: 13px !important; | |||
padding: 8px 14px !important; | |||
margin-bottom: 16px !important; | |||
} | } | ||
. | /* ── Category links ── */ | ||
#catlinks, | |||
.catlinks { | |||
background: #f8f9fa !important; | |||
border: 1px solid #e8eaed !important; | |||
border-radius: 8px !important; | |||
font-size: 12.5px !important; | |||
color: #6b7a8d !important; | |||
padding: 8px 14px !important; | |||
margin-top: 24px !important; | |||
} | } | ||
#catlinks a, | |||
. | .catlinks a { | ||
color: #2a5298 !important; | |||
} | } | ||
/* ════════════════════════════════════════════════════════════════ | |||
Grantha — Main Page | |||
════════════════════════════════════════════════════════════════ */ | |||
#se-home { | |||
font-family: system-ui, -apple-system, sans-serif; | |||
max-width: 680px; | |||
margin: 0 auto; | |||
padding: 0 0 48px; | |||
} | } | ||
#se-home h2, | |||
. | #se-home .mw-heading { | ||
display: none; | |||
} | } | ||
.se-hero { | |||
. | background: linear-gradient(160deg, #f7f4ef 0%, #faf8f3 60%, #eef3f8 100%); | ||
background: # | padding: 44px 28px 36px; | ||
text-align: center; | |||
border-radius: 12px; | |||
margin-bottom: 32px; | |||
border: 1px solid #e8e4dc; | |||
} | } | ||
.se-hero-verse { | |||
. | font-size: 14px; | ||
color: #8a7e6c; | |||
font-style: italic; | |||
line-height: 1.9; | |||
margin-bottom: 18px; | |||
opacity: .85; | |||
} | } | ||
.se-hero-title { | |||
font-size: 30px; | |||
font-weight: 700; | |||
color: #1a2e40; | |||
letter-spacing: -.01em; | |||
margin-bottom: 6px; | |||
color: | |||
margin- | |||
} | } | ||
. | .se-hero-sub { | ||
font-size: 13px; | |||
color: #8a9bb0; | |||
} | } | ||
. | .se-section { | ||
margin-bottom: 32px; | |||
} | } | ||
. | .se-section-label { | ||
font-weight: | font-size: 11px; | ||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: .1em; | |||
color: #8a9bb0; | |||
margin-bottom: 10px; | margin-bottom: 10px; | ||
padding-bottom: 8px; | |||
border-bottom: 1px solid #eef0f3; | |||
} | } | ||
. | .se-doclist { | ||
border: 1px solid #e8eaed; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | } | ||
.se-docrow { | .se-docrow { | ||
display: flex; | |||
align-items: center; | |||
gap: 14px; | |||
padding: 14px 20px; | |||
background: #fff; | |||
border-bottom: 1px solid #f0f2f5; | |||
transition: background .1s; | |||
} | } | ||
.se-docrow- | .se-docrow:last-child { | ||
border-bottom: none; | |||
} | } | ||
.se-docrow:hover { | .se-docrow:hover { | ||
background: # | background: #f7f9fc; | ||
} | } | ||
. | .se-docrow--dev { | ||
background: #f5f8ff; | |||
} | } | ||
. | .se-docrow--dev:hover { | ||
background: #edf2ff; | |||
} | } | ||
. | .se-docrow-num { | ||
font-size: 12px; | |||
color: #c8d0da; | |||
min-width: 20px; | |||
flex-shrink: 0; | |||
font-variant-numeric: tabular-nums; | |||
} | } | ||
. | .se-docrow-title { | ||
font-size: 14.5px; | |||
font-weight: 600; | |||
flex: 1; | |||
} | } | ||
. | .se-docrow-title a { | ||
color: #1a2e40; | |||
text-decoration: none; | |||
display: block; | |||
} | } | ||
. | .se-docrow-title a:hover { | ||
color: #2a5298; | |||
color: # | |||
} | } | ||
.se-doclist-actions { | |||
. | margin-top: 14px; | ||
} | } | ||
.se-newdoc-trigger { | |||
. | display: inline-flex; | ||
align-items: center; | |||
gap: 7px; | |||
font-size: 13px; | |||
font-weight: 600; | |||
color: #1a2e40; | |||
color: # | padding: 8px 20px; | ||
border-radius: | border-radius: 20px; | ||
border: 1.5px solid #1a2e40; | |||
cursor: pointer; | |||
transition: background .14s, color .14s; | |||
} | } | ||
.se-newdoc-trigger:hover { | |||
. | background: #1a2e40; | ||
color: | color: #fff; | ||
} | } | ||