미디어위키:Dialogs.css

/* =========================================
   COASTLINE: BLACK ICE - Dialogs
   ========================================= */

/* 업로드 다이얼로그 */
.oo-ui-window-content, .oo-ui-dialog-content {
    background: #171717 !important;
    color: #e2e2e2 !important;
}
.oo-ui-panelLayout:not(.oo-ui-stackLayout):not(.oo-ui-indexLayout-stackLayout) {
    background: #171717 !important;
    color: #e2e2e2 !important;
}
.oo-ui-fieldLayout, .oo-ui-inputWidget input, .oo-ui-textInputWidget input, .oo-ui-selectWidget {
    background: #171717 !important;
    color: #e2e2e2 !important;
    border: 1px solid #854369 !important;
}
.oo-ui-window-head, .oo-ui-window-foot {
    background: #0a0909 !important;
    border-color: #854369 !important;
}
.oo-ui-selectFileInputWidget, .oo-ui-selectFileWidget {
    background: #171717 !important;
    color: #e2e2e2 !important;
    border: 1px solid #854369 !important;
}
.oo-ui-buttonElement-button {
    background: #171717 !important;
    color: #e2e2e2 !important;
    border: 1px solid #854369 !important;
}
.oo-ui-buttonElement-button:hover {
    background: #2a1a24 !important;
    border-color: #b45c8f !important;
}
.oo-ui-processDialog-location {
    background: #0a0909 !important;
    color: #e2e2e2 !important;
    border-bottom: 1px solid #854369 !important;
}
.mw-upload-bookletLayout-filePreview {
    background: #171717 !important;
    border: 1px solid #854369 !important;
}
.oo-ui-inputWidget-input {
    background: #171717 !important;
    color: #e2e2e2 !important;
    border: 1px solid #854369 !important;
}
.oo-ui-textInputWidget-autosized {
    background: #171717 !important;
    color: #e2e2e2 !important;
}


/* =========================================
   CLBI / OOUI edit-cancel diff dialog scroll hotfix
   =========================================
   MediaWiki의 편집 취소/이탈 확인 diff 창처럼 내용이 긴
   OOUI ProcessDialog가 화면 높이를 넘을 때, 아래 확인/취소
   버튼이 뷰포트 밖으로 밀려 클릭할 수 없던 문제를 막는다.

   핵심:
   - overlay/window manager 자체가 세로 스크롤을 받을 수 있게 함
   - modal frame은 화면 높이를 넘지 않게 제한
   - dialog body/panel 내부만 스크롤되게 함
   - header/footer는 OOUI 기본 위치를 유지
*/

.oo-ui-windowManager-modal,
.oo-ui-defaultOverlay {
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.oo-ui-windowManager-modal .oo-ui-dialog,
.oo-ui-windowManager-modal .oo-ui-window,
.oo-ui-defaultOverlay .oo-ui-dialog,
.oo-ui-defaultOverlay .oo-ui-window {
    max-height: calc(100vh - 24px) !important;
}

.oo-ui-windowManager-modal .oo-ui-window-frame,
.oo-ui-defaultOverlay .oo-ui-window-frame {
    max-height: calc(100vh - 24px) !important;
}

.oo-ui-windowManager-modal .oo-ui-dialog-content,
.oo-ui-windowManager-modal .oo-ui-processDialog-content,
.oo-ui-defaultOverlay .oo-ui-dialog-content,
.oo-ui-defaultOverlay .oo-ui-processDialog-content {
    max-height: calc(100vh - 24px) !important;
    overflow: hidden !important;
}

.oo-ui-windowManager-modal .oo-ui-window-body,
.oo-ui-windowManager-modal .oo-ui-processDialog .oo-ui-window-body,
.oo-ui-defaultOverlay .oo-ui-window-body,
.oo-ui-defaultOverlay .oo-ui-processDialog .oo-ui-window-body {
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.oo-ui-windowManager-modal .oo-ui-panelLayout,
.oo-ui-defaultOverlay .oo-ui-panelLayout {
    max-height: calc(100vh - 128px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}
/* =========================================
   Account access form — authentication-only OOUI override
   =========================================
   This targeted block is intentionally placed after the legacy generic OOUI
   rules above so the login route receives the current foundation palette
   without changing upload/editor dialogs in this pass.
*/

body.account-login-page #userloginForm form,
body.account-login-page #userloginForm .mw-htmlform,
body.account-login-page #userloginForm .mw-ui-vform,
body.mw-special-Userlogin #userloginForm form,
body.mw-special-Userlogin #userloginForm .mw-htmlform,
body.mw-special-Userlogin #userloginForm .mw-ui-vform,
body.page-Special_UserLogin #userloginForm form,
body.page-Special_UserLogin #userloginForm .mw-htmlform,
body.page-특수_로그인 #userloginForm form,
body.page-특수_로그인 #userloginForm .mw-htmlform {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #e2e2e2 !important;
}

body.account-login-page #userloginForm .oo-ui-fieldsetLayout,
body.account-login-page #userloginForm .oo-ui-fieldsetLayout-group,
body.account-login-page #userloginForm .oo-ui-panelLayout,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldsetLayout,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldsetLayout-group,
body.mw-special-Userlogin #userloginForm .oo-ui-panelLayout,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldsetLayout,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldsetLayout-group,
body.page-특수_로그인 #userloginForm .oo-ui-fieldsetLayout,
body.page-특수_로그인 #userloginForm .oo-ui-fieldsetLayout-group {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.account-login-page #userloginForm .oo-ui-fieldLayout,
body.account-login-page #userloginForm .mw-htmlform-field-HTMLTextField,
body.account-login-page #userloginForm .mw-htmlform-field-HTMLCheckField,
body.account-login-page #userloginForm .mw-htmlform-submit,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldLayout,
body.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLTextField,
body.mw-special-Userlogin #userloginForm .mw-htmlform-field-HTMLCheckField,
body.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldLayout,
body.page-Special_UserLogin #userloginForm .mw-htmlform-field-HTMLTextField,
body.page-Special_UserLogin #userloginForm .mw-htmlform-field-HTMLCheckField,
body.page-Special_UserLogin #userloginForm .mw-htmlform-submit,
body.page-특수_로그인 #userloginForm .oo-ui-fieldLayout,
body.page-특수_로그인 #userloginForm .mw-htmlform-field-HTMLTextField,
body.page-특수_로그인 #userloginForm .mw-htmlform-field-HTMLCheckField,
body.page-특수_로그인 #userloginForm .mw-htmlform-submit {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 2px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #101010 !important;
    border: 1px solid #050505 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 #1d1d1d !important;
    color: #e2e2e2 !important;
}

body.account-login-page #userloginForm .oo-ui-fieldLayout:last-child,
body.account-login-page #userloginForm .mw-htmlform-submit:last-child,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldLayout:last-child,
body.mw-special-Userlogin #userloginForm .mw-htmlform-submit:last-child,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldLayout:last-child,
body.page-특수_로그인 #userloginForm .oo-ui-fieldLayout:last-child {
    margin-bottom: 0 !important;
}

body.account-login-page #userloginForm .oo-ui-fieldLayout-header,
body.account-login-page #userloginForm .oo-ui-labelElement-label,
body.account-login-page #userloginForm label,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldLayout-header,
body.mw-special-Userlogin #userloginForm .oo-ui-labelElement-label,
body.mw-special-Userlogin #userloginForm label,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldLayout-header,
body.page-Special_UserLogin #userloginForm .oo-ui-labelElement-label,
body.page-특수_로그인 #userloginForm .oo-ui-fieldLayout-header,
body.page-특수_로그인 #userloginForm .oo-ui-labelElement-label {
    color: #e2e2e2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

body.account-login-page #userloginForm .oo-ui-fieldLayout-header,
body.account-login-page #userloginForm .mw-label,
body.mw-special-Userlogin #userloginForm .oo-ui-fieldLayout-header,
body.mw-special-Userlogin #userloginForm .mw-label,
body.page-Special_UserLogin #userloginForm .oo-ui-fieldLayout-header,
body.page-Special_UserLogin #userloginForm .mw-label,
body.page-특수_로그인 #userloginForm .oo-ui-fieldLayout-header,
body.page-특수_로그인 #userloginForm .mw-label {
    margin: 0 0 4px !important;
    padding: 0 !important;
}

body.account-login-page #userloginForm .oo-ui-textInputWidget,
body.account-login-page #userloginForm .oo-ui-inputWidget,
body.mw-special-Userlogin #userloginForm .oo-ui-textInputWidget,
body.mw-special-Userlogin #userloginForm .oo-ui-inputWidget,
body.page-Special_UserLogin #userloginForm .oo-ui-textInputWidget,
body.page-Special_UserLogin #userloginForm .oo-ui-inputWidget,
body.page-특수_로그인 #userloginForm .oo-ui-textInputWidget,
body.page-특수_로그인 #userloginForm .oo-ui-inputWidget {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.account-login-page #userloginForm input[type="text"],
body.account-login-page #userloginForm input[type="password"],
body.account-login-page #userloginForm .oo-ui-inputWidget-input,
body.account-login-page #userloginForm .oo-ui-textInputWidget input,
body.mw-special-Userlogin #userloginForm input[type="text"],
body.mw-special-Userlogin #userloginForm input[type="password"],
body.mw-special-Userlogin #userloginForm .oo-ui-inputWidget-input,
body.mw-special-Userlogin #userloginForm .oo-ui-textInputWidget input,
body.page-Special_UserLogin #userloginForm input[type="text"],
body.page-Special_UserLogin #userloginForm input[type="password"],
body.page-Special_UserLogin #userloginForm .oo-ui-inputWidget-input,
body.page-특수_로그인 #userloginForm input[type="text"],
body.page-특수_로그인 #userloginForm input[type="password"],
body.page-특수_로그인 #userloginForm .oo-ui-inputWidget-input {
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    background: #070707 !important;
    border: 1px solid #202020 !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 #050505,
        inset 1px 0 0 #101010 !important;
    color: #e2e2e2 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    outline: 0 !important;
}

body.account-login-page #userloginForm input[type="text"]:focus,
body.account-login-page #userloginForm input[type="password"]:focus,
body.account-login-page #userloginForm .oo-ui-inputWidget-input:focus,
body.mw-special-Userlogin #userloginForm input[type="text"]:focus,
body.mw-special-Userlogin #userloginForm input[type="password"]:focus,
body.mw-special-Userlogin #userloginForm .oo-ui-inputWidget-input:focus,
body.page-Special_UserLogin #userloginForm input[type="text"]:focus,
body.page-Special_UserLogin #userloginForm input[type="password"]:focus,
body.page-특수_로그인 #userloginForm input[type="text"]:focus,
body.page-특수_로그인 #userloginForm input[type="password"]:focus {
    background: #0c0c0c !important;
    border-color: #555555 !important;
    box-shadow:
        inset 0 1px 0 #050505,
        inset 1px 0 0 #101010 !important;
    outline: 0 !important;
}

body.account-login-page #userloginForm input::placeholder,
body.mw-special-Userlogin #userloginForm input::placeholder,
body.page-Special_UserLogin #userloginForm input::placeholder,
body.page-특수_로그인 #userloginForm input::placeholder {
    color: #626262 !important;
    opacity: 1 !important;
}

body.account-login-page #userloginForm .oo-ui-buttonElement,
body.account-login-page #userloginForm .mw-htmlform-submit,
body.mw-special-Userlogin #userloginForm .oo-ui-buttonElement,
body.mw-special-Userlogin #userloginForm .mw-htmlform-submit,
body.page-Special_UserLogin #userloginForm .oo-ui-buttonElement,
body.page-Special_UserLogin #userloginForm .mw-htmlform-submit,
body.page-특수_로그인 #userloginForm .oo-ui-buttonElement,
body.page-특수_로그인 #userloginForm .mw-htmlform-submit {
    width: 100% !important;
    max-width: none !important;
}

body.account-login-page #userloginForm .oo-ui-buttonElement-button,
body.account-login-page #userloginForm button,
body.account-login-page #userloginForm input[type="submit"],
body.mw-special-Userlogin #userloginForm .oo-ui-buttonElement-button,
body.mw-special-Userlogin #userloginForm button,
body.mw-special-Userlogin #userloginForm input[type="submit"],
body.page-Special_UserLogin #userloginForm .oo-ui-buttonElement-button,
body.page-Special_UserLogin #userloginForm button,
body.page-Special_UserLogin #userloginForm input[type="submit"],
body.page-특수_로그인 #userloginForm .oo-ui-buttonElement-button,
body.page-특수_로그인 #userloginForm button,
body.page-특수_로그인 #userloginForm input[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    background: #1d1d1d !important;
    border: 1px solid #050505 !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 #555555,
        inset -1px 0 0 #555555,
        inset 1px 0 0 #101010,
        inset 0 -1px 0 #101010 !important;
    color: #e2e2e2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
}

body.account-login-page #userloginForm .oo-ui-buttonElement-button:hover,
body.account-login-page #userloginForm .oo-ui-buttonElement-button:focus,
body.account-login-page #userloginForm button:hover,
body.account-login-page #userloginForm button:focus,
body.account-login-page #userloginForm input[type="submit"]:hover,
body.account-login-page #userloginForm input[type="submit"]:focus,
body.mw-special-Userlogin #userloginForm .oo-ui-buttonElement-button:hover,
body.mw-special-Userlogin #userloginForm .oo-ui-buttonElement-button:focus,
body.mw-special-Userlogin #userloginForm button:hover,
body.mw-special-Userlogin #userloginForm button:focus,
body.page-Special_UserLogin #userloginForm .oo-ui-buttonElement-button:hover,
body.page-Special_UserLogin #userloginForm .oo-ui-buttonElement-button:focus,
body.page-특수_로그인 #userloginForm .oo-ui-buttonElement-button:hover,
body.page-특수_로그인 #userloginForm .oo-ui-buttonElement-button:focus {
    color: #ffffff !important;
    outline: 0 !important;
}

body.account-login-page #userloginForm .oo-ui-buttonElement-button:active,
body.account-login-page #userloginForm button:active,
body.account-login-page #userloginForm input[type="submit"]:active,
body.mw-special-Userlogin #userloginForm .oo-ui-buttonElement-button:active,
body.mw-special-Userlogin #userloginForm button:active,
body.page-Special_UserLogin #userloginForm .oo-ui-buttonElement-button:active,
body.page-특수_로그인 #userloginForm .oo-ui-buttonElement-button:active {
    color: #e2e2e2 !important;
}

body.account-login-page #userloginForm .oo-ui-checkboxInputWidget,
body.mw-special-Userlogin #userloginForm .oo-ui-checkboxInputWidget,
body.page-Special_UserLogin #userloginForm .oo-ui-checkboxInputWidget,
body.page-특수_로그인 #userloginForm .oo-ui-checkboxInputWidget {
    margin-right: 4px !important;
}

body.account-login-page #userloginForm .oo-ui-checkboxInputWidget [type="checkbox"] + span,
body.mw-special-Userlogin #userloginForm .oo-ui-checkboxInputWidget [type="checkbox"] + span,
body.page-Special_UserLogin #userloginForm .oo-ui-checkboxInputWidget [type="checkbox"] + span,
body.page-특수_로그인 #userloginForm .oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-color: #080808 !important;
    border-color: #050505 !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 #101010,
        inset 1px 0 0 #555555 !important;
}

body.account-login-page .errorbox,
body.account-login-page .warningbox,
body.account-login-page .mw-message-box,
body.account-login-page .oo-ui-messageWidget,
body.mw-special-Userlogin .errorbox,
body.mw-special-Userlogin .warningbox,
body.mw-special-Userlogin .mw-message-box,
body.mw-special-Userlogin .oo-ui-messageWidget,
body.page-Special_UserLogin .errorbox,
body.page-Special_UserLogin .warningbox,
body.page-Special_UserLogin .mw-message-box,
body.page-특수_로그인 .errorbox,
body.page-특수_로그인 .warningbox,
body.page-특수_로그인 .mw-message-box {
    width: 100% !important;
    margin: 0 0 2px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #101010 !important;
    border: 1px solid #050505 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 #1d1d1d !important;
    color: #e2e2e2 !important;
    font-size: 12px !important;
    line-height: 18px !important;
}