미디어위키:Vector-2022.css: 두 판 사이의 차이

/* 가로폭이 중간쯤 될 때 위에 위치한 사이드바 문단 내용을 2~3줄로 나누기 */ 
@media screen and (min-width: 480px) and (max-width: 719px) {
    #mw-panel {
      display:grid;
      grid-template-columns: auto auto;
      gap: 5px;
    }
    #p-navigation, #mw-panel > .mw-sidebar-action {
       grid-column: 1 / span 2;
    }
}
@media screen and (min-width: 720px) and (max-width: 999px) {
    #mw-panel {
      display:grid;
      grid-template-columns: auto auto auto;
      gap: 5px;
    }
    #p-navigation, #mw-panel > .mw-sidebar-action {
       grid-column: 1 / span 3;
    }
}


/* 다크모드에서 사이드바 바깥부분의 배경처리 오류 확인 */
.client-darkmode {
	height: initial;
}

#mw-panel #vector-main-menu a {
   padding: 0 6px;

}

/* Vector 2022용 큰숲백과 기본 배경 */
body.skin-vector-2022 {
	background: #98FB98;
}

/* 페이지 전체 바깥 배경 */
body.skin-vector-2022 .mw-page-container {
	background: #98FB98;
}

/* 본문 영역은 흰색 */
body.skin-vector-2022 .mw-body,
body.skin-vector-2022 .mw-body-content,
body.skin-vector-2022 .mw-content-container {
	background: #fff;
}

/* 상단 헤더 주변 */
body.skin-vector-2022 .vector-header-container , body.skin-vector-2022 .mw-header{
	background: #98FB98;
}

/* 왼쪽 메뉴/사이드 헤더 밖 */

body.skin-vector-2022 .vector-column-start {
	background: #98FB98;
}

/* 왼쪽 메뉴/사이드 헤더 감싸기 */

body.skin-vector-2022 .vector-dropdown-content,  
body.skin-vector-2022 .vector-main-menu-container,
body.skin-vector-2022 #mw-panel {
	background: transparent;
}


/* 왼쪽 메뉴/사이드 헤더 안쪽 */

body.skin-vector-2022 nav.vector-main-menu-container, body.skin-vector-2022 .vector-main-menu {
	background: #e8ffe8;
}

/* 푸터 */
body.skin-vector-2022 .mw-footer-container,
body.skin-vector-2022 footer {
	background: #98FB98;
}

/* 선택된 탭/액션 강조 */
body.skin-vector-2022 .vector-page-titlebar-toc,
body.skin-vector-2022 .vector-menu-tabs .selected a,
body.skin-vector-2022 .vector-menu-tabs li.selected a {
	font-weight: bold;
	background: #fff !important;
}

/* 패널 반투명으로 처리 */
body.skin-vector-2022 .vector-dropdown-content, body.skin-vector-2022 .vector-main-menu-container,
body.skin-vector-2022 #mw-panel {
    background: rgba(255, 255, 255, 0.5);
}