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

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

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

@media screen and (max-width: 999px) {
	body {
	    overflow-x: hidden; /* 불필요한 스크롤 제거 */
	    overflow-y: auto; /* 사이드바가 내용보다 길 경우 스크롤 생성 */
	}
	.mw-page-container {
		/* viewport가 기본 최소 너비인 27.5em(width) + 0.9375em(padding)까지 도달했을 때, padding을 바로 없애지 말고 반응형으로 조금씩 줄임 */
		/* 0 < (100vw - 27.5em(default min-width) - 0.9375em(#content padding)) / 2 < 0.9375em(default padding) */
	    padding-left: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
	    padding-right: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
	    
	    min-width: auto; /* 최소 너비 해제 */
	    overflow-x: hidden; /* 불필요한 스크롤 제거 */
	}
	.mw-header {
		/* .mw-page-container padding이 줄면 여기 padding이 절반까지 늘어남 */
		/* 0 < 0.9375em(parent padding) - (100vw - 100%) / 2 < 0.9375em(parent padding) / 2 < 0.9375em(parent padding) / 2 */
		/* 0.46875em(0.9375em / 2) < .mw-page-container padding + .mw-header padding < 0.9375em */
	    padding-left: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);
	    padding-right: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);
	}
	
	/* 불필요한 여백 제거 */
	.mw-footer-container {
	    padding-top: 0;
	}
	.mw-footer-container {
	    padding-bottom: 10px;
	}
	
	/* 공지 폭 조정 (화면 폭이 좁은 모바일에서 더 줄이면 안보이므로 점차 비율을 늘림) */
    .mw-dismissable-notice .mw-dismissable-notice-body {
    	/* 0 < (100% - 27.5rem(default min-100%)) / 2 < (default margin) */
        margin-left: clamp(0px, calc(50% - 13.75rem), 5em);
        margin-right: clamp(0px, calc(50% - 13.75rem), 20%);
    }
}

#content, #footer {
	/* 본문 여백 넓히기 (가독성 향상) */
	/* 0.9375em = .mw-page-container padding */
    padding-right: 0.9375em;
    padding-left: 0.9375em;
    
    overflow-x: auto; /* 불필요한 스크롤 제거 */
}

/* viewport에 관계없이 사이드바 펼칠 때 항상 애니메이션 (벡터 코드에서 가져옴) */
.mw-checkbox-hack-checkbox ~ .mw-workspace-container #mw-panel {
    transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out;
}

/* 모바일에서 검색할 때 다른 거 치우기 */
@media screen and (max-width: 500px) {
    .vector-header-search-toggled .vector-user-links {
        display: none;
    }
}

/* 폭이 매우 작으면 심볼 로고만 표시 (있다면) */
@media screen and (max-width: 400px) {
	/* 적절한 간격 */
    .mw-header #mw-sidebar-button {
        margin-right: 0.25em;
    }
    /* 숨겨진 심볼 로고 표시 */
    .mw-logo-icon {
        display: block;
    }
    /* 심볼 로고가 없고 텍스트 로고만 있지 않은 이상, 텍스트 로고 숨기기 */
    .mw-logo-container:not(:only-child) {
        display: none;
    }
}