MediaWiki:Common.css

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.

:root {
    --background-opacity: 0.05;
    --background-color: rgb(47 47 47);

    --primary-color: rgb(31 31 31);
    --secondary-color: rgb(63 63 63);
    --tertiary-color: rgb(15 15 15);
    --accent-color: rgb(255 255 255);

    --border-radius: 8px;
    --border-radius-vh: 0.8vh;

    --paragraph-font: "Quicksand", sans-serif;
    --heading-font: "Puffet", sans-serif;

    --surface-opacity: 0.7;
}


/* =========================================================
   PAGE BACKGROUND
   ========================================================= */

html {
    background-color: var(--tertiary-color);
}

body {
    background-color: transparent;

    background-image:
        linear-gradient(
            rgb(15 15 15 / var(--background-opacity)),
            rgb(15 15 15 / var(--background-opacity))
        ),
        url("https://blacket.wiki/images/2/26/Background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: var(--accent-color);
    font-family: var(--paragraph-font);
}


/* =========================================================
   VECTOR 2022 — TRANSPARENT / SEMI-TRANSPARENT SURFACES
   ========================================================= */

/* Main Vector page container */
.mw-page-container {
    background-color: rgb(
        31 31 31 / var(--surface-opacity)
    ) !important;
}


/* Header */
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
    background-color: rgb(
        31 31 31 / var(--surface-opacity)
    ) !important;
}


/* Main article area */
#content {
    background-color: transparent !important;
}


/* Main article content */
#bodyContent {
    background-color: transparent !important;
}


/* Page title / toolbar */
.vector-page-titlebar,
.vector-page-toolbar {
    background-color: transparent !important;
}


/* Sidebar */
.vector-column-start,
.vector-column-end,
.vector-sidebar,
.vector-pinned-container {
    background-color: transparent !important;
}


/* =========================================================
   COLORS
   ========================================================= */

body,
.vector-body {
    color: var(--accent-color);
}

.mw-page-title-main {
    color: var(--accent-color);
    font-family: var(--heading-font);
}

a {
    color: var(--accent-color);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.vector-body {
    font-family: var(--paragraph-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--accent-color);
}


/* =========================================================
   BORDERS
   ========================================================= */

.mw-page-container {
    border-radius: var(--border-radius);
}