MediaWiki:Common.css
Note: After publishing, 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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
* PAWS Lab Wiki — site-wide CSS (Common.css)
* ============================================================ */
.mw-parser-output img { max-width: 100%; height: auto; }
.mw-parser-output .thumb,
.mw-parser-output .thumbinner,
.mw-parser-output figure { max-width: 100%; box-sizing: border-box; }
.mw-parser-output table { max-width: 100%; }
.mw-parser-output pre { max-width: 100%; overflow-x: auto; white-space: pre; }
@media (max-width: 720px) {
.mw-parser-output .thumb.tright,
.mw-parser-output .thumb.tleft { float: none; margin-left: auto; margin-right: auto; }
}
:root {
--paws-navy: #1d2a56;
--paws-gold: #cdb87d;
--paws-gold-hover: #e0cf9d;
--paws-white: #ffffff;
}
body.skin-vector #mw-page-base,
body.skin-vector #mw-head-base {
background: var(--paws-navy) !important;
background-image: none !important;
}
body.skin-vector #mw-head-base { border-bottom: 3px solid var(--paws-gold); }
body.skin-vector #mw-head { background: transparent; }
body.skin-vector #p-personal ul li a,
body.skin-vector #p-personal .mw-list-item a,
body.skin-vector #pt-anonuserpage { color: var(--paws-white) !important; }
body.skin-vector #p-personal ul li a:hover,
body.skin-vector #p-personal .mw-list-item a:hover {
color: var(--paws-gold-hover) !important;
text-decoration: underline;
}
body.skin-vector .vector-menu-tabs li,
body.skin-vector #left-navigation .vector-menu-tabs li,
body.skin-vector #right-navigation .vector-menu-tabs li {
background-image: none;
background-color: rgba(255, 255, 255, 0.06);
}
body.skin-vector .vector-menu-tabs li a,
body.skin-vector .vector-menu-tabs li span,
body.skin-vector .vector-menu-tabs li a span { color: var(--paws-white) !important; }
body.skin-vector .vector-menu-tabs li.selected { background: var(--paws-white) !important; }
body.skin-vector .vector-menu-tabs li.selected a,
body.skin-vector .vector-menu-tabs li.selected a span { color: var(--paws-navy) !important; }
body.skin-vector .vector-menu-tabs li:hover:not(.selected) {
background-color: rgba(205, 184, 125, 0.2);
}
body.skin-vector .vector-search-box-input,
body.skin-vector #searchInput {
background: var(--paws-white) !important;
color: #222 !important;
border: 1px solid var(--paws-gold) !important;
border-radius: 3px;
padding: 3px 8px;
}
body.skin-vector .vector-search-box-input:focus,
body.skin-vector #searchInput:focus {
border-color: var(--paws-gold-hover) !important;
outline: none;
box-shadow: 0 0 0 2px rgba(205, 184, 125, 0.4);
}
body.skin-vector .vector-search-box-input::placeholder { color: #666; }
/* Sidebar and header share the same navy for seamless look */
body.skin-vector #mw-panel,
body.skin-vector .vector-legacy-sidebar {
background: var(--paws-navy) !important;
padding-top: 0.5em;
}
/* Compact logo: constrain height, fill sidebar width */
body.skin-vector #p-logo {
height: auto !important;
width: 100% !important;
padding: 8px 10px !important;
margin: 0 !important;
background: transparent !important;
}
body.skin-vector #p-logo a.mw-wiki-logo {
display: block !important;
width: 100% !important;
height: 50px !important;
background-size: contain !important;
background-position: left center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
}
body.skin-vector #mw-panel .vector-menu-heading,
body.skin-vector #mw-panel h3.vector-menu-heading,
body.skin-vector #mw-panel .vector-menu-heading .vector-menu-heading-label,
body.skin-vector #mw-panel h3,
body.skin-vector #mw-panel h3 span {
color: var(--paws-gold) !important;
border-bottom: 1px solid rgba(205, 184, 125, 0.25);
padding-bottom: 4px;
margin-bottom: 6px;
text-transform: uppercase;
font-size: 0.75em;
letter-spacing: 0.05em;
font-weight: bold;
background: transparent !important;
}
body.skin-vector #mw-panel a,
body.skin-vector #mw-panel .mw-list-item a,
body.skin-vector #mw-panel .vector-menu-content-list a,
body.skin-vector #mw-panel .mw-list-item a span,
body.skin-vector #mw-panel .vector-menu-content-list a span { color: var(--paws-white) !important; }
body.skin-vector #mw-panel a:visited,
body.skin-vector #mw-panel .mw-list-item a:visited,
body.skin-vector #mw-panel .mw-list-item a:visited span { color: #d4d8e8 !important; }
body.skin-vector #mw-panel a:hover,
body.skin-vector #mw-panel .mw-list-item a:hover,
body.skin-vector #mw-panel .mw-list-item a:hover span {
color: var(--paws-gold-hover) !important;
text-decoration: underline;
}
body.skin-vector #mw-panel .vector-menu-content-list li { background: transparent !important; }
body.skin-vector #content { border-left: 1px solid rgba(205, 184, 125, 0.3); }
body.skin-vector #footer { border-top: 3px solid var(--paws-gold); }
body.skin-vector-2022 .vector-header-container {
background: var(--paws-navy);
border-bottom: 3px solid var(--paws-gold);
}
body.skin-vector-2022 .vector-header-container a { color: var(--paws-white); }
body.skin-vector-2022 .vector-main-menu-container { background: var(--paws-navy); }