@import 'mediawiki.skin.variables';
@import 'variables.less';

/* ***** 기본 기능 인터페이스에 대한 보정 ***** */

/* *** 기본 기능 인터페이스에 대한 보정 *** */
/* 특수 문서, 편집 화면 등 */
body.ns-special, body.action-edit {
    /* input의 글자 크기 14px -> 16px로 조정. 모바일 확대 방지. */
    .oo-ui-textInputWidget .oo-ui-inputWidget-input {
        font-size: @font-size-medium;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 2em;
    }
}


/* *** '특수 문서'에 대한 인터페이스 보정 *** */
body.ns-special {
    line-height: 1.6;

    /* '특수:특수문서', '특수:버전'의 소제목의 상단 여백 */
    &.ns-special.mw-special-Specialpages, &.mw-special-Version {
        .mw-body-content > h2 {
            margin-top: 1em;
        }
    }

    /* '특수:올리기' 문서 */
    &.mw-special-Upload {
        @media ( max-width: calc(@width-breakpoint-tablet - 1px) ) {
            .mw-body-content .mw-htmlform {
                /* 파일 업로드 화면에 600px 이하에서 깨지므로 보정 */
                .mw-input input[name='wpDestFile'] {
                    width: 100%;
                    box-sizing: border-box;
                }
            }
        }
        textarea#wpUploadDescription {
            background-color: inherit;
            color: @color-text-base;
        }
    }

    /* '특수:버전' 문서 */
    &.mw-special-Version {

        @media ( min-width: @width-breakpoint-tablet ) {
            /* '특수:버전'문서의 표의 '저자'의 폭 줄임. */
            .mw-version-ext-authors {
                min-width: 10em;
                max-width: 15em;
            }
        }

        @media ( max-width: calc(@width-breakpoint-tablet - 1px) ) {
            /* '특수:버전' 문서에서 테이블의 responsive fix */
            table.wikitable {
                display: block;
                overflow-x: auto;
                overflow-y: hidden;
                border: 0;
                background-color: inherit;

                /*
                tbody {
                    background-color: #f8f9fa;
                }
                */

                th, td {
                    white-space: nowrap
                }

                &#sv-ext {
                    th[colspan="5"]{
                        text-align: left;
                        padding-left: 0.5em;
                    }
                }
            }
        }
    }

}


/* 편집 화면 */
.mw-body-content .mw-editform {
    .wikiEditor-ui .wikiEditor-ui-text textarea {
        font-size: @font-size-medium;
        color: @color-text-base;
        background: @color-bg-base;
    }
    .wikiEditor-ui-toolbar {
        background: var(--color-bg-editor-ui-toolbar);

        .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
            color: var(--color-text-editor-ui-toolbar);
        }
        .group .label {
            color: var(--color-text-editor-ui-toolbar-secondary);
        }
        .tabs span.tab a {
            color: @color-link-base;
        }
    }

    .editOptions {
        /* 편집 화면의 하단, 요약, 사소한 편집 등이 나타나는 영역 */
        font-size: @font-size-small;

        /* 색상 */
        background-color: @color-bg-secondary;
        color: inherit;

        #editpage-copywarn {
            padding-top: 1em;
            padding-bottom: 1em;
        }
    }
    .wikiEditor-ui-toolbar {
        /* 에디터의 툴바 부분 */
        font-size: @font-size-small;
    }
    .mw-editTools {
        font-size: @font-size-small;
    }
}


/* ***** 극단적으로 작은 화면에 대한 보정 ***** */
/* 폭 280px를 최소의 마지노선으로 보고 있음. */
/* 매우 작은 사이즈에 대해 특수하게 fix하는 부분 */
@media screen and (max-width: 300px) {
    /* 이제는 안 쓰는 듯함 */
    /* 290으로 되어있는 것을 변경함 */
    /*
    .mw-ui-vform {
        width: inherit;
    }
    */

    /* '최근 목록', '주시목록 최근 바뀜', '가리키는 글의 최근 바뀜' 등에서 화살표가 나타날 수 있는 공간. 15px 정도인데, 공간 아끼려고.. */
    .mw-enhancedchanges-arrow-space {
        width: 0; /* 15px인데, 아끼려고.. */
    }
}

/* 가리키는 글의 최근 바뀜 */
body.ns-special.mw-special-Recentchangeslinked {
    /* 380 이하의 매우 작은 화면에서 깨지는 것 보정 */
    @media screen and (max-width: 380px) {
        /* 가리키는 글의 최근 바뀜 - 문서이름 */
        .mw-recentchanges-table .targetForm .mw-input input[name="target"]{
            width: 100%;
        }
    }
}


/* *** 색상 등과 관련되어서 *** */
body.skin-zephyr {
    .mw-body {
        /* wikitable */
        .wikitable {
            background-color: inherit;
            color: inherit;

            th {
                background-color: @color-bg-wikitable-heading;
                color: @color-text-base;
            }
            > tr > th, > tr > td, > * > tr > th, > * > tr > td {
                border-color: @color-border-secondary;
            }
        }

        /* pre 태그 */
        pre {
            background-color: @color-bg-tertiary;
            color: inherit;
            border-color: @color-border-tertiary;
            border-radius: 0.5em;
        }

        /* 본문 하단의 카테고리 부분 */
        .catlinks {
            /*background-color: @color-bg-tertiary;*/
            background-color: inherit;
            border-color: @color-border-secondary;
            font-size: @font-size-small;
        }

        /* '로그인'에서 버튼, 최근 바뀜의 이름공간/태그필터 등의 select, input */
        .mw-input {
            select, input {
                border-radius: 2px;
                padding: 4px 8px;
                /*height: 2em;*/
                border: 1px solid #a2a9b1;
            }
            input {
                font-size: 1rem;
            }
        }
        /* '추적용 분류'에서 테이블 */
        .mw-datatable {
            td {
               background-color: inherit;
            }
            th {
                background-color: @color-bg-wikitable-heading;
           }
        }
    }
}

/* dark 모드에서만 보정해도 될 경우 */
:root[data-theme='dark'] {
    body.skin-zephyr {
        /* '특수:검색'문서에서 탭 부분 */
        .mw-search-profile-tabs {
            background-color: @color-bg-tertiary;
        }

        /* '특수:검색'문서에서 고급 탭의 옵션 */
        #mw-searchoptions {
            background-color: @color-bg-tertiary;
        }

        .search-types .current a {
            color: @color-link-base;
        }

        /* 상단 검색창에서 입력시 나타나는 연관 문서 목록 */
        .suggestions {
            /*  */
            .suggestions-results {
                background-color: @color-bg-base;
                color: @color-text-base;
            }
            a.mw-searchSuggest-link, a.mw-searchSuggest-link:hover, a.mw-searchSuggest-link:active, a.mw-searchSuggest-link:focus {
                color: @color-text-base;
            }
            /* '다음 어구를 포함하는 문서 검색' */
            .suggestions-special {
                background-color: @color-bg-base;
                color: @color-text-base;

                .special-query {
                    color: @color-text-base;
                }
            }
            /* 목록 중 각 하나 */
            .suggestions-result {
                color: @color-text-base;
            }
            /* 목록 중 커서가 닿았을 때 */
            .suggestions-result-current {
                background-color: #223c71;
            }
        }

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

        /* '특수:검색'문서에서 검색어에서 하단에 나타나는 연관 문서 목록 */
        .oo-ui-menuSelectWidget {
            background-color: @color-bg-base;
            &.oo-ui-optionWidget-highlighted {
                background-color: var(--color-bg-secondary);
            }
        }

        /* oo-ui에서 select/input 밑에 나오는 목록 */
        .oo-ui-menuSelectWidget, .oo-ui-menuOptionWidget {
            &.oo-ui-optionWidget {
                background-color: @color-bg-base;
                color: inherit;
            }
            &.oo-ui-optionWidget-highlighted {
                background-color: var(--color-bg-secondary);
            }
        }

        /* oo-ui에서 select의 ui를 대체하는 요소 */
        .oo-ui-dropdownWidget, .oo-ui-dropdownInputWidget {
            &.oo-ui-widget-enabled {
                .oo-ui-dropdownWidget-handle {
                    background-color: @color-bg-base;
                    color: @color-text-base;
                }
                &.oo-ui-dropdownWidget-open {
                    .oo-ui-dropdownWidget-handle {
                        background-color: @color-bg-secondary;
                    }
                }
            }
            &.oo-ui-widget-disabled {
                background-color: @color-bg-secondary;
                .oo-ui-dropdownWidget-handle {
                    background-color: inherit;
                    color: @color-text-secondary;
                    text-shadow: none;
                }
            }
        }
        .oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
            background-color: @color-bg-base;
        }

        .oo-ui-actionFieldLayout-button {
            background-color: @color-bg-secondary;
            .oo-ui-buttonElement-button {
                background-color: inherit;
                color: @color-text-base;
            }
        }

        .oo-ui-textInputWidget .oo-ui-inputWidget-input {
            color: @color-text-base;
        }

        /* '특수:활동적인사용자'문서의 사용자 표시 input 등 */
        .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
            background-color: inherit;
        }

        .rcoptions, .cloptions {
            /* 최근 바뀜 - 화면 우측의 '범례' 박스 */
            .mw-changeslist-legend {
                background-color: var(--color-bg-base);
            }

        }
        /* 최근 바뀜 - 이름공간, 태그필터 등의 select, input 색상 */
        .mw-input {
            select, input {
                background-color: var(--color-bg-base);
                color: var(--color-text-base);
            }
        }

        /* 파일 상세 페이지의 헤더 탭 */
        #filetoc {
            background-color: @color-bg-tertiary;
        }

        /* 파일 상세 페이지의 '미디어 뷰어에서 열기' 버튼 */
        .mw-ui-button {
            background-color: @color-bg-tertiary;
            color: @color-text-base;
        }
        /* '계정 만들기'에서 우측의 텍스트 */
        .mw-number-text {
            color: inherit;
            h3 {
                color: @color-text-secondary;
            }
        }
        /* '새 파일 목록'문서에서 날짜를 선택하는 요소 */
        .mw-widget-dateInputWidget-handle {
            background-color: @color-bg-secondary;
        }
        /*
        .mw-widget-dateInputWidget-calendar {
            background-color: @color-bg-secondary;
        }*/
        .mw-widget-calendarWidget {
            background-color: @color-bg-secondary;
        }
        .mw-widget-calendarWidget-day {
            color: @color-text-base;
        }
        .mw-widget-calendarWidget-day-additional {
            color: @color-text-secondary;
        }

        .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
            color: @color-text-base;
        }

        &.ns-special {
            .mw-body-content {
                table {
                    /* '문자열 찾아 바꾸기'문서의 입력 textarea */
                    textarea {
                        background-color: @color-bg-base;
                        color: @color-text-base;
                    }

                    /* '문자 역사 합치기' */
                    input#target, input#dest {
                        background-color: @color-bg-base;
                        color: @color-text-base;
                        border: 1px solid @color-border-secondary;
                    }
                }

                /* '문자열 찾아 바꾸기'문서의 옵션 */
                .ext-replacetext-searchoptions {
                    background-color: @color-bg-secondary;
                    color: @color-text-secondary;
                }
            }

            &.mw-special-ApiSandbox {
                /* 'API 실험실' */
                .mw-apisandbox-toolbar {
                    background-color: @color-bg-secondary;
                    color: @color-text-secondary;
                }
            }
            /* 'API 실험실' */
            .oo-ui-outlineOptionWidget {
                background-color: @color-bg-secondary;
                color: @color-link-base;
                &:hover {
                    background-color: @color-bg-tertiary;
                }
            }
            .mw-prefs-buttons {
                background-color: @color-bg-secondary;
                color: @color-link-base;
            }
            .oo-ui-tabSelectWidget-framed {
                background-color: @color-bg-secondary;
            }
            .oo-ui-optionWidget-selected {
                background-color: @color-bg-secondary;
                color: @color-text-base;
            }
        }

        ol.references li:target, sup.reference:target {
            background-color: @color-bg-tertiary;
        }

        /* math 확장 기능 연관 */
        .mwe-math-fallback-image-inline,
        .mwe-math-fallback-image-display {
            filter: hue-rotate(180deg) invert(1);
        }

        /* page history */
        #pagehistory li.selected {
            background-color: @color-bg-tertiary;
            color: inherit;
            outline: 1px dashed #a2a9b1;
        }

        /* redirect arrow */
        .mw-content-ltr .redirectText li {
            filter: hue-rotate(180deg) invert(1);
        }

        /* 삭제하려는 문서가.. 알림 블럭 */
        .mw-message-box-warning {
            background-color: @color-bg-tertiary;
            border-color: @color-link-base;
        }
        .mw-message-box {
            color: @color-link-base;
        }
        /* 위키에디터에서 링크 넣기 등의 도구 */
        .ui-widget-content {
            /*border-color: */
            background: @color-bg-tertiary;
            color: @color-text-base;
        }
        .ui-widget-header {
            background: @color-bg-secondary;
            color: @color-text-base;
        }
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
            background: @color-bg-secondary;
            color: @color-text-secondary;
        }
        .ui-widget-overlay {
            background: @color-bg-secondary;
        }
        /* 텍스트 비교 */
        .diff-addedline {
            border-color: #6d8ba7; /* #a3d3ff */
            .diffchange {
                background: #2f363a;
            }

        }
        .diff-deletedline {
            border-color: #928359; /* #ffe49c */
            .diffchange {
                background: #403c31;
            }
        }
        .diff-context {
            /*background: #242525;*/
            background: @color-bg-base;
            /*color: #ddeaf7;*/
            color: @color-text-base;
            border-color: #9d9fa3; /* #eaecf0 */
        }
    }
}
