MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Add image sizing constraints and layout polish (migration setup) |
Add PAWS navy/gold theme for Vector header + sidebar |
||
| Line 4: | Line 4: | ||
* ============================================================ */ | * ============================================================ */ | ||
/* | /* --- Image sizing --- */ | ||
* | .mw-parser-output img { max-width: 100%; height: auto; } | ||
.mw- | .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; } | |||
} | |||
/* ============================================================ | |||
* PAWS palette | |||
* ============================================================ */ | |||
:root { | |||
--paws-navy: #1d2a56; | |||
--paws-navy-dark: #131c3a; | |||
--paws-gold: #cdb87d; | |||
--paws-gold-hover: #e0cf9d; | |||
--paws-white: #ffffff; | |||
} | |||
/* ---- Top header strip (Vector 2010) ---- */ | |||
body.skin-vector #mw-page-base, | |||
body.skin-vector-legacy #mw-page-base { | |||
background: var(--paws-navy); | |||
background-image: none; | |||
} | |||
body.skin-vector #mw-head-base, | |||
body.skin-vector-legacy #mw-head-base { | |||
background: var(--paws-navy); | |||
border-bottom: 3px solid var(--paws-gold); | |||
} | |||
body.skin-vector #mw-head, | |||
body.skin-vector-legacy #mw-head { background: transparent; } | |||
/* ---- Personal links (top-right) ---- */ | |||
body.skin-vector #p-personal, | |||
body.skin-vector-legacy #p-personal { background: transparent; } | |||
body.skin-vector #p-personal a, | |||
body.skin-vector-legacy #p-personal a { color: var(--paws-white); } | |||
body.skin-vector #p-personal a:hover, | |||
body.skin-vector-legacy #p-personal a:hover { | |||
color: var(--paws-gold-hover); | |||
text-decoration: underline; | |||
} | } | ||
body.skin-vector #pt-anonuserpage, | |||
body.skin-vector-legacy #pt-anonuserpage { color: var(--paws-white); } | |||
/* | /* ---- Namespace + view tabs ---- */ | ||
. | body.skin-vector .vector-menu-tabs, | ||
. | body.skin-vector-legacy .vector-menu-tabs, | ||
. | body.skin-vector #left-navigation, | ||
body.skin-vector-legacy #left-navigation, | |||
body.skin-vector #right-navigation, | |||
body.skin-vector-legacy #right-navigation { background: transparent; } | |||
body.skin-vector .vector-menu-tabs li, | |||
body.skin-vector-legacy .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-legacy .vector-menu-tabs li a { color: var(--paws-white); } | |||
body.skin-vector .vector-menu-tabs li.selected, | |||
body.skin-vector-legacy .vector-menu-tabs li.selected { background: var(--paws-white); } | |||
body.skin-vector .vector-menu-tabs li.selected a, | |||
body.skin-vector-legacy .vector-menu-tabs li.selected a { color: var(--paws-navy); } | |||
body.skin-vector .vector-menu-tabs li:hover, | |||
body.skin-vector-legacy .vector-menu-tabs li:hover { | |||
background-color: rgba(205, 184, 125, 0.15); | |||
} | } | ||
/* | /* ---- Search box ---- */ | ||
. | body.skin-vector #p-search, | ||
body.skin-vector-legacy #p-search { background: transparent; } | |||
body.skin-vector #searchInput, | |||
body.skin-vector-legacy #searchInput { | |||
border: 1px solid var(--paws-gold); | |||
border-radius: 3px; | |||
} | |||
body.skin-vector #searchInput:focus, | |||
body.skin-vector-legacy #searchInput:focus { | |||
border-color: var(--paws-gold-hover); | |||
outline: none; | |||
box-shadow: 0 0 0 2px rgba(205, 184, 125, 0.4); | |||
} | } | ||
/* | /* ---- Left sidebar panel ---- */ | ||
.mw- | body.skin-vector #mw-panel, | ||
body.skin-vector-legacy #mw-panel { | |||
background: var(--paws-navy-dark); | |||
padding-top: 1em; | |||
} | |||
body.skin-vector #mw-panel .portal h3, | |||
body.skin-vector-legacy #mw-panel .portal h3, | |||
body.skin-vector #mw-panel .vector-menu-heading, | |||
body.skin-vector-legacy #mw-panel .vector-menu-heading { | |||
color: var(--paws-gold); | |||
border-bottom: 1px solid rgba(205, 184, 125, 0.25); | |||
padding-bottom: 4px; | |||
margin-bottom: 6px; | |||
} | |||
body.skin-vector #mw-panel a, | |||
body.skin-vector-legacy #mw-panel a { | |||
body.skin-vector | |||
body.skin-vector-legacy #mw-panel a:visited { color: #d4d8e8; } | |||
body | |||
body.skin-vector-legacy #mw-pane | |||
color: var(--paws-gold-hover); | |||
text-decoration: underli | |||
} | } | ||
/* | /* ---- Logo container ---- */ | ||
body.skin-vec | |||
body.skin-vector-legacy #p-logo { background-color: transpar | |||
/* ---- Content border cohesion ---- */ | |||
body.skin-vector #content | |||
/* ---- Footer touch-up - | |||
body.skin-vector #footer, | |||
body.skin-vector-legacy #foote | |||
/* ===================== | |||
* Vector 2022 support (in cas | |||
* ============================================================ */ | |||
bo | |||
background: var(--paws-navy); | |||
border | |||
} | } | ||
body.skin-vector-2022 .vector-header-container a { color: var(--paws-white); | |||
body.skin-vector-2022 .vect | |||
Revision as of 18:09, 22 July 2026
/* ============================================================
* PAWS Lab Wiki — site-wide CSS (Common.css)
* Applies to all skins. Edit via MediaWiki:Common.css page.
* ============================================================ */
/* --- Image sizing --- */
.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; }
}
/* ============================================================
* PAWS palette
* ============================================================ */
:root {
--paws-navy: #1d2a56;
--paws-navy-dark: #131c3a;
--paws-gold: #cdb87d;
--paws-gold-hover: #e0cf9d;
--paws-white: #ffffff;
}
/* ---- Top header strip (Vector 2010) ---- */
body.skin-vector #mw-page-base,
body.skin-vector-legacy #mw-page-base {
background: var(--paws-navy);
background-image: none;
}
body.skin-vector #mw-head-base,
body.skin-vector-legacy #mw-head-base {
background: var(--paws-navy);
border-bottom: 3px solid var(--paws-gold);
}
body.skin-vector #mw-head,
body.skin-vector-legacy #mw-head { background: transparent; }
/* ---- Personal links (top-right) ---- */
body.skin-vector #p-personal,
body.skin-vector-legacy #p-personal { background: transparent; }
body.skin-vector #p-personal a,
body.skin-vector-legacy #p-personal a { color: var(--paws-white); }
body.skin-vector #p-personal a:hover,
body.skin-vector-legacy #p-personal a:hover {
color: var(--paws-gold-hover);
text-decoration: underline;
}
body.skin-vector #pt-anonuserpage,
body.skin-vector-legacy #pt-anonuserpage { color: var(--paws-white); }
/* ---- Namespace + view tabs ---- */
body.skin-vector .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs,
body.skin-vector #left-navigation,
body.skin-vector-legacy #left-navigation,
body.skin-vector #right-navigation,
body.skin-vector-legacy #right-navigation { background: transparent; }
body.skin-vector .vector-menu-tabs li,
body.skin-vector-legacy .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-legacy .vector-menu-tabs li a { color: var(--paws-white); }
body.skin-vector .vector-menu-tabs li.selected,
body.skin-vector-legacy .vector-menu-tabs li.selected { background: var(--paws-white); }
body.skin-vector .vector-menu-tabs li.selected a,
body.skin-vector-legacy .vector-menu-tabs li.selected a { color: var(--paws-navy); }
body.skin-vector .vector-menu-tabs li:hover,
body.skin-vector-legacy .vector-menu-tabs li:hover {
background-color: rgba(205, 184, 125, 0.15);
}
/* ---- Search box ---- */
body.skin-vector #p-search,
body.skin-vector-legacy #p-search { background: transparent; }
body.skin-vector #searchInput,
body.skin-vector-legacy #searchInput {
border: 1px solid var(--paws-gold);
border-radius: 3px;
}
body.skin-vector #searchInput:focus,
body.skin-vector-legacy #searchInput:focus {
border-color: var(--paws-gold-hover);
outline: none;
box-shadow: 0 0 0 2px rgba(205, 184, 125, 0.4);
}
/* ---- Left sidebar panel ---- */
body.skin-vector #mw-panel,
body.skin-vector-legacy #mw-panel {
background: var(--paws-navy-dark);
padding-top: 1em;
}
body.skin-vector #mw-panel .portal h3,
body.skin-vector-legacy #mw-panel .portal h3,
body.skin-vector #mw-panel .vector-menu-heading,
body.skin-vector-legacy #mw-panel .vector-menu-heading {
color: var(--paws-gold);
border-bottom: 1px solid rgba(205, 184, 125, 0.25);
padding-bottom: 4px;
margin-bottom: 6px;
}
body.skin-vector #mw-panel a,
body.skin-vector-legacy #mw-panel a {
body.skin-vector
body.skin-vector-legacy #mw-panel a:visited { color: #d4d8e8; }
body
body.skin-vector-legacy #mw-pane
color: var(--paws-gold-hover);
text-decoration: underli
}
/* ---- Logo container ---- */
body.skin-vec
body.skin-vector-legacy #p-logo { background-color: transpar
/* ---- Content border cohesion ---- */
body.skin-vector #content
/* ---- Footer touch-up -
body.skin-vector #footer,
body.skin-vector-legacy #foote
/* =====================
* Vector 2022 support (in cas
* ============================================================ */
bo
background: var(--paws-navy);
border
}
body.skin-vector-2022 .vector-header-container a { color: var(--paws-white);
body.skin-vector-2022 .vect