MediaWiki:Vector-2022.css

/**
 * For Creopedia-specific tokens, see [[MediaWiki:Common.css]]
 */

html,
body {
    font-family: var(--cp-font-family-body);
}

th,
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary,
.vector-pinnable-header-label {
    font-family: var(--cp-font-family-heading);
    letter-spacing: -0.025em;
}

.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary {
    font-weight: 600;
}

/* No icon: the header artwork carries the visual identity */
.mw-logo-icon {
    display: none;
}

/* Override Vector-2022 wordmark handling */
.mw-logo-container {
    color-scheme: inherit !important;
    filter: none !important;
}

.mw-logo-wordmark {
    font-size: 0;
    /**
     * Was -10px, which pulled the wordmark back over the now-removed icon.
     * 6px centres it in the gap instead: measured against the live skin, the
     * main-menu glyph ends 64px into the header and the search box starts at
     * 306px, so a 190px wordmark placed here leaves 26px of clear space on
     * each side. Vector widens its horizontal padding above about 1680px and
     * gives the extra to the search side, so on very wide screens the right
     * gap grows to 36px.
     */
    margin-inline-start: 6px;
    width: 190px;
    height: 48px;
    background-image: var(--cp-logo-wordmark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/**
 * Background image handling
 */
body {
    position: relative;
    min-height: 100dvh;
    height: auto;
    background-color: var(--background-color-base);
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--cp-page-background-tile);
    mask-image: linear-gradient(
        to bottom,
        transparent,
        transparent 6rem,
        rgb(0 0 0 / 0.05) 40rem
    );
}

.mw-page-container {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--background-color-base) 10%,
        var(--background-color-base) 90%,
        transparent 100%
    );
}

.vector-header {
    position: relative;
}

/**
 * Header artwork.
 *
 * --cp-header-background resolves to the light or the night vignette; the
 * theme switch lives beside the tokens in [[MediaWiki:Common.css]].
 *
 * Both files are cropped to 6:1 and centred on the horizon, so `auto 100%`
 * fills the header height and makes them 384px wide in a 64px header. That is
 * wider than the artwork is ever meant to show: the mask, not the image, is
 * what decides where it ends, which means the extent can be retuned here
 * without re-cropping and re-uploading anything.
 *
 * Both edges of the artwork are stops on one 70deg gradient, so they stay
 * parallel by construction and a change of angle moves the pair together. At
 * 70deg an edge leans about 23px across a 64px header, sitting further right
 * at the bottom than at the top. Each edge fades over the same 30px.
 *
 * mask-size must be the artwork width, not 100%. Stops on an angled gradient
 * are distances along the gradient line measured from a corner of the mask
 * box, not screen x, so changing the box width slides the whole fade
 * sideways. For this 384px box the two relate, on the header's centre line,
 * by t = 191.35 + 0.9397 * (x - 192):
 *
 *     11px  -> x = 0     the header's own left edge
 *     41px  -> x = 32    artwork fully opaque, just short of the hamburger
 *     270px -> x = 276
 *     300px -> x = 308   where the search box begins
 *
 * That mapping is why the left fade starts at 11 and not at 0: a stop of 0
 * lands 11.6px off-screen, which is what used to make the left edge a hard
 * cut rather than a fade. The right-hand tail passes behind the search box,
 * which is opaque, so it is hidden rather than cluttering.
 *
 * mask-position and mask-repeat are both required, since a mask defaults to
 * repeating and to centre alignment.
 */
.vector-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: var(--cp-header-background);
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
    mask-image: linear-gradient(
        70deg,
        transparent 11px,
        rgb(0 0 0 / 1) 41px,
        rgb(0 0 0 / 1) 270px,
        transparent 300px
    );
    mask-size: 384px 100%;
    mask-position: left;
    mask-repeat: no-repeat;
}

/* Add divider to header to blend the background */
.vector-header::after {
    content: "";
    height: 1px;
    position: absolute;
    background: var(--background-color-interactive);
    left: 0;
    right: 0;
    bottom: 0;
}

/**
 * Vector 2022 tweaks
 */

.vector-pinned-container {
    background: transparent;
}

/* Hide Vector 2022 opt-out link, only Vector 2022 is themed */
.vector-main-menu-action-opt-out {
    display: none;
}

/* Tweak Vector search bar to be more consistent */
.vector-search-box .vector-typeahead-search-container {
    max-width: none;
    margin-right: 0;
}

.vector-search-box.vector-search-box-auto-expand-width {
    margin-left: 0 !important;
}

.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not(
        .cdx-typeahead-search--expanded
    ) {
    margin-left: 0;
}

/* Match the initial state with the expanded state */
.cdx-typeahead-search .cdx-text-input--has-start-icon .cdx-text-input__input {
    padding-left: 60px;
}

.vector-typeahead-search-container .cdx-text-input__start-icon {
    left: 22px;
}

/* max-width-breakpoint-mobile */
@media screen and (max-width: 639px) {
    /* Make header single row */
    .vector-header {
        flex-flow: row;
    }

    /* Remove space reserved by workmark */
    .mw-logo {
        min-width: auto;
    }

    /**
     * With the icon gone the wordmark is the only thing left in the logo link,
     * so it shrinks here instead of being hidden: hiding it would leave an
     * empty, zero-size link to the main page on phones.
     */
    .mw-logo-wordmark {
        width: 130px;
        height: 32px;
        margin-inline-start: 0;
    }
}

/* max-width-breakpoint-tablet */
@media screen and (max-width: 1119px) {
    /* Make Vector search bar more responsive by making it into an overlay */
    .vector-header-search-toggled .vector-search-box {
        position: absolute !important;
        z-index: 450; /* z-index-overlay */
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 24px;
        background-color: var(--background-color-base);
    }

    .vector-typeahead-search-container {
        flex-grow: 1;
    }
}

/* min-width-breakpoint-desktop */
@media screen and (min-width: 1120px) {
    .vector-search-box .vector-typeahead-search-container {
        margin-right: 48px;
    }
}