MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* Ensure main containers don't overpaint */
#content, .mw-body, .vector-body .mw-body { background: transparent !important; }
/* === Holdfast Banner – anchored top-left === */
/* 1) Create a dedicated region for the banner above the sidebar */
#mw-panel::before,
#column-one::before,
.mw-sidebar::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 420px; /* same width as your sidebar */
height: 140px; /* banner image height */
background: url("/wiki/Special:FilePath/BannerImage.png") left top no-repeat;
background-size: cover;
z-index: 0; /* sits behind sidebar content */
pointer-events: none; /* never blocks UI */
}
/* 3) Ensure the gradient starts below the banner for seamless blending */
#mw-panel,
#column-one,
.mw-sidebar {
background: linear-gradient(to bottom, #2F2D2B 140px, #1E1E1D 100%) !important;
}
/* 4) If your banner has transparent edges, smooth transition into gradient */
#mw-panel::after {
content: "";
position: absolute;
top: 130px;
left: 0;
width: 420px;
height: 20px;
background: linear-gradient(to bottom, rgba(47,45,43,0.3), rgba(30,30,29,0));
pointer-events: none;
z-index: 1;
}
/***** UNIVERSAL LEFT SIDEBAR STYLING (works across common skins) *****/
/* 1) Pick up the left column container across skins */
#mw-panel, /* Vector/Vector-legacy */
#column-one, /* Monobook / Modern */
.skin-timeless .ts-sidebar, /* Timeless */
.citizen-drawer, /* Citizen */
.mw-sidebar, /* Generic sidebars */
.skin-minerva .menu { /* Minerva (mobile) */
background: transparent !important; /* let the page background show through */
color: #EEEDEB !important;
border-right: none !important;
}
/* 2) Kill inner backgrounds so the gradient shows */
#mw-panel .vector-menu,
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content-list,
#column-one .portlet,
#column-one .pBody,
.skin-timeless .ts-sidebar * ,
.citizen-drawer *,
.mw-sidebar *,
.skin-minerva .menu * {
background: transparent !important;
color: inherit !important;
}
/* 3) Links inside the sidebar */
#mw-panel a,
#column-one a,
.skin-timeless .ts-sidebar a,
.citizen-drawer a,
.mw-sidebar a,
.skin-minerva .menu a {
color: #EEEDEB !important;
text-decoration: none;
}
#mw-panel a:hover,
#column-one a:hover,
.skin-timeless .ts-sidebar a:hover,
.citizen-drawer a:hover,
.mw-sidebar a:hover,
.skin-minerva .menu a:hover {
color: #5A65EA !important;
text-decoration: underline;
}
/* 4) Section headers in the sidebar (common title elements) */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3,
.skin-timeless .ts-sidebar .ts-portlet h2,
.citizen-drawer .drawer__section-title,
.mw-sidebar h2 {
background: #63635B !important; /* muted block behind group titles */
color: #EEEDEB !important;
border-radius: 4px;
padding: 6px 8px;
margin: 12px 8px 6px;
font-weight: 700;
}
/* 5) List items spacing */
#mw-panel .vector-menu-content-list > li,
#column-one .pBody ul li,
.skin-timeless .ts-sidebar li,
.citizen-drawer li,
.mw-sidebar li {
padding: 2px 8px;
}
/* Sidebar group headers */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3,
.skin-timeless .ts-sidebar .ts-portlet h2,
.citizen-drawer .drawer__section-title,
.mw-sidebar h2 {
background: #63635B !important; /* muted block behind titles */
color: #EEEDEB !important;
border-radius: 4px;
padding: 6px 10px;
margin: 14px 8px 6px;
font-weight: 700;
text-transform: none;
letter-spacing: .2px;
border: none !important;
}
/* List spacing & baseline */
#mw-panel .vector-menu-content-list > li,
#column-one .pBody ul li,
.skin-timeless .ts-sidebar li,
.citizen-drawer li,
.mw-sidebar li {
padding: 3px 10px;
line-height: 1.35;
}
/* Links default + hover */
#mw-panel a,
#column-one a,
.skin-timeless .ts-sidebar a,
.citizen-drawer a,
.mw-sidebar a {
color: #EEEDEB !important;
text-decoration: none;
}
#mw-panel a:hover,
#column-one a:hover,
.skin-timeless .ts-sidebar a:hover,
.citizen-drawer a:hover,
.mw-sidebar a:hover {
color: #5A65EA !important; /* cobalt hover */
text-decoration: underline;
}
/* Active page highlight */
#mw-panel .vector-menu-content-list > li.selected > a,
#column-one .pBody ul li.selected > a,
.mw-sidebar li.selected > a {
background: rgba(255,255,255,0.08);
border-radius: 4px;
display: block;
padding: 3px 8px;
}
/* Thin separators between groups (optional, subtle) */
#mw-panel .portal,
#column-one .portlet,
.mw-sidebar .sidebar-chunk {
border-top: 1px solid rgba(217,215,209,0.15);
margin-top: 10px;
padding-top: 6px;
}
/* “Chat on Discord” button (left column card) */
#mw-panel .discord-button, /* if you wrapped it in a class */
#mw-panel a.external[href*="discord"] {
background: #5A65EA;
color: #FFFFFF !important;
display: inline-block;
padding: 8px 10px;
border-radius: 8px;
font-weight: 700;
border: 1px solid rgba(0,0,0,0.15);
}
#mw-panel .discord-button:hover,
#mw-panel a.external[href*="discord"]:hover {
background: #545DD9;
text-decoration: none;
}
/* Clean edge between sidebar and content */
#mw-panel { box-shadow: 1px 0 0 rgba(217,215,209,0.25) inset; }
/* Tidy sidebar scrollbar on desktop WebKit */
#mw-panel::-webkit-scrollbar { width: 10px; }
#mw-panel::-webkit-scrollbar-track { background: transparent; }
#mw-panel::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12); border-radius: 8px;
}
#mw-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }