Contents

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.
/* ============================================================
   WIKIPARTNER
   GLOBAL BRAND + LIGHT / DARK THEME
============================================================ */


/* ============================================================
   LIGHT THEME VARIABLES
============================================================ */

:root {
    --wp-teal: #0F6B65;
    --wp-teal-dark: #09534E;
    --wp-teal-soft: #EEF6F5;

    --wp-gold: #E8A33D;

    --wp-blue: #3E7CB1;

    --wp-navy: #12233F;

    --wp-charcoal: #2B2B2B;

    --wp-cream: #FAF7F2;

    --wp-text: #2B2B2B;
    --wp-muted: #6D7378;

    --wp-border: #DDDAD3;

    --wp-page-bg: #FAF9F7;

    --wp-surface: #FFFFFF;
    --wp-surface-soft: #FAF7F2;

    --wp-heading: #12233F;
}


/* ============================================================
   DARK THEME VARIABLES
============================================================ */

html.wp-theme-dark {
    color-scheme: dark;

    --wp-teal: #69C9BD;
    --wp-teal-dark: #91DDD4;
    --wp-teal-soft: #18332F;

    --wp-gold: #E8B55D;

    --wp-blue: #82B6E1;

    --wp-navy: #F3E8D0;

    --wp-charcoal: #E6ECEA;

    --wp-cream: #142023;

    --wp-text: #E6ECEA;
    --wp-muted: #AAB6B4;

    --wp-border: #2C4043;

    --wp-page-bg: #0B1416;

    --wp-surface: #111D20;
    --wp-surface-soft: #162528;

    --wp-heading: #F0E8D8;
}


/* ============================================================
   BASE
============================================================ */

body.skin-wikipartner {
    background: var(--wp-page-bg);

    color: var(--wp-text);

    font-family:
        Inter,
        Arial,
        sans-serif;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ============================================================
   HEADINGS
============================================================ */

body.skin-wikipartner .mw-parser-output h1,
body.skin-wikipartner .mw-parser-output h2,
body.skin-wikipartner .mw-parser-output h3,
body.skin-wikipartner .mw-parser-output h4,
body.skin-wikipartner .firstHeading {
    color: var(--wp-heading);

    font-family:
        "Source Serif 4",
        Georgia,
        serif;
}


/* ============================================================
   LINKS
============================================================ */

body.skin-wikipartner a {
    color: var(--wp-teal);
}


body.skin-wikipartner a:hover {
    color: var(--wp-teal-dark);
}


/* ============================================================
   MAIN PAGE AREAS
============================================================ */

body.skin-wikipartner .wp-page {
    color: var(--wp-text);
}


body.skin-wikipartner .wp-content {
    color: var(--wp-text);
}


body.skin-wikipartner .wp-article-body {
    color: var(--wp-text);
}


/* ============================================================
   INFOBOX
============================================================ */

body.skin-wikipartner .infobox {
    background: var(--wp-surface-soft) !important;

    color: var(--wp-text) !important;

    border:
        1px solid
        var(--wp-border) !important;
}


body.skin-wikipartner .infobox th {
    background: var(--wp-teal-soft) !important;

    color: var(--wp-heading) !important;
}


body.skin-wikipartner .infobox td {
    color: var(--wp-text) !important;
}


/* ============================================================
   TABLES
============================================================ */

body.skin-wikipartner .mw-parser-output table:not(.infobox) {
    color: var(--wp-text);

    border-color: var(--wp-border);
}


html.wp-theme-dark
body.skin-wikipartner
.mw-parser-output table:not(.infobox) th {
    background: #17272A;

    color: var(--wp-heading);

    border-color: var(--wp-border);
}


html.wp-theme-dark
body.skin-wikipartner
.mw-parser-output table:not(.infobox) td {
    background: var(--wp-surface);

    color: var(--wp-text);

    border-color: var(--wp-border);
}


/* ============================================================
   HEADER — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-site-header {
    background:
        rgba(17, 29, 32, 0.98) !important;

    border-color:
        var(--wp-border) !important;

    border-bottom-color:
        var(--wp-teal) !important;

    box-shadow:
        0 5px 22px
        rgba(0, 0, 0, 0.27);
}


/* ============================================================
   SEARCH — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-search {
    background:
        #142225 !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search input[type="search"],
html.wp-theme-dark
body.skin-wikipartner
.wp-search input[type="text"] {
    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search input::placeholder {
    color: #8FA09D !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search button {
    background:
        #142225 !important;

    color:
        var(--wp-teal) !important;

    border-left-color:
        var(--wp-border) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search button:hover {
    background:
        var(--wp-teal-soft) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   SEARCH SUGGESTIONS — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestions {
    background:
        #111D20 !important;

    border-color:
        var(--wp-border) !important;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.4);
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestion,
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestions a {
    color:
        var(--wp-text) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestion:hover,
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestions a:hover,
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestion.is-active {
    background:
        var(--wp-teal-soft) !important;

    color:
        var(--wp-teal) !important;
}


/* ============================================================
   SIDEBARS — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-left-sidebar,

html.wp-theme-dark
body.skin-wikipartner
.wp-right-sidebar {
    color:
        var(--wp-text);
}


html.wp-theme-dark
body.skin-wikipartner
.wp-sidebar-box {
    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-sidebar-title {
    color:
        var(--wp-heading) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-sidebar-static-item {
    color:
        var(--wp-muted) !important;
}


/* ============================================================
   ARTICLE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-content {
    color:
        var(--wp-text) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-article-header {
    color:
        var(--wp-text);
}


html.wp-theme-dark
body.skin-wikipartner
.wp-article-body {
    color:
        var(--wp-text) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.mw-parser-output {
    color:
        var(--wp-text) !important;
}


/* ============================================================
   MEDIAWIKI CONTENT
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.mw-body-content {
    color:
        var(--wp-text) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.mw-body {
    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


/* ============================================================
   FORMS
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
input,

html.wp-theme-dark
body.skin-wikipartner
textarea,

html.wp-theme-dark
body.skin-wikipartner
select {
    background:
        #142225;

    color:
        var(--wp-text);

    border-color:
        var(--wp-border);
}


/* ============================================================
   CODE / PRE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
pre,

html.wp-theme-dark
body.skin-wikipartner
code {
    background:
        #152326;

    color:
        #E2EAE8;

    border-color:
        var(--wp-border);
}


/* ============================================================
   HORIZONTAL RULES
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
hr {
    border-color:
        var(--wp-border);
}


/* ============================================================
   FOOTER — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-footer {
    background:
        #0E191B !important;

    color:
        var(--wp-muted) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-footer a {
    color:
        var(--wp-teal) !important;
}


/* ============================================================
   USER MENU
============================================================ */

body.skin-wikipartner
.wp-user-menu-list {
    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    list-style: none;
}


body.skin-wikipartner
.wp-user-menu-list > li {
    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    list-style: none;
}


/* ============================================================
   USER LINKS — DARK MODE
============================================================ */

html.wp-theme-dark
body.skin-wikipartner
.wp-user-menu-list > li > a {
    color:
        var(--wp-teal) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-user-menu-list > li > a:hover {
    background:
        var(--wp-teal-soft) !important;

    border-color:
        #31514D !important;

    color:
        var(--wp-teal-dark) !important;
}


html.wp-theme-dark
body.skin-wikipartner
.wp-user-menu-list #pt-userpage > a,

html.wp-theme-dark
body.skin-wikipartner
.wp-user-menu-list #pt-createaccount > a {
    background:
        var(--wp-teal-soft) !important;

    border-color:
        #31514D !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   THEME TOGGLE ITEM
============================================================ */

.wikipartner-theme-item {
    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0
        1px
        0
        0 !important;

    padding: 0 !important;

    list-style: none !important;
}


/* ============================================================
   THEME TOGGLE BUTTON
============================================================ */

.wikipartner-theme-toggle {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    margin: 0;
    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    appearance: none;

    cursor: pointer;

    border:
        1px solid
        rgba(179, 137, 56, 0.35);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #FFFDF7,
            #F6EEDC
        );

    color: #155E58;

    box-shadow:
        0 2px 8px
        rgba(18, 35, 63, 0.08),
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, 0.6);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}


/* ============================================================
   THEME BUTTON HOVER
============================================================ */

.wikipartner-theme-toggle:hover {
    transform:
        translateY(-1px)
        rotate(-6deg);

    border-color:
        rgba(179, 137, 56, 0.65);

    box-shadow:
        0 5px 14px
        rgba(18, 35, 63, 0.13),
        0 0 0 3px
        rgba(232, 163, 61, 0.08);
}


.wikipartner-theme-toggle:active {
    transform:
        translateY(0)
        scale(0.93);
}


.wikipartner-theme-toggle:focus-visible {
    outline:
        2px solid
        var(--wp-gold);

    outline-offset: 3px;
}


/* ============================================================
   THEME ICON
============================================================ */

.wp-theme-icon {
    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.wp-theme-icon svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.75;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.wp-theme-star {
    stroke-width: 1.45;
}


.wp-theme-star-small {
    opacity: 0.72;
}


/* ============================================================
   DARK THEME BUTTON
============================================================ */

html.wp-theme-dark
.wikipartner-theme-toggle {
    background:
        linear-gradient(
            145deg,
            #1B3033,
            #101E20
        );

    color:
        #F0BC60;

    border-color:
        rgba(232, 181, 93, 0.38);

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.34),
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, 0.025);
}


html.wp-theme-dark
.wikipartner-theme-toggle:hover {
    color:
        #FFD17B;

    border-color:
        rgba(232, 181, 93, 0.68);

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.4),
        0 0 0 3px
        rgba(232, 181, 93, 0.08);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .wikipartner-theme-toggle {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }


    .wp-theme-icon,
    .wp-theme-icon svg {
        width: 16px;
        height: 16px;
    }

}
Retrieved from "https://en.wikipartner.org/index.php?title=MediaWiki:Common.css&oldid=108"