미디어위키:Gadget-Vector.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
body.skin-vector-legacy {
--pvz-ui-page: #eee4dc;
--pvz-ui-page-deep: #e2d2c8;
--pvz-ui-surface: #fffaf6;
--pvz-ui-surface-soft: #f7eee8;
--pvz-ui-surface-muted: #eadbd1;
--pvz-ui-surface-strong: #dcc5b8;
--pvz-ui-border: #c6a99b;
--pvz-ui-border-strong: #9e7665;
--pvz-ui-accent: #765044;
--pvz-ui-accent-hover: #654136;
--pvz-ui-accent-active: #56362d;
--pvz-ui-accent-soft: #d9bfb2;
--pvz-ui-text: #49362f;
--pvz-ui-text-muted: #75615a;
--pvz-ui-heading: #3f2d27;
--pvz-ui-link: #7d4338;
--pvz-ui-link-hover: #a04f40;
--pvz-ui-link-visited: #6f4f68;
--pvz-ui-focus: #b66f5d;
--pvz-ui-error: #9a4038;
--pvz-ui-shadow: rgba(76, 45, 36, 0.14);
--pvz-ui-shadow-strong: rgba(76, 45, 36, 0.22);
background-color: var(--pvz-ui-page);
color: var(--pvz-ui-text);
}
body.skin-vector-legacy a {
color: var(--pvz-ui-link);
}
body.skin-vector-legacy a:visited {
color: var(--pvz-ui-link-visited);
}
body.skin-vector-legacy a:hover,
body.skin-vector-legacy a:focus {
color: var(--pvz-ui-link-hover);
}
body.skin-vector-legacy a:focus,
body.skin-vector-legacy button:focus,
body.skin-vector-legacy input:focus,
body.skin-vector-legacy select:focus,
body.skin-vector-legacy textarea:focus {
outline-color: var(--pvz-ui-focus);
}
/* 페이지 바탕 */
body.skin-vector-legacy #mw-page-base {
background-color: var(--pvz-ui-page-deep);
background-image: none;
}
body.skin-vector-legacy #mw-head-base {
background: transparent;
}
/* 본문창 */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
border-color: var(--pvz-ui-border-strong);
border-radius: 10px 0 0 10px;
background: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
box-shadow:
0 3px 14px var(--pvz-ui-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.skin-vector-legacy .mw-body-content {
color: var(--pvz-ui-text);
}
body.skin-vector-legacy .mw-body-content h1,
body.skin-vector-legacy .mw-body-content h2,
body.skin-vector-legacy .mw-body-content h3,
body.skin-vector-legacy .mw-body-content h4,
body.skin-vector-legacy .mw-body-content h5,
body.skin-vector-legacy .mw-body-content h6,
body.skin-vector-legacy #firstHeading {
color: var(--pvz-ui-heading);
border-color: var(--pvz-ui-border);
}
body.skin-vector-legacy #firstHeading {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* 로고 */
body.skin-vector-legacy #p-logo a,
body.skin-vector-legacy .mw-wiki-logo {
filter: drop-shadow(0 3px 5px rgba(70, 42, 33, 0.18));
}
/* 좌측 사이드바 */
body.skin-vector-legacy #mw-panel {
color: var(--pvz-ui-text);
}
body.skin-vector-legacy #mw-panel .portal h3,
body.skin-vector-legacy #mw-panel .vector-menu-heading {
color: var(--pvz-ui-heading);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.skin-vector-legacy #mw-panel .portal .body,
body.skin-vector-legacy #mw-panel .vector-menu-content {
border: 1px solid rgba(158, 118, 101, 0.42);
border-radius: 8px;
background: rgba(255, 250, 246, 0.56);
box-shadow:
0 2px 7px rgba(76, 45, 36, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.52);
}
body.skin-vector-legacy #mw-panel .portal .body li a,
body.skin-vector-legacy #mw-panel .vector-menu-content li a {
color: var(--pvz-ui-link);
}
body.skin-vector-legacy #mw-panel .portal .body li a:hover,
body.skin-vector-legacy #mw-panel .vector-menu-content li a:hover {
color: var(--pvz-ui-link-hover);
}
/* 상단 개인 메뉴 */
body.skin-vector-legacy #p-personal,
body.skin-vector-legacy #p-personal a,
body.skin-vector-legacy #p-personal li {
color: var(--pvz-ui-text-muted);
}
body.skin-vector-legacy #p-personal a:hover {
color: var(--pvz-ui-link-hover);
}
/* 상단 탭 */
body.skin-vector-legacy .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs-legacy,
body.skin-vector-legacy #left-navigation,
body.skin-vector-legacy #right-navigation,
body.skin-vector-legacy .vector-menu-tabs ul,
body.skin-vector-legacy .vector-menu-tabs-legacy ul {
background-image: none;
}
body.skin-vector-legacy .vector-menu-tabs li,
body.skin-vector-legacy .vector-menu-tabs-legacy li {
background-color: var(--pvz-ui-surface-muted);
background-image: none;
border-color: var(--pvz-ui-border);
}
body.skin-vector-legacy .vector-menu-tabs li a,
body.skin-vector-legacy .vector-menu-tabs-legacy li a {
color: var(--pvz-ui-link);
background-image: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.skin-vector-legacy .vector-menu-tabs li:hover,
body.skin-vector-legacy .vector-menu-tabs-legacy li:hover {
background-color: var(--pvz-ui-accent-soft);
}
body.skin-vector-legacy .vector-menu-tabs li.selected,
body.skin-vector-legacy .vector-menu-tabs-legacy li.selected {
background-color: var(--pvz-ui-surface);
background-image: none;
border-color: var(--pvz-ui-border-strong);
}
body.skin-vector-legacy .vector-menu-tabs li.selected a,
body.skin-vector-legacy .vector-menu-tabs-legacy li.selected a {
color: var(--pvz-ui-heading);
}
/* 더보기 드롭다운 */
body.skin-vector-legacy .vector-menu-dropdown .vector-menu-heading,
body.skin-vector-legacy #p-cactions .vector-menu-heading {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-muted);
background-image: none;
color: var(--pvz-ui-link);
}
body.skin-vector-legacy .vector-menu-dropdown .vector-menu-heading:hover,
body.skin-vector-legacy #p-cactions .vector-menu-heading:hover {
background-color: var(--pvz-ui-accent-soft);
color: var(--pvz-ui-link-hover);
}
body.skin-vector-legacy .vector-menu-dropdown .vector-menu-content,
body.skin-vector-legacy #p-cactions .vector-menu-content {
border-color: var(--pvz-ui-border-strong);
border-radius: 7px;
background: var(--pvz-ui-surface);
box-shadow: 0 5px 16px var(--pvz-ui-shadow-strong);
}
body.skin-vector-legacy .vector-menu-dropdown .vector-menu-content a:hover,
body.skin-vector-legacy #p-cactions .vector-menu-content a:hover {
background: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-link-hover);
}
/* 검색창 */
body.skin-vector-legacy #simpleSearch,
body.skin-vector-legacy .vector-search-box-input,
body.skin-vector-legacy #searchInput {
border-color: var(--pvz-ui-border-strong);
border-radius: 7px;
background-color: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
box-shadow:
inset 0 1px 3px rgba(76, 45, 36, 0.1),
0 1px 0 rgba(255, 255, 255, 0.5);
}
body.skin-vector-legacy #simpleSearch:focus-within,
body.skin-vector-legacy .vector-search-box:focus-within {
border-color: var(--pvz-ui-focus);
box-shadow: 0 0 0 2px rgba(182, 111, 93, 0.18);
}
body.skin-vector-legacy #searchButton,
body.skin-vector-legacy #mw-searchButton,
body.skin-vector-legacy .searchButton {
border-color: var(--pvz-ui-border-strong);
border-radius: 0 6px 6px 0;
background-color: var(--pvz-ui-surface-muted);
background-image: none;
color: var(--pvz-ui-accent);
}
body.skin-vector-legacy #searchButton:hover,
body.skin-vector-legacy #mw-searchButton:hover,
body.skin-vector-legacy .searchButton:hover {
background-color: var(--pvz-ui-accent-soft);
}
/* 일반 버튼 */
body.skin-vector-legacy button,
body.skin-vector-legacy input[type="button"],
body.skin-vector-legacy input[type="submit"],
body.skin-vector-legacy input[type="reset"],
body.skin-vector-legacy .mw-ui-button,
body.skin-vector-legacy .cdx-button,
body.skin-vector-legacy .oo-ui-buttonElement-button {
border-color: var(--pvz-ui-border-strong);
border-radius: 6px;
background-color: var(--pvz-ui-surface-muted);
background-image: none;
color: var(--pvz-ui-heading);
box-shadow:
0 1px 2px rgba(76, 45, 36, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.48);
}
body.skin-vector-legacy button:hover,
body.skin-vector-legacy input[type="button"]:hover,
body.skin-vector-legacy input[type="submit"]:hover,
body.skin-vector-legacy input[type="reset"]:hover,
body.skin-vector-legacy .mw-ui-button:hover,
body.skin-vector-legacy .cdx-button:hover,
body.skin-vector-legacy .oo-ui-buttonElement-button:hover {
border-color: var(--pvz-ui-accent);
background-color: var(--pvz-ui-accent-soft);
color: var(--pvz-ui-heading);
}
body.skin-vector-legacy button:active,
body.skin-vector-legacy input[type="button"]:active,
body.skin-vector-legacy input[type="submit"]:active,
body.skin-vector-legacy .mw-ui-button:active,
body.skin-vector-legacy .cdx-button:active,
body.skin-vector-legacy .oo-ui-buttonElement-button:active {
background-color: var(--pvz-ui-surface-strong);
box-shadow: inset 0 1px 3px rgba(76, 45, 36, 0.16);
}
body.skin-vector-legacy .mw-ui-progressive,
body.skin-vector-legacy .mw-ui-button.mw-ui-progressive,
body.skin-vector-legacy .cdx-button--action-progressive,
body.skin-vector-legacy .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
border-color: var(--pvz-ui-accent-active);
background-color: var(--pvz-ui-accent);
color: #fffaf7;
}
body.skin-vector-legacy .mw-ui-progressive:hover,
body.skin-vector-legacy .mw-ui-button.mw-ui-progressive:hover,
body.skin-vector-legacy .cdx-button--action-progressive:hover,
body.skin-vector-legacy .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: var(--pvz-ui-accent-hover);
color: #ffffff;
}
body.skin-vector-legacy .mw-ui-destructive,
body.skin-vector-legacy .cdx-button--action-destructive,
body.skin-vector-legacy .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
border-color: #78322d;
background-color: var(--pvz-ui-error);
color: #fff;
}
/* 입력창 */
body.skin-vector-legacy input,
body.skin-vector-legacy select,
body.skin-vector-legacy textarea,
body.skin-vector-legacy .oo-ui-inputWidget-input,
body.skin-vector-legacy .cdx-text-input__input,
body.skin-vector-legacy .cdx-select {
border-color: var(--pvz-ui-border);
border-radius: 5px;
background-color: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
}
body.skin-vector-legacy input:hover,
body.skin-vector-legacy select:hover,
body.skin-vector-legacy textarea:hover,
body.skin-vector-legacy .oo-ui-inputWidget-input:hover,
body.skin-vector-legacy .cdx-text-input__input:hover,
body.skin-vector-legacy .cdx-select:hover {
border-color: var(--pvz-ui-border-strong);
}
body.skin-vector-legacy input:focus,
body.skin-vector-legacy select:focus,
body.skin-vector-legacy textarea:focus,
body.skin-vector-legacy .oo-ui-inputWidget-input:focus,
body.skin-vector-legacy .cdx-text-input__input:focus,
body.skin-vector-legacy .cdx-select:focus {
border-color: var(--pvz-ui-focus);
box-shadow: 0 0 0 2px rgba(182, 111, 93, 0.16);
}
body.skin-vector-legacy input[type="checkbox"],
body.skin-vector-legacy input[type="radio"] {
accent-color: var(--pvz-ui-accent);
}
/* 목차·분류 */
body.skin-vector-legacy #toc,
body.skin-vector-legacy .toc,
body.skin-vector-legacy .mw-warning,
body.skin-vector-legacy .catlinks {
border-color: var(--pvz-ui-border);
border-radius: 8px;
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
box-shadow: 0 2px 8px rgba(76, 45, 36, 0.07);
}
body.skin-vector-legacy #toc h2,
body.skin-vector-legacy .toc h2 {
color: var(--pvz-ui-heading);
}
body.skin-vector-legacy .tocnumber {
color: var(--pvz-ui-text-muted);
}
/* 표 */
body.skin-vector-legacy table.wikitable,
body.skin-vector-legacy .wikitable {
border-color: var(--pvz-ui-border-strong);
background-color: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
}
body.skin-vector-legacy table.wikitable > tr > th,
body.skin-vector-legacy table.wikitable > * > tr > th,
body.skin-vector-legacy .wikitable > tr > th,
body.skin-vector-legacy .wikitable > * > tr > th {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-muted);
color: var(--pvz-ui-heading);
}
body.skin-vector-legacy table.wikitable > tr > td,
body.skin-vector-legacy table.wikitable > * > tr > td,
body.skin-vector-legacy .wikitable > tr > td,
body.skin-vector-legacy .wikitable > * > tr > td {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface);
}
/* 코드·인용 */
body.skin-vector-legacy pre,
body.skin-vector-legacy code,
body.skin-vector-legacy .mw-code {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
}
body.skin-vector-legacy blockquote {
border-left-color: var(--pvz-ui-accent-soft);
background-color: rgba(247, 238, 232, 0.55);
color: var(--pvz-ui-text);
}
/* 알림·메시지 */
body.skin-vector-legacy .mw-message-box,
body.skin-vector-legacy .messagebox,
body.skin-vector-legacy .errorbox,
body.skin-vector-legacy .successbox,
body.skin-vector-legacy .warningbox {
border-color: var(--pvz-ui-border-strong);
border-radius: 7px;
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
}
body.skin-vector-legacy .mw-message-box-error,
body.skin-vector-legacy .errorbox {
border-color: #b56c64;
background-color: #f7e4e1;
}
body.skin-vector-legacy .mw-message-box-warning,
body.skin-vector-legacy .warningbox {
border-color: #c09a62;
background-color: #f7eddc;
}
body.skin-vector-legacy .mw-message-box-success,
body.skin-vector-legacy .successbox {
border-color: #8ca17e;
background-color: #e9f0e5;
}
/* 편집 화면 */
body.skin-vector-legacy .wikiEditor-ui-toolbar,
body.skin-vector-legacy .wikiEditor-ui-top,
body.skin-vector-legacy .wikiEditor-ui-view,
body.skin-vector-legacy .editOptions {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-soft);
}
body.skin-vector-legacy .wikiEditor-ui-toolbar .group,
body.skin-vector-legacy .wikiEditor-ui-toolbar .section {
border-color: var(--pvz-ui-border);
}
/* 검색 결과·특수 문서 */
body.skin-vector-legacy .mw-search-result-heading a,
body.skin-vector-legacy .mw-specialpage-summary a {
color: var(--pvz-ui-link);
}
body.skin-vector-legacy .mw-search-result-data,
body.skin-vector-legacy .searchresult,
body.skin-vector-legacy .mw-search-profile-tabs {
color: var(--pvz-ui-text-muted);
}
body.skin-vector-legacy .mw-search-profile-tabs,
body.skin-vector-legacy .mw-pager-navigation-bar,
body.skin-vector-legacy .TablePager_nav,
body.skin-vector-legacy .mw-changeslist-legend,
body.skin-vector-legacy .mw-rcfilters-ui-filterWrapperWidget,
body.skin-vector-legacy .mw-rcfilters-ui-changesListWrapperWidget {
border-color: var(--pvz-ui-border);
border-radius: 8px;
background-color: var(--pvz-ui-surface-soft);
color: var(--pvz-ui-text);
}
/* 팝업·OOUI·Codex 메뉴 */
body.skin-vector-legacy .oo-ui-popupWidget-popup,
body.skin-vector-legacy .oo-ui-menuSelectWidget,
body.skin-vector-legacy .cdx-menu,
body.skin-vector-legacy .cdx-dialog__body,
body.skin-vector-legacy .cdx-dialog__header,
body.skin-vector-legacy .cdx-dialog__footer {
border-color: var(--pvz-ui-border-strong);
background-color: var(--pvz-ui-surface);
color: var(--pvz-ui-text);
box-shadow: 0 6px 20px var(--pvz-ui-shadow-strong);
}
body.skin-vector-legacy .oo-ui-optionWidget-highlighted,
body.skin-vector-legacy .oo-ui-optionWidget-selected,
body.skin-vector-legacy .cdx-menu-item:hover,
body.skin-vector-legacy .cdx-menu-item--selected {
background-color: var(--pvz-ui-surface-muted);
color: var(--pvz-ui-heading);
}
/* 푸터 */
body.skin-vector-legacy #footer {
color: var(--pvz-ui-text-muted);
}
body.skin-vector-legacy #footer a {
color: var(--pvz-ui-link);
}
body.skin-vector-legacy #footer-info,
body.skin-vector-legacy #footer-places {
border-color: var(--pvz-ui-border);
}
body.skin-vector-legacy ::selection {
background: #d8b2a3;
color: #33231e;
}
/* 수동 다크 모드 */
html.skin-theme-clientpref-night body.skin-vector-legacy {
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep: #1c1715;
--pvz-ui-surface: #302724;
--pvz-ui-surface-soft: #392e2a;
--pvz-ui-surface-muted: #493832;
--pvz-ui-surface-strong: #5a4139;
--pvz-ui-border: #75564c;
--pvz-ui-border-strong: #987064;
--pvz-ui-accent: #a46e5d;
--pvz-ui-accent-hover: #bd806c;
--pvz-ui-accent-active: #8e594b;
--pvz-ui-accent-soft: #68483f;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #baa8a0;
--pvz-ui-heading: #fff3ed;
--pvz-ui-link: #dfa08c;
--pvz-ui-link-hover: #f3b6a2;
--pvz-ui-link-visited: #c7a0c2;
--pvz-ui-focus: #d68d77;
--pvz-ui-shadow: rgba(0, 0, 0, 0.24);
--pvz-ui-shadow-strong: rgba(0, 0, 0, 0.38);
}
/* 운영체제 설정을 따르는 다크 모드 */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-vector-legacy {
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep: #1c1715;
--pvz-ui-surface: #302724;
--pvz-ui-surface-soft: #392e2a;
--pvz-ui-surface-muted: #493832;
--pvz-ui-surface-strong: #5a4139;
--pvz-ui-border: #75564c;
--pvz-ui-border-strong: #987064;
--pvz-ui-accent: #a46e5d;
--pvz-ui-accent-hover: #bd806c;
--pvz-ui-accent-active: #8e594b;
--pvz-ui-accent-soft: #68483f;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #baa8a0;
--pvz-ui-heading: #fff3ed;
--pvz-ui-link: #dfa08c;
--pvz-ui-link-hover: #f3b6a2;
--pvz-ui-link-visited: #c7a0c2;
--pvz-ui-focus: #d68d77;
--pvz-ui-shadow: rgba(0, 0, 0, 0.24);
--pvz-ui-shadow-strong: rgba(0, 0, 0, 0.38);
}
}