사용자:Hsl0/vector-2022.css: 두 판 사이의 차이

2024년 10월 2일 (수) 17:55 판

/*
	벡터 2022 호환 클래식 큰숲 스킨
	신형 벡터를 기반으로 벡터 레거시 시절 큰숲백과 스킨을 계승하면서 최신(?) 유행 디자인을 접목함
	제작자: [[사용자:hsl0|hsl0]]
*/ 
/* 리버티게임의 Vector-2022-sidebar, Vector-2022-sidebar-left 소도구와 함께 써도 좋을 듯 */
/* 홈페이지 배경색 */
/* 추천: #c8ffc8, #f8f9fa, #ffffff */
.vector-feature-zebra-design-disabled :is(body, .mw-page-container, .vector-header-container) {
    background: #c8ffc8;
}
/* 둥근 그림자 테두리 */
#mw-panel {
    box-shadow: #00000030 0px 0px 15px 0px;
    border-radius: 1em;
}
/* 본문 반투명 효과 */
#content > :not(.vector-column-end) {
    background: #fffffff7;
}
/* 본문 여백 넓히기 (가독성 향상) */
#bodyContent {
    padding: 0 1em 2.5em;
    border-radius: 0 0 1em 1em; /* 본문 영역 아랫쪽 둥근 모서리 */
}
.mw-body-header {
	padding: 1em 1em 0;
	box-shadow: 0 calc(1em + 1px) 0 -1em #a2a9b1;
	border-radius: 1em 1em 0 0; /* 본문 영역 윗쪽 둥근 모서리 */
}
.vector-page-toolbar {
    padding: 0 1em 1px;
}
#ca-addsection {
    margin-right: -0.5em;
}
#vector-page-titlebar-toc-label {
    margin-left: 0.5em;
}

/* 반투명 효과 */
#mw-panel {
	background: #f8f9fae6;
}

/* 좌측 목차, 우측 도구 그라데이션 제거 */
.vector-feature-zebra-design-disabled  :is(#vector-toc-pinned-container .vector-toc, #vector-page-tools-pinned-container .vector-page-tools)::after {
    content: none;
}

/* 우측 도구 여백, 반투명 둥근 모서리 설정 */
.vector-feature-zebra-design-disabled .vector-pinned-container .vector-pinnable-element {
    margin-left: 0;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: #00000030 0px 0px 15px 0px;
    border-radius: 1em;
    background-color: color-mix(in srgb,#C8FFC8,#ffffffaa 95%);
}
.vector-feature-zebra-design-disabled .vector-column-end, .vector-feature-zebra-design-disabled.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc {
	contain: none;
}

/* 검색창 둥근 그림자 테두리 */
.cdx-typeahead-search, #simpleSearch, #searchform, .cdx-search-input {
    border-radius: 1.5em;
}
#simpleSearch input[type="search"], input.cdx-text-input__input[type="search"] {
	border-radius: 1.5em 0 0 1.5em;
}
/* 검색창 비활성화시 투명 효과 */
.cdx-search-input {
    transition: box-shadow 250ms ease-out, background 250ms ease;
}
.cdx-search-input:not(:focus-within):not(:hover), #simpleSearch input[type="search"]:not(:focus):not(:hover) {
    background: #e5ffe5;
}
input.cdx-text-input__input[type="search"] {
	background: transparent;
	border: none;
}
.cdx-search-input:not(:hover):not(:focus-within), #simpleSearch input[type="search"]:not(:hover):not(:focus) {
    box-shadow: #00000030 0px 0px 15px 0px;
    border: none;
}
:is(#searchform, #vector-sticky-search-form) input[type="search"]:enabled:active {
    box-shadow: inset #00000030 0px 0px 8px 0px;
    filter: blur(0.75px);
}
/* 검색창 입력시 더 진한 그림자 테두리 */
.cdx-search-input:focus-within:not(:hover):not(:active) {
    box-shadow: #00000030 0px 0px 20px 5px;
}
/* 검색창 자동완성 둥근 그림자 테두리 */
.cdx-menu {
    border-radius: 0 0 1em 1em;
    box-shadow: #00000030 0px 0px 20px 4px;
    background: hsl(120deg 100% 98% / 80%);
    backdrop-filter: blur(10px);
    overflow: hidden;
    border: none;
}
/* 자동완성 노출시 곡률이 일치하지 않는 버그 수정 */ 
.cdx-typeahead-search--expanded input[type="search"] {
    border-radius: 1em 0 0 0;
}
/* 검색 버튼도 둥글게 */
/*.cdx-button {*/
/*    border-radius: 0 2em 2em 0;*/
/*}*/
/*.cdx-button.cdx-search-input__end-button {*/
/*    transition: box-shadow 150ms ease, opacity 250ms;*/
/*}*/
/* 자동완성 노출시 곡률이 일치하지 않는 버그 수정 */ 
@media(max-width: 999px) {
    .cdx-typeahead-search--expanded .cdx-button {
        border-radius: 0 1em 0 0;
    }
}
.cdx-typeahead-search--expanded .cdx-search-input {
    border-bottom-left-radius: 0;
}
/* 검색창 테두리 제거시 외곽선이 어긋나는 버그 수정 */
.cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
    margin: 0;
}
/* 고정 상단바 반투명 효과 */
.vector-feature-zebra-design-disabled .vector-sticky-header-container {
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 80%);
    backdrop-filter: blur(10px);
    border-radius: 0 0 1em 1em;
    box-shadow: #00000030 0px 0px 15px 0px;
}
/* 고정 상단바 검색창 */
#vector-sticky-search-form > .cdx-search-input, #vector-sticky-search-form input[type="search"] {
    background: hsl(120 100% 99% / 0.4);
}
/* 사용자 확장 메뉴, 문서 옵션 확장 메뉴 테두리, 반투명 */
.vector-dropdown > .vector-dropdown-checkbox:checked ~ .vector-dropdown-content {
    border-radius: 1em;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    backdrop-filter: blur(10px);
    padding: 0.5em;
    box-shadow: #00000030 0px 0px 20px 5px;
    border: none;
}
/* 사용자 메뉴 배경 테두리 */
.mw-header .vector-user-links {
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    border-radius: 1em;
    box-shadow: #00000030 0px 0px 15px 0px; 
    padding: 0 1em;
}
#p-personal-label {
    border-radius: 0 1.5em 1.5em 0;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:first-child > .oo-ui-buttonElement-button {
    border-radius: 0 0 0 1em;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:last-child > .oo-ui-buttonElement-button {
    border-radius: 0 0 1em 0;
}
@media (min-width: 1000px) {
	.mw-header .vector-user-links {
	    padding: 0.5em 1em;
	}
}
@media (max-width: 719px) {
	.mw-header .vector-user-links {
	    padding-left: 0;
	}
	.vector-user-links #pt-notifications-alert > a.mw-echo-notifications-badge:is(:hover, :not(:hover)) {
	    border-radius: 1.5em 0 0 1.5em;
	}
}
/* 사이드바 */
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
    border-radius: 1em;
    background: color-mix(in srgb, #C8FFC8, #f8f9fa 80%);
    box-shadow: #00000030 0px 0px 15px;
    border: none;
}
/* 목차 둥근 그림자 테두리, 반투명, 사이드바 세로 정렬 */
.vector-feature-zebra-design-disabled .vector-toc {
	background: none;
}
/* 둥근 테두리와 안맞는 그라데이션 제거 */
.vector-toc-not-collapsed .sidebar-toc:after {
	display: none;
}
/* 꼬리글 여백 */
#footer {
    margin-top: 2em;
}
/* 목차 버튼 반투명 */
#vector-toc-collapsed-button {
    background: rgb(255 255 255 / 80%);
    /* border-bottom-right-radius: 1em; */
    backdrop-filter: blur(10px);
}
/* 분류 둥근 그림자 테두리 */
#catlinks {
    border-radius: 1em;
    box-shadow: #00000030 0px 0px 10px 0px;
    margin-top: 2em;
    margin-bottom: -1em;
}
/* 팝업 메뉴가 뜰 때 관련없는 섹션은 흐리게  */
:is(.mw-page-container-inner, .mw-header, .mw-header-content):has(.cdx-typeahead-search--expanded) > :not(:has(.cdx-typeahead-search--expanded)),
:is(.mw-page-container-inner, .mw-header, .mw-header-content):has(.vector-menu-checkbox:checked) > :not(:has(.vector-menu-checkbox:checked)),
body:not(.vector-below-page-title) .mw-page-container-inner:has(#vector-toc-collapsed-checkbox:checked) > :not(.mw-table-of-contents-container):not(.mw-content-container),
body:has(.mw-echo-ui-notificationBadgeButtonPopupWidget-popup:not(.oo-ui-element-hidden)) :is(.mw-page-container-inner, .mw-header, .mw-header-content) > :not(.vector-user-links):not(:has(.vector-user-links)),
body:not(.uls-dialog-sticky):has(.grid.uls-menu:not([style*="display:\20/* [[mw:phab:T37492]] */none;"])) .mw-page-container-inner > :not(.mw-content-container:has(.selector-open)) {
    opacity: 70%;
    filter: blur(3px);
}
.mw-page-container-inner > *, .mw-header > *, .mw-header-content > *, body > * {
    transition: opacity 150ms ease-out;
}
@media(min-width: 1000px) {
	body.vector-sticky-header-visible:has(#vector-sticky-header .cdx-typeahead-search--expanded) .mw-page-container-inner,
	body.vector-sticky-header-visible:has(#vector-sticky-header .vector-menu-checkbox:checked:not(#p-sticky-header-toc-checkbox)) .mw-page-container-inner,
	body.vector-toc-collapsed.vector-sticky-header-visible:has(#p-sticky-header-toc-checkbox) .mw-page-container-inner,
	body.uls-dialog-sticky:not(.uls-dialog-sticky-hide):has(.grid.uls-menu:not([style*="display:\20/* [[mw:phab:T37492]] */none;"])) .mw-page-container-inner > :not(.mw-content-container:has(.selector-open)) {
	    opacity: 70%;
	    filter: blur(3px);
	}
}

/* 언어 추가 둥근 테두리 및 반투명 적용 */
.grid.uls-menu {
    box-shadow:  #00000030 0px 0px 20px 5px;
    border-radius: 1em;
    overflow: hidden;
    border: none;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    backdrop-filter: blur(10px);
}

.uls-menu > #search, .uls-lcd {
    background: transparent;
}

input.uls-filterinput.uls-filtersuggestion {
    background: transparent;
}

.uls-menu > #search {
    margin: 0.5em;
    width: calc(100% - 1em);
    border-radius: 1em;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 80%);
    border: none;
    box-shadow: #00000030 0px 0px 15px 0px;
}

/* 알림 둥근 테두리 적용 */
.oo-ui-popupWidget-popup {
    border-radius: 1em;
    box-shadow: #00000030 0px 0px 20px 5px;
    border: none;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    backdrop-filter: blur(10px);
}

.oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor::before {
    border: none;
}

/* 버튼 둥근 테두리 그림자 적용 */
/*.oo-ui-buttonElement-button, .mw-ui-button {*/
/*    transition: box-shadow 150ms ease;*/
/*}*/

/*.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .mw-ui-button:not(:disabled):is(*, .mw-ui-progressive):not(.mw-ui-quiet) {*/
/*    border: none;*/
/*    box-shadow: #00000030 0px 0px 8px 1px;*/
/*}*/

/*.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .mw-ui-button:is(*, .mw-ui-progressive):not(:disabled):focus, .cdx-button:focus {*/
/*    box-shadow: #00000030 0px 0px 15px 5px,inset 0 0 0 1px #3366cc,inset 0 0 0 2px #ffffff*/
/*}*/

/*.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .mw-ui-button:is(*, .mw-ui-progressive):not(:disabled):hover, .cdx-button--framed:hover {*/
/*    box-shadow: #00000030 0px 0px 0px 0px;*/
/*    border: 1px solid #a2a9b1*/
/*}*/

/*.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover:not(.oo-ui-buttonElement-framed *), .mw-ui-button.mw-ui-quiet:is(*, .mw-ui-progressive):not(:disabled):hover, .cdx-button:not(.cdx-button--framed):hover {*/
/*    box-shadow: #00000030 0px 0px 8px 1px;*/
/*}*/

/*:is(.oo-ui-buttonElement, .oo-ui-buttonElement.oo-ui-buttonElement-framed).oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,*/
/*.mw-ui-button:is(*, .mw-ui-progressive):not(:disabled):active, .cdx-button:active {*/
/*    box-shadow: inset #00000030 0px 0px 8px 0px;*/
/*    filter: blur(0.75px)*/
/*}*/

/*:where(.oo-ui-buttonElement, .oo-ui-buttonElement.oo-ui-buttonElement-framed):not(.oo-ui-buttonGroupWidget *):not(.oo-ui-buttonSelectWidget *) > .oo-ui-buttonElement-button,*/
/*.mw-ui-button:not(.mw-ui-button-group *) {*/
/*    border-radius: 1.5em*/
/*}*/

/*:is(.oo-ui-buttonGroupWidget, .oo-ui-buttonSelectWidget) > .oo-ui-buttonElement:last-child .oo-ui-buttonElement-button, .mw-ui-button-group > :last-child {*/
/*    border-radius: 0 1.5em 1.5em 0;*/
/*}*/

/*:is(.oo-ui-buttonGroupWidget, .oo-ui-buttonSelectWidget) > .oo-ui-buttonElement:first-child .oo-ui-buttonElement-button, .mw-ui-button-group > :first-child {*/
/*    border-radius: 1.5em 0 0 1.5em;*/
/*}*/

/* 목차 버튼은 예외 */
#vector-toc-collapsed-button {
    border-radius: 0;
}

/* 입력 상자 둥근 테두리 그림자 적용 */
.oo-ui-textInputWidget .oo-ui-inputWidget-input, .mw-ui-input {
    border-radius: 1.5em;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input, .mw-ui-input:not(:disabled) {
    border: none;
    box-shadow: #00000030 0px 0px 8px 0px;
    transition: box-shadow 150ms ease;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus, .mw-ui-input:not(:disabled):focus {
    box-shadow: #00000030 0px 0px 15px 3px;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:hover, .mw-ui-input:not(:disabled):hover {
    box-shadow: #00000030 0px 0px 0px 0px;
    border: 1px solid #a2a9b1;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:active, .mw-ui-input:not(:disabled):active {
    box-shadow: inset #00000030 0px 0px 8px 0px;
    filter: blur(0.75px);
}

/* 최근 바뀜 필터는 예외 */
.oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #a2a9b1;
}

/* 체크박스 둥근 테두리 그림자 */
.oo-ui-checkboxInputWidget > input[type="checkbox"] + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"] + label::before {
    border-radius: 0.5em;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled > input[type="checkbox"] + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"]:enabled + label::before {
    box-shadow: #00000030 0px 0px 10px 0px;
    transition: box-shadow 150ms ease;
    border: none;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled > input[type="checkbox"]:checked + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"]:enabled:checked + label::before {
    box-shadow: #00000030 0px 0px 10px 0px
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled > input[type="checkbox"]:focus + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"]:enabled:focus + label::before {
    box-shadow: #00000030 0px 0px 15px 3px
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled > input[type="checkbox"]:hover + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"]:enabled:hover + label::before {
    box-shadow: #00000030 0px 0px 0px 0px;
    border: 1px solid #a2a9b1
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled > input[type="checkbox"]:active + .oo-ui-checkboxInputWidget-checkIcon,
.mw-ui-checkbox > input[type="checkbox"]:enabled:active + label::before {
    box-shadow: inset #00000030 0px 0px 8px 0px;
    filter: blur(0.75px)
}

/* 라디오 버튼 그림자 테두리 적용 */
:is(*, .client-js) :is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled + :is(span, label::before) {
    transition: box-shadow 250ms ease, background-color 100ms,color 100ms,border 100ms;
}
:is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled:not(:hover) + :is(span, label::before) {
    box-shadow: #00000030 0px 0px 8px 0px;
}
:is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled:not(:hover):not(:checked) + :is(span, label::before) {
    border: none;
}
:is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled:hover + :is(span, label::before) {
    box-shadow: #00000030 0px 0px 0px 0px;
}
:is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled:focus + :is(span, label::before) {
    box-shadow: #00000030 0px 0px 10px 5px;
}
:is(.oo-ui-radioInputWidget, .mw-ui-radio) input[type="radio"]:enabled:active + label::before {
    box-shadow: inset #00000030 0px 0px 10px 5px;
    filter: blur(0.75px);
}

/* 드롭다운 그림자 테두리 적용 */
.oo-ui-dropdownInputWidget, .oo-ui-dropdownWidget-handle {
    border-radius: 1.5em;
}
.oo-ui-dropdownInputWidget:is(*, .oo-ui-widget-enabled) .oo-ui-dropdownWidget-handle {
    transition: box-shadow 250ms ease;
}
.oo-ui-dropdownWidget-handle:not(:hover) {
    border: none;
    box-shadow: #00000030 0px 0px 8px 0px;
}
.oo-ui-dropdownInputWidget:is(*, .oo-ui-widget-enabled) .oo-ui-dropdownWidget-handle:focus:not(:hover) {
    box-shadow: #00000030 0px 0px 20px 5px;
}
.oo-ui-dropdownInputWidget:is(*, .oo-ui-widget-enabled) .oo-ui-dropdownWidget-handle:active {
    border: none;
    box-shadow: inset #00000030 0px 0px 8px 0px;
    filter: blur(0.75px);
}
.oo-ui-defaultOverlay > .oo-ui-selectWidget {
    border-radius: 1em;
    border: none;
    box-shadow: #00000030 0px 0px 20px 4px;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    backdrop-filter: blur(10px);
}

/* 모달 창 둥근 그림자 테두리 적용 */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup {
    backdrop-filter: blur(4px);
    background: color-mix(in srgb, #c8ffc887, #ffffff87 30%);
}

.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    border-radius: 1em;
    border: none;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    box-shadow: #00000030 0px 0px 40px 10px;
    overflow: hidden;
}

.oo-ui-window-foot .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget > .oo-ui-buttonElement-button {
    border-radius: 0;
}

.oo-ui-window-foot .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:first-child > .oo-ui-buttonElement-button {
    border-bottom-left-radius: 1em;
}
.oo-ui-window-foot .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child > .oo-ui-buttonElement-button {
    border-bottom-right-radius: 1em;
}

.oo-ui-messageDialog-actions-horizontal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background: #ffffffcc;
}

/* 패널 레이아웃 둥근 그림자 테두리 적용 */
.oo-ui-panelLayout-framed {
    border-radius: 1em;
    border: none;
    box-shadow: #00000030 0px 0px 10px 0px;
}

/* 알림 메시지 둥근 그림자 테두리 적용 */
.mw-notification {
    box-shadow: #00000030 0px 0px 20px 5px;
    border-radius: 1em;
    border: none;
    background: color-mix(in srgb, #C8FFC8, #ffffffaa 95%);
    backdrop-filter: blur(10px);
}