Template:Main Page/Sandbox/header/styles.css: Difference between revisions

.mp-top {
    display: flex;
    /* row-reverse: when it wraps on smaller displays, the logo appears first */
    flex-flow: row-reverse wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 0;
}

.mp-top .mp-header {
    flex: 1;
    flex-basis: 400px;
    min-width: 0;
}

.mp-header-subtitle {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mp-header-text, #d7d9db);
    margin: 0;
}

.mp-header-subtitle b {
    font-weight: 700;
}

.mp-header-stats {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Gray bars to the left and right of the stats */
.mp-header-stats-sep {
    height: 0;
    border-top: 2px solid var(--mp-header-sep, var(--color-surface-2, #8b949e));
    flex: 1;
}

.mp-header-stats > ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-header-stats li {
    display: inline;
    color: var(--mp-header-muted, #8b949e);
}

.mp-header-stats li:not(:last-child)::after {
    content: " · ";
    font-weight: bold;
}

.mp-header-stats a {
    color: var(--mp-header-link, #58a6ff);
}

/* Vertical spacing between header blocks */
.mp-header > * {
    margin: 12px 0;
}

.mp-header > :first-child {
    margin-top: 0;
}

.mp-header > :last-child {
    margin-bottom: 0;
}

.mp-header-intro {
    font-size: 0.95rem;
    color: var(--mp-header-muted, #8b949e);
    margin: 0;
}

.mp-header-intro a {
    color: var(--mp-header-link, #58a6ff);
}

/* Logo: theme-aware (black for light mode, white for dark mode).
   Wrapper contains two spans; only one is visible at a time based on
   prefers-color-scheme (works when transcluded; html/body selectors
   are stripped by TemplateStyles). */
.mp-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.mp-logo img {
    vertical-align: middle;
}
/* Default: show white logo (dark mode), hide black logo */
.mp-logo__light {
    display: none;
}
.mp-logo__dark {
    display: inline;
}
.mp-logo__dark a {
    display: inline-block;
}
@media screen and ( prefers-color-scheme: light ) {
    .mp-logo__light {
        display: inline;
    }
    .mp-logo__light a {
        display: inline-block;
    }
    .mp-logo__dark {
        display: none;
    }
}

/* Light mode: readable text and links on light background.
   Per MediaWiki: support explicit (skin-theme-clientpref-day) and
   automatic/OS mode (skin-theme-clientpref-os + prefers-color-scheme: light). */
@media screen {
    html.skin-theme-clientpref-day .mp-header-subtitle,
    html.skin-theme-clientpref-day .mp-header-intro {
        --mp-header-text: #24292f;
        --mp-header-muted: #57606a;
        --mp-header-link: #0969da;
    }
    html.skin-theme-clientpref-day .mp-header-stats-sep {
        --mp-header-sep: #d0d7de;
    }
    html.skin-theme-clientpref-day .mp-header-stats li {
        --mp-header-muted: #57606a;
    }
    html.skin-theme-clientpref-day .mp-header-stats a,
    html.skin-theme-clientpref-day .mp-header-intro a {
        --mp-header-link: #0969da;
    }
}
@media screen and ( prefers-color-scheme: light ) {
    html.skin-theme-clientpref-os .mp-header-subtitle,
    html.skin-theme-clientpref-os .mp-header-intro {
        --mp-header-text: #24292f;
        --mp-header-muted: #57606a;
        --mp-header-link: #0969da;
    }
    html.skin-theme-clientpref-os .mp-header-stats-sep {
        --mp-header-sep: #d0d7de;
    }
    html.skin-theme-clientpref-os .mp-header-stats li {
        --mp-header-muted: #57606a;
    }
    html.skin-theme-clientpref-os .mp-header-stats a,
    html.skin-theme-clientpref-os .mp-header-intro a {
        --mp-header-link: #0969da;
    }
}