Jump to content

MediaWiki:Common.css

From The Fashion Codex

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 {
    --font-size-medium: 0.875rem;
    --line-height-medium: 1.5714285;
    --background-color-base: #F0F6Fb;
    --color-main: #060809;
    --color-body: #495259;
    --color-disabled: #7E97A7;
    --color-border: #a2a9b1;
    --color-surface: #f9f9f9;
}

@media screen and (max-width: 600px) {
    .wikitable {
        width: 100%;
        table-layout: auto;
    }
    .wikitable td {
        width: 100%;
        display: block;
    }
}

body.page-Main_Page h1.firstHeading {
    display: none !important;
}

@media screen {
    body {
        background-color: var(--background-color-base);
        color: var(--color-body);
    }

    body, .mw-body-content, .mw-body-content h3, .mw-body-content h4,
    h3, h4 {
        font-family: 'Asap', sans-serif !important;
        font-style: normal !important;
        letter-spacing: -0.006em;
    }

    .mw-body-content h2 {
        font-size: 1.75em;
    }

    .mw-body-content h3 {
        font-size: 1.125em;
        font-weight: 550;
    }

    .mw-sidebar {
        background-color: transparent;
        padding: 8px;
    }

    .mw-navigation {
        background-color: var(--background-color-base);
    }

    strong, b {
        color: var(--color-main) !important;
    }

    .mw-body-content h1, .mw-body-content h2, h1, h2 {
        font-family: 'EB Garamond', serif !important;
        font-style: normal !important;
        font-weight: 500;
        letter-spacing: 0.004em !important;
    }

    .mw-page-container, .sidebar-toc {
        background-color: var(--background-color-base);
    }

    .sidebar-toc::after {
        content: none !important;
        display: none !important;
    }

    .sidebar-toc .sidebar-toc-toggle {
        top: 6px;
    }

   /* Remove layout constraints from the logo container */
.mw-logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Reset the icon container */
.mw-logo-icon {
    display: block !important;
    width: auto !important;
    height: 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}


/* Properly scale the actual image */
.mw-logo-icon img, .mw-logo-icon svg  {
    width: auto !important;
    height: 70% !important;
    max-height: 20px;   /* Adjust as needed */
    max-width: 100%;    /* Prevent overflow */
    object-fit: contain;
    display: block;
}

.vector-header .vector-wordmark {
     display: none !important;
    }
 .mw-logo-wordmark {
     display: none !important;
    }
 .vector-menu-portal .vector-menu-content li {
        margin: 0;
        padding: 0.5em 0;
        font-size: 0.75em;
        line-height: 1em;
        word-wrap: break-word;
    }

    .vector-sidebar-container {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--color-surface);
    }

    .vector-menu-portal {
        border-radius: 12px;
        margin-bottom: 8px;
        overflow: hidden;
    }

    .vector-pinned-container {
        background-color: var(--background-color-base) !important;
    }

    .vector-dropdown-content .mw-list-item a,
    .vector-pinnable-element .mw-list-item a {
        display: flex;
        align-items: center;
        padding: 6px 0;
        color: var(--color-main) !important;
        background-color: var(--background-color-base) !important;
    }

    .vector-dropdown .vector-dropdown-content {
        border: 1px solid var(--color-border) !important;
        box-shadow: none;
        border-radius: 4px !important;
    }

    a {
        text-decoration: none;
        font-weight: 700;
        color: var(--color-main) !important;
        background: none;
    }

    a:not([href]), a:visited, a:active {
        font-weight: 700;
        color: var(--color-main) !important;
    }

    a.new {
        color: var(--color-disabled) !important;
        text-decoration: none;
    }

    a.new:hover {
        color: var(--color-body) !important;
        text-decoration: underline !important;
    }

    #bodyContent a {
        text-decoration: underline;
    }

    #bodyContent .mw-editsection a {
        text-decoration: none !important;
    }

    .wikitable {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: 1px solid var(--color-border)!important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background-color: var(--color-surface) !important;
    }

    .wikitable th, .wikitable td {
        border: none !important;
        background-clip: padding-box !important;
    }


    .wikitable tr:first-child td:first-child {
        border-top-left-radius: 4px !important;
    }

    .wikitable tr:first-child td:last-child {
        border-top-right-radius: 4px !important;
    }

    .wikitable tr:last-child td:first-child {
        border-bottom-left-radius: 4px !important;
    }

    .wikitable tr:last-child td:last-child {
        border-bottom-right-radius: 4px !important;
    }

    .wikitable > tr > th,
    .wikitable > tr > td,
    .wikitable > * > tr > th,
    .wikitable > * > tr > td {
        border: 1px solid var(--color-border);
        padding: 0.4em 0.8em;
    }

    .vector-body .wikitable h3 a {
        font-weight: 600 !important;
        font-size: 1em;
    }

    caption {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .box-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .box {
        width: 25%;
        box-sizing: border-box;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 16px;
        background-color: var(--color-surface);
        box-shadow: none;
    }

    .box:last-child {
        margin-right: 0;
    }

    @media (max-width: 900px) {
        .box-container {
            flex-direction: column;
            align-items: center;
        }
    }

    /* Optional: hide namespace prefix */
    #firstHeading .mw-page-title-namespace,
    #firstHeading .mw-page-title-separator {
        display: none;
    }
}

li a {
    text-decoration: none !important;
}

li a:hover {
    text-decoration: underline !important;
}

.vector-main-menu-landmark {
    margin-right: 16px !important;
}