참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
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;
}