MediaWiki:Common.css: Difference between revisions

From PAWS Lab
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:
  * ============================================================ */
  * ============================================================ */


/* Constrain images so they don't overflow the content column.
/* --- Image sizing --- */
  * The old Tweeki skin did this implicitly; Vector doesn't. */
.mw-parser-output img { max-width: 100%; height: auto; }
.mw-parser-output img {
.mw-parser-output .thumb,
     max-width: 100%;
.mw-parser-output .thumbinner,
     height: auto;
.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); }


/* Thumbnails and floating figures also honor container width */
/* ---- Namespace + view tabs ---- */
.mw-parser-output .thumb,
body.skin-vector .vector-menu-tabs,
.mw-parser-output .thumbinner,
body.skin-vector-legacy .vector-menu-tabs,
.mw-parser-output figure {
body.skin-vector #left-navigation,
     max-width: 100%;
body.skin-vector-legacy #left-navigation,
     box-sizing: border-box;
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);
}
}


/* Prevent overwide tables from breaking layout */
/* ---- Search box ---- */
.mw-parser-output table {
body.skin-vector #p-search,
     max-width: 100%;
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);
}
}


/* Wide code blocks scroll horizontally instead of pushing the page */
/* ---- Left sidebar panel ---- */
.mw-parser-output pre {
body.skin-vector #mw-panel,
     max-width: 100%;
body.skin-vector-legacy #mw-panel {
     overflow-x: auto;
    background: var(--paws-navy-dark);
     white-space: pre;
    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
}
}


/* Small tweak: infobox-style floats behave reasonably on narrow viewports */
/* ---- Logo container ---- */
@media (max-width: 720px) {
body.skin-vec
    .mw-parser-output .thumb.tright,
body.skin-vector-legacy #p-logo { background-color: transpar
    .mw-parser-output .thumb.tleft {
 
        float: none;
/* ---- Content border cohesion ---- */
        margin-left: auto;
body.skin-vector #content
        margin-right: auto;
 
     }
 
/* ---- 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