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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
imported>Hsl0
편집 요약 없음
편집 요약 없음
태그: 수동 되돌리기
 
(사용자 4명의 중간 판 33개는 보이지 않습니다)
1번째 줄: 1번째 줄:
@media screen and (max-width: 999px) {
/**
.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);
#content > :not(.vector-column-end) {
    padding-right: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);
background-color: var(--background);
}
/* 불필요한 여백 제거 */
.mw-footer-container {
    padding-top: 0;
}
.mw-footer-container {
    padding-bottom: 10px;
}
}
}


.mw-body {
/* 본문 여백 넓히기 (가독성 향상) */
/* [V] 본문 여백 넓히기 (가독성 향상) */
#bodyContent {
     padding-left: 0.5em;
    padding: 0 1em 1em;
}
.mw-body-header {
padding: 1em 1em 0;
box-shadow: 0 calc(1em + 1px) 0 -1em #a2a9b1;
}
.vector-page-toolbar {
     padding: 0 1em 1px;
}
#ca-addsection {
    margin-right: -0.5em;
}
}
 
#vector-page-titlebar-toc-label {
/* [X] viewport에 관계없이 사이드바 펼칠 때 항상 애니메이션 (벡터 코드에서 가져옴) */
    margin-left: 0.5em;
.mw-checkbox-hack-checkbox ~ .mw-workspace-container #mw-panel {
}
     transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out;
#siteNotice {
     padding: 0 1em;
}
}
 
#footer {
/* [V] 공지 숨기기 버튼이 공지 내용을 침범하지 않도록 위로 올리기 */
     padding: 1em;
.mw-dismissable-notice-close {
     float: none;
    text-align: right;
    margin-top: -1.75em;
}
}


@media screen and (max-width: 700px) {
/* 작은 화면에서 화면 폭 늘리기 (720px~400px 사이에서 줄어듦) */
/* [V] 작은 화면에서 화면 폭 늘리기 */
.vector-feature-zebra-design-disabled .mw-page-container {
.mw-page-container {
    padding-left: min(calc(calc(100vw - 400px) / 13.25), 1.5em);
padding-left: 0.5em;
    padding-right: min(calc(calc(100vw - 400px) / 13.25), 1.5em);
padding-right: 0.5em;
}
/* [V] 공지 여백 넓히기 (가독성 향상) */
.vector-sitenotice-container {
padding: 0 0.25em;
}
}
}


@media screen and (max-width: 999px) {
@media screen and (max-width: 999px) {
.mw-logo {
/* 최소 너비 해제 */
min-width: 0; /* [V] 최소 너비 해제 */
.vector-feature-zebra-design-disabled .vector-header-container, .mw-logo {
min-width: 0;
}
}
}
}


/* [V] 가능한 한 옵션 펼쳐두기 */
/* 모바일에서 검색할 때 다른 거 치우기 */
@media screen and (min-width: 430px) {
.mw-article-toolbar-container .mw-portlet-views:not(.emptyPortlet) {
    display: block;
}
    .mw-article-toolbar-container .vector-more-collapsible-item {
        display: none;
    }
}
 
 
/* [V] 모바일에서 검색할 때 다른 거 치우기 */
@media screen and (max-width: 500px) {
@media screen and (max-width: 500px) {
     .vector-header-search-toggled .vector-user-links {
     .vector-header-search-toggled .vector-user-links {
         display: none;
         display: none;
    }
   
    .cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not(.cdx-typeahead-search--expanded) {
    margin-left: 0;
     }
     }
}
}


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

2024년 10월 2일 (수) 18:12 기준 최신판

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

/* 본문 여백 넓히기 (가독성 향상) */
#bodyContent {
    padding: 0 1em 1em;
}
.mw-body-header {
	padding: 1em 1em 0;
	box-shadow: 0 calc(1em + 1px) 0 -1em #a2a9b1;
}
.vector-page-toolbar {
    padding: 0 1em 1px;
}
#ca-addsection {
    margin-right: -0.5em;
}
#vector-page-titlebar-toc-label {
    margin-left: 0.5em;
}
#siteNotice {
    padding: 0 1em;
}
#footer {
    padding: 1em;
}

/* 작은 화면에서 화면 폭 늘리기 (720px~400px 사이에서 줄어듦) */
.vector-feature-zebra-design-disabled .mw-page-container {
    padding-left: min(calc(calc(100vw - 400px) / 13.25), 1.5em);
    padding-right: min(calc(calc(100vw - 400px) / 13.25), 1.5em);
}

@media screen and (max-width: 999px) {
	/* 최소 너비 해제 */
	.vector-feature-zebra-design-disabled .vector-header-container, .mw-logo {
		min-width: 0;
	}
}

/* 모바일에서 검색할 때 다른 거 치우기 */
@media screen and (max-width: 500px) {
    .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;
    }
}

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

/* CSS 우선순위 테스트 */
@layer gadget-Vector-2022 {
	html {
		--gadget-Vector-2022: 1;
		--top: "gadget.Vector-2022";
	}
}