MediaWiki:ColorSchemeDark.css

From Elwiki
Revision as of 19:17, 28 January 2024 by Ritsu (talk | contribs)

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Dark mode */
.dark-mode { 
    --accent-color: #41afcc;
    --accent-color-tone-2: #40aac8;
    --accent-color-tone-3: #3a9fbc;
    --border-color: #444444;
    --border-color-tone-2: #838383;
    --theme-tone-1: #171717;
    --theme-tone-2: #242424;
    --theme-tone-3: #3b3b3b;
    --theme-tone-4: #2b2b2b;
    --theme-tone-5: #282828;
    --theme-tone-6: #1f1f1f;
    --theme-tone-7: #323435;
    --theme-tone-8: #4c4f53;
    --theme-tone-9: var(--theme-tone-8);
    --text-color: #e8e8e8;
    --text-color-invert: black;
    --inactive-color: #c4c4c4;
}

#dark-mode-switch {
    height: 40px;
    width: 40px;
    position: fixed;
    border-radius: 50%;
    background: var(--theme-tone-1);
    z-index: 6666;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    place-content: center;
    transition: background-color 0.3s;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

#dark-mode-switch:hover {
    animation: wobble 1s;
    background-color: var(--accent-color);
}
#dark-mode-switch:hover::before {
    filter: brightness(2);
}

#dark-mode-switch.new::after {
    content: "NEW!";
    position: absolute;
    top: -15px;
    right: -23px;
    font-weight: 500;
    color: #fff;
    background: #dc3545;
    padding: 0.125rem 0.25rem;
    border-radius: 0.2rem;
    font-size: 0.8rem;
}

#dark-mode-switch::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-image: url("/svg/sun.svg");
    background-size: contain;
    color: red;
    transition: filter 0.3s;
}

.dark-mode #dark-mode-switch::before {
    background-image: url("/svg/moon.svg");
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translate(-4%) rotate(-5deg);
    }
    30% {
        transform: translate(4%) rotate(3deg);
    }
    45% {
        transform: translate(-2.5%) rotate(-3deg);
    }
    60% {
        transform: translate(1.25%) rotate(2deg);
    }
    75% {
        transform: translate(-2.5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

.dark-mode #mw-content-container {
    background-color: var(--theme-tone-4);
}

.dark-mode #personal .dropdown:before {
    border-bottom-color: var(--border-color);
}

.dark-mode #personal .dropdown:after {
    border-bottom-color: var(--theme-tone-6);
}

.dark-mode #p-logo-text a {
    color: var(--border-color-tone-2);
}
.dark-mode #personal-extra,
.dark-mode .server-time-image-wrap,
.dark-mode .tools-inline li a,
.dark-mode .tools-inline li a span,
.dark-mode #mw-data-after-content img,
.dark-mode .mw-editsection,
.dark-mode .mw-editsection a,
.dark-mode span.oo-ui-iconElement-icon:not(.oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-destructive, .oo-ui-icon-success, .oo-ui-image-success),
.dark-mode span.oo-ui-fieldLayout-field span:not(#movepage span, .tdg-templateDataDialog-panels span),
.dark-mode .postedit:after,
.dark-mode #mw-indicator-mw-helplink a,
.dark-mode
    .oo-ui-buttonElement.oo-ui-widget-enabled
    > .oo-ui-buttonElement-button
    > .oo-ui-iconElement-icon:not(.oo-ui-image-invert, .oo-ui-image-destructive),
.dark-mode
    .oo-ui-buttonElement.oo-ui-widget-enabled
    > .oo-ui-buttonElement-button
    > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
.dark-mode .flow-component .mw-ui-icon::before,
.dark-mode
    .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search
    > .oo-ui-indicatorElement-indicator,
.dark-mode div.magnify a,
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after,
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications:after,
.dark-mode #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after,
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator,
.dark-mode .flow-ui-tooltip .mw-ui-icon.mw-ui-icon-element:before,
.dark-mode .ui-widget-header .ui-icon,
.dark-mode .oo-ui-indicator-down:not(select),
.dark-mode .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
.dark-mode .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator,
.dark-mode .ve-ui-mwTemplateDialog .oo-ui-indicatorElement-indicator.oo-ui-indicator-required,
.dark-mode .mw-content-ltr .redirectText li:first-child a,
.dark-mode .mw-content-ltr .redirectText li:first-child,
.dark-mode .mwe-math-element img,
.dark-mode .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
.dark-mode .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
    filter: invert(1);
}
.client-js .dark-mode .mw-echo-special-nojs {
    filter: invert(1) brightness(4);
}
.dark-mode .warningbox,
.dark-mode .postedit.mw-notification {
    background-color: var(--theme-tone-7);
    border-color: var(--border-color);
    color: var(--text-color);
}
.dark-mode .mw-body .mw-parser-output h2:not(.toctitle h2) {
    background-image: url("https://elwiki.net/wiki/images/c/cc/Asset_-_Header_%28Dark%29.png");
}
.dark-mode .oo-ui-icon-stop,
.dark-mode .mw-ui-icon-stop:before,
.dark-mode div#mw-input-wpecho-subscriptions .oo-ui-checkboxInputWidget-checkIcon,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-last.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-next.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-previous.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-first.oo-ui-image-progressive,
.dark-mode
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button,
.dark-mode
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button
    span.oo-ui-labelElement-label,
.dark-mode .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field,
.dark-mode
    span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonInputWidget,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-check.oo-ui-image-success,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-image-invert.oo-ui-icon-pushPin {
    filter: invert(0) !important;
}
.dark-mode #mw-indicator-mw-helplink a {
    color: black;
    font-weight: 500;
}
.dark-mode .mw-plusminus-pos {
    color: #abff8e;
}
.dark-mode .mw-plusminus-neg {
    color: #ff6565;
}
.dark-mode .autocomment,
.dark-mode .autocomment a,
.dark-mode .autocomment a:visited {
    color: #b6bdc4;
}
.dark-mode code {
    background-color: var(--theme-tone-4);
    color: #a4ff4f;
    border-color: var(--border-color-tone-2);
}
.client-js .dark-mode .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.dark-mode .jquery-tablesorter th.headerSort {
    background-image: url("/svg/sort-white.svg");
}
.dark-mode .jquery-tablesorter th.headerSortDown {
    background-image: url("/svg/sort-white-down.svg");
}
.dark-mode .jquery-tablesorter th.headerSortUp {
    background-image: url("/svg/sort-white-up.svg");
}
.dark-mode .oo-ui-pendingElement-pending {
    background-color: var(--theme-tone-6);
    background-image: linear-gradient(
        135deg,
        var(--theme-tone-8) 25%,
        transparent 25%,
        transparent 50%,
        var(--theme-tone-8) 50%,
        var(--theme-tone-8) 75%,
        transparent 75%,
        transparent
    );
}
.dark-mode .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1);
}
.dark-mode #mw-createaccount-join {
    background-color: var(--theme-tone-4);
    color: var(--text-color);
    border-color: var(--border-color-tone-2);
}
.dark-mode #mw-createaccount-join:hover {
    background-color: var(--theme-tone-7);
    border-color: var(--border-color-tone-2);
}
.dark-mode #searchInput {
    background-color: var(--theme-tone-4);
}
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge:focus:after,
#pt-notifications-notice .mw-echo-notifications-badge:focus:after {
    border-color: #fff;
}
.dark-mode .wikiEditor-ui ::-webkit-resizer,
.dark-mode textarea::-webkit-resizer {
    border-width: 8px;
    border-style: solid;
    border-color: var(--theme-tone-6) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-6);
}
.dark-mode .wikiEditor-ui .sections ::-webkit-resizer {
    border-color: var(--theme-tone-7) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-7);
}
.dark-mode .filehistory a img,
.dark-mode #file img:hover {
    background: var(--theme-tone-7)
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVQokWPU09NjwAYsLS2xijNhFcUDRjUQA1hwhffx48epY8OoBmIAADF+BFc0Ips+AAAAAElFTkSuQmCC");
}
Retrieved from "https://elwiki.net:443/wiki/index.php?title=MediaWiki:ColorSchemeDark.css&oldid=913464"