MediaWiki:Timeless.css: Difference between revisions

Revision as of 17:25, 12 October 2026

/* =====================================================================
 * HUIJIA FUN (EN) - MediaWiki:Timeless.css - v2
 * Design language: VGR Design System
 *
 * Only Timeless-specific fixes live here; styles shared by all skins are in Common.css.
 * Organized by block: header / left sidebar / right toolbar / content card / popups and
 * extensions / icons.
 * When the custom Timeless skin is built, move these blocks into the skin's resources/
 * one at a time, deleting each block here once it has moved.
 *
 * Colors always read the variables from Common.css and the theme templates (--paper, --ink,
 * --accent...), never hard-coded values, so everything works under Theme-HJ / Theme-STR /
 * Theme-VGR.
 * ===================================================================== */


/* =====================================================================
 * 1. Header
 * ===================================================================== */
#mw-header-nav-hack,
#mw-header-hack { box-shadow: none; }

/* Notification (Echo) popup: the theme templates raise the header to z-index 1000,
   so the popup has to sit higher or the header covers it */
div.mw-echo-ui-overlay { z-index: 1100; }

.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body { max-width: unset !important; }
.oo-ui-popupWidget-popup {
    border: 1px solid var(--rule);
    border-radius: 0;
    background-color: var(--paper-raised);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--rule); }
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--paper-raised); }
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head { border-bottom: 1px solid var(--rule); }
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer { border-top: 1px solid var(--rule); }
.mw-echo-ui-notificationItemWidget {
    background-color: transparent;
    border-bottom: 1px solid var(--rule);
}
.mw-echo-ui-notificationItemWidget:hover { background-color: var(--accent-tint); }
.mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--focus); }
@media screen and (max-width: 850px) {
    .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor { display: none; }
}


/* =====================================================================
 * 2. Left sidebar and right toolbar (including tablet and phone dropdowns)
 * ===================================================================== */
#mw-site-navigation h2,
#mw-related-navigation h2 { font-weight: 600; }

/* No shadow on sidebar blocks at tablet width */
@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk { box-shadow: none; }
}

/* Tablet and phone: the sidebars become dropdown menus; a thin rule and a light shadow
   separate the menu from the page */
@media screen and (max-width: 1099px) {
    .sidebar-inner,
    .dropdown {
        border: 1px solid var(--rule) !important;
        border-radius: 0;
        box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35) !important;
    }
}
@media screen and (max-width: 850px) {
    .sidebar-inner,
    .dropdown { z-index: 501; }
}
#menus-cover { background: #000; opacity: 0.2; }


/* =====================================================================
 * 3. Content card
 * ===================================================================== */
/* Title spacing on talk and user talk pages */
body.ns-1 .mw-body h1.firstHeading,
body.ns-3 .mw-body h1.firstHeading { margin-bottom: .5em; }

/* List spacing in article text (the old rule added 10px to every li on the site,
   which stretched the menus too) */
.mw-parser-output li { margin-bottom: 0.3em; }

/* Table of contents, file TOC, warning boxes: thin rules, no shadow, no rounding */
ul#filetoc,
.toc,
.mw-warning {
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    background: var(--paper-raised);
}
div.mw-warning-with-logexcerpt {
    padding: 4px 16px !important;
    margin-bottom: 10px !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--link-new) !important;
    border-radius: 0 !important;
    clear: both !important;
}

/* Hide the "Help" link */
body #mw-wrapper .mw-helplink,
body #mw-wrapper #mw-indicator-mw-helplink { display: none; }


/* =====================================================================
 * 4. Buttons, dialogs and extensions
 * ===================================================================== */
/* Native buttons: solid Huijia Green, no scaling or bounce */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--accent-fill);
    color: var(--on-accent);
    border: none;
    border-radius: 2px;
    padding: 5px 12px;
    margin-right: 5px;
    font-weight: 600;
    transition: background-color 100ms;
}
button:hover,
html input[type="button"]:hover,
input[type="submit"]:hover { background-color: #3B7E3D; }
button:focus-visible,
html input[type="button"]:focus-visible,
input[type="submit"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.mw-ui-button { border: none; }
.mw-ui-button.mw-ui-progressive { border-radius: 2px; }
.mw-ui-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-buttonElement > .oo-ui-buttonElement-button { box-shadow: none; }

/* Dialogs (including the media player) */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
}

/* Media viewer: no background or border on the tool buttons */
.mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-options-button, .mw-mmv-close,
.mw-mmv-fullscreen, .mw-mmv-next-image, .mw-mmv-prev-image {
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
}

/* SocialProfile: friends list */
.relationship-item {
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper-raised);
}
.relationship-item img,
.relationship-action img { border-radius: 50%; }
#profile-title-container { padding: 19px 0 6px 6px; }
#profile-top { border-bottom: none; }
.user-section-heading { line-height: 34px; }


/* =====================================================================
 * 5. Icons: sidebar
 *    The three zone entries carry the VGR zone marks (Archive = square, Worldview = diamond,
 *    Canon = three dots); other entries have no icon.
 *    Sidebar ids are generated from the link text in MediaWiki:Sidebar, with spaces turned
 *    into hyphens ("Archive Area" -> #n-Archive-Area). If the link text changes, update the
 *    selectors here.
 * ===================================================================== */
/* Drawn with CSS: all three marks share one size and baseline and do not depend on a font.
   --vgr-mark has a fallback color, so the marks show even on pages without Common.css or a
   theme template. */
#n-Archive-Area a:before,
#n-Worldview-Area a:before,
#n-Verdant-Green-Revelation a:before {
    --vgr-mark: var(--accent, #025F32);
    content: '' !important;
    font-family: inherit !important;
    display: inline-block !important;
    box-sizing: border-box;
    width: 12px !important;
    height: 12px !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle;
    position: relative;
    top: -1px;
    background-repeat: no-repeat !important;
}

/* Archive: solid square */
#n-Archive-Area a:before {
    background-image: linear-gradient(var(--vgr-mark), var(--vgr-mark)) !important;
    background-size: 9px 9px !important;
    background-position: center !important;
}

/* Worldview (setting): diamond outline with a center dot */
#n-Worldview-Area a:before {
    width: 9px !important;
    height: 9px !important;
    margin: 0 11.5px 0 1.5px !important;
    border: 1.5px solid var(--vgr-mark);
    background-image: radial-gradient(circle, var(--vgr-mark) 0 1.4px, transparent 1.6px) !important;
    transform: rotate(45deg);
}

/* Canon (works): three dots, one above and two below */
#n-Verdant-Green-Revelation a:before {
    background-image:
        radial-gradient(circle at 50% 22%, var(--vgr-mark) 0 1.7px, transparent 1.9px),
        radial-gradient(circle at 18% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px),
        radial-gradient(circle at 82% 78%, var(--vgr-mark) 0 1.7px, transparent 1.9px) !important;
}