Jump to content

MediaWiki:Common.css: Difference between revisions

← Older edit
 
(134 intermediate revisions by the same user not shown)
Line 1: Line 1:
:root, .skin-vector, .notheme {
.welcome {
     /* Base Colors */
text-align: center;
    --color-base: #FFFFFF; /* White for primary text */
font-size: 4em;
    --color-base-fixed: #FFFFFF;
}
    --color-base--hover: #FFB84D; /* Soft Peach for hover */
.lore-spotlight-widget {
    --color-emphasized: #FFFFFF;
    background: #001933;
    --color-subtle: #FF851B; /* Bright Orange for subtle text */
    border: 1px solid #FF6300;
    --color-placeholder: #FFB84D;
    padding: 0.75em;
    --color-disabled: #72777d;
    margin: 1em 0;
    --color-inverted: #FFFFFF;
    font-style: italic;
    --color-inverted-fixed: #FFFFFF;
    border-radius: 4px;
}
.mw-datatable th {
     background-color: var(--color-accent-navy);
}
 
/* Let user tool links wrap instead of forcing one line */
.mw-usertoollinks {
  white-space: normal !important;  /* undo the nowrap */
  overflow-wrap: anywhere;        /* modern browsers */
  word-break: break-word;          /* fallback */
  display: inline-block;           /* makes wrapping cleaner inside cells */
}
/* 7) Special:ListFiles specifics you already touched, but keep them here for consistency */
body.page-Special_ListFiles .mw-datatable.listfiles { table-layout: fixed; }
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img { max-width: 100%; height: auto; }
body.page-Special_ListFiles .mw-usertoollinks { white-space: normal !important; overflow-wrap: anywhere; }
/* FIELDSET: allow shrinking, no scrollbars */
.continuum-body fieldset {
  min-width: 0;          /* crucial in flex layouts */
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: visible;   /* you said no scrolling */
}
 
/* LEGEND shouldn’t inflate width */
.continuum-body fieldset > legend {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
 
/* TABLE should fit container and wrap content */
.continuum-body fieldset table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;      /* enables predictable wrapping */
  border-collapse: collapse;
  box-sizing: border-box;
}


    /* Progressive Colors (Links, Highlights) */
/* CELLS: wrap, don’t grow the table */
    --color-progressive: #FF851B; /* Bright Orange */
.continuum-body fieldset table th,
    --color-progressive--hover: #FFB84D; /* Soft Peach */
.continuum-body fieldset table td {
    --color-progressive--active: #FF6300; /* Deep Orange */
  min-width: 0;             /* lets fixed layout actually shrink */
    --color-progressive--focus: #FF851B;
  white-space: normal;     /* kill any nowraps */
  overflow-wrap: anywhere; /* modern long-word wrap */
  word-break: break-word;   /* fallback for older browsers */
}


    /* Destructive/Warning/Success */
/* Usual offenders inside cells: links, codey bits, “nowrap” classes, user tools */
    --color-destructive: #FF4500; /* Burnt Orange */
.continuum-body fieldset table a,
    --color-destructive--hover: #FF6347; /* Tomato */
.continuum-body fieldset table code,
    --color-destructive--active: #9F3526; /* Deep Burnt Orange */
.continuum-body fieldset table .nowrap,
    --color-destructive--focus: #FF851B;
.continuum-body fieldset table .mw-usertoollinks,
    --color-visited: #B86BFF; /* Lavender for visited links */
.continuum-body fieldset table .mw-sha1,
    --color-destructive--visited: #FF6347;
.continuum-body fieldset table .mime-type {
    --color-error: #FF4500;
  white-space: normal !important;
    --color-warning: #FFB84D;
  overflow-wrap: anywhere;
    --color-success: #177860;
  word-break: break-word;
    --color-notice: #FFFFFF;
}


    /* Content Changes */
/* Images/Thumbs must shrink with the cell */
    --color-content-added: #006400;
.continuum-body fieldset table img {
    --color-content-removed: #8B0000;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


    /* Shadows & Filters */
/* ===== Special:Upload (and its stash step) ===== */
    --filter-invert-icon: 0;
body.page-Special_Upload .continuum-body,
    --filter-invert-primary-button-icon: 1;
body.page-Special_UploadStash .continuum-body {
    --box-shadow-color-base: #000;
  min-width: 0;
    --box-shadow-color-progressive--active: #FF6300;
  max-width: 100%;
    --box-shadow-color-progressive--focus: #FF851B;
}
    --box-shadow-color-progressive-selected: #FF851B;
    --box-shadow-color-progressive-selected--hover: #FFB84D;
    --box-shadow-color-progressive-selected--active: #FF6300;
    --box-shadow-color-destructive--focus: #FF851B;
    --box-shadow-color-inverted: #FFFFFF;
    --box-shadow-color-transparent: transparent;


    /* Background Colors */
/* Fieldsets & forms on Upload */
    --background-color-base: #001F3F; /* Navy */
body.page-Special_Upload .continuum-body fieldset,
    --background-color-base-fixed: #001F3F;
body.page-Special_UploadStash .continuum-body fieldset {
    --background-color-neutral: #002855;
  min-width: 0;
    --background-color-neutral-subtle: #001933;
  max-width: 100%;
    --background-color-interactive: #002B5C;
  box-sizing: border-box;
    --background-color-interactive-subtle: #001933;
  overflow: visible; /* no scrollbars, make it fit */
    --background-color-disabled: #54595d;
}
    --background-color-disabled-subtle: #3A3D42;
    --background-color-inverted: #101418;


    /* Background - Progressive */
body.page-Special_Upload .continuum-body fieldset > legend,
    --background-color-progressive: #FF851B;
body.page-Special_UploadStash .continuum-body fieldset > legend {
    --background-color-progressive--hover: #FFB84D;
  display: block;
    --background-color-progressive--active: #FF6300;
  max-width: 100%;
    --background-color-progressive--focus: #FF851B;
  white-space: normal;
    --background-color-progressive-subtle: rgba(255, 133, 27, 0.1);
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0 0 .25em 0;
}


    /* Background - Destructive */
/* Tables/forms inside Upload */
    --background-color-destructive: #FF4500;
body.page-Special_Upload .continuum-body table,
    --background-color-destructive--hover: #FF6347;
body.page-Special_UploadStash .continuum-body table {
    --background-color-destructive--active: #9F3526;
  width: 100%;
    --background-color-destructive--focus: #FF851B;
  max-width: 100%;
    --background-color-destructive-subtle: rgba(255, 69, 0, 0.1);
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}
body.page-Special_Upload .continuum-body th,
body.page-Special_Upload .continuum-body td,
body.page-Special_UploadStash .continuum-body th,
body.page-Special_UploadStash .continuum-body td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.page-Special_Upload .continuum-body img,
body.page-Special_UploadStash .continuum-body img {
  max-width: 100%;
  height: auto;
  display: block;
}


    /* Background - Error/Warning/Success */
/* ===== Special:ListFiles ===== */
    --background-color-error: #FF4500;
body.page-Special_ListFiles .continuum-body { min-width: 0; max-width: 100%; }
    --background-color-error--hover: #FF6347;
    --background-color-error--active: #9F3526;
    --background-color-error-subtle: rgba(255, 69, 0, 0.1);
    --background-color-warning-subtle: rgba(255, 184, 77, 0.2);
    --background-color-success-subtle: #dff2eb;
    --background-color-notice-subtle: #001933;
    --background-color-content-added: #a3d3ff;
    --background-color-content-removed: #ffe49c;
    --background-color-transparent: transparent;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --background-color-button-quiet--hover: rgba(255, 133, 27, 0.1);
    --background-color-button-quiet--active: rgba(255, 133, 27, 0.2);
    --background-color-input-binary--checked: #FF851B;
    --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
    --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);


    /* Opacity */
body.page-Special_ListFiles .mw-datatable.listfiles {
    --opacity-icon-base: 0.87;
  width: 100%;
    --opacity-icon-base--hover: 0.74;
  max-width: 100%;
    --opacity-icon-base--selected: 1;
  table-layout: fixed;
    --opacity-icon-base--disabled: 0.51;
  border-collapse: collapse;
    --opacity-icon-placeholder: 0.51;
}
    --opacity-icon-subtle: 0.67;
body.page-Special_ListFiles .mw-datatable.listfiles th,
body.page-Special_ListFiles .mw-datatable.listfiles td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}


    /* Borders */
/* Thumbnails column stays narrow; images shrink to fit */
    --border-color-base: #FF851B;
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb,
    --border-color-subtle: #FFB84D;
body.page-Special_ListFiles .mw-datatable.listfiles th.TablePager_col_thumb { width: 120px; }
    --border-color-muted: #FFB84D;
body.page-Special_ListFiles .mw-datatable.listfiles td.TablePager_col_thumb img {
    --border-color-interactive: #FF851B;
  max-width: 100%;
    --border-color-disabled: #54595d;
  height: auto;
    --border-color-inverted: #FFFFFF;
  object-fit: contain;
    --border-color-progressive: #FF851B;
  display: block;
    --border-color-progressive--hover: #FFB84D;
}
    --border-color-progressive--active: #FF6300;
    --border-color-progressive--focus: #FF851B;
    --border-color-destructive: #FF4500;
    --border-color-destructive--hover: #FF6347;
    --border-color-destructive--active: #9F3526;
    --border-color-destructive--focus: #FF851B;
    --border-color-error: #FF4500;
    --border-color-error--hover: #FF6347;
    --border-color-warning: #FFB84D;
    --border-color-success: #177860;
    --border-color-notice: #001933;
    --border-color-content-added: #a3d3ff;
    --border-color-content-removed: #ffe49c;
    --border-color-transparent: transparent;
    --border-color-divider: #FF851B;


    /* Outline */
/* Usual overflow goblins on ListFiles only */
    --outline-color-progressive--focus: #FF851B;
body.page-Special_ListFiles .mw-usertoollinks,
body.page-Special_ListFiles .mw-datatable.listfiles .mw-sha1,
body.page-Special_ListFiles .mw-datatable.listfiles .mime-type,
body.page-Special_ListFiles .mw-datatable.listfiles .nowrap,
body.page-Special_ListFiles .mw-datatable.listfiles a,
body.page-Special_ListFiles .mw-datatable.listfiles code {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


    /* Link Overrides */
    --color-link-red: var(--color-destructive);
    --color-link-red--hover: var(--color-destructive--hover);
    --color-link-red--active: var(--color-destructive--active);
    --color-link-red--focus: var(--color-destructive--focus);
    --color-link-red--visited: var(--color-destructive--visited);


    /* Input Borders */
/* Preformatted chunks (sometimes appear in tables) should wrap too */
    --border-color-input--hover: var(--border-color-interactive);
.continuum-body fieldset table pre,
    --border-color-input-binary: var(--border-color-interactive);
.continuum-body fieldset table .mw-code {
    --border-color-input-binary--hover: var(--border-color-progressive--hover);
  white-space: pre-wrap;
    --border-color-input-binary--active: var(--border-color-progressive--active);
  word-break: break-word;
    --border-color-input-binary--focus: var(--border-color-progressive--focus);
}
    --border-color-input-binary--checked: var(--border-color-progressive);
/* ===== Fieldset containment: no overflow, no scroll, everything fits ===== */
.continuum-body fieldset {
  position: relative;    /* keeps abs-pos kids referenced here */
  min-width: 0;           /* flex/grid shrinking allowed */
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;      /* no scrollbars, no clipping */
  padding-top: .75em;    /* legend breathing room */
}
.continuum-body fieldset > legend {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0 0 .25em 0;
}


    /* Subtle Text */
/* Universal “be nice” rules for descendants */
    --color-base--subtle: #FF851B;
.continuum-body fieldset * {
  box-sizing: border-box;  /* widths include padding */
  min-width: 0;             /* critical for flex descendants */
}
}


  @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Metamorphous&display=swap');
/* Text and links: wrap instead of stretching */
    .bona-nova-regular {
.continuum-body fieldset,
        font-family: "Bona Nova", serif;
.continuum-body fieldset .mw-parser-output,
        font-weight: 400;
.continuum-body fieldset a,
        font-style: normal;
.continuum-body fieldset code,
    }
.continuum-body fieldset .nowrap,
   
.continuum-body fieldset .mw-usertoollinks,
    .bona-nova-bold {
.continuum-body fieldset .mw-sha1,
        font-family: "Bona Nova", serif;
.continuum-body fieldset .mime-type {
        font-weight: 700;
  white-space: normal !important;
        font-style: normal;
  overflow-wrap: anywhere;
    }
  word-break: break-word;
   
    .bona-nova-regular-italic {
        font-family: "Bona Nova", serif;
        font-weight: 400;
        font-style: italic;
    }
   
    .metamorphous-regular {
        font-family: "Metamorphous", serif;
        font-weight: 600;
        font-style: normal;
    }
    /* ===== Global Styles ===== */
    body {
        margin: 0;
        padding: 0;
        background-color: #001F3F; /* Navy */
        color: #FFFFFF; /* White text */
        font-family: 'Bona Nova', serif;
    }
   
    /* ===== Headers (Orange Variants) ===== */
    h1, h2, h3, h4, h5, h6, .mw-first-heading {
        font-family: 'Metamorphous', cursive;
        color: #FF6300; /* Bright Orange */
    }
   
    /* ===== Links ===== */
    a {
        color: #FF851B; /* Orange */
        text-decoration: none;
    }
   
    a:hover {
        color: #FFB84D; /* Soft Peach */
        text-decoration: underline;
    }
   
    /* ===== User Links (Full Coverage) ===== */
    #p-personal {
        background-color: #001933;
        border-radius: 4px;
        padding: 4px 8px;
    }
   
    #p-personal li {
        display: inline-block;
        margin-left: 8px;
    }
   
    #p-personal a {
        color: #FF851B; /* Orange */
        font-weight: bold;
    }
   
    #p-personal a:hover {
        color: #FFB84D; /* Soft Peach */
        text-decoration: underline;
    }
   
    /* === Specific User Links === */
    #pt-userpage a,      /* User page */
    #pt-mytalk a,        /* Talk page */
    #pt-preferences a,    /* Preferences */
    #pt-watchlist a,      /* Watchlist */
    #pt-mycontris a,      /* Contributions */
    #pt-notifications a,  /* Notifications (Echo) */
    #pt-echo a,          /* Echo dropdown */
    #pt-login a,          /* Login */
    #pt-createaccount a  /* Create Account */ {
        color: #FF851B;
    }
   
    #pt-userpage a:hover,
    #pt-mytalk a:hover,
    #pt-preferences a:hover,
    #pt-watchlist a:hover,
    #pt-mycontris a:hover,
    #pt-notifications a:hover,
    #pt-echo a:hover,
    #pt-login a:hover,
    #pt-createaccount a:hover {
        color: #FFB84D;
        text-decoration: underline;
    }
   
    /* Logout Button Specific Styling */
    #pt-logout a {
        color: #FF4500; /* Burnt Orange for emphasis */
    }
   
    /* ===== Main Structure ===== */
    #mw-head {
        background-color: #001A33;
        color: #FFFFFF;
        border-bottom: 3px solid #FF851B;
    }
   
    #mw-panel {
        background-color: #002855;
        color: #FFFFFF;
    }
   
    #mw-panel a {
        color: #FF851B;
    }
   
    #mw-panel a:hover {
        color: #FFB84D;
        text-decoration: underline;
    }
   
    #content {
        background-color: #001933;
        border: 1px solid #FF851B;
        padding: 20px;
        color: #FFFFFF;
    }
    .mw-body {
        background-color: #001F3F; /* Navy */
        color: #FFFFFF; /* White text */
    }
    /* ===== Table of Contents (TOC) ===== */
    #toc {
        background-color: #002B5C;
        border: 2px solid #FF851B;
        border-radius: 8px;
        padding: 10px;
        width: fit-content;
        color: #FFFFFF;
    }
   
    #toc h2 {
        font-family: 'Metamorphous', cursive;
        color: #FF6300;
        text-align: center;
        margin-bottom: 8px;
    }
   
    #toc ul {
        list-style-type: none;
        padding: 0;
    }
   
    #toc li {
        margin: 4px 0;
    }
   
    #toc a {
        color: #FF851B;
    }
   
    #toc a:hover {
        color: #FFB84D;
        text-decoration: underline;
    }
   
    #toc .toclevel-1 > a {
        font-weight: bold;
    }
   
    #toc .tocnumber {
        color: #FF4500;
    }
   
    #toc .current {
        background-color: #FF4500;
        color: #FFFFFF;
        padding: 2px 4px;
        border-radius: 4px;
    }
    /* === Logout Link (Burnt Orange) === */
    #pt-logout a {
        color: #FF4500;
    }
   
    #pt-logout a:hover {
        color: #FF6347;
    }
   
    /* ===== Echo Notifications Dropdown ===== */
    .mw-echo-ui-notificationsBadgeButton {
        background-color: #001933;
        color: #FF851B;
        border: 1px solid #FF851B;
        border-radius: 4px;
        padding: 4px;
    }
   
    .mw-echo-ui-notificationsBadgeButton:hover {
        background-color: #FF851B;
        color: #001933;
    }
   
    /* ===== mw-changeslist-legend (TOC-Style) ===== */
    .mw-changeslist-legend {
        background-color: #002B5C;
        border: 2px solid #FF851B;
        border-radius: 8px;
        padding: 10px;
        width: fit-content;
        color: #FFFFFF;
        font-size: 90%;
    }
   
    .mw-changeslist-legend h2 {
        font-family: 'Metamorphous', cursive;
        color: #FF6300;
        text-align: center;
        margin-bottom: 8px;
    }
    .mw-changeslist-legend ul {
        list-style-type: none;
        padding: 0;
    }
   
    .mw-changeslist-legend li {
        margin: 4px 0;
    }
    .mw-changeslist-legend a {
        color: #FF851B;
    }
   
    .mw-changeslist-legend a:hover {
        color: #FFB84D;
        text-decoration: underline;
    }
   
    /* ===== System Messages ===== */
    /* Warnings */
    .mw-warning {
        background-color: #FF4500;
        color: #FFFFFF;
        border-left: 4px solid #FF851B;
        padding: 8px;
        border-radius: 4px;
    }
   
    /* Notices */
    .mw-notice {
        background-color: #002B5C;
        color: #FFFFFF;
        border-left: 4px solid #FF851B;
        padding: 8px;
        border-radius: 4px;
    }
   
    /* ===== Infobox Styling ===== */
    .infobox {
        border: 2px solid #FF851B;
        background-color: #002B5C;
        color: #FFFFFF;
        width: 250px;
        font-size: 90%;
        float: right;
        margin: 0 0 1em 1em;
        padding: 10px;
        border-radius: 8px;
    }
   
    .infobox th {
        background-color: #003366;
        color: #FFB84D;
        padding: 5px;
        font-family: 'Metamorphous', cursive;
        text-align: center;
        border-bottom: 1px solid #FF851B;
    }
   
    .infobox td {
        padding: 5px;
        border-top: 1px solid #FF851B;
    }
   
    .infobox caption {
        font-family: 'Metamorphous', cursive;
        font-size: 1.2em;
        color: #FFB84D;
        text-align: center;
        padding-bottom: 5px;
    }
   
    /* ===== vector 20 Specific Tweaks ===== */
    /* Sidebar collapsed state */
    .vector-menu-tabs li a {
        color: #FF851B;
    }
   
    .vector-menu-tabs li a:hover {
        color: #FFB84D;
    }
   
    /* Sticky header in vector 20 */
    .vector-sticky-header {
        background-color: #001A33;
        border-bottom: 2px solid #FF851B;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }
   
    .vector-sticky-header a {
        color: #FF851B;
    }
   
    .vector-sticky-header a:hover {
        color: #FFB84D;
    }
    /* Default: No Gradient */
    a, #mw-head .vector-menu-dropdown .vector-menu-heading {
        background-image: none;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease;
    }
   
    /* Hover: Full Background Gradient */
    a:hover, #mw-head .vector-menu-dropdown .vector-menu-heading:hover {
        background-image: linear-gradient(to bottom, rgba(255, 133, 27, 0) 0, #FF851B 100%);
        background-repeat: no-repeat;
        background-size: cover; /* Ensures full coverage */
        color: #FFFFFF;
    }
   
    /* ===== Updated Legacy Tab Selection ===== */
    .vector-menu-tabs-legacy .selected {
        background: #FFB84D; /* Soft Peach for selected tab */
        color: #001F3F; /* Navy text for contrast */
        border-radius: 4px 4px 0 0;
        border: 1px solid #FF851B;
    }
   
    /* ===== Hover State for Non-Selected Tabs ===== */
    .vector-menu-tabs-legacy li a:hover {
        background-color: #FF851B;
        color: #FFFFFF;
    }
   
    /* ===== Optional: Stronger Highlight for Current Page ===== */
    .vector-menu-tabs-legacy .selected a {
        font-weight: bold;
        color: #001F3F;
    }
   
    /* Search bar */
    #p-search input {
        background-color: #001933;
        color: #FFFFFF;
        border: 1px solid #FF851B;
        border-radius: 4px;
        padding: 4px;
    }
   
    #p-search input:focus {
        border-color: #FFB84D;
        outline: none;
    }
   
    /* ===== Buttons ===== */
    .mw-ui-button {
        background-color: #FF851B;
        color: #FFFFFF;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }
   
    .mw-ui-button:hover {
        background-color: #FFB84D;
    }
   
    /* ===== Scrollbar ===== */
    ::-webkit-scrollbar {
        width: 12px;
    }
   
    ::-webkit-scrollbar-track {
        background: #001F3F;
    }
   
    ::-webkit-scrollbar-thumb {
        background-color: #FF851B;
        border-radius: 10px;
        border: 3px solid #001F3F;
    }
   
    ::-webkit-scrollbar-thumb:hover {
        background-color: #FFB84D;
    }
    /* ===== Universal Image Reset ===== */
    img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        opacity: 1; /* Full visibility */
        border: none;
        filter: none;
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
   
    /* ===== Hover Effect for Images (Optional) ===== */
    img:hover {
        opacity: 0.9;
    }
   
    /* ===== Wiki Logo Specific Fix ===== */
    #p-logo a,
    #p-logo a img {
        display: block;
        width: 160px; /* Adjust as needed */
        height: 160px;
        opacity: 1;
        border: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7)); /* Soft orange glow */
    }
   
    /* ===== vector 20 Header Image Fix ===== */
    .vector-header img {
        width: auto;
        height: auto;
        opacity: 1;
        filter: none;
    }
   
    /* ===== Thumbnails and Gallery Images ===== */
    .thumb img,
    .gallery img {
        border: 1px solid #FF851B; /* Subtle orange border */
        border-radius: 4px;
        opacity: 1;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
   
    .thumb img:hover,
    .gallery img:hover {
        transform: scale(1.05); /* Slight zoom on hover */
        opacity: 0.95;
    }
   
    /* ===== Infobox Images ===== */
    .infobox img {
        border: 1px solid #FF851B;
        border-radius: 4px;
        max-width: 100%;
        height: auto;
        opacity: 1;
    }
   
    /* ===== SVG Images Handling ===== */
    img[src$=".svg"] {
        filter: drop-shadow(0 0 5px rgba(255, 133, 27, 0.7)); /* Glow for SVGs */
    }
   
    /* ===== WikiEditor Monospace Font for Editing Area ===== */
    .wikiEditor-ui .editor textarea {
        background-color: #001933; /* Dark Navy */
        color: #FFFFFF; /* White text */
        border: 1px solid #FF851B; /* Orange border */
        border-radius: 4px;
        padding: 8px;
    }
   
    /* ===== UI Elements Still Use Custom Font ===== */
    .wikiEditor-ui-toolbar,
    .wikiEditor-ui-toolbar .group .tool a,
    .wikiEditor-ui-dialog {
        font-family: 'Bona Nova', serif; /* Keep custom font for UI */
        background-color: #001A33;
        color: #FFFFFF;
        border: 1px solid #FF851B;
    }
   
    /* ===== Brighter Code/Text Highlights ===== */
    .wikiEditor-ui .editor textarea::selection {
        background-color: rgba(255, 133, 27, 0.5); /* Brighter orange highlight */
        color: #FFFFFF;
    }
   
    /* ===== Syntax Highlighting Tweak ===== */
    .wikiEditor-ui .editor .syntax-highlight {
        background-color: #002B5C; /* Lighter navy for code blocks */
        color: #FFB84D; /* Soft Peach for text */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.keyword {
        color: #FF851B; /* Bright Orange for keywords */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.string {
        color: #7FDBFF; /* Azure for strings */
    }
   
    .wikiEditor-ui .editor .syntax-highlight.comment {
        color: #AAAAAA; /* Soft gray for comments */
        font-style: italic;
    }
   
    .wikiEditor-ui .editor .syntax-highlight.variable {
        color: #FF4500; /* Burnt Orange for variables */
    }
   
    /* ===== Cursor Visibility Enhancement ===== */
    .wikiEditor-ui .editor textarea {
        caret-color: #FF851B; /* Bright orange caret */
    }
   
    /* ===== Selection Color in Toolbar Inputs ===== */
    .wikiEditor-ui-toolbar input::selection,
    .wikiEditor-ui-toolbar textarea::selection {
        background-color: rgba(255, 133, 27, 0.5);
        color: #FFFFFF;
    }
   
    /* ===== Hover & Active Effects in Toolbar ===== */
    .wikiEditor-ui-toolbar .group .tool a:hover {
        background-color: #FF851B;
        color: #001933;
    }
   
    .wikiEditor-ui-toolbar .group .tool a:active {
        background-color: #FF4500;
        color: #FFFFFF;
    }
    /* ===== Ace Editor Base Styling ===== */
    .ace_editor {
        background-color: #001933; /* Dark Navy */
        color: #FFFFFF; /* White text */
        border: 1px solid #FF851B; /* Orange border */
        border-radius: 4px;
        font-family: 'Courier New', 'Consolas', monospace; /* Monospace for cursor alignment */
        font-size: 14px;
        line-height: 1.5;
        caret-color: #FF851B; /* Bright Orange caret */
    }
   
    /* ===== CodeEditor - General Editor Styling ===== */
    .ace_editor {
        background-color: #001933; /* Dark Navy Background */
        color: #FFFFFF; /* Default Text Color */
        border: 1px solid #FF851B; /* Orange Border */
        border-radius: 4px;
        font-family: 'Courier New', 'Consolas', monospace;
        font-size: 14px;
    }
   
    /* ===== Cursor & Active Line ===== */
    .ace_cursor {
        color: #FF851B; /* Bright Orange Cursor */
    }
   
    .ace_marker-layer .ace_active-line {
        background-color: rgba(255, 133, 27, 0.15); /* Subtle Active Line Highlight */
    }
   
    .ace_marker-layer .ace_selection {
        background-color: rgba(255, 133, 27, 0.5); /* Brighter Selection */
    }
   
    /* ===== Gutter (Line Numbers) ===== */
    .ace_gutter {
        background-color: #002B5C; /* Lighter Navy */
        color: #FFB84D; /* Soft Peach for Line Numbers */
        border-right: 1px solid #FF851B;
    }
   
    .ace_gutter-active-line {
        background-color: rgba(255, 133, 27, 0.1); /* Highlight Active Line Number */
    }
   
    /* ===== Syntax Highlighting ===== */
    .ace_keyword {
        color: #FF851B; /* Bright Orange for Keywords */
        font-weight: bold;
    }
   
    .ace_string {
        color: #7FDBFF; /* Azure for Strings */
    }
   
    .ace_comment {
        color: #AAAAAA; /* Soft Gray for Comments */
        font-style: italic;
    }
   
    .ace_constant {
        color: #FF4500; /* Burnt Orange for Constants */
    }
   
    .ace_variable {
        color: #FFD700; /* Gold for Variables */
    }
   
    .ace_function {
        color: #FFB84D; /* Soft Peach for Functions */
    }
   
    /* ===== Brackets, Tags, & Punctuation ===== */
    .ace_paren,
    .ace_bracket {
        color: #FF851B; /* Orange for Brackets */
    }
   
    .ace_marker-layer .ace_bracket {
        background-color: rgba(255, 133, 27, 0.25);
    }
   
    /* ===== Error & Warning Highlights ===== */
    .ace_error {
        text-decoration: underline;
        text-decoration-color: #FF4500; /* Burnt Orange for Errors */
    }
   
    .ace_warning {
        text-decoration: underline;
        text-decoration-color: #FFD700; /* Gold for Warnings */
    }
   
    /* ===== Scrollbars (Match Dark Mode) ===== */
    .ace_scrollbar {
        width: 12px;
    }
   
    .ace_scrollbar-track {
        background: #001F3F;
    }
   
    .ace_scrollbar-thumb {
        background-color: #FF851B;
        border-radius: 10px;
        border: 3px solid #001F3F;
    }
   
    .ace_scrollbar-thumb:hover {
        background-color: #FFB84D;
    }
   
    /* ===== Placeholder Text ===== */
    .ace_placeholder {
        color: #FFB84D;
        opacity: 0.7;
    }
   
    /* ===== Tooltips & Popups ===== */
    .ace_tooltip {
        background-color: #001933;
        border: 1px solid #FF851B;
        color: #FFFFFF;
        border-radius: 4px;
    }
   
    /* ===== Matching Parens/Brackets ===== */
    .ace_bracket-highlight {
        border-bottom: 2px solid #FF851B;
        background-color: rgba(255, 133, 27, 0.15);
    }
   
    /* ===== Fold Widgets (for code folding) ===== */
    .ace_fold-widget {
        color: #FF851B;
    }
   
    .ace_fold-widget:hover {
        color: #FFB84D;
    }
    /* ===== CodeMirror Dark Mode ===== */
    .CodeMirror {
        background-color: #1e1e1e;
        color: #FFFFFF;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    /* Syntax Highlighting */
    .cm-keyword { color: #FF851B; font-weight: bold; }  /* Orange for keywords */
    .cm-string { color: #7FDBFF; }                      /* Azure for strings */
    .cm-comment { color: #AAAAAA; font-style: italic; } /* Soft Gray for comments */
    .cm-number { color: #FFD700; }                      /* Gold for numbers */
    .cm-variable { color: #FFB84D; }                    /* Soft Peach for variables */
    .cm-def { color: #FF4500; }                        /* Burnt Orange for function names */
   
    /* Cursor & Selection */
    .CodeMirror-cursor { border-left: 1px solid #FF851B; }
    .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3); }
   
    /* Line Numbers */
    .CodeMirror-gutters {
        background-color: #002B5C;
        color: #FFB84D;
        border-right: 1px solid #FF851B;
    }
    /* ===== vector Skin Override for Ace Editor ===== */
    .vector-body .ace_editor {
        background-color: #001933 !important; /* Dark Navy */
        color: #FFFFFF !important;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    .vector-body .ace_keyword { color: #FF851B !important; font-weight: bold; } /* Orange */
    .vector-body .ace_string { color: #7FDBFF !important; }                    /* Azure */
    .vector-body .ace_comment { color: #AAAAAA !important; font-style: italic; } /* Soft Gray */
    .vector-body .ace_constant { color: #FF4500 !important; }                  /* Burnt Orange */
    .vector-body .ace_variable { color: #FFD700 !important; }                  /* Gold */
    .vector-body .ace_cursor { color: #FF851B !important; }                    /* Bright Orange */
    .vector-body .ace_marker-layer .ace_active-line { background-color: rgba(255, 133, 27, 0.15) !important; }
    .vector-body .ace_marker-layer .ace_selection { background-color: rgba(255, 133, 27, 0.5) !important; }
   
    /* ===== vector Skin Override for CodeMirror ===== */
    .vector-body .CodeMirror {
        background-color: #1e1e1e !important;
        color: #FFFFFF !important;
        border: 1px solid #FF851B;
        border-radius: 4px;
    }
   
    .vector-body .cm-keyword { color: #FF851B !important; font-weight: bold; }
    .vector-body .cm-string { color: #7FDBFF !important; }
    .vector-body .cm-comment { color: #AAAAAA !important; font-style: italic; }
    .vector-body .cm-number { color: #FFD700 !important; }
    .vector-body .cm-variable { color: #FFB84D !important; }
    .vector-body .cm-def { color: #FF4500 !important; }
    .vector-body .CodeMirror-cursor { border-left: 1px solid #FF851B !important; }
    .vector-body .CodeMirror-selected { background-color: rgba(255, 133, 27, 0.3) !important; }
    .vector-body .CodeMirror-gutters {
        background-color: #002B5C !important;
        color: #FFB84D !important;
        border-right: 1px solid #FF851B;
    }
    /* 🌟 Top Navbar Styles */
#top-navbar {
    background-color: #002B5C;
    border-bottom: 3px solid #FF851B;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
}


/* Navbar Logo */
/* Pre/code blocks that otherwise run off the edge */
.navbar-logo a {
.continuum-body fieldset pre,
    font-family: 'Metamorphous', cursive;
.continuum-body fieldset .mw-code {
     color: #FF851B;
  white-space: pre-wrap;    /* preserve formatting, allow wrap */
    font-size: 1.5em;
  overflow-wrap: anywhere;
    text-decoration: none;
}
}


/* Navbar Links */
/* Tables: fill container and wrap cells */
.navbar-links {
.continuum-body fieldset table {
    list-style: none;
  width: 100%;
    display: flex;
  max-width: 100%;
    margin: 0;
  table-layout: fixed;       /* predictable widths + wrapping */
    padding: 0;
  border-collapse: collapse;
}
.continuum-body fieldset table th,
.continuum-body fieldset table td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


.navbar-links li {
/* Media shrink to fit */
    margin: 0 15px;
.continuum-body fieldset img,
.continuum-body fieldset svg,
.continuum-body fieldset video,
.continuum-body fieldset canvas,
.continuum-body fieldset audio {
  max-width: 100%;
  height: auto;
  display: block;
}
}


.navbar-links a {
/* Iframes & embeds: make them fluid (set aspect-ratio if you know it) */
    color: #FFFFFF;
.continuum-body fieldset iframe,
    text-decoration: none;
.continuum-body fieldset embed,
    font-weight: bold;
.continuum-body fieldset object {
    transition: color 0.3s ease;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* adjust per your content, prevents goofy heights */
}
}


.navbar-links a:hover {
/* Forms & OOUI controls: never overflow narrow containers */
    color: #FFB84D;
.continuum-body fieldset input,
.continuum-body fieldset select,
.continuum-body fieldset textarea,
.continuum-body fieldset button {
  max-width: 100%;
}
/* VE overlays live outside your content column: don't force wrapping there */
html.ve-activated .ve-ui-overlay-global *,
html.ve-activated .oo-ui-defaultOverlay * {
  /* Restore normal text behavior inside VE/OOUI */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  min-width: 0;            /* allow flex children to shrink */
  box-sizing: border-box;
}
}


/* Responsive Navbar */
/* Buttons should never wrap letter-by-letter */
@media screen and (max-width: 768px) {
html.ve-activated .ve-ui-overlay-global .oo-ui-buttonElement .oo-ui-labelElement-label,
    #top-navbar {
html.ve-activated .oo-ui-defaultOverlay .oo-ui-buttonElement .oo-ui-labelElement-label {
        flex-direction: column;
  white-space: nowrap !important;
        align-items: flex-start;
}
    }


    .navbar-links {
/* VE template search results menu: give it breathable height */
        flex-direction: column;
html.ve-activated .ve-ui-overlay-global .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu,
        width: 100%;
html.ve-activated .oo-ui-defaultOverlay .oo-ui-menuSelectWidget .oo-ui-menuSelectWidget-menu {
    }
  max-height: 60vh;         /* visible results */
  overflow-y: auto;
}


    .navbar-links li {
/* Don’t force fixed table layout inside dialogs (some widgets use tables) */
        margin: 10px 0;
html.ve-activated .ve-ui-overlay-global table,
     }
html.ve-activated .oo-ui-defaultOverlay table {
  table-layout: auto !important;
}
input#title {
    background-color: var(--background-color-base);
    color: var(--color-emphasized);
    margin: 0;
     border: 1px solid var(--border-color-base);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.42857143em;
}
.create-title {
color: #FFF;
}
div.copyright-warning p {
color: #FFF;
}
#blog-page-right {
background-color: var(--color-accent-navy);
}
}
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Common.css"