미디어위키:Vector-2022.css

/**
 *
 * 특정 이름공간 문서의 배경을 하늘색, 토론 이름공간 문서의 배경을 노란색,
 * 프로젝트 이름공간 문서의 배경을 초록색으로 지정합니다.
 */
#content > :not(.vector-column-end) {
	background-color: var(--content-background);
}

/* 본문 여백 넓히기 (가독성 향상) */
#bodyContent {
    padding: 0 1rem 1rem;
}
.vector-page-titlebar {
	padding: 0.75rem 1rem 0;
}
.vector-page-titlebar::after {
	left: 1rem;
	right: 1rem;
}
.vector-page-toolbar {
    padding: 0 1rem 1px;
}
#ca-addsection {
    min-width: fit-content;
}
@media screen and (max-width: 1119px) {
	#vector-page-titlebar-toc {
	    margin-right: 0;
	}
}
#siteNotice {
    padding: 0 1rem;
}
#footer {
    padding: 1rem;
}

/* 작은 화면에서 화면 폭 늘리기 */
.mw-page-container {
     padding-left: min(calc((100% - 400px) / 13.25), 1.5rem);
     padding-right: min(calc((100% - 400px) / 13.25), 1.5rem);
}

/* 최소 너비 해제 */
@media screen and (max-width: 630px) {
	.vector-header-container .mw-header {
		min-width: 0;
	}
	.mw-logo {
	    container-type: inline-size;
	    width: 100%;
	    min-width: 0;
	}
	
	/* 폭이 매우 작으면 심볼 로고만 표시 (있다면) */
	@container (width < calc(50px + 5em)) {
	    /* 숨겨진 심볼 로고 표시 */
	    .mw-logo-icon {
	        display: block;
	    }
	    
	    /* 심볼 로고가 없고 텍스트 로고만 있지 않은 이상, 텍스트 로고 숨기기 */
	    .mw-logo-container:not(:only-child) {
	        display: none;
	    }
	}
	
    /* 두 줄로 넘어가면 사이트 이름 길이 제한 해제 */
	@container (width >= calc(50px + 5em)) {
	    .mw-logo-container {
	        max-width: unset;
	    }
	}
}

/* 모바일에서 검색할 때 다른 거 치우기 */
@media screen and (max-width: 590px) {
    .vector-header-search-toggled .vector-user-links {
        display: none;
    }
    
    .cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not(.cdx-typeahead-search--expanded) {
    	margin-left: 0;
    }
    
    .vector-search-box .vector-typeahead-search-container {
    	margin-right: 0;
    }
}

/* 검색 버튼이 사이트 이름과 겹치지 않게 */
.mw-header #p-search {
    margin-left: 0;
}

/* 상단 메뉴 최대한 한줄로 유지 */
@media screen and (min-width: 280px) {
    .vector-header:has(.vector-user-menu-logged-out) {
        flex-flow: row;
    }
}

@media screen and (min-width: 400px) {
    .vector-header:has(.vector-user-menu-logged-in) {
        flex-flow: row;
    }
}