미디어위키:Gadget-Vector.css 문서 원본 보기

/*
 * PvZKRWiki — Vector 2010 디자인
 * 기본 Vector 2010의 구조·기능·배치는 유지하고 외형만 변경한다.
 * 적용 위치: MediaWiki:Gadget-Vector.css
 */

@font-face {
	font-family: "SB Aggro B";
	src: url("/wiki/Special:Redirect/file/SB_Aggro_B.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "SB Aggro M";
	src: url("/wiki/Special:Redirect/file/SB_Aggro_M.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "SB Aggro L";
	src: url("/wiki/Special:Redirect/file/SB_Aggro_L.ttf") format("truetype");
	font-display: swap;
}

body.skin-vector-legacy {
	--pvz-green: #3f8f45;
	--pvz-green-dark: #0e6b3f;
	--pvz-green-deep: #245d33;
	--pvz-wood: #94431d;
	--pvz-wood-dark: #5f260d;
	--pvz-brown: #6a2c12;
	--pvz-paper: #fffbea;
	--pvz-paper-soft: #f6ebdc;
	--pvz-paper-deep: #f2dfbf;
	--pvz-caption: #ecd8c7;
	--pvz-text: #3a1a0d;
	--pvz-text-soft: #745440;
	--pvz-link: #3c7f3a;
	--pvz-line: rgba(75, 42, 24, 0.34);
	--pvz-shadow: rgba(47, 22, 8, 0.20);

	color: var(--pvz-text);
	background-color: #69c369;
	background-image: url("/wiki/Special:Redirect/file/Wiki_Bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	font-family:
		"SB Aggro L",
		"SB Aggro L",
		"Apple SD Gothic Neo",
		"Malgun Gothic",
		sans-serif;
}

/* Vector 기본 페이지 바탕 */
body.skin-vector-legacy #mw-page-base {
	background:
		linear-gradient(
			to bottom,
			rgba(63, 143, 69, 0.96),
			rgba(36, 93, 51, 0.94)
		);
	border-bottom: 2px solid var(--pvz-green-deep);
}

body.skin-vector-legacy #mw-head-base {
	background: transparent;
}

/* 기본 본문창 */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
	color: var(--pvz-text);
	background: var(--pvz-paper);
	border-color: var(--pvz-brown);
	border-radius: 18px 0 0 18px;
	box-shadow:
		0 12px 28px var(--pvz-shadow),
		inset 0 0 0 6px rgba(230, 211, 179, 0.72);
}

body.skin-vector-legacy .mw-body-content {
	color: var(--pvz-text);
}

/* 문서 제목과 문단 제목 */
body.skin-vector-legacy #firstHeading {
	color: #fff;
	background: var(--pvz-green-dark);
	border: 0;
	border-radius: 3px;
	padding: 0.18em 0.55em;
	font-family:
		"SB Aggro B",
		"SB Aggro B",
		"Apple SD Gothic Neo",
		"Malgun Gothic",
		sans-serif;
	font-weight: normal;
	letter-spacing: -0.045em;
	text-shadow:
		2px 0 0 var(--pvz-green-deep),
		-2px 0 0 var(--pvz-green-deep),
		0 2px 0 var(--pvz-green-deep),
		0 -2px 0 var(--pvz-green-deep);
	box-shadow: 0 4px 0 rgba(36, 93, 51, 0.24);
}

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 {
	color: #245d33;
	border-color: rgba(75, 42, 24, 0.28);
	font-family:
		"SB Aggro M",
		"SB Aggro M",
		"Apple SD Gothic Neo",
		"Malgun Gothic",
		sans-serif;
	font-weight: normal;
}

/* 링크 */
body.skin-vector-legacy a {
	color: var(--pvz-link);
}

body.skin-vector-legacy a:visited {
	color: #567357;
}

body.skin-vector-legacy a:hover,
body.skin-vector-legacy a:focus {
	color: var(--pvz-green-dark);
}

/* 로고 */
body.skin-vector-legacy #p-logo a,
body.skin-vector-legacy .mw-wiki-logo {
	filter: drop-shadow(0 5px 5px rgba(47, 22, 8, 0.25));
}

/* Vector 기본 왼쪽 사이드바 */
body.skin-vector-legacy #mw-panel {
	color: var(--pvz-text);
}

body.skin-vector-legacy #mw-panel .portal,
body.skin-vector-legacy #mw-panel .vector-menu-portal {
	margin-bottom: 0.65em;
	padding: 0.45em;
	background:
		linear-gradient(
			180deg,
			#9d4a22,
			#853815
		);
	border: 2px solid var(--pvz-green-dark);
	border-radius: 9px;
	box-shadow:
		0 7px 16px rgba(47, 22, 8, 0.20),
		inset 0 0 15px rgba(80, 28, 8, 0.24);
}

body.skin-vector-legacy #mw-panel .portal h3,
body.skin-vector-legacy #mw-panel .vector-menu-heading {
	color: #f1d27b;
	background: transparent;
	border: 0;
	font-family:
		"SB Aggro M",
		"SB Aggro M",
		sans-serif;
	font-weight: normal;
	text-shadow: 1px 1px 0 #4b1d09;
}

body.skin-vector-legacy #mw-panel .portal .body,
body.skin-vector-legacy #mw-panel .vector-menu-content {
	padding: 0.5em 0.7em;
	background: var(--pvz-paper-deep);
	border: 1px solid rgba(92, 34, 7, 0.52);
	border-radius: 5px;
	box-shadow:
		0 4px 8px rgba(47, 22, 8, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body.skin-vector-legacy #mw-panel .portal .body li a,
body.skin-vector-legacy #mw-panel .vector-menu-content li a {
	color: #4b2a18;
}

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-link);
}

/* 기본 상단 개인 메뉴 */
body.skin-vector-legacy #p-personal,
body.skin-vector-legacy #p-personal a,
body.skin-vector-legacy #p-personal li {
	color: #fff8df;
	text-shadow: 1px 1px 0 rgba(36, 61, 34, 0.75);
}

body.skin-vector-legacy #p-personal a:hover {
	color: #fff;
}

/* Vector 기본 문서·토론·편집 탭 */
body.skin-vector-legacy .vector-menu-tabs,
body.skin-vector-legacy .vector-menu-tabs-legacy,
body.skin-vector-legacy .vector-menu-tabs ul,
body.skin-vector-legacy .vector-menu-tabs-legacy ul,
body.skin-vector-legacy #left-navigation,
body.skin-vector-legacy #right-navigation {
	background-image: none;
}

body.skin-vector-legacy .vector-menu-tabs li,
body.skin-vector-legacy .vector-menu-tabs-legacy li {
	background: #7a3b24;
	background-image: none;
	border-color: var(--pvz-brown);
}

body.skin-vector-legacy .vector-menu-tabs li a,
body.skin-vector-legacy .vector-menu-tabs-legacy li a {
	color: #fff8df;
	background-image: none;
	font-family:
		"SB Aggro M",
		"SB Aggro M",
		sans-serif;
	font-weight: normal;
	text-shadow: 1px 1px 0 #3c1709;
}

body.skin-vector-legacy .vector-menu-tabs li:hover,
body.skin-vector-legacy .vector-menu-tabs-legacy li:hover {
	background: var(--pvz-green);
}

body.skin-vector-legacy .vector-menu-tabs li.selected,
body.skin-vector-legacy .vector-menu-tabs-legacy li.selected {
	background: var(--pvz-paper);
	border-color: var(--pvz-brown);
}

body.skin-vector-legacy .vector-menu-tabs li.selected a,
body.skin-vector-legacy .vector-menu-tabs-legacy li.selected a {
	color: var(--pvz-brown);
	text-shadow: none;
}

/* 더보기 메뉴 */
body.skin-vector-legacy .vector-menu-dropdown .vector-menu-heading,
body.skin-vector-legacy #p-cactions .vector-menu-heading {
	color: #fff8df;
	background: #7a3b24;
	background-image: none;
	border-color: var(--pvz-brown);
}

body.skin-vector-legacy .vector-menu-dropdown .vector-menu-heading:hover,
body.skin-vector-legacy #p-cactions .vector-menu-heading:hover {
	background: var(--pvz-green);
}

body.skin-vector-legacy .vector-menu-dropdown .vector-menu-content,
body.skin-vector-legacy #p-cactions .vector-menu-content {
	color: var(--pvz-text);
	background: var(--pvz-paper-deep);
	border-color: var(--pvz-brown);
	border-radius: 7px;
	box-shadow: 0 8px 20px var(--pvz-shadow);
}

/* 기본 검색창 */
body.skin-vector-legacy #simpleSearch,
body.skin-vector-legacy .vector-search-box-input,
body.skin-vector-legacy #searchInput {
	color: var(--pvz-text);
	background: #fff8ed;
	border-color: #8a654b;
	border-radius: 7px;
	box-shadow:
		inset 0 1px 3px rgba(47, 22, 8, 0.12),
		0 1px 0 rgba(255, 255, 255, 0.48);
}

body.skin-vector-legacy #simpleSearch:focus-within,
body.skin-vector-legacy .vector-search-box:focus-within {
	border-color: #c58f5c;
	box-shadow: 0 0 0 2px rgba(197, 143, 92, 0.22);
}

body.skin-vector-legacy #searchButton,
body.skin-vector-legacy #mw-searchButton,
body.skin-vector-legacy .searchButton {
	background: #ead5b5;
	background-image: none;
	border-color: #8a654b;
	color: #6b4328;
}

/* 버튼과 입력창 */
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 {
	color: #4b2a18;
	background: var(--pvz-paper-deep);
	background-image: none;
	border-color: #9f7657;
	border-radius: 6px;
	box-shadow:
		0 2px 4px rgba(47, 22, 8, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

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 {
	color: #fff;
	background: var(--pvz-green);
	border-color: var(--pvz-green-dark);
}

body.skin-vector-legacy .mw-ui-progressive,
body.skin-vector-legacy .cdx-button--action-progressive,
body.skin-vector-legacy .oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	color: #fff;
	background: var(--pvz-green);
	border-color: var(--pvz-green-dark);
}

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 {
	color: var(--pvz-text);
	background: #fffdf7;
	border-color: #aaa08e;
	border-radius: 5px;
}

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-green);
	box-shadow: 0 0 0 2px rgba(63, 143, 69, 0.18);
}

body.skin-vector-legacy input[type="checkbox"],
body.skin-vector-legacy input[type="radio"] {
	accent-color: var(--pvz-green);
}

/* 목차·분류·알림 */
body.skin-vector-legacy #toc,
body.skin-vector-legacy .toc,
body.skin-vector-legacy .catlinks,
body.skin-vector-legacy .mw-warning,
body.skin-vector-legacy .mw-message-box {
	color: var(--pvz-text);
	background: var(--pvz-paper-deep);
	border-color: var(--pvz-line);
	border-radius: 7px;
	box-shadow: 0 4px 11px rgba(47, 22, 8, 0.08);
}

body.skin-vector-legacy #toc h2,
body.skin-vector-legacy .toc h2 {
	color: #245d33;
	font-family:
		"SB Aggro M",
		"SB Aggro M",
		sans-serif;
	font-weight: normal;
}

/* 표 */
body.skin-vector-legacy table.wikitable,
body.skin-vector-legacy .wikitable {
	color: var(--pvz-text);
	background: #fff8e7;
	border-color: #7a4a28;
}

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 {
	color: #fff;
	background: var(--pvz-green-dark);
	border-color: var(--pvz-brown);
}

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 {
	background: var(--pvz-paper);
	border-color: #b78c66;
}

/* 이미지와 캡션 */
body.skin-vector-legacy .thumbinner,
body.skin-vector-legacy figure,
body.skin-vector-legacy .gallerybox .thumb {
	background: transparent;
	border-color: #8a654b;
}

body.skin-vector-legacy .thumbcaption,
body.skin-vector-legacy figcaption,
body.skin-vector-legacy .gallerytext {
	color: var(--pvz-text);
	background: var(--pvz-caption);
}

/* 코드·인용 */
body.skin-vector-legacy pre,
body.skin-vector-legacy code,
body.skin-vector-legacy .mw-code {
	color: var(--pvz-text);
	background: var(--pvz-paper-soft);
	border-color: var(--pvz-line);
}

body.skin-vector-legacy blockquote {
	color: var(--pvz-text);
	background: rgba(246, 235, 220, 0.62);
	border-left-color: var(--pvz-green);
}

/* 편집기·팝업 */
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,
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 {
	color: var(--pvz-text);
	background: var(--pvz-paper-soft);
	border-color: var(--pvz-line);
}

/* 기본 footer */
body.skin-vector-legacy #footer {
	color: #4b2a18;
	background: var(--pvz-paper-deep);
	border-top: 1px solid rgba(75, 42, 24, 0.22);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}

body.skin-vector-legacy #footer a {
	color: var(--pvz-link);
}

body.skin-vector-legacy ::selection {
	color: #3a1a0d;
	background: #d9e9bd;
}

/* 다크 모드 */
html.skin-theme-clientpref-night body.skin-vector-legacy {
	--pvz-paper: #302724;
	--pvz-paper-soft: #392e2a;
	--pvz-paper-deep: #493832;
	--pvz-caption: #493832;
	--pvz-text: #eaded8;
	--pvz-text-soft: #baa8a0;
	--pvz-link: #9ed69b;
	--pvz-line: #75564c;
	--pvz-shadow: rgba(0, 0, 0, 0.36);

	background-color: #172414;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os body.skin-vector-legacy {
		--pvz-paper: #302724;
		--pvz-paper-soft: #392e2a;
		--pvz-paper-deep: #493832;
		--pvz-caption: #493832;
		--pvz-text: #eaded8;
		--pvz-text-soft: #baa8a0;
		--pvz-link: #9ed69b;
		--pvz-line: #75564c;
		--pvz-shadow: rgba(0, 0, 0, 0.36);

		background-color: #172414;
	}
}