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

큰숲백과, 나무를 보지 말고 큰 숲을 보라.
편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 51개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* 좌하단 네비게이션 (미디어위키:Vector.js#goToTop.js) */
@import url('https://cdn.jsdelivr.net/gh/hsl0/mediawiki-skin-float@mw1.41/vector-2022.css');
#buttons {
:root {
--site-background: hsl(120 50% 85% / 1);
}
/* 좌하단 네비게이션 (https://bigforest.a2hosted.com/wiki/Mediawiki:Gadget-NavigationButtons.js) */
#navigation-buttons {
     position: fixed;
     position: fixed;
     bottom: 1rem;
     bottom: 1rem;
7번째 줄: 11번째 줄:
      
      
     display: flex;
     display: flex;
     contain: content;
     overflow: hidden;
      
      
     background: color-mix(in srgb,var(--site-background),#ffffffcc 95%);
     background: color-mix(in srgb,var(--site-background),#ffffffcc 80%);
     backdrop-filter: var(--blur);
     backdrop-filter: var(--blur);
      
      
     box-shadow: #00000030 0px 0px 15px 0px;
     box-shadow: var(--section-shadow);
    border-radius: var(--radius);
}
 
#buttons > button {
    display: block;
    height: 2.5em;
    width: 2.5em;
   
    background: none;
    border: none;
   
    font-size: 20px;
    cursor: pointer;
   
    transition: filter 250ms ease, box-shadow 250ms ease-out;
   
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#buttons > button:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}
#buttons > button:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}
#buttons > button:active {
    filter: blur(1px);
    box-shadow: #00000000 0 0, inset #00000030 0px 0px 8px 0px;
}
#buttons > button:hover:not(:active) {
    box-shadow: #00000030 0px 0px 15px 0px, inset #00000000 0 0;
}
/* 좌하단 네비게이션 끝 */
 
/*
벡터 2022 호환 클래식 큰숲 스킨
신형 벡터를 기반으로 벡터 레거시 시절 큰숲백과 스킨을 계승하면서 최신(?) 유행 디자인을 접목함
제작자: [[사용자:hsl0|hsl0]]
*/
:root {
--site-background: #c8ffc8; /* 추천: #c8ffc8, #eaeaea */
--radius: 16px;
--input-radius: 12px; /* --radius * 3 / 4 */
--check-radius: 8px; /* --radius / 2 */
--blur: blur(10px);
}
/* 홈페이지 배경색 */
.vector-feature-zebra-design-disabled :is(body, .mw-page-container, .vector-header-container) {
    background: var(--site-background);
}
 
.vector-feature-limited-width-clientpref-0 #mw-panel {
margin-right: 22px;
}
/* 본문 반투명 효과 */
#content > :not(.vector-column-end) {
    background: #fffffff7;
}
/* 본문 여백 넓히기 (가독성 향상) */
#bodyContent {
    padding: 0 1em 2.5em;
    border-radius: 0 0 var(--radius) var(--radius); /* 본문 영역 아랫쪽 둥근 모서리 */
}
.mw-body-header {
padding: 1em 1em 0;
box-shadow: 0 calc(1em + 1px) 0 -1em #a2a9b1;
border-radius: var(--radius) var(--radius) 0 0; /* 본문 영역 윗쪽 둥근 모서리 */
}
.vector-page-toolbar {
    padding: 0 1em 1px;
}
#ca-addsection {
    margin-right: -0.5em;
}
#vector-page-titlebar-toc-label {
    margin-left: 0.5em;
}
 
/* 좌측 사이드바, 우측 도구 간격 */
@media screen and (min-width: 1000px) {
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container,
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark,
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .mw-sticky-header-element,
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .charts-stickyhead th {
        top: 4rem !important;
    }
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled #vector-toc-pinned-container .vector-toc,
    .vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled #vector-page-tools-pinned-container .vector-page-tools {
        max-height: calc(100vh - 4rem - 16px);
    }
}
@media screen and (min-width: 1000px) {
    .vector-feature-zebra-design-disabled .mw-page-container-inner,
    .vector-feature-zebra-design-disabled.vector-feature-page-tools-pinned-enabled .mw-body {
        column-gap: 40px;
    }
}
 
/* 좌측 목차, 우측 도구 그라데이션 제거 */
.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 {
    box-shadow: #00000030 0px 0px 15px 0px;
    border-radius: var(--radius);
    background-color: color-mix(in srgb,var(--site-background),#ffffffaa 95%);
}
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools {
    padding: 0.25em 1em 0.5em;
    width: 11em;
}
.vector-feature-limited-width-clientpref-1.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools {
    margin-left: 0;
}
.vector-feature-zebra-design-disabled .vector-column-end .vector-page-tools-landmark:first-child {
    margin-top: 0;
}
.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: var(--input-radius);
}
#simpleSearch input[type="search"], input.cdx-text-input__input[type="search"] {
border-radius: var(--input-radius) 0 0 var(--input-radius);
}
/* 검색창 비활성화시 투명 효과 */
.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 var(--radius) var(--radius);
    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: var(--input-radius) 0 0 0;
}
/* 검색 버튼도 둥글게 */
/*.cdx-button {*/
/*    border-radius: 0 var(--radius) var(--radius) 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 var(--input-radius) 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, var(--site-background), #ffffffcc 80%);
    backdrop-filter: blur(10px);
    border-radius: 0 0 var(--radius) var(--radius);
    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-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-content {
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--site-background), #ffffffcc 95%);
    backdrop-filter: blur(10px);
    padding: 0;
    box-shadow: #00000030 0 0 20px 5px;
    border: none;
}
.vector-unpinned-container .vector-pinnable-element {
    padding: 0.5em;
}
.vector-unpinned-container #vector-toc {
    padding: 0.5em 0;
}
.vector-user-menu.vector-dropdown .vector-dropdown-content {
    padding: 0.5em;
}
 
/* 사용자 메뉴 배경 테두리 */
.mw-header .vector-user-links {
    background: color-mix(in srgb, var(--site-background), #ffffffaa 95%);
    border-radius: var(--radius);
    box-shadow: #00000030 0px 0px 15px 0px;
    padding: 0 1em 0 0.5em;
}
#p-personal-label {
    border-radius: 0 var(--radius) var(--radius) 0;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:first-child > .oo-ui-buttonElement-button {
    border-radius: 0 0 0 var(--radius);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:last-child > .oo-ui-buttonElement-button {
    border-radius: 0 0 var(--radius) 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: var(--radius) 0 0 var(--radius);
}
}
/* 사이드바 */
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--site-background), #f8f9fa 80%);
    box-shadow: #00000030 0 0 15px;
    border: none;
    margin-left: 0;
}
#mw-panel {
    border-radius: var(--radius); /* 둥근 그림자 테두리 */
}
#mw-panel #vector-main-menu a {
  padding: 3px 6px;
}
/* 목차 둥근 그림자 테두리, 반투명, 사이드바 세로 정렬 */
.vector-feature-zebra-design-disabled .vector-toc {
background: none;
}
.vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc {
    padding: 0.25em 2em 0.75em;
    margin-left: 22px;
}
/* 둥근 테두리와 안맞는 그라데이션 제거 */
.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: var(--radius); */
    backdrop-filter: blur(10px);
}
/* 분류 둥근 그림자 테두리 */
#catlinks {
    border-radius: var(--radius);
    box-shadow: #00000030 0px 0px 10px 0px;
    margin-top: 2em;
    margin-bottom: -1em;
    /*border: none;*/
}
/* 팝업 메뉴가 뜰 때 관련없는 섹션은 흐리게  */
: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: var(--radius);
    overflow: hidden;
    border: none;
    background: color-mix(in srgb, var(--site-background), #ffffffcc 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: var(--radius);
    background: color-mix(in srgb, var(--site-background), #ffffffaa 80%);
    border: none;
    box-shadow: #00000030 0px 0px 15px 0px;
}
 
/* 알림 둥근 테두리 적용 */
.oo-ui-popupWidget-popup {
    border-radius: var(--radius);
    box-shadow: #00000030 0px 0px 20px 5px;
    border: none;
    background: color-mix(in srgb, var(--site-background), #ffffffcc 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: var(--radius)*/
/*}*/
 
/*: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 var(--radius) var(--radius) 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: var(--radius) 0 0 var(--radius);*/
/*}*/
 
/* 목차 버튼은 예외 */
#vector-toc-collapsed-button {
    border-radius: 0;
}
 
/* 입력 상자 둥근 테두리 그림자 적용 */
.oo-ui-textInputWidget .oo-ui-inputWidget-input, .mw-ui-input {
    border-radius: var(--input-radius);
}
.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: var(--check-radius);
}
 
.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: var(--radius);
}
.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: var(--radius);
    border: none;
    box-shadow: #00000030 0px 0px 20px 4px;
    background: color-mix(in srgb, var(--site-background), #ffffffcc 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, var(--site-background), #ffffff87 30%);
}
 
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
     border-radius: var(--radius);
     border-radius: var(--radius);
    border: none;
    background: color-mix(in srgb, var(--site-background), #ffffffcc 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: var(--radius);
}
.oo-ui-window-foot .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child > .oo-ui-buttonElement-button {
    border-bottom-right-radius: var(--radius);
}
}


.oo-ui-messageDialog-actions-horizontal .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
#navigation-buttons .oo-ui-buttonElement {
    background: #ffffffcc;
padding: 0.15em;
font-size: 105%;
margin-right: 0;
}
}


/* 패널 레이아웃 둥근 그림자 테두리 적용 */
#navigation-buttons .oo-ui-buttonElement:first-child {
.oo-ui-panelLayout-framed {
margin-left: 0;
    border-radius: var(--radius);
    border: none;
    box-shadow: #00000030 0px 0px 10px 0px;
}
 
/* 알림 메시지 둥근 그림자 테두리 적용 */
.mw-notification {
    box-shadow: #00000030 0px 0px 20px 5px;
    border-radius: var(--radius);
    border: none;
    background: color-mix(in srgb, var(--site-background), #ffffffcc 95%);
    backdrop-filter: blur(10px);
}
}

2025년 1월 12일 (일) 15:20 기준 최신판

@import url('https://cdn.jsdelivr.net/gh/hsl0/mediawiki-skin-float@mw1.41/vector-2022.css');
:root {
	--site-background: hsl(120 50% 85% / 1);
}
/* 좌하단 네비게이션 (https://bigforest.a2hosted.com/wiki/Mediawiki:Gadget-NavigationButtons.js) */
#navigation-buttons {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    
    display: flex;
    overflow: hidden;
    
    background: color-mix(in srgb,var(--site-background),#ffffffcc 80%);
    backdrop-filter: var(--blur);
    
    box-shadow: var(--section-shadow);
    border-radius: var(--radius);
}

#navigation-buttons .oo-ui-buttonElement {
	padding: 0.15em;
	font-size: 105%;
	margin-right: 0;
}

#navigation-buttons .oo-ui-buttonElement:first-child {
	margin-left: 0;
}
원본 주소 "https://bigforest.a2hosted.com/w/index.php?title=사용자:Hsl0/vector-2022.css&oldid=87423"