미디어위키:Gadget-Vector.css: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
편집 요약 없음 태그: 되돌려진 기여 |
태그: 편집 취소 |
||
| 1번째 줄: | 1번째 줄: | ||
/* | /* | ||
* Vector 2010 인터페이스 디자인 | |||
* 적용 위치: 미디어위키:Gadget-vector.css | |||
* | |||
* 기존 UI의 배치·크기·기능은 유지하고 | |||
* 배경, 색상, 테두리, 그림자와 상태 표현만 변경한다. | |||
*/ | |||
/* 기본 색상 | /* 기본 색상 */ | ||
body.skin-vector-legacy { | body.skin-vector-legacy { | ||
--pvz-ui-background-image: | --pvz-ui-background-image: | ||
url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png"); | url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png"); | ||
--pvz-ui-overlay-top: | --pvz-ui-overlay-top: | ||
rgba( | rgba(247, 239, 231, 0.3); | ||
--pvz-ui-overlay-bottom: | --pvz-ui-overlay-bottom: | ||
rgba( | rgba(232, 216, 205, 0.76); | ||
--pvz-ui-page: # | --pvz-ui-page: #eee3da; | ||
--pvz-ui-page-deep: rgba( | --pvz-ui-page-deep: rgba(224, 207, 196, 0.78); | ||
--pvz-ui-surface: | --pvz-ui-surface: | ||
rgba(255, | rgba(255, 252, 249, 0.97); | ||
--pvz-ui-surface-soft: | --pvz-ui-surface-soft: | ||
rgba( | rgba(248, 241, 236, 0.95); | ||
--pvz-ui-surface-muted: | --pvz-ui-surface-muted: | ||
rgba( | rgba(235, 221, 212, 0.95); | ||
--pvz-ui-surface-strong: | --pvz-ui-surface-strong: | ||
rgba( | rgba(220, 198, 185, 0.96); | ||
--pvz-ui-border: # | --pvz-ui-border: #c8aea1; | ||
--pvz-ui-border-soft: rgba( | --pvz-ui-border-soft: rgba(170, 137, 121, 0.38); | ||
--pvz-ui-border-strong: # | --pvz-ui-border-strong: #9b7463; | ||
--pvz-ui-accent: # | --pvz-ui-accent: #775145; | ||
--pvz-ui-accent-hover: # | --pvz-ui-accent-hover: #684238; | ||
--pvz-ui-accent-active: # | --pvz-ui-accent-active: #56362d; | ||
--pvz-ui-accent-soft: # | --pvz-ui-accent-soft: #dec5b8; | ||
--pvz-ui-text: # | --pvz-ui-text: #49362f; | ||
--pvz-ui-text-muted: # | --pvz-ui-text-muted: #77635c; | ||
--pvz-ui-heading: # | --pvz-ui-heading: #3e2d27; | ||
--pvz-ui-link: # | --pvz-ui-link: #7c4439; | ||
--pvz-ui-link-hover: # | --pvz-ui-link-hover: #a14f40; | ||
--pvz-ui-link-visited: # | --pvz-ui-link-visited: #70516a; | ||
--pvz-ui-focus: # | --pvz-ui-focus: #ad6a57; | ||
--pvz-ui-shadow: | --pvz-ui-shadow: | ||
rgba( | rgba(72, 43, 34, 0.12); | ||
--pvz-ui-shadow-strong: | --pvz-ui-shadow-strong: | ||
rgba( | rgba(72, 43, 34, 0.2); | ||
--pvz-ui-error-border: # | --pvz-ui-error-border: #b96860; | ||
--pvz-ui-error-background: # | --pvz-ui-error-background: #f8e5e2; | ||
--pvz-ui-warning-border: # | --pvz-ui-warning-border: #c29a5e; | ||
--pvz-ui-warning-background: # | --pvz-ui-warning-background: #f8eedc; | ||
--pvz-ui-success-border: # | --pvz-ui-success-border: #849b76; | ||
--pvz-ui-success-background: # | --pvz-ui-success-background: #e9f1e5; | ||
background-color: var(--pvz-ui-page); | background-color: var(--pvz-ui-page); | ||
| 146번째 줄: | 100번째 줄: | ||
body.skin-vector-legacy a:focus { | body.skin-vector-legacy a:focus { | ||
color: var(--pvz-ui-link-hover); | color: var(--pvz-ui-link-hover); | ||
} | } | ||
| 180번째 줄: | 129번째 줄: | ||
/* 본문창 | /* 본문창 */ | ||
body.skin-vector-legacy #content, | body.skin-vector-legacy #content, | ||
body.skin-vector-legacy .mw-body { | body.skin-vector-legacy .mw-body { | ||
| 188번째 줄: | 137번째 줄: | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
box-shadow: | box-shadow: | ||
0 | 0 5px 18px var(--pvz-ui-shadow), | ||
inset 0 1px 0 | inset 0 1px 0 rgba(255, 255, 255, 0.5); | ||
} | } | ||
| 205번째 줄: | 154번째 줄: | ||
body.skin-vector-legacy .mw-body-content h6, | body.skin-vector-legacy .mw-body-content h6, | ||
body.skin-vector-legacy #firstHeading { | body.skin-vector-legacy #firstHeading { | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
| 212번째 줄: | 160번째 줄: | ||
body.skin-vector-legacy #firstHeading { | body.skin-vector-legacy #firstHeading { | ||
text-shadow: | text-shadow: | ||
0 | 0 1px 0 | ||
rgba(255, 255, 255, 0.45); | |||
} | } | ||
| 222번째 줄: | 171번째 줄: | ||
drop-shadow( | drop-shadow( | ||
0 3px 5px | 0 3px 5px | ||
rgba( | rgba(65, 39, 31, 0.2) | ||
); | ); | ||
} | } | ||
/* 좌측 사이드바 | /* 좌측 사이드바 */ | ||
body.skin-vector-legacy #mw-panel { | body.skin-vector-legacy #mw-panel { | ||
color: var(--pvz-ui | color: var(--pvz-ui-text); | ||
} | } | ||
| 236번째 줄: | 185번째 줄: | ||
#mw-panel | #mw-panel | ||
.vector-menu-heading { | .vector-menu-heading { | ||
color: var(--pvz-ui-heading); | |||
color: var(--pvz-ui- | |||
text-shadow: | text-shadow: | ||
0 1px | 0 1px 0 | ||
rgba(255, 255, 255, 0.42); | |||
} | } | ||
| 250번째 줄: | 199번째 줄: | ||
.vector-menu-content { | .vector-menu-content { | ||
border: 1px solid var(--pvz-ui-border-soft); | border: 1px solid var(--pvz-ui-border-soft); | ||
border-radius: | border-radius: 8px; | ||
background: var(--pvz-ui-surface-soft); | background: var(--pvz-ui-surface-soft); | ||
box-shadow: | box-shadow: | ||
0 | 0 2px 8px | ||
rgba( | rgba(72, 43, 34, 0.07), | ||
inset 0 1px 0 | inset 0 1px 0 | ||
rgba(255, 255, 255, 0.42); | |||
} | } | ||
| 289번째 줄: | 237번째 줄: | ||
/* 상단 개인 메뉴 | /* 상단 개인 메뉴 */ | ||
body.skin-vector-legacy #p-personal, | body.skin-vector-legacy #p-personal, | ||
body.skin-vector-legacy #p-personal a, | |||
body.skin-vector-legacy #p-personal li { | body.skin-vector-legacy #p-personal li { | ||
color: var(--pvz-ui- | color: var(--pvz-ui-text-muted); | ||
} | } | ||
body.skin-vector-legacy #p-personal a:hover { | body.skin-vector-legacy #p-personal a:hover { | ||
color: var(--pvz-ui- | color: var(--pvz-ui-link-hover); | ||
} | } | ||
| 319번째 줄: | 262번째 줄: | ||
/* 기본 탭 | /* 기본 탭 */ | ||
body.skin-vector-legacy .vector-menu-tabs li, | body.skin-vector-legacy .vector-menu-tabs li, | ||
body.skin-vector-legacy | body.skin-vector-legacy | ||
| 325번째 줄: | 268번째 줄: | ||
li { | li { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
background-color: var(--pvz-ui-surface-muted); | background-color: var(--pvz-ui-surface-muted); | ||
background-image: | background-image: none; | ||
transition: | transition: | ||
background-color 0.14s ease, | background-color 0.14s ease, | ||
| 351번째 줄: | 286번째 줄: | ||
background-image: none; | background-image: none; | ||
text-shadow: | text-shadow: | ||
0 1px 0 | 0 1px 0 | ||
rgba(255, 255, 255, 0.4); | |||
} | } | ||
| 361번째 줄: | 297번째 줄: | ||
li:hover { | li:hover { | ||
background-color: var(--pvz-ui-accent-soft); | background-color: var(--pvz-ui-accent-soft); | ||
} | } | ||
/* 선택된 탭 | /* 선택된 탭 */ | ||
body.skin-vector-legacy | body.skin-vector-legacy | ||
.vector-menu-tabs | .vector-menu-tabs | ||
| 380번째 줄: | 310번째 줄: | ||
background-color: var(--pvz-ui-surface); | background-color: var(--pvz-ui-surface); | ||
background-image: none; | background-image: none; | ||
} | } | ||
| 404번째 줄: | 332번째 줄: | ||
.vector-menu-heading { | .vector-menu-heading { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
background-color: var(--pvz-ui-surface-muted); | background-color: var(--pvz-ui-surface-muted); | ||
background-image: | background-image: none; | ||
color: var(--pvz-ui-link); | color: var(--pvz-ui-link); | ||
} | } | ||
| 426번째 줄: | 344번째 줄: | ||
.vector-menu-heading:hover { | .vector-menu-heading:hover { | ||
background-color: var(--pvz-ui-accent-soft); | background-color: var(--pvz-ui-accent-soft); | ||
color: var(--pvz-ui-link-hover); | color: var(--pvz-ui-link-hover); | ||
} | } | ||
| 444번째 줄: | 356번째 줄: | ||
.vector-menu-content { | .vector-menu-content { | ||
border-color: var(--pvz-ui-border-strong); | border-color: var(--pvz-ui-border-strong); | ||
border-radius: | border-radius: 7px; | ||
background: var(--pvz-ui-surface); | background: var(--pvz-ui-surface); | ||
box-shadow: | box-shadow: | ||
0 | 0 6px 18px | ||
var(--pvz-ui-shadow-strong); | |||
} | } | ||
| 468번째 줄: | 380번째 줄: | ||
body.skin-vector-legacy .vector-search-box { | body.skin-vector-legacy .vector-search-box { | ||
border-color: var(--pvz-ui-border-strong); | border-color: var(--pvz-ui-border-strong); | ||
border-radius: | border-radius: 7px; | ||
background-color: var(--pvz-ui-surface); | background-color: var(--pvz-ui-surface); | ||
box-shadow: | box-shadow: | ||
inset 0 | inset 0 1px 3px | ||
0 1px 0 | rgba(72, 43, 34, 0.09), | ||
0 1px 0 | |||
rgba(255, 255, 255, 0.42); | |||
transition: | transition: | ||
border-color 0.16s ease, | border-color 0.16s ease, | ||
| 495번째 줄: | 409번째 줄: | ||
/* 검색창 포커스 | /* 검색창 포커스 */ | ||
body.skin-vector-legacy | body.skin-vector-legacy | ||
#simpleSearch:focus-within, | #simpleSearch:focus-within, | ||
| 502번째 줄: | 416번째 줄: | ||
border-color: var(--pvz-ui-focus); | border-color: var(--pvz-ui-focus); | ||
box-shadow: | box-shadow: | ||
0 0 0 | 0 0 0 2px | ||
inset 0 | rgba(173, 106, 87, 0.18), | ||
inset 0 1px 3px | |||
rgba(72, 43, 34, 0.07); | |||
} | } | ||
| 512번째 줄: | 428번째 줄: | ||
body.skin-vector-legacy .searchButton { | body.skin-vector-legacy .searchButton { | ||
border-color: var(--pvz-ui-border-strong); | border-color: var(--pvz-ui-border-strong); | ||
border-radius: 0 | border-radius: 0 6px 6px 0; | ||
background-color: var(--pvz-ui-surface-muted); | background-color: var(--pvz-ui-surface-muted); | ||
background-image: none; | background-image: none; | ||
color: var(--pvz-ui-accent | color: var(--pvz-ui-accent); | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
| 522번째 줄: | 438번째 줄: | ||
body.skin-vector-legacy #mw-searchButton:hover, | body.skin-vector-legacy #mw-searchButton:hover, | ||
body.skin-vector-legacy .searchButton:hover { | body.skin-vector-legacy .searchButton:hover { | ||
background-color: var(--pvz-ui- | background-color: var(--pvz-ui-accent-soft); | ||
} | } | ||
/* 일반 버튼 | /* 일반 버튼 */ | ||
body.skin-vector-legacy button, | body.skin-vector-legacy button, | ||
body.skin-vector-legacy input[type="button"], | body.skin-vector-legacy input[type="button"], | ||
| 536번째 줄: | 452번째 줄: | ||
.oo-ui-buttonElement-button { | .oo-ui-buttonElement-button { | ||
border-color: var(--pvz-ui-border-strong); | border-color: var(--pvz-ui-border-strong); | ||
border-radius: | border-radius: 6px; | ||
background-color: var(--pvz-ui-surface-muted); | background-color: var(--pvz-ui-surface-muted); | ||
background-image: | background-image: none; | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
box-shadow: | box-shadow: | ||
0 1px 2px | |||
rgba(72, 43, 34, 0.1); | |||
transition: | transition: | ||
border-color 0.14s ease, | border-color 0.14s ease, | ||
background-color 0.14s ease, | background-color 0.14s ease, | ||
color 0.14s ease, | color 0.14s ease, | ||
box-shadow 0.14s | box-shadow 0.14s ease; | ||
} | } | ||
| 573번째 줄: | 479번째 줄: | ||
border-color: var(--pvz-ui-accent); | border-color: var(--pvz-ui-accent); | ||
background-color: var(--pvz-ui-accent-soft); | background-color: var(--pvz-ui-accent-soft); | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
} | } | ||
| 594번째 줄: | 494번째 줄: | ||
.oo-ui-buttonElement-button:active { | .oo-ui-buttonElement-button:active { | ||
background-color: var(--pvz-ui-surface-strong); | background-color: var(--pvz-ui-surface-strong); | ||
box-shadow: | box-shadow: | ||
inset 0 | inset 0 1px 3px | ||
rgba(72, 43, 34, 0.15); | |||
} | } | ||
/* 주요 동작 버튼 | /* 주요 동작 버튼 */ | ||
body.skin-vector-legacy .mw-ui-progressive, | body.skin-vector-legacy .mw-ui-progressive, | ||
body.skin-vector-legacy | body.skin-vector-legacy | ||
| 611번째 줄: | 509번째 줄: | ||
.oo-ui-flaggedElement-progressive | .oo-ui-flaggedElement-progressive | ||
> .oo-ui-buttonElement-button { | > .oo-ui-buttonElement-button { | ||
border-color: var(--pvz-ui- | border-color: var(--pvz-ui-accent-active); | ||
background-color: var(--pvz-ui-accent); | background-color: var(--pvz-ui-accent); | ||
color: #fffaf7; | |||
color: # | |||
} | } | ||
| 638번째 줄: | 524번째 줄: | ||
> .oo-ui-buttonElement-button:hover { | > .oo-ui-buttonElement-button:hover { | ||
background-color: var(--pvz-ui-accent-hover); | background-color: var(--pvz-ui-accent-hover); | ||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
| 655번째 줄: | 535번째 줄: | ||
.oo-ui-flaggedElement-destructive | .oo-ui-flaggedElement-destructive | ||
> .oo-ui-buttonElement-button { | > .oo-ui-buttonElement-button { | ||
border-color: | border-color: #78322d; | ||
background-color: # | background-color: #984039; | ||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
| 688번째 줄: | 556번째 줄: | ||
body.skin-vector-legacy .cdx-select { | body.skin-vector-legacy .cdx-select { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
border-radius: | border-radius: 5px; | ||
background-color: var(--pvz-ui-surface); | background-color: var(--pvz-ui-surface); | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
| 728번째 줄: | 596번째 줄: | ||
border-color: var(--pvz-ui-focus); | border-color: var(--pvz-ui-focus); | ||
box-shadow: | box-shadow: | ||
0 0 0 | 0 0 0 2px | ||
rgba(173, 106, 87, 0.16); | |||
} | } | ||
| 739번째 줄: | 608번째 줄: | ||
/* 목차·분류 | /* 목차·분류 */ | ||
body.skin-vector-legacy #toc, | body.skin-vector-legacy #toc, | ||
body.skin-vector-legacy .toc, | body.skin-vector-legacy .toc, | ||
| 745번째 줄: | 614번째 줄: | ||
body.skin-vector-legacy .catlinks { | body.skin-vector-legacy .catlinks { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
border-radius: | border-radius: 8px; | ||
background-color: var(--pvz-ui-surface-soft); | background-color: var(--pvz-ui-surface-soft); | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
box-shadow: | box-shadow: | ||
0 2px 8px | |||
rgba(72, 43, 34, 0.06); | |||
rgba( | |||
} | } | ||
body.skin-vector-legacy #toc h2, | body.skin-vector-legacy #toc h2, | ||
body.skin-vector-legacy .toc h2 { | body.skin-vector-legacy .toc h2 { | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
} | } | ||
| 792번째 줄: | 659번째 줄: | ||
> th { | > th { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
background-color: var(--pvz-ui- | background-color: var(--pvz-ui-surface-muted); | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
} | } | ||
| 829번째 줄: | 696번째 줄: | ||
body.skin-vector-legacy blockquote { | body.skin-vector-legacy blockquote { | ||
border-left-color: var(--pvz-ui-accent); | border-left-color: var(--pvz-ui-accent-soft); | ||
background-color: var(--pvz-ui-surface-soft); | background-color: var(--pvz-ui-surface-soft); | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
} | } | ||
| 869번째 줄: | 709번째 줄: | ||
body.skin-vector-legacy .warningbox { | body.skin-vector-legacy .warningbox { | ||
border-color: var(--pvz-ui-border-strong); | border-color: var(--pvz-ui-border-strong); | ||
border-radius: | border-radius: 7px; | ||
background-color: var(--pvz-ui-surface-soft); | background-color: var(--pvz-ui-surface-soft); | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
| 954번째 줄: | 794번째 줄: | ||
.mw-rcfilters-ui-changesListWrapperWidget { | .mw-rcfilters-ui-changesListWrapperWidget { | ||
border-color: var(--pvz-ui-border); | border-color: var(--pvz-ui-border); | ||
border-radius: | border-radius: 8px; | ||
background-color: var(--pvz-ui-surface-soft); | background-color: var(--pvz-ui-surface-soft); | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
| 976번째 줄: | 816번째 줄: | ||
color: var(--pvz-ui-text); | color: var(--pvz-ui-text); | ||
box-shadow: | box-shadow: | ||
0 | 0 7px 22px | ||
var(--pvz-ui-shadow-strong); | var(--pvz-ui-shadow-strong); | ||
} | } | ||
| 988번째 줄: | 828번째 줄: | ||
body.skin-vector-legacy | body.skin-vector-legacy | ||
.cdx-menu-item--selected { | .cdx-menu-item--selected { | ||
background-color: var(--pvz-ui- | background-color: var(--pvz-ui-surface-muted); | ||
color: var(--pvz-ui-heading); | color: var(--pvz-ui-heading); | ||
} | } | ||
/* 푸터 | /* 푸터 */ | ||
body.skin-vector-legacy #footer | body.skin-vector-legacy #footer { | ||
color: var(--pvz-ui-text-muted); | |||
color: var(--pvz-ui | |||
} | } | ||
body.skin-vector-legacy #footer a { | body.skin-vector-legacy #footer a { | ||
color: var(--pvz-ui- | color: var(--pvz-ui-link); | ||
} | } | ||
body.skin-vector-legacy #footer-info, | body.skin-vector-legacy #footer-info, | ||
body.skin-vector-legacy #footer-places { | body.skin-vector-legacy #footer-places { | ||
border-color: var(--pvz-ui- | border-color: var(--pvz-ui-border); | ||
} | } | ||
/* 텍스트 선택 | /* 텍스트 선택 */ | ||
body.skin-vector-legacy ::selection { | body.skin-vector-legacy ::selection { | ||
background: | background: #d8b2a3; | ||
color: | color: #33231e; | ||
} | } | ||
/* 수동 다크 모드 | /* 수동 다크 모드 */ | ||
html.skin-theme-clientpref-night | html.skin-theme-clientpref-night | ||
body.skin-vector-legacy { | body.skin-vector-legacy { | ||
| 1,029번째 줄: | 862번째 줄: | ||
--pvz-ui-overlay-top: | --pvz-ui-overlay-top: | ||
rgba( | rgba(24, 19, 17, 0.34); | ||
--pvz-ui-overlay-bottom: | --pvz-ui-overlay-bottom: | ||
rgba( | rgba(22, 17, 15, 0.78); | ||
--pvz-ui-page: # | --pvz-ui-page: #241d1a; | ||
--pvz-ui-page-deep: rgba( | --pvz-ui-page-deep: rgba(28, 22, 20, 0.82); | ||
--pvz-ui-surface: | --pvz-ui-surface: | ||
rgba( | rgba(47, 39, 35, 0.97); | ||
--pvz-ui-surface-soft: | --pvz-ui-surface-soft: | ||
rgba( | rgba(57, 47, 43, 0.96); | ||
--pvz-ui-surface-muted: | --pvz-ui-surface-muted: | ||
rgba( | rgba(72, 56, 50, 0.96); | ||
--pvz-ui-surface-strong: | --pvz-ui-surface-strong: | ||
rgba( | rgba(87, 65, 57, 0.97); | ||
--pvz-ui-border: # | --pvz-ui-border: #75584e; | ||
--pvz-ui-border-soft: rgba( | --pvz-ui-border-soft: rgba(151, 111, 98, 0.42); | ||
--pvz-ui-border-strong: # | --pvz-ui-border-strong: #9b7366; | ||
--pvz-ui-accent: # | --pvz-ui-accent: #a56f5e; | ||
--pvz-ui-accent-hover: # | --pvz-ui-accent-hover: #c0836f; | ||
--pvz-ui-accent-active: # | --pvz-ui-accent-active: #8c584b; | ||
--pvz-ui-accent-soft: # | --pvz-ui-accent-soft: #67483f; | ||
--pvz-ui-text: # | --pvz-ui-text: #eaded8; | ||
--pvz-ui-text-muted: # | --pvz-ui-text-muted: #bca9a1; | ||
--pvz-ui-heading: # | --pvz-ui-heading: #fff3ed; | ||
--pvz-ui-link: # | --pvz-ui-link: #e0a18d; | ||
--pvz-ui-link-hover: # | --pvz-ui-link-hover: #f5b7a3; | ||
--pvz-ui-link-visited: # | --pvz-ui-link-visited: #c8a2c3; | ||
--pvz-ui-focus: # | --pvz-ui-focus: #d68e78; | ||
--pvz-ui-shadow: | --pvz-ui-shadow: | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.26); | ||
--pvz-ui-shadow-strong: | --pvz-ui-shadow-strong: | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.42); | ||
--pvz-ui-error-border: # | --pvz-ui-error-border: #a85d56; | ||
--pvz-ui-error-background: # | --pvz-ui-error-background: #4c302d; | ||
--pvz-ui-warning-border: # | --pvz-ui-warning-border: #a98455; | ||
--pvz-ui-warning-background: # | --pvz-ui-warning-background: #493c2b; | ||
--pvz-ui-success-border: # | --pvz-ui-success-border: #718a65; | ||
--pvz-ui-success-background: # | --pvz-ui-success-background: #34402f; | ||
} | } | ||
| 1,140번째 줄: | 926번째 줄: | ||
--pvz-ui-overlay-top: | --pvz-ui-overlay-top: | ||
rgba( | rgba(24, 19, 17, 0.34); | ||
--pvz-ui-overlay-bottom: | --pvz-ui-overlay-bottom: | ||
rgba( | rgba(22, 17, 15, 0.78); | ||
--pvz-ui-page: # | --pvz-ui-page: #241d1a; | ||
--pvz-ui-page-deep: | --pvz-ui-page-deep: | ||
rgba( | rgba(28, 22, 20, 0.82); | ||
--pvz-ui-surface: | --pvz-ui-surface: | ||
rgba( | rgba(47, 39, 35, 0.97); | ||
--pvz-ui-surface-soft: | --pvz-ui-surface-soft: | ||
rgba( | rgba(57, 47, 43, 0.96); | ||
--pvz-ui-surface-muted: | --pvz-ui-surface-muted: | ||
rgba( | rgba(72, 56, 50, 0.96); | ||
--pvz-ui-surface-strong: | --pvz-ui-surface-strong: | ||
rgba( | rgba(87, 65, 57, 0.97); | ||
--pvz-ui-border: # | --pvz-ui-border: #75584e; | ||
--pvz-ui-border-soft: | --pvz-ui-border-soft: | ||
rgba( | rgba(151, 111, 98, 0.42); | ||
--pvz-ui-border-strong: # | --pvz-ui-border-strong: #9b7366; | ||
--pvz-ui-accent: # | --pvz-ui-accent: #a56f5e; | ||
--pvz-ui-accent-hover: # | --pvz-ui-accent-hover: #c0836f; | ||
--pvz-ui-accent-active: # | --pvz-ui-accent-active: #8c584b; | ||
--pvz-ui-accent-soft: # | --pvz-ui-accent-soft: #67483f; | ||
--pvz-ui-text: # | --pvz-ui-text: #eaded8; | ||
--pvz-ui-text-muted: # | --pvz-ui-text-muted: #bca9a1; | ||
--pvz-ui-heading: # | --pvz-ui-heading: #fff3ed; | ||
--pvz-ui-link: # | --pvz-ui-link: #e0a18d; | ||
--pvz-ui-link-hover: # | --pvz-ui-link-hover: #f5b7a3; | ||
--pvz-ui-link-visited: # | --pvz-ui-link-visited: #c8a2c3; | ||
--pvz-ui-focus: # | --pvz-ui-focus: #d68e78; | ||
--pvz-ui-shadow: | --pvz-ui-shadow: | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.26); | ||
--pvz-ui-shadow-strong: | --pvz-ui-shadow-strong: | ||
rgba(0, 0, 0, 0. | rgba(0, 0, 0, 0.42); | ||
--pvz-ui-error-border: # | --pvz-ui-error-border: #a85d56; | ||
--pvz-ui-error-background: # | --pvz-ui-error-background: #4c302d; | ||
--pvz-ui-warning-border: # | --pvz-ui-warning-border: #a98455; | ||
--pvz-ui-warning-background: # | --pvz-ui-warning-background: #493c2b; | ||
--pvz-ui-success-border: # | --pvz-ui-success-border: #718a65; | ||
--pvz-ui-success-background: # | --pvz-ui-success-background: #34402f; | ||
} | } | ||
} | } | ||
2026년 7월 26일 (일) 14:07 판
/*
* Vector 2010 인터페이스 디자인
* 적용 위치: 미디어위키:Gadget-vector.css
*
* 기존 UI의 배치·크기·기능은 유지하고
* 배경, 색상, 테두리, 그림자와 상태 표현만 변경한다.
*/
/* 기본 색상 */
body.skin-vector-legacy {
--pvz-ui-background-image:
url("/wiki/Special:Redirect/file/Wiki_Bg_Light.png");
--pvz-ui-overlay-top:
rgba(247, 239, 231, 0.3);
--pvz-ui-overlay-bottom:
rgba(232, 216, 205, 0.76);
--pvz-ui-page: #eee3da;
--pvz-ui-page-deep: rgba(224, 207, 196, 0.78);
--pvz-ui-surface:
rgba(255, 252, 249, 0.97);
--pvz-ui-surface-soft:
rgba(248, 241, 236, 0.95);
--pvz-ui-surface-muted:
rgba(235, 221, 212, 0.95);
--pvz-ui-surface-strong:
rgba(220, 198, 185, 0.96);
--pvz-ui-border: #c8aea1;
--pvz-ui-border-soft: rgba(170, 137, 121, 0.38);
--pvz-ui-border-strong: #9b7463;
--pvz-ui-accent: #775145;
--pvz-ui-accent-hover: #684238;
--pvz-ui-accent-active: #56362d;
--pvz-ui-accent-soft: #dec5b8;
--pvz-ui-text: #49362f;
--pvz-ui-text-muted: #77635c;
--pvz-ui-heading: #3e2d27;
--pvz-ui-link: #7c4439;
--pvz-ui-link-hover: #a14f40;
--pvz-ui-link-visited: #70516a;
--pvz-ui-focus: #ad6a57;
--pvz-ui-shadow:
rgba(72, 43, 34, 0.12);
--pvz-ui-shadow-strong:
rgba(72, 43, 34, 0.2);
--pvz-ui-error-border: #b96860;
--pvz-ui-error-background: #f8e5e2;
--pvz-ui-warning-border: #c29a5e;
--pvz-ui-warning-background: #f8eedc;
--pvz-ui-success-border: #849b76;
--pvz-ui-success-background: #e9f1e5;
background-color: var(--pvz-ui-page);
background-image:
linear-gradient(
180deg,
var(--pvz-ui-overlay-top) 0%,
var(--pvz-ui-overlay-bottom) 100%
),
var(--pvz-ui-background-image);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
color: var(--pvz-ui-text);
}
/* 공통 링크 */
body.skin-vector-legacy a {
color: var(--pvz-ui-link);
transition:
color 0.14s ease,
background-color 0.14s ease,
border-color 0.14s ease;
}
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: transparent;
background-image:
linear-gradient(
180deg,
var(--pvz-ui-page-deep) 0%,
rgba(255, 255, 255, 0) 100%
);
}
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 5px 18px var(--pvz-ui-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
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.45);
}
/* 로고 */
body.skin-vector-legacy #p-logo a,
body.skin-vector-legacy .mw-wiki-logo {
filter:
drop-shadow(
0 3px 5px
rgba(65, 39, 31, 0.2)
);
}
/* 좌측 사이드바 */
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.42);
}
body.skin-vector-legacy
#mw-panel
.portal
.body,
body.skin-vector-legacy
#mw-panel
.vector-menu-content {
border: 1px solid var(--pvz-ui-border-soft);
border-radius: 8px;
background: var(--pvz-ui-surface-soft);
box-shadow:
0 2px 8px
rgba(72, 43, 34, 0.07),
inset 0 1px 0
rgba(255, 255, 255, 0.42);
}
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 {
border-color: var(--pvz-ui-border);
background-color: var(--pvz-ui-surface-muted);
background-image: none;
transition:
background-color 0.14s ease,
border-color 0.14s ease;
}
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.4);
}
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 {
border-color: var(--pvz-ui-border-strong);
background-color: var(--pvz-ui-surface);
background-image: none;
}
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 6px 18px
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 {
border-color: var(--pvz-ui-border-strong);
border-radius: 7px;
background-color: var(--pvz-ui-surface);
box-shadow:
inset 0 1px 3px
rgba(72, 43, 34, 0.09),
0 1px 0
rgba(255, 255, 255, 0.42);
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
background-color 0.16s ease;
}
/* 검색 입력 요소 */
body.skin-vector-legacy
#simpleSearch
#searchInput,
body.skin-vector-legacy
.vector-search-box-input {
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
color: var(--pvz-ui-text);
box-shadow: none;
}
/* 검색창 포커스 */
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(173, 106, 87, 0.18),
inset 0 1px 3px
rgba(72, 43, 34, 0.07);
}
/* 검색 버튼 */
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);
box-shadow: none;
}
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(72, 43, 34, 0.1);
transition:
border-color 0.14s ease,
background-color 0.14s ease,
color 0.14s ease,
box-shadow 0.14s ease;
}
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(72, 43, 34, 0.15);
}
/* 주요 동작 버튼 */
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: #984039;
color: #ffffff;
}
/* 일반 입력 요소 */
body.skin-vector-legacy
input:not([type="button"]):not(
[type="submit"]
):not([type="reset"]):not(
[type="checkbox"]
):not([type="radio"]),
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);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
}
body.skin-vector-legacy
input:not([type="button"]):not(
[type="submit"]
):not([type="reset"]):not(
[type="checkbox"]
):not([type="radio"]):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:not([type="button"]):not(
[type="submit"]
):not([type="reset"]):not(
[type="checkbox"]
):not([type="radio"]):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(173, 106, 87, 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(72, 43, 34, 0.06);
}
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: var(--pvz-ui-surface-soft);
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: var(--pvz-ui-error-border);
background-color: var(--pvz-ui-error-background);
}
/* 경고 메시지 */
body.skin-vector-legacy
.mw-message-box-warning,
body.skin-vector-legacy .warningbox {
border-color: var(--pvz-ui-warning-border);
background-color: var(--pvz-ui-warning-background);
}
/* 성공 메시지 */
body.skin-vector-legacy
.mw-message-box-success,
body.skin-vector-legacy .successbox {
border-color: var(--pvz-ui-success-border);
background-color: var(--pvz-ui-success-background);
}
/* 편집 화면 */
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 7px 22px
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-background-image:
url("/wiki/Special:Redirect/file/Wiki_Bg_Dark.png");
--pvz-ui-overlay-top:
rgba(24, 19, 17, 0.34);
--pvz-ui-overlay-bottom:
rgba(22, 17, 15, 0.78);
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep: rgba(28, 22, 20, 0.82);
--pvz-ui-surface:
rgba(47, 39, 35, 0.97);
--pvz-ui-surface-soft:
rgba(57, 47, 43, 0.96);
--pvz-ui-surface-muted:
rgba(72, 56, 50, 0.96);
--pvz-ui-surface-strong:
rgba(87, 65, 57, 0.97);
--pvz-ui-border: #75584e;
--pvz-ui-border-soft: rgba(151, 111, 98, 0.42);
--pvz-ui-border-strong: #9b7366;
--pvz-ui-accent: #a56f5e;
--pvz-ui-accent-hover: #c0836f;
--pvz-ui-accent-active: #8c584b;
--pvz-ui-accent-soft: #67483f;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #bca9a1;
--pvz-ui-heading: #fff3ed;
--pvz-ui-link: #e0a18d;
--pvz-ui-link-hover: #f5b7a3;
--pvz-ui-link-visited: #c8a2c3;
--pvz-ui-focus: #d68e78;
--pvz-ui-shadow:
rgba(0, 0, 0, 0.26);
--pvz-ui-shadow-strong:
rgba(0, 0, 0, 0.42);
--pvz-ui-error-border: #a85d56;
--pvz-ui-error-background: #4c302d;
--pvz-ui-warning-border: #a98455;
--pvz-ui-warning-background: #493c2b;
--pvz-ui-success-border: #718a65;
--pvz-ui-success-background: #34402f;
}
/* 운영체제 설정을 따르는 다크 모드 */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os
body.skin-vector-legacy {
--pvz-ui-background-image:
url("/wiki/Special:Redirect/file/Wiki_Bg_Dark.png");
--pvz-ui-overlay-top:
rgba(24, 19, 17, 0.34);
--pvz-ui-overlay-bottom:
rgba(22, 17, 15, 0.78);
--pvz-ui-page: #241d1a;
--pvz-ui-page-deep:
rgba(28, 22, 20, 0.82);
--pvz-ui-surface:
rgba(47, 39, 35, 0.97);
--pvz-ui-surface-soft:
rgba(57, 47, 43, 0.96);
--pvz-ui-surface-muted:
rgba(72, 56, 50, 0.96);
--pvz-ui-surface-strong:
rgba(87, 65, 57, 0.97);
--pvz-ui-border: #75584e;
--pvz-ui-border-soft:
rgba(151, 111, 98, 0.42);
--pvz-ui-border-strong: #9b7366;
--pvz-ui-accent: #a56f5e;
--pvz-ui-accent-hover: #c0836f;
--pvz-ui-accent-active: #8c584b;
--pvz-ui-accent-soft: #67483f;
--pvz-ui-text: #eaded8;
--pvz-ui-text-muted: #bca9a1;
--pvz-ui-heading: #fff3ed;
--pvz-ui-link: #e0a18d;
--pvz-ui-link-hover: #f5b7a3;
--pvz-ui-link-visited: #c8a2c3;
--pvz-ui-focus: #d68e78;
--pvz-ui-shadow:
rgba(0, 0, 0, 0.26);
--pvz-ui-shadow-strong:
rgba(0, 0, 0, 0.42);
--pvz-ui-error-border: #a85d56;
--pvz-ui-error-background: #4c302d;
--pvz-ui-warning-border: #a98455;
--pvz-ui-warning-background: #493c2b;
--pvz-ui-success-border: #718a65;
--pvz-ui-success-background: #34402f;
}
}