사용자:Larodi/darkmode

최근 편집: 2020년 6월 21일 (일) 13:30
Larodi (토론 | 기여)님의 2020년 6월 21일 (일) 13:30 판 (새 문서: <code>2020년 6월 21일 13시 29분 업데이트</code> 배터리를 아끼기 위해 작업해본 페미위키 다크모드입니다. 자신의 사용자문서 css(<code>사용...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

2020년 6월 21일 13시 29분 업데이트

배터리를 아끼기 위해 작업해본 페미위키 다크모드입니다. 자신의 사용자문서 css(사용자:닉네임/femiwiki.css)에 아래 코드를 추가하면 다크모드를 사용할 수 있습니다. 해당 문서가 없으면 만드신 후 넣으면 됩니다. 자바스크립트 문서는 못 건드리고 css로만 하다 보니 엉성할 수 있습니다. 쓰시다가 불편한 점을 발견하시면 이 문서의 토론문서에 의견을 남겨 주세요. 코드는 수시로 업데이트됩니다.

 .mw-body {

    #mw-notification-area {
        .mw-notification {
            border: solid 1px #19456b;
            background-color: #3e4e5c;
        }
    }
}

.mw-body-content {
    a.external {
        color: @color3;
    }

    a.new {
        color: #fa7f8e;

        &:visited {
            color: #bf7878;
        }
    }

    a.stub {
        color: #e64c6a;
    }

    // @See https://femiwiki.com/w/Topic:Tvsoi1ez3qwf7l7b
    s,
    strike {
        color: gray;
    }

    code {
        color: gainsboro;
        background-color: #707070;
        border: 1px solid #a1a1a1;
    }

    // Headings
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #f1f1f1;
    }

    h2 {
        border-bottom: 2px solid #c1b1e3;
    }

    h3 {
        border-bottom: 1px dotted #c1b1e3;
    }

    hr {
        background-color: #a2a9b1;
        border: 0;
        margin: 0.2em 0;
    }

    table.wikitable {
        // IE needs inline-block to position scrolling shadows otherwise use:
        background-color: transparent;
    }

    // CSS only Responsive Tables
    // http://dbushell.com/2016/03/04/css-only-responsive-tables/
    // by David Bushell
    .wikitable,
    .wikitable--flip tbody {
        -webkit-overflow-scrolling: touch;
        background: -webkit-radial-gradient(left ellipse,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0) 75%) 0 center,
            -webkit-radial-gradient(right ellipse,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0) 75%) 100% center;
        background: radial-gradient(ellipse at left,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0) 75%) 0 center,
            radial-gradient(ellipse at right,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0) 75%)
    }

    .wikitable th:first-child,
    .wikitable td:first-child,
    .wikitable--flip tbody tr:first-child {
        background-image: -webkit-linear-gradient(left,
                white 50%,
                rgba(255, 255, 255, 0) 100%);
        background-image: linear-gradient(to right,
                white 50%,
                rgba(255, 255, 255, 0) 100%);
    }

    .wikitable th:last-child,
    .wikitable td:last-child,
    .wikitable--flip tbody tr:last-child {
        background-image: -webkit-linear-gradient(right,
                white 50%,
                rgba(255, 255, 255, 0) 30%);
        background-image: linear-gradient(to left,
                white 50%,
                rgba(255, 255, 255, 0) 30%);
    }

    .wikitable th {
        color: gainsboro;
    }

    .wikitable > * > tr > th,
    .wikitable > * > tr > td {
        background-color: transparent;
        border: 1px solid #ddd;
    }

    textarea:not(.ve-init-mw-tempWikitextEditorWidget) {
        border: 1px solid #c8ccd1;
        box-sizing: border-box;
    }

    *:not(.mw-highlight) > pre:not(.CodeMirror-line) {
        background-color: #a1a1a1;
        color: gainsboro;
        white-space: pre-wrap;
    }

    .mw-highlight > pre {
        background-color: #adadad;
        color: gainsboro;
    }

    #contentSub {
        color: #868f96;

        .flaggedrevs_short {
            background-color: transparent;
        }
    }

    #mw-content-text {
        .mw-warning {
            border: 1px solid #a2a9b1;
            background-color: #696969;
        }

        .magnify {
            a {}
        }
    }

    .catlinks,
    #mw-content-text .mw-parser-output .fw-catlinks {
        border: 0 solid #a2a9b1;
        background-color: transparent;

        ul {}
    }

    .fw-catlinks-toggle {
        color: #bababa;
        background-color: transparent;
    }

    .btn,
    .btn:hover,
    .btn:visited {
        color: gainsboro;
        background-color: #7975a1;
    }

    // VisualEditor
    .ve-init-mw-desktopArticleTarget-toolbar,
    .ve-init-mw-desktopArticleTarget-toolbarPlaceholder {
        margin: 0;
    }
}

.mw-parser-output {

    // Table of contents
    .toc {
        background-color: inherit;

        ul,
        // Override mediawiki.legacy
        ul ul {

            li {
                .tocnumber {
                    color: gainsboro;
                }
            }
        }

        &::before {
            border-bottom: 2px solid #8981d3;
        }

        &::after {
            border-top: 2px solid #8981d3;
        }
    }

    // Interwiki Styling
    a.extiw,
    a.extiw:active {
        color: #6394eb;
    }

    a.extiw:visited {
        color: #c28cc2;
    }

    a.extiw:active {
        color: #e89664;
    }

    // External links
    a.external:active {
        color: #e89664;
    }

    // Links
    a.external {
        color: #b6b6f0;
    }

    a.new {
        color: #fa7f8e;

        &:visited {
            color: #bf7878;
        }
    }

    // Image
    .thumb {

        .thumbinner {
            background-color: #3d3d3d;
            border: 1px solid #c8ccd1;
        }

    }

    .thumbimage {
        background-color: #333333;
        border: 1px solid #c8ccd1;
    }

}

body {
    background-color: #333333;
    color: gainsboro;
}

a {
    color: #b6b6f0;
}

a.new {
    color: #fa7f8e !important;

    &:visited {
        color: #bf7878;
    }
}

#p-header #p-title-and-tb h1.firstHeading,
.oo-ui-window .mw-body-content h1.firstHeading {
    color: gainsboro;
}

.mw-body-content .mw-highlight > pre {
    color: gainsboro;
    background-color: #444444;
}

.mw-plusminus-pos {
    color: YELLOWGREEN;
}

.mw-plusminus-neg {
    color: #f09880;
}

.mw-special-Recentchanges .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd),
.mw-special-Recentchangeslinked .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd),
.mw-special-Watchlist .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd) {
    background-color: #343434;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
    background: #444444;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: #555555;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: gainsboro;
}

bdi {
    color: gainsboro;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: #555555;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
    background-color: #444444;
}

.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert),
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert) {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
    background-color: #343434;
}

.mw-special-Recentchanges .mw-body #bodyContent div.mw-changeslist h4,
.mw-special-Recentchangeslinked .mw-body #bodyContent div.mw-changeslist h4,
.mw-special-Watchlist .mw-body #bodyContent div.mw-changeslist h4 {
    color: gainsboro;
}

.nav-bar #mw-navigation #p-search #searchInput {
    background-color: #333333;
}

.nav-bar #mw-navigation #site-navigation a {
    color: gainsboro;
}

#fw-menu .mw-portlet h3,
#fw-menu .portal h3 {
    color: gainsboro;
}

.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    color: gainsboro;
}

.mwe-popups .mwe-popups-extract {
    a {
        color: #333333;
    }
}

@media screen {
    a:visited {
        color: #b6b6f0;
    }
}

.mw-parser-output a.external {
    color: #b6b6f0;
}

.oo-ui-panelLayout-padded {
    padding: 1.14285714em;
    background-color: #333333;
}

.oo-ui-processDialog-location,
.ve-ui-mwSaveDialog-options {
    background-color: #444;
}

.ve-ui-mwSaveDialog-license {
    color: gainsboro;
}

.mw-parser-output .notice {
    color: gainsboro;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    color: gainsboro;
}

/* 바뀐글 페이지에서 나오는 이름공간과 태그 글자색*/
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: inherit;
    background-color: dimgray;
}

/* 검색창에 입력되는 글자색 */
.nav-bar #mw-navigation #p-search #searchInput {
    color: gainsboro;
}

/* 문서 저장시 경고창 */
.oo-ui-messageDialog-message {
    color: gainsboro;
}

/* 문서 저장시 경고창, 바뀐글 버튼 */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    color: gainsboro;
    background-color: #333;
    &
}

/* 바뀐글 버튼 hover */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: gainsboro;
}

.mw-parser-output .인용문 {
    background-color: #444;
}

.mw-body-content *:not(.mw-highlight) > pre:not(.CodeMirror-line) {
    background: #ddd;
}

/* 인라인 코드 */
.mw-parser-output kbd {
    background-color: transparent;
}

/* 책날개 사이드바 */
.book-flap-side {
    background-color: #444;
}

/* 목차 순서리스트 */
.mw-parser-output .toc ul li .tocnumber,
.mw-parser-output .toc ul ul li .tocnumber {
    color: gainsboro;
}

.mw-body-content .wikitable {
    background-color: transparent;
    color: gainsboro;
}

.flow-component.flow-board-page.flow-full-height-side-rail .flow-board-header:before {
    background-color: #444;

}

.flow-topic-titlebar {
    background-color: #444;
}

.flow-post {
    color: gainsboro;
}

span.mw-ui-icon {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

/* 게시판 텍스트박스 */
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ce-documentNode,
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ui-surface-placeholder {
    background: #555;
}

.flow-component .flow-ui-editorWidget-focused > .flow-ui-editorWidget-editor > .oo-ui-toolbar > .oo-ui-toolbar-bar {
    background: #555;
}

.mw-body-content code {
    color: #F8C471;
    background: #555;
    border: 1px solid #333;
}

.diff-context {
    background: #555;
    color: gainsboro;
}

/*편집 되돌리기 시 변경사항 폰트색*/
body.action-edit .diff-deletedline, body.action-edit .diff-addedline {
    color: #333;
}

/*내비게이션바 바뀐글 및 임의글 폰트색*/
.nav-bar #mw-navigation #site-navigation a {
    color: white;
}