미디어위키:Gadget-Vector.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

/* PvZKRWiki 데스크톱 Vector 디자인
 * 기본 Vector UI 구조와 기능은 유지하고 시각 디자인만 변경합니다.
 * 적용 문서: MediaWiki:Gadget-Vector.css
 */

:root {
	--pvz-green-900: #0b5f38;
	--pvz-green-800: #0d7545;
	--pvz-green-700: #178952;
	--pvz-brown-900: #561f0d;
	--pvz-brown-800: #742c13;
	--pvz-brown-700: #8e3d1c;
	--pvz-cream-100: #fffdf1;
	--pvz-cream-200: #f8efd6;
	--pvz-cream-300: #ead8b4;
	--pvz-gold-400: #e0b855;
	--pvz-text: #3d291f;
	--pvz-muted: #776356;
	--pvz-shadow: 0 10px 28px rgba(40, 15, 5, 0.35);
}

html,
body.skin-vector,
body.skin-vector-legacy {
	background:
		radial-gradient(circle at 18% 10%, rgba(255, 221, 167, 0.08), transparent 31rem),
		linear-gradient(rgba(50, 24, 12, 0.2), rgba(28, 12, 5, 0.45)),
		repeating-linear-gradient(112deg, #3e2415 0, #3e2415 34px, #48291a 35px, #48291a 69px);
	background-attachment: fixed;
	color: var(--pvz-text);
	font-family: "SB Aggro M", "SB Aggro L", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

body.skin-vector a { color: #0c7045; }
body.skin-vector a:visited { color: #315b3f; }
body.skin-vector a:hover,
body.skin-vector a:focus {
	color: #0a8b50;
	text-decoration-thickness: 2px;
}

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

/* 좌측 사이드바 */
body.skin-vector #mw-panel {
	top: 1rem;
	left: 1rem;
	width: 12.2rem;
	padding: 0.9rem 0.85rem 1.1rem;
	border: 3px solid var(--pvz-green-800);
	border-radius: 18px;
	box-sizing: border-box;
	background:
		linear-gradient(180deg, rgba(160, 75, 36, 0.96), rgba(111, 43, 20, 0.97)),
		repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 2px, transparent 2px, transparent 11px);
	box-shadow: inset 0 0 0 3px rgba(255,198,119,.16), 0 8px 22px rgba(23,8,2,.44);
}

body.skin-vector #p-logo {
	width: 100%;
	height: 10rem;
	margin: 0 0 0.75rem;
	border: 2px solid rgba(71, 26, 10, 0.75);
	border-radius: 12px;
	background: linear-gradient(rgba(73,30,15,.2), rgba(73,30,15,.2)), #783518;
	box-shadow: inset 0 0 0 7px rgba(255,210,139,.08), inset 0 0 15px rgba(34,10,2,.46);
	overflow: hidden;
}

body.skin-vector #p-logo a {
	width: 100%;
	height: 100%;
	background-size: 88% auto;
	background-position: center;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,.28));
}

body.skin-vector #mw-panel .portal {
	margin: 0.65rem 0 0;
	padding: 0;
	background: none;
}

body.skin-vector #mw-panel .portal h3 {
	margin: 0 0 0.35rem;
	padding: 0.55rem 0.7rem 0.48rem;
	border: 0;
	color: #f5cf69;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
	font-size: 0.92rem;
	font-weight: 700;
	text-shadow: 0 2px 0 #5e270f, 0 0 5px rgba(0,0,0,.42);
}

body.skin-vector #mw-panel .portal .body {
	margin: 0;
	padding: 0.52rem;
	border: 2px solid #6d2c15;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffd799, #f3bb70);
	box-shadow: inset 0 0 0 2px rgba(255,247,213,.43), 0 3px 0 rgba(61,22,8,.32);
}

body.skin-vector #mw-panel .portal .body li {
	margin: 0.12rem 0;
	line-height: 1.35;
}

body.skin-vector #mw-panel .portal .body li a {
	display: block;
	padding: 0.38rem 0.5rem;
	border-radius: 7px;
	color: #4a3024;
	font-size: 0.88rem;
	text-decoration: none;
}

body.skin-vector #mw-panel .portal .body li a:hover,
body.skin-vector #mw-panel .portal .body li a:focus {
	background: rgba(255,248,216,.72);
	color: var(--pvz-green-800);
}

/* 상단 개인 도구 */
body.skin-vector #p-personal {
	top: 0;
	right: 0;
	height: 3.95rem;
	padding: 0 1rem 0 1.2rem;
	border-left: 3px solid rgba(6,69,38,.72);
	border-bottom: 3px solid rgba(6,69,38,.72);
	border-radius: 0 0 0 18px;
	background: linear-gradient(180deg, #0e7e4a, #0a653c);
	box-shadow: 0 4px 12px rgba(16,49,26,.32);
}

body.skin-vector #p-personal ul {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0.2rem;
}

body.skin-vector #p-personal a {
	display: flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.65rem;
	border-radius: 8px;
	color: #fff8df;
	font-weight: 600;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

body.skin-vector #p-personal a:hover,
body.skin-vector #p-personal a:focus {
	background: rgba(255,255,255,.13);
	color: #fff;
}

/* 검색 */
body.skin-vector #p-search {
	top: 0.55rem;
	right: 10.6rem;
	width: min(31rem, 42vw);
}

body.skin-vector #simpleSearch {
	height: 2.65rem;
	border: 3px solid #0c653d;
	border-radius: 4px;
	background: var(--pvz-cream-100);
	box-shadow: inset 0 0 0 1px rgba(142,97,49,.25), 0 2px 0 rgba(255,255,255,.14);
}

body.skin-vector #simpleSearch input {
	height: 100%;
	color: var(--pvz-text);
	font-family: inherit;
	font-size: 0.95rem;
}

/* 상단 탭 */
body.skin-vector #left-navigation,
body.skin-vector #right-navigation {
	margin-top: 5.15rem;
}

body.skin-vector .vector-menu-tabs,
body.skin-vector .vector-menu-tabs-legacy {
	background: transparent;
}

body.skin-vector .vector-menu-tabs li,
body.skin-vector .vector-menu-tabs-legacy li {
	margin: 0 0.18rem;
	border: 2px solid #66250e;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(180deg, #94421f, #6e2a13);
}

body.skin-vector .vector-menu-tabs li.selected,
body.skin-vector .vector-menu-tabs-legacy li.selected {
	border-color: #74432f;
	background: linear-gradient(180deg, #c78e8f, #ac7374);
}

body.skin-vector .vector-menu-tabs li a,
body.skin-vector .vector-menu-tabs-legacy li a {
	height: auto;
	padding: 0.72rem 0.95rem 0.62rem;
	color: #fff6e4;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 2px 0 rgba(62,20,5,.55);
	background: none;
}

body.skin-vector .vector-menu-dropdown .vector-menu-heading {
	height: auto;
	padding: 0.72rem 0.95rem 0.62rem;
	border: 2px solid #66250e;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(180deg, #94421f, #6e2a13);
	color: #fff6e4;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 2px 0 rgba(62,20,5,.55);
}

body.skin-vector .vector-menu-dropdown .vector-menu-content {
	border: 2px solid #6e2a13;
	border-radius: 0 0 9px 9px;
	background: #fff4d7;
	box-shadow: var(--pvz-shadow);
}

/* 본문 */
body.skin-vector #content {
	margin-top: 7.7rem;
	margin-left: 14.2rem;
	margin-right: 1rem;
	padding: 1.15rem 1.45rem 1.7rem;
	border: 8px solid var(--pvz-brown-800);
	border-radius: 20px;
	background:
		linear-gradient(90deg, rgba(226,207,168,.88) 0, rgba(226,207,168,.88) 1.2rem, transparent 1.2rem),
		var(--pvz-cream-100);
	box-shadow: inset 0 0 0 5px var(--pvz-cream-300), var(--pvz-shadow);
	overflow: hidden;
}

body.skin-vector #firstHeading {
	position: relative;
	width: fit-content;
	max-width: calc(100% - 2rem);
	margin: -1.15rem 0 1.45rem -1.45rem;
	padding: 1.05rem 4rem 1rem 1.7rem;
	border: 0;
	background: var(--pvz-green-800);
	color: #fff;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
	font-size: clamp(1.65rem, 3vw, 2.45rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.045em;
	text-shadow: 0 3px 0 rgba(0,0,0,.22), 0 0 4px rgba(0,0,0,.22);
}

body.skin-vector #firstHeading::after {
	content: "";
	position: absolute;
	top: 0;
	right: -3.25rem;
	width: 3.3rem;
	height: 100%;
	background: var(--pvz-green-800);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

body.skin-vector #bodyContent {
	padding: 0.4rem 1.1rem 0.6rem;
	color: var(--pvz-text);
	font-size: 0.98rem;
	line-height: 1.72;
}

body.skin-vector #siteSub,
body.skin-vector #contentSub,
body.skin-vector #contentSub2 {
	color: var(--pvz-muted);
}

/* 문단 제목 */
body.skin-vector .mw-parser-output h2 {
	margin-top: 2.25rem;
	padding: 0.42rem 0.72rem 0.48rem;
	border: 0;
	border-left: 7px solid var(--pvz-green-700);
	border-bottom: 2px solid rgba(23,117,68,.28);
	background: linear-gradient(90deg, rgba(25,132,77,.12), transparent 70%);
	color: #285138;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
	font-size: 1.45rem;
	font-weight: 700;
}

body.skin-vector .mw-parser-output h3,
body.skin-vector .mw-parser-output h4 {
	color: #6c2d17;
	font-family: "SB Aggro B", "SB Aggro M", sans-serif;
}

/* 표·목차 */
body.skin-vector .wikitable {
	border: 2px solid #83502f;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	background: #fff9e9;
	box-shadow: 0 4px 10px rgba(75,34,15,.12);
	overflow: hidden;
}

body.skin-vector .wikitable > tr > th,
body.skin-vector .wikitable > * > tr > th {
	border-color: #8c5a38;
	background: linear-gradient(180deg, #9a4b24, #773317);
	color: #fff7df;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

body.skin-vector .wikitable > tr > td,
body.skin-vector .wikitable > * > tr > td {
	border-color: #d5b98f;
	background: rgba(255,252,239,.92);
}

body.skin-vector #toc,
body.skin-vector .toc {
	border: 2px solid #6d371d;
	border-radius: 12px;
	background: linear-gradient(180deg, #fff4d1, #f2d9aa);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 4px 11px rgba(77,35,13,.16);
}

/* 폼과 버튼 */
body.skin-vector input,
body.skin-vector textarea,
body.skin-vector select,
body.skin-vector .oo-ui-inputWidget-input {
	border-color: #9b7658;
	border-radius: 6px;
	background: #fffdf3;
	color: var(--pvz-text);
	font-family: inherit;
}

body.skin-vector input:focus,
body.skin-vector textarea:focus,
body.skin-vector select:focus,
body.skin-vector .oo-ui-inputWidget-input:focus {
	border-color: var(--pvz-green-700);
	box-shadow: 0 0 0 2px rgba(23,137,82,.18);
	outline: 0;
}

body.skin-vector .mw-ui-button,
body.skin-vector .oo-ui-buttonElement-button {
	border: 2px solid #6c2b14;
	border-radius: 8px;
	background: linear-gradient(180deg, #a95228, #7c3217);
	color: #fff9e9;
	font-family: inherit;
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 rgba(61,23,8,.25);
}

body.skin-vector .catlinks {
	margin-top: 2rem;
	border: 2px solid #947052;
	border-radius: 10px;
	background: #f8e9c9;
}

/* 푸터 */
body.skin-vector #footer {
	margin: 1rem 1rem 1.2rem 14.2rem;
	padding: 1rem 1.2rem;
	border: 2px solid rgba(87,39,18,.72);
	border-radius: 12px;
	background: rgba(64,27,13,.84);
	color: #e7d8c4;
	box-shadow: 0 5px 14px rgba(27,9,3,.25);
}

body.skin-vector #footer a { color: #f3cd75; }

@media screen and (max-width: 1100px) {
	body.skin-vector #mw-panel { width: 10.7rem; }
	body.skin-vector #content,
	body.skin-vector #footer { margin-left: 12.5rem; }
	body.skin-vector #p-search {
		right: 8.8rem;
		width: min(25rem, 37vw);
	}
}

@media screen and (max-width: 850px) {
	body.skin-vector #content {
		margin-right: 0.5rem;
		padding-right: 0.85rem;
		padding-left: 0.85rem;
	}
	body.skin-vector #firstHeading { margin-left: -0.85rem; }
	body.skin-vector #p-search { width: 31vw; }
}

@media (prefers-reduced-motion: reduce) {
	body.skin-vector *,
	body.skin-vector *::before,
	body.skin-vector *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}