Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | /************************************************* | + | /***************************************************** |
| − | * | + | * HOLDFAST WIKI – MODERN THEME (2025-10-10) |
| − | * | + | * – Mobile-first, responsive banner & sidebar |
| − | *************************************************/ | + | * – Vector 2010 + Vector 2022 + Minerva compatible |
| + | *****************************************************/ | ||
| − | /* | + | /* --------------------------------------------------- |
| + | 0. GLOBAL TOKENS | ||
| + | --------------------------------------------------- */ | ||
:root{ | :root{ | ||
| − | + | /* spacing scale */ | |
| − | -- | + | --space-1: .25rem; |
| − | -- | + | --space-2: .5rem; |
| − | -- | + | --space-3: 1rem; |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /* widths (desktop) */ | |
| − | + | --sidebar-w: 200px; /* desktop off-canvas width */ | |
| + | --banner-h: 300px; /* height of top gradient band */ | ||
| − | + | /* fonts */ | |
| − | + | --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| + | --font-size-base: 1rem; /* 16 px */ | ||
| + | --font-size-nav: .6875rem; /* 11 px */ | ||
| − | + | /* colours */ | |
| − | + | --color-parchment: #E1DCCE; | |
| − | + | --color-sidebar-top: #2F2D2B; | |
| − | + | --color-sidebar-bot: #1E1E1D; | |
| − | + | --color-text: #16181D; | |
| − | + | --color-link: #1666FF; | |
| − | + | --color-link-visited: #3b46ff; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | /* --------------------------------------------------- | ||
| + | 1. BASE RESET (small & safe) | ||
| + | --------------------------------------------------- */ | ||
| + | *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} | ||
| + | html{scroll-behavior:smooth;} | ||
| + | img{max-width:100%;height:auto;} | ||
| + | /* --------------------------------------------------- | ||
| + | 2. BODY + BACKGROUND STACK | ||
| + | --------------------------------------------------- */ | ||
| + | body{ | ||
| + | margin:0; | ||
| + | background:var(--color-parchment); | ||
| + | color:var(--color-text); | ||
| + | font:400 var(--font-size-base)/1.55 var(--font-sans); | ||
| + | -webkit-font-smoothing:antialiased; | ||
| + | text-rendering:optimizeLegibility; | ||
| + | } | ||
| − | /* | + | /* Desktop / tablet: show banner + sidebar gradients */ |
| − | + | @media (min-width:720px){ | |
| − | + | body{ | |
| − | + | background: | |
| − | /* | + | /* 1) banner */ |
| − | + | url("/Special:FilePath/BannerImage.png") left top/40vw no-repeat, | |
| − | + | /* 2) dark top strip (full-width) */ | |
| − | + | linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%) | |
| − | + | left top/100% var(--banner-h) no-repeat, | |
| − | + | /* 3) vertical sidebar column */ | |
| + | linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%) | ||
| + | left top/var(--sidebar-w) 100% repeat-y, | ||
| + | /* 4) parchment fill */ | ||
| + | var(--color-parchment); | ||
| + | background-attachment:scroll; /* avoids iOS repaint jank */ | ||
| + | } | ||
} | } | ||
| − | /* | + | /* Keep site chrome transparent so bg shows through */ |
| − | #mw- | + | #mw-page-base,#mw-head-base,#mw-head, |
| − | # | + | .vector-header-container, |
| + | #mw-panel,#column-one,.mw-sidebar{background:transparent!important;} | ||
| − | /* | + | /* --------------------------------------------------- |
| − | #mw-panel .vector- | + | 3. SIDEBAR (MW panel) – off-canvas on mobile |
| − | #mw-panel .vector- | + | --------------------------------------------------- */ |
| − | + | body.skin-vector #mw-panel, | |
| − | + | body.skin-vector-2022 #mw-panel, | |
| − | + | body.skin-vector #column-one{/* legacy Vector alias */ | |
| − | background: transparent | + | position:fixed; |
| + | top:0;left:-100%; /* hide out of view */ | ||
| + | width:var(--sidebar-w); | ||
| + | padding:var(--space-3) var(--space-2) var(--space-3); | ||
| + | background:transparent; | ||
| + | color:#EEEDEB; | ||
| + | transition:left .3s ease; | ||
| + | z-index:1000; | ||
} | } | ||
| − | #mw-panel, . | + | body.menu-open #mw-panel, |
| + | body.menu-open #column-one{left:0;} /* toggled via JS */ | ||
| + | /* Portal headings */ | ||
#mw-panel .portal .portal-title, | #mw-panel .portal .portal-title, | ||
#mw-panel .vector-menu-heading, | #mw-panel .vector-menu-heading, | ||
| − | #column-one h3 | + | #column-one h3{ |
| − | background: #63635B | + | background:#63635B; |
| − | padding: 5px 8px | + | color:#EEEDEB; |
| − | + | font:700 var(--font-size-nav)/1.4 var(--font-sans); | |
| + | padding:5px 8px; | ||
| + | margin:var(--space-2) var(--space-1) var(--space-1); | ||
| + | border:0; | ||
} | } | ||
| − | #mw-panel .vector-menu-content-list, #column-one .pBody ul{ list-style: none; padding: 0; margin: | + | /* Lists & links */ |
| − | #mw-panel .vector-menu-content-list > li, #column-one .pBody ul li{ padding: 3px 6px; line-height: 1.35; } | + | #mw-panel .vector-menu-content-list, |
| + | #column-one .pBody ul{list-style:none;padding:0;margin:var(--space-2) 0 0;} | ||
| + | #mw-panel .vector-menu-content-list>li, | ||
| + | #column-one .pBody ul li{padding:3px 6px;line-height:1.35;} | ||
| − | #mw-panel a, #column-one | + | #mw-panel a,#column-one a{ |
| − | display: block; padding: 2px 4px; | + | display:block; |
| − | color: #EEEDEB !important; text-decoration: none; | + | padding:2px 4px; |
| − | font: 400 | + | color:#EEEDEB!important; |
| − | + | text-decoration:none; | |
| − | + | font:400 var(--font-size-nav)/1.35 var(--font-sans); | |
| − | |||
} | } | ||
| + | #mw-panel a:hover,#column-one a:hover{background:rgba(255,255,255,.08);} | ||
| − | /* | + | /* Call-out button (Discord) */ |
| − | |||
| − | |||
| − | |||
| − | |||
#mw-panel a.external[href*="discord"]{ | #mw-panel a.external[href*="discord"]{ | ||
| − | background: #5A65EA; color: #fff !important; | + | background:#5A65EA;color:#fff!important; |
| − | + | padding:8px 10px;margin:var(--space-2) 0 var(--space-3); | |
| − | border-radius: 4px; border: 1px solid rgba(0,0,0, | + | border-radius:4px;border:1px solid rgba(0,0,0,.15); |
| − | font: 700 | + | font:700 .75rem/1 var(--font-sans); |
} | } | ||
| − | #mw-panel a.external[href*="discord"]:hover{ background: #545DD9; } | + | #mw-panel a.external[href*="discord"]:hover{background:#545DD9;} |
| − | /* | + | /* --------------------------------------------------- |
| − | #p-logo a, .mw-wiki-logo{ | + | 4. LOGO |
| − | background: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png") center/contain no-repeat !important; | + | --------------------------------------------------- */ |
| − | width: | + | #p-logo a,.mw-wiki-logo{ |
| + | background:url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png") | ||
| + | center/contain no-repeat!important; | ||
| + | width:120px;height:120px;display:block; | ||
} | } | ||
| − | #p-logo-text, .mw-wiki-logo-text{ display: none !important; } | + | #p-logo-text,.mw-wiki-logo-text{display:none!important;} |
| − | /* | + | /* --------------------------------------------------- |
| − | + | 5. CONTENT COLUMN (offset only on ≥720 px) | |
| − | + | --------------------------------------------------- */ | |
| − | + | #content,.mw-body,.mw-content-container, | |
| − | .mw- | + | .mw-workspace-container{ |
| − | + | background:var(--color-parchment)!important; | |
| − | + | position:relative; | |
| − | - | + | z-index:1; |
| − | + | padding:0 var(--space-3) var(--space-3); | |
} | } | ||
| − | + | @media (min-width:720px){ | |
| − | + | #content,.mw-body,.mw-content-container{ | |
| − | + | margin-left:calc(var(--sidebar-w) + var(--space-3)); | |
| − | + | } | |
} | } | ||
| − | /* | + | /* --------------------------------------------------- |
| − | + | 6. TYPOGRAPHY | |
| + | --------------------------------------------------- */ | ||
| + | .mw-parser-output p, | ||
| + | .mw-parser-output li, | ||
| + | .mw-parser-output td, | ||
| + | .mw-parser-output th{ | ||
| + | letter-spacing:.2px; | ||
| + | } | ||
| − | + | .mw-parser-output h1, | |
| − | + | .mw-parser-output h2, | |
| − | -- | + | .mw-parser-output h3, |
| + | .mw-parser-output h4, | ||
| + | .mw-parser-output h5{ | ||
| + | font-family:var(--font-sans); | ||
| + | font-weight:600;letter-spacing:.3px;margin:var(--space-3) 0 var(--space-2); | ||
} | } | ||
| − | + | #content a{color:var(--color-link);text-decoration-thickness:2px;} | |
| − | #content | + | #content a:visited{color:var(--color-link-visited);} |
| − | + | #content a:hover{color:#0046ff;} | |
| − | } | + | |
| + | code,pre,.mw-code{font-family:"Courier New",Courier,monospace!important;} | ||
| − | /* | + | /* --------------------------------------------------- |
| − | #mw-head #left-navigation, | + | 7. PAGE TABS ALIGNMENT (Vector skins, desktop only) |
| − | #mw-head #right-navigation { | + | --------------------------------------------------- */ |
| − | + | @media (min-width:720px){ | |
| − | + | /* legacy Vector */ | |
| − | margin-left: 0 !important; | + | #mw-head #left-navigation, |
| − | } | + | #mw-head #right-navigation{ |
| + | position:relative; | ||
| + | left:calc(var(--sidebar-w) + var(--space-3)); | ||
| + | margin-left:0!important; | ||
| + | } | ||
| + | #mw-head #p-views, | ||
| + | #mw-head .vectorTabs, | ||
| + | #mw-head .vector-menu-tabs{margin-left:0!important;} | ||
| − | /* | + | /* Vector 2022 */ |
| − | + | .vector-header-container .vector-page-toolbar, | |
| − | + | .vector-header-container .vector-menu-tabs{ | |
| − | + | position:relative; | |
| − | + | left:calc(var(--sidebar-w) + var(--space-3)); | |
| + | margin-left:0!important; | ||
| + | z-index:5; /* above banner */ | ||
| + | } | ||
} | } | ||
| − | /* | + | /* --------------------------------------------------- |
| − | . | + | 8. MISC UTILITIES |
| − | . | + | --------------------------------------------------- */ |
| − | + | /* Optional thin group divider */ | |
| − | + | #mw-panel .portal,#column-one .portlet{ | |
| − | + | margin-top:var(--space-2); | |
| − | + | padding-top:var(--space-2); | |
| + | border-top:1px solid rgba(217,215,209,.12); | ||
} | } | ||
| + | #mw-panel .portal:first-child, | ||
| + | #column-one .portlet:first-child{border-top:0;margin-top:0;padding-top:0;} | ||
Revision as of 23:25, 10 October 2025
/*****************************************************
* HOLDFAST WIKI – MODERN THEME (2025-10-10)
* – Mobile-first, responsive banner & sidebar
* – Vector 2010 + Vector 2022 + Minerva compatible
*****************************************************/
/* ---------------------------------------------------
0. GLOBAL TOKENS
--------------------------------------------------- */
:root{
/* spacing scale */
--space-1: .25rem;
--space-2: .5rem;
--space-3: 1rem;
/* widths (desktop) */
--sidebar-w: 200px; /* desktop off-canvas width */
--banner-h: 300px; /* height of top gradient band */
/* fonts */
--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-size-base: 1rem; /* 16 px */
--font-size-nav: .6875rem; /* 11 px */
/* colours */
--color-parchment: #E1DCCE;
--color-sidebar-top: #2F2D2B;
--color-sidebar-bot: #1E1E1D;
--color-text: #16181D;
--color-link: #1666FF;
--color-link-visited: #3b46ff;
}
/* ---------------------------------------------------
1. BASE RESET (small & safe)
--------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;height:auto;}
/* ---------------------------------------------------
2. BODY + BACKGROUND STACK
--------------------------------------------------- */
body{
margin:0;
background:var(--color-parchment);
color:var(--color-text);
font:400 var(--font-size-base)/1.55 var(--font-sans);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Desktop / tablet: show banner + sidebar gradients */
@media (min-width:720px){
body{
background:
/* 1) banner */
url("/Special:FilePath/BannerImage.png") left top/40vw no-repeat,
/* 2) dark top strip (full-width) */
linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
left top/100% var(--banner-h) no-repeat,
/* 3) vertical sidebar column */
linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
left top/var(--sidebar-w) 100% repeat-y,
/* 4) parchment fill */
var(--color-parchment);
background-attachment:scroll; /* avoids iOS repaint jank */
}
}
/* Keep site chrome transparent so bg shows through */
#mw-page-base,#mw-head-base,#mw-head,
.vector-header-container,
#mw-panel,#column-one,.mw-sidebar{background:transparent!important;}
/* ---------------------------------------------------
3. SIDEBAR (MW panel) – off-canvas on mobile
--------------------------------------------------- */
body.skin-vector #mw-panel,
body.skin-vector-2022 #mw-panel,
body.skin-vector #column-one{/* legacy Vector alias */
position:fixed;
top:0;left:-100%; /* hide out of view */
width:var(--sidebar-w);
padding:var(--space-3) var(--space-2) var(--space-3);
background:transparent;
color:#EEEDEB;
transition:left .3s ease;
z-index:1000;
}
body.menu-open #mw-panel,
body.menu-open #column-one{left:0;} /* toggled via JS */
/* Portal headings */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3{
background:#63635B;
color:#EEEDEB;
font:700 var(--font-size-nav)/1.4 var(--font-sans);
padding:5px 8px;
margin:var(--space-2) var(--space-1) var(--space-1);
border:0;
}
/* Lists & links */
#mw-panel .vector-menu-content-list,
#column-one .pBody ul{list-style:none;padding:0;margin:var(--space-2) 0 0;}
#mw-panel .vector-menu-content-list>li,
#column-one .pBody ul li{padding:3px 6px;line-height:1.35;}
#mw-panel a,#column-one a{
display:block;
padding:2px 4px;
color:#EEEDEB!important;
text-decoration:none;
font:400 var(--font-size-nav)/1.35 var(--font-sans);
}
#mw-panel a:hover,#column-one a:hover{background:rgba(255,255,255,.08);}
/* Call-out button (Discord) */
#mw-panel a.external[href*="discord"]{
background:#5A65EA;color:#fff!important;
padding:8px 10px;margin:var(--space-2) 0 var(--space-3);
border-radius:4px;border:1px solid rgba(0,0,0,.15);
font:700 .75rem/1 var(--font-sans);
}
#mw-panel a.external[href*="discord"]:hover{background:#545DD9;}
/* ---------------------------------------------------
4. LOGO
--------------------------------------------------- */
#p-logo a,.mw-wiki-logo{
background:url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png")
center/contain no-repeat!important;
width:120px;height:120px;display:block;
}
#p-logo-text,.mw-wiki-logo-text{display:none!important;}
/* ---------------------------------------------------
5. CONTENT COLUMN (offset only on ≥720 px)
--------------------------------------------------- */
#content,.mw-body,.mw-content-container,
.mw-workspace-container{
background:var(--color-parchment)!important;
position:relative;
z-index:1;
padding:0 var(--space-3) var(--space-3);
}
@media (min-width:720px){
#content,.mw-body,.mw-content-container{
margin-left:calc(var(--sidebar-w) + var(--space-3));
}
}
/* ---------------------------------------------------
6. TYPOGRAPHY
--------------------------------------------------- */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th{
letter-spacing:.2px;
}
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5{
font-family:var(--font-sans);
font-weight:600;letter-spacing:.3px;margin:var(--space-3) 0 var(--space-2);
}
#content a{color:var(--color-link);text-decoration-thickness:2px;}
#content a:visited{color:var(--color-link-visited);}
#content a:hover{color:#0046ff;}
code,pre,.mw-code{font-family:"Courier New",Courier,monospace!important;}
/* ---------------------------------------------------
7. PAGE TABS ALIGNMENT (Vector skins, desktop only)
--------------------------------------------------- */
@media (min-width:720px){
/* legacy Vector */
#mw-head #left-navigation,
#mw-head #right-navigation{
position:relative;
left:calc(var(--sidebar-w) + var(--space-3));
margin-left:0!important;
}
#mw-head #p-views,
#mw-head .vectorTabs,
#mw-head .vector-menu-tabs{margin-left:0!important;}
/* Vector 2022 */
.vector-header-container .vector-page-toolbar,
.vector-header-container .vector-menu-tabs{
position:relative;
left:calc(var(--sidebar-w) + var(--space-3));
margin-left:0!important;
z-index:5; /* above banner */
}
}
/* ---------------------------------------------------
8. MISC UTILITIES
--------------------------------------------------- */
/* Optional thin group divider */
#mw-panel .portal,#column-one .portlet{
margin-top:var(--space-2);
padding-top:var(--space-2);
border-top:1px solid rgba(217,215,209,.12);
}
#mw-panel .portal:first-child,
#column-one .portlet:first-child{border-top:0;margin-top:0;padding-top:0;}