미디어위키:Gadget-Vector-2022-sidebar-left.css

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

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

/* 모바일에서도 옆에서 사이드바 펼치기 */
/* 벡터 코드에서 가져옴 (GPL) */
@supports selector(:where(:not(.vector-toc-collapsed)) .mw-page-container-inner:has(#mw-sidebar-checkbox:checked)) {
    .mw-page-container-inner:has(#mw-sidebar-checkbox:checked), :where(:not(.vector-toc-collapsed)) .mw-page-container-inner {
        display: grid;
        width: 100%;
    }
}

#mw-sidebar-checkbox:not(:checked) ~ .vector-sitenotice-container {
	grid-column: sidebar / sitenotice;
}

.mw-body {
    padding-left: 0
}

.mw-page-container-inner > #siteNotice,.vector-sitenotice-container {
    grid-area: sitenotice;
}

.mw-table-of-contents-container {
    grid-area: toc;
}

.mw-header {
    grid-area: header;
}

.vector-sidebar-container {
    grid-area: sidebar;
}

.mw-content-container {
    grid-area: content;
}

.mw-footer-container {
    grid-area: footer;
}
/* 벡터 코드 끝 */

@media screen and (max-width: 1000px) {
	/* 벡터 코드에서 가져옴 (GPL) */
	@supports not selector(.mw-page-container-inner:has(#mw-sidebar-checkbox:checked)) {
	    .mw-page-container-inner {
	        display: grid;
	        width: 100%;
	    }
	}
	
    .mw-page-container-inner {
        grid-template: min-content min-content min-content 1fr min-content / 204px 0 minmax(0,1fr);
        grid-template-areas: 'header header header' 'sitenotice sitenotice sitenotice' 'sidebar gutter content' 'toc gutter content' 'footer footer footer'
    }
    
    .mw-sidebar {
	    width: 196px;
	}
}

@media screen and (max-width: 799.9px) {
	/* 사이드바 펼칠 때만 grid 적용 */
    .mw-page-container-inner {
    	display: block;
    	grid-template-areas: 'header header header' 'sidebar gutter sitenotice' 'sidebar gutter content' 'footer footer footer';
    }
	
	/* 컨텐츠 화면을 옆으로 밀치기 */
	#mw-sidebar-checkbox:checked ~ :is(.vector-sitenotice-container, .mw-content-container) {
		width: 100vw;
	}
	
	/* 사이드바 바깥을 흐리게 */
	#mw-sidebar-checkbox:checked ~ :not(.vector-sidebar-container):not(.mw-header), #mw-sidebar-checkbox:checked ~ .mw-header > :not(.mw-header-aside) {
	    opacity: 25%;
	    cursor: default;
	}
	#mw-sidebar-checkbox:checked ~ :not(.vector-sidebar-container):not(.mw-header) a, #mw-sidebar-checkbox:checked ~ .mw-header > :not(.mw-header-aside) a {
	    cursor: default;
	}
	
	/* 사이드바를 가리는 목차 버튼 숨기기 */
	.vector-below-page-title #mw-sidebar-checkbox:checked ~ * #vector-toc-collapsed-button {
		display: none;
	}
	
	@supports selector(:has(#mw-sidebar-checkbox:checked)) {
		/* 사이드바 펼칠 때만 grid 적용, 목차가 펼쳐질 때는 grid 미적용 */
		.mw-page-container-inner:has(#mw-sidebar-checkbox:checked) {
			display: grid;
		}
		
		/* 배경 디자인에 불과한 밀쳐진 본문으로 인한 불필요한 스크롤 방지 */
		.mw-page-container:has(#mw-sidebar-checkbox:checked) {
			overflow-x: hidden;
		}
	}
}

/* 더 작은 화면에서도 목차 펼쳐놓을 수 있음 */
/* 벡터 코드에서 가져옴 (GPL) */
@media screen and (min-width: 800px) {
	:not(.vector-toc-collapsed) #vector-toc-collapsed-button {
    	display: none;
	}
	
    .mw-table-of-contents-container .sidebar-toc {
		display: block;
		position: static;
		margin-left: -0.75em;
		border: none;
    }
	
	.vector-sticky-toc-container {
		position: sticky;
		top: 0;
	}
	
	.client-js .vector-sticky-header-visible .mw-sticky-header-element,.client-js .vector-sticky-header-visible .charts-stickyhead th {
		top: 3.125rem !important;
	}
		
	.vector-toc-not-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-table-of-contents-container.mw-sticky-header-element {
		margin-top: 1.5em;
	}
	
	.client-js .vector-toc-collapsed.vector-below-page-title .mw-table-of-contents-container .sidebar-toc {
	    position: fixed;
	}
	
	.client-js .vector-toc-collapsed.vector-below-page-title .mw-table-of-contents-container .sidebar-toc {
		top: 36px;
		left: 6px;
	}
	
    @supports (display: grid) {
        .client-js .vector-toc-collapsed #vector-toc-collapsed-button {
            display:block
        }

        .client-js .vector-toc-collapsed .mw-table-of-contents-container.mw-sticky-header-element,.client-js .vector-toc-collapsed .vector-sticky-toc-container {
            position: relative
        }

        .client-js .vector-toc-collapsed .mw-table-of-contents-container .sidebar-toc {
            display: none;
            position: absolute;
            margin: 0;
            border: 1px solid #a2a9b1
        }

        .client-js .vector-toc-collapsed #vector-toc-collapsed-checkbox:checked ~ .mw-table-of-contents-container .sidebar-toc {
            display: block
        }

        .client-js .vector-toc-collapsed .mw-table-of-contents-container {
            grid-area: content
        }

        body:not(.vector-sticky-header-visible).vector-below-page-title.client-js .vector-toc-collapsed #vector-toc-collapsed-button,body:not(.vector-sticky-header-visible).vector-below-page-title.client-js .vector-toc-collapsed .sidebar-toc {
            position: fixed
        }

        .client-js .vector-toc-collapsed .vector-toc-uncollapse-button {
            display: inline-block
        }

        .client-js .vector-toc-not-collapsed .vector-toc-collapse-button {
            display: inline-block
        }
    }
}
/* 벡터 코드 끝 */

미디어위키:Gadget-Vector-2022-sidebar-left.css

둘러보기 메뉴

검색