MediaWiki:Common.css: Difference between revisions

From PAWS Lab
Jump to navigation Jump to search
Fix More chevron; more footer padding; force header strip visibility on special pages
Clean unified theme: light text on navy sidebar and footer
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* ============================================================
/* =======================================================
  * PAWS Lab Wiki — site-wide CSS (Common.css)
  * PAWS Lab Wiki -- Common.css
  * ============================================================ */
  * ======================================================== */
.mw-parser-output img { max-width: 100%; height: auto; }
.mw-parser-output img { max-width: 100%; height: auto; }
.mw-parser-output .thumb,
.mw-parser-output .thumb,.mw-parser-output .thumbinner,.mw-parser-output figure { max-width: 100%; box-sizing: border-box; }
.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 table { max-width: 100%; }
.mw-parser-output pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.mw-parser-output pre { max-width: 100%; overflow-x: auto; white-space: pre; }
@media (max-width: 720px) {
:root { --paws-navy: #1d2a56; --paws-gold: #cdb87d; --paws-gold-hover: #e0cf9d; --paws-white: #ffffff; }
    .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 { background: var(--paws-navy) !important; }
body.skin-vector { background: var(--paws-navy) !important; }
body.skin-vector .mw-body,
body.skin-vector .mw-body,body.skin-vector #content { background: var(--paws-white); }
body.skin-vector #content { background: var(--paws-white); }
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-page-base,
body.skin-vector #mw-head-base {
    background: var(--paws-navy) !important;
    background-image: none !important;
    background-color: var(--paws-navy) !important;
    min-height: 5em !important;
}
body.skin-vector #mw-head-base { border-bottom: 3px solid var(--paws-gold); }
body.skin-vector #mw-head-base { border-bottom: 3px solid var(--paws-gold); }
body.skin-vector #mw-head { background: transparent; }
body.skin-vector #mw-head { background: transparent; }
 
body.skin-vector #p-personal a { color: var(--paws-white) !important; }
body.skin-vector #p-personal ul li a,
body.skin-vector #p-personal a:hover { color: var(--paws-gold-hover) !important; text-decoration: underline; }
body.skin-vector #p-personal .mw-list-item a,
body.skin-vector .vector-menu-tabs li { background-color: rgba(255,255,255,0.06); background-image: none; }
body.skin-vector #pt-anonuserpage { color: var(--paws-white) !important; }
body.skin-vector .vector-menu-tabs li a, body.skin-vector .vector-menu-tabs li a span { 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 { background: var(--paws-white) !important; }
body.skin-vector .vector-menu-tabs li.selected a,
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.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-menu-tabs li:hover:not(.selected) {
body.skin-vector #p-cactions .vector-menu-heading, body.skin-vector #p-cactions .vector-menu-heading-label { color: var(--paws-white) !important; }
    background-color: rgba(205, 184, 125, 0.2);
body.skin-vector #p-cactions .vector-menu-heading::after { filter: brightness(0) invert(1) opacity(0.9); }
}
body.skin-vector #p-cactions .vector-menu-content { background: var(--paws-navy) !important; border: 1px solid var(--paws-gold) !important; border-radius: 3px; }
 
body.skin-vector #p-cactions .vector-menu-content a, body.skin-vector #p-cactions .vector-menu-content a span { color: var(--paws-white) !important; }
/* More dropdown — theme its label (chevron background), open panel, and links */
body.skin-vector #p-cactions .vector-menu-content a:hover, body.skin-vector #p-cactions .vector-menu-content a:hover span { color: var(--paws-gold-hover) !important; }
body.skin-vector #p-cactions .vector-menu-heading,
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 #p-cactions #p-cactions-label,
body.skin-vector #p-cactions .vector-menu-heading-label {
    color: var(--paws-white) !important;
}
body.skin-vector #p-cactions .vector-menu-heading::after {
    filter: brightness(0) invert(1) opacity(0.9);
}
body.skin-vector #p-cactions .vector-menu-content {
    background: var(--paws-navy) !important;
    border: 1px solid var(--paws-gold) !important;
    border-radius: 3px;
}
body.skin-vector #p-cactions .vector-menu-content a,
body.skin-vector #p-cactions .vector-menu-content a span { color: var(--paws-white) !important; }
body.skin-vector #p-cactions .vector-menu-content a:hover,
body.skin-vector #p-cactions .vector-menu-content a:hover span { color: var(--paws-gold-hover) !important; }
body.skin-vector #p-cactions .vector-menu-content li { background: transparent !important; }
 
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; }
body.skin-vector .vector-search-box-input::placeholder { color: #666; }
 
body.skin-vector #mw-panel, body.skin-vector .vector-legacy-sidebar { background: var(--paws-navy) !important; padding-top: 0.5em; min-height: 100vh; }
body.skin-vector #mw-panel,
body.skin-vector #p-logo { height: auto !important; width: 100% !important; padding: 8px 10px !important; margin: 0 !important; background: transparent !important; }
body.skin-vector .vector-legacy-sidebar {
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; }
    background: var(--paws-navy) !important;
body.skin-vector #mw-panel .vector-menu-heading, body.skin-vector #mw-panel h3 { 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; }
    padding-top: 0.5em;
body.skin-vector #mw-panel a, body.skin-vector #mw-panel .mw-list-item a, body.skin-vector #mw-panel .mw-list-item a span { color: var(--paws-white) !important; }
    min-height: 100vh;
body.skin-vector #mw-panel a:visited, body.skin-vector #mw-panel .mw-list-item a:visited { 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 #content { border-left: 1px solid rgba(205,184,125,0.3); }
body.skin-vector #p-logo {
body.skin-vector #footer { background: transparent !important; border-top: 3px solid var(--paws-gold); padding: 2em 1.5em 3em 1.5em; }
    height: auto !important;
body.skin-vector #footer, body.skin-vector #footer li { color: var(--paws-white) !important; }
    width: 100% !important;
body.skin-vector #footer a { color: var(--paws-gold) !important; }
    padding: 8px 10px !important;
body.skin-vector #footer a:hover { color: var(--paws-gold-hover) !important; text-decoration: underline; }
    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 {
    backgroun
    border-top: 3px solid var(--paws-gold);
    margin-top: 0;
    padding: 2em 1.5em 3em 1.5em;
}
body.skin-vector #footer,
body
body.skin-vector #footer #footer-info li,
body.skin-vector #footer #footer-places li { color
body.skin-vector #footer a { color: var(--paws-na
body.skin-vector #footer a:hover { color: var(--paws-gold-hover) !important; text-decoration:
body.skin-vector #footer #footer-info,
body.skin-vector #foo
body.skin-vector #footer #footer-info li { marg
 
 
 
    border-bottom: 3px solid var(--paws-gold);
}
body.skin-vector-2022 .vector-head
body.skin-vector-2022 .vector-main-menu-container

Latest revision as of 19:24, 22 July 2026

/* =======================================================
 * PAWS Lab Wiki -- 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; }
:root { --paws-navy: #1d2a56; --paws-gold: #cdb87d; --paws-gold-hover: #e0cf9d; --paws-white: #ffffff; }
body.skin-vector { background: var(--paws-navy) !important; }
body.skin-vector .mw-body,body.skin-vector #content { background: var(--paws-white); }
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 a { color: var(--paws-white) !important; }
body.skin-vector #p-personal a:hover { color: var(--paws-gold-hover) !important; text-decoration: underline; }
body.skin-vector .vector-menu-tabs li { background-color: rgba(255,255,255,0.06); background-image: none; }
body.skin-vector .vector-menu-tabs li a, 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 #p-cactions .vector-menu-heading, body.skin-vector #p-cactions .vector-menu-heading-label { color: var(--paws-white) !important; }
body.skin-vector #p-cactions .vector-menu-heading::after { filter: brightness(0) invert(1) opacity(0.9); }
body.skin-vector #p-cactions .vector-menu-content { background: var(--paws-navy) !important; border: 1px solid var(--paws-gold) !important; border-radius: 3px; }
body.skin-vector #p-cactions .vector-menu-content a, body.skin-vector #p-cactions .vector-menu-content a span { color: var(--paws-white) !important; }
body.skin-vector #p-cactions .vector-menu-content a:hover, body.skin-vector #p-cactions .vector-menu-content a:hover span { color: var(--paws-gold-hover) !important; }
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::placeholder { color: #666; }
body.skin-vector #mw-panel, body.skin-vector .vector-legacy-sidebar { background: var(--paws-navy) !important; padding-top: 0.5em; min-height: 100vh; }
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 { 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 .mw-list-item a span { color: var(--paws-white) !important; }
body.skin-vector #mw-panel a:visited, body.skin-vector #mw-panel .mw-list-item a:visited { 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 #content { border-left: 1px solid rgba(205,184,125,0.3); }
body.skin-vector #footer { background: transparent !important; border-top: 3px solid var(--paws-gold); padding: 2em 1.5em 3em 1.5em; }
body.skin-vector #footer, body.skin-vector #footer li { color: var(--paws-white) !important; }
body.skin-vector #footer a { color: var(--paws-gold) !important; }
body.skin-vector #footer a:hover { color: var(--paws-gold-hover) !important; text-decoration: underline; }