Jump to content

MediaWiki:Common.css

From Creopedia

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
 * For Vector 2022 implementation, see [[MediaWiki:Vector-2022.css]]
 */

@font-face {
    font-family: "Poppins";
    src: url("https://www.creopedia.net/w/images/4/41/Poppins-VariableFont_wght.woff2")
        format("woff2");
    font-weight: 100 900; /* variable wght axis: 100-900 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    size-adjust: 108.3444%;
    ascent-override: 96.9132%;
    descent-override: 32.3044%;
    line-gap-override: 9.2298%;
}

/*
 * The MediaWiki:Common.css side of the header change.
 *
 * Replace the existing `:root { ... }` block near the top of the page with
 * everything below. The theme-switch rules that follow it are new, and belong
 * between that block and the `html:root { ... }` block that comes after.
 *
 * Nothing else in Common.css changes.
 */

:root {
    --cp-font-poppins: "Poppins", "Poppins Fallback";
    --cp-font-family-heading:
        var(--cp-font-poppins), Georgia, "Times New Roman", serif;
    --cp-font-family-body:
        var(--cp-font-poppins), system-ui, -apple-system, sans-serif;
    --cp-logo-wordmark: url(https://www.creopedia.net/w/images/3/38/Creopedia-wordmark.webp);
    --cp-page-background-tile: url(https://www.creopedia.net/w/images/6/62/Creopedia-bg-pattern.webp);
    --cp-page-background-size: 480px;

    /**
     * Header artwork. The ?v2 is a cache buster, not part of the filename:
     * re-uploading an image keeps its URL, and the CDN in front of the wiki
     * will serve the old bytes for hours afterwards. Bump it whenever either
     * image is replaced.
     */
    --cp-header-background-light: url(https://www.creopedia.net/w/images/f/f7/Header-background-light.webp?v2);
    --cp-header-background-dark: url(https://www.creopedia.net/w/images/e/ef/Header-background-dark.webp?v2);
    --cp-header-background: var(--cp-header-background-light);
}

/**
 * Header artwork follows the theme. MediaWiki puts one of
 * skin-theme-clientpref-day / -night / -os on <html>; -os defers to the
 * operating system, which is why that case needs the media query as well.
 * This mirrors how the Vector skin selects its own night-mode styles.
 */
html.skin-theme-clientpref-night {
    --cp-header-background: var(--cp-header-background-dark);
}

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os {
        --cp-header-background: var(--cp-header-background-dark);
    }
}

/* This is specific enough to override all skin-theme-clientpref- variables */
html:root {
    /* Text / ink */
    --color-base: light-dark(oklch(0.305 0.018 256), oklch(0.902 0.008 256));
    --color-base--hover: light-dark(
        oklch(0.378 0.018 256),
        oklch(0.945 0.004 256)
    );
    --color-base--subtle: light-dark(
        oklch(0.461 0.028 256),
        oklch(0.732 0.028 256)
    );
    --color-emphasized: light-dark(
        oklch(0.245 0.018 256),
        oklch(0.945 0.004 256)
    );
    --color-subtle: light-dark(oklch(0.461 0.028 256), oklch(0.732 0.028 256));
    --color-placeholder: light-dark(
        oklch(0.567 0.028 256),
        oklch(0.62 0.028 256)
    );
    --color-disabled: light-dark(oklch(0.64 0.026 256), oklch(0.52 0.026 256));
    --color-inverted: light-dark(
        oklch(0.992 0.004 256),
        oklch(0.189 0.016 256)
    );
    --color-notice: light-dark(oklch(0.305 0.018 256), oklch(0.945 0.004 256));

    /* Surfaces */
    --background-color-base: light-dark(
        oklch(0.985 0.007 256),
        oklch(0.18 0.024 256)
    );
    --background-color-neutral: light-dark(
        oklch(0.943 0.014 256),
        oklch(0.281 0.026 256)
    );
    --background-color-neutral-subtle: light-dark(
        oklch(0.975 0.011 256),
        oklch(0.225 0.03 256)
    );
    --background-color-interactive: light-dark(
        oklch(0.925 0.015 256),
        oklch(0.305 0.028 256)
    );
    --background-color-interactive-subtle: light-dark(
        oklch(0.965 0.014 256),
        oklch(0.235 0.03 256)
    );
    --background-color-disabled: light-dark(
        oklch(0.86 0.018 256),
        oklch(0.43 0.022 256)
    );
    --background-color-disabled-subtle: light-dark(
        oklch(0.93 0.018 256),
        oklch(0.33 0.03 256)
    );
    --background-color-inverted: light-dark(
        oklch(0.18 0.024 256),
        oklch(0.982 0.006 256)
    );

    /* Borders */
    --border-color-base: light-dark(
        oklch(0.79 0.013 256),
        oklch(0.47 0.016 256)
    );
    --border-color-subtle: light-dark(
        oklch(0.875 0.013 256),
        oklch(0.4 0.016 256)
    );
    --border-color-muted: light-dark(
        oklch(0.912 0.013 256),
        oklch(0.33 0.018 256)
    );
    --border-color-interactive: light-dark(
        oklch(0.567 0.016 256),
        oklch(0.732 0.013 256)
    );
    --border-color-disabled: light-dark(
        oklch(0.844 0.013 256),
        oklch(0.461 0.016 256)
    );
    --border-color-inverted: light-dark(
        oklch(0.992 0.004 256),
        oklch(0.189 0.016 256)
    );
    --border-color-divider: light-dark(
        oklch(0.79 0.013 256),
        oklch(0.47 0.016 256)
    );
    --border-color-notice: light-dark(
        oklch(0.461 0.016 256),
        oklch(0.844 0.013 256)
    );

    /* Progressive: accent, links, primary actions (hue 256) */
    --color-progressive: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.722 0.105 256)
    );
    --color-progressive--hover: light-dark(
        oklch(0.585 0.15 256),
        oklch(0.814 0.069 256)
    );
    --color-progressive--active: light-dark(
        oklch(0.342 0.09 256),
        oklch(0.878 0.046 256)
    );
    --color-progressive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );
    --background-color-progressive: oklch(0.53 0.158 256);
    --background-color-progressive--hover: oklch(0.585 0.15 256);
    --background-color-progressive--active: oklch(0.342 0.09 256);
    --background-color-progressive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );
    --background-color-progressive-subtle: light-dark(
        oklch(0.967 0.018 256),
        oklch(0.33 0.07 256)
    );
    --background-color-input-binary--checked: oklch(0.53 0.158 256);
    --border-color-progressive: oklch(0.53 0.158 256);
    --border-color-progressive--hover: oklch(0.585 0.15 256);
    --border-color-progressive--active: oklch(0.342 0.09 256);
    --border-color-progressive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );
    --box-shadow-color-progressive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );

    /* Destructive: red */
    --color-destructive: light-dark(
        oklch(0.579 0.201 26),
        oklch(0.725 0.166 30)
    );
    --color-destructive--hover: light-dark(
        oklch(0.662 0.217 29),
        oklch(0.812 0.105 31)
    );
    --color-destructive--active: light-dark(
        oklch(0.482 0.144 31),
        oklch(0.879 0.065 31)
    );
    --color-destructive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );
    --color-destructive--visited: light-dark(
        oklch(0.537 0.098 21),
        oklch(0.715 0.066 21)
    );
    --background-color-destructive: oklch(0.579 0.201 26);
    --background-color-destructive--hover: oklch(0.662 0.217 29);
    --background-color-destructive--active: oklch(0.482 0.144 31);
    --background-color-destructive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );
    --background-color-destructive-subtle: light-dark(
        oklch(0.951 0.025 30),
        oklch(0.349 0.092 32)
    );
    --border-color-destructive: oklch(0.579 0.201 26);
    --border-color-destructive--focus: light-dark(
        oklch(0.53 0.158 256),
        oklch(0.64 0.13 256)
    );

    /* Error: red */
    --color-error: light-dark(oklch(0.579 0.201 26), oklch(0.725 0.166 30));
    --background-color-error: light-dark(
        oklch(0.579 0.201 26),
        oklch(0.662 0.217 29)
    );
    --background-color-error--hover: light-dark(
        oklch(0.662 0.217 29),
        oklch(0.725 0.166 30)
    );
    --background-color-error--active: light-dark(
        oklch(0.482 0.144 31),
        oklch(0.812 0.105 31)
    );
    --background-color-error-subtle: light-dark(
        oklch(0.951 0.025 30),
        oklch(0.349 0.092 32)
    );
    --border-color-error: light-dark(
        oklch(0.482 0.144 31),
        oklch(0.662 0.217 29)
    );
    --border-color-error--hover: light-dark(
        oklch(0.662 0.217 29),
        oklch(0.725 0.166 30)
    );

    /* Warning: amber */
    --color-warning: light-dark(oklch(0.805 0.151 83), oklch(0.867 0.156 88));
    --background-color-warning-subtle: light-dark(
        oklch(0.962 0.04 90),
        oklch(0.332 0.049 74)
    );
    --border-color-warning: light-dark(
        oklch(0.572 0.101 79),
        oklch(0.867 0.156 88)
    );

    /* Success: green */
    --color-success: light-dark(oklch(0.513 0.094 171), oklch(0.691 0.125 171));
    --background-color-success-subtle: light-dark(
        oklch(0.945 0.022 172),
        oklch(0.327 0.05 171)
    );
    --border-color-success: light-dark(
        oklch(0.456 0.08 171),
        oklch(0.691 0.125 171)
    );

    /* Visited link: violet */
    --color-visited: light-dark(oklch(0.536 0.122 287), oklch(0.713 0.076 297));

    /* Diff content: added (on-hue blue) / removed (amber) */
    --color-content-added: light-dark(
        oklch(0.436 0.12 200),
        oklch(0.791 0.086 200)
    );
    --color-content-removed: light-dark(
        oklch(0.4 0.164 29),
        oklch(0.725 0.166 30)
    );
    --background-color-content-added: light-dark(
        oklch(0.849 0.06 256),
        oklch(0.342 0.06 256)
    );
    --background-color-content-removed: light-dark(
        oklch(0.925 0.095 90),
        oklch(0.332 0.049 74)
    );
    --border-color-content-added: light-dark(
        oklch(0.849 0.06 256),
        oklch(0.342 0.06 256)
    );
    --border-color-content-removed: light-dark(
        oklch(0.925 0.095 90),
        oklch(0.332 0.049 74)
    );
}

/* Use nearest-neighbor scaling for pixelated images */
.cp-image-pixelated {
    image-rendering: pixelated;
}

/**
 * RelatedArticles reserves min-height on its container (163px on desktop,
 * 320px below 1120px) so its cards do not shift the page when they load.
 * Creopedia has no related articles, so the container stays empty on every
 * page and that reserved space renders as a large gap between the category
 * bar and the footer.
 */
html.client-js .read-more-container {
    min-height: 0;
}

html.client-js .read-more-container:empty {
    padding: 0;
}
Retrieved from "https://www.creopedia.net/w/index.php?title=MediaWiki:Common.css&oldid=39564"