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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
imported>Hsl0
편집 요약 없음
잔글 (Senouis의 편집을 Hsl0의 마지막 판으로 되돌림)
태그: 일괄 되돌리기
(사용자 4명의 중간 판 21개는 보이지 않습니다)
1번째 줄: 1번째 줄:
@media screen and (max-width: 999px) {
/* 본문 여백 넓히기 (가독성 향상) */
body {
/*.mw-body {*/
    overflow-x: hidden; /* 불필요한 스크롤 제거 */
/*   padding: 1em 1em 1.5em;*/
    overflow-y: auto; /* 사이드바가 내용보다 길 경우 스크롤 생성 */
/*}*/
}
 
.mw-page-container {
/* 공지 숨기기 버튼이 공지 내용을 침범하지 않도록 위로 올리기 */
/* viewport가 기본 최소 너비인 27.5em(width) + 0.9375em(padding)까지 도달했을 때, padding을 바로 없애지 말고 반응형으로 조금씩 줄임 */
/*.mw-dismissable-notice-close {*/
/* 0 < (100vw - 27.5em(default min-width) - 0.9375em(#content padding)) / 2 < 0.9375em(default padding) */
/*   float: none;*/
    padding-left: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
/*   text-align: right;*/
    padding-right: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
/*   margin-top: -1.75em;*/
   
/*   margin-right: 0.5em;*/
    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 {
/* 공지 폭 조정 (화면 폭이 좁은 모바일에서 더 줄이면 안보이므로 점차 비율을 늘림) */
/* 본문 여백 넓히기 (가독성 향상) */
/*.mw-dismissable-notice .mw-dismissable-notice-body {*/
/* 0.9375em = .mw-page-container padding */
/* 0 < (100vw - 600px) / 2 < (default margin) */
    padding-right: 0.9375em;
/* margin-left: clamp(1em, calc(50vw - 300px), 5em);*/
    padding-left: 0.9375em;
/* margin-right: clamp(1em, calc(50vw - 300px), 20%);*/
   
/*}*/
    overflow-x: auto; /* 불필요한 스크롤 제거 */
}


/* [X] viewport에 관계없이 사이드바 펼칠 때 항상 애니메이션 (벡터 코드에서 가져옴) */
/*@media screen and (max-width: 799.9px) {*/
.mw-checkbox-hack-checkbox ~ .mw-workspace-container #mw-panel {
/* 작은 화면에서 화면 폭 늘리기 */
    transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out;
/* .mw-page-container {*/
}
/* padding-left: 0.5em;*/
/* padding-right: 0.5em;*/
/* }*/
/* 공지 여백 넓히기 (가독성 향상) */
/* .vector-sitenotice-container {*/
/* padding: 0 0.25em;*/
/* }*/
/*}*/


/* [V] 공지 숨기기 버튼이 공지 내용을 침범하지 않도록 위로 올리기 */
.mw-dismissable-notice-close {
    float: none;
    text-align: right;
    margin-top: -1.75em;
}


@media screen and (max-width: 999px) {
@media screen and (max-width: 999px) {
.mw-logo {
/* 최소 너비 해제 */
min-width: 0; /* [V] 최소 너비 해제 */
.vector-header-container, .mw-logo {
min-width: 0;
}
}
/* 헤더 여백 늘리기 */
/* .mw-header {*/
/* margin-left: 0.5em;*/
/* margin-right: 0.5em;*/
/* }*/
/*}*/
/* 작은 화면에서 여백 최소화 */
/*@media screen and (max-width: 600px) {*/
/* .mw-page-container {*/
/* padding-left: 0;*/
/* padding-right: 0;*/
/* }*/
/* .mw-footer-container {*/
/* margin-left: 0.5em;*/
/* margin-right: 0.5em;*/
/* }*/
}
}


/* [V] 가능한 한 옵션 펼쳐두기 */
/* 가능한 한 옵션 펼쳐두기 */
@media screen and (min-width: 430px) {
/*@media screen and (min-width: 430px) {*/
.mw-article-toolbar-container .mw-portlet-views:not(.emptyPortlet) {
/* .mw-article-toolbar-container .mw-portlet-views:not(.emptyPortlet) {*/
    display: block;
/*     display: block;*/
}
/* }*/
    .mw-article-toolbar-container .vector-more-collapsible-item {
        display: none;
/*    .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 {
82번째 줄: 78번째 줄:
}
}


/* [V] 폭이 매우 작으면 심볼 로고만 표시 (있다면) */
/* 폭이 매우 작으면 심볼 로고만 표시 (있다면) */
@media screen and (max-width: 400px) {
/*@media screen and (max-width: 400px) {*/
/* 적절한 간격 */
/* 적절한 간격 */
    .mw-header #mw-sidebar-button {
/*    .mw-header #mw-sidebar-button {*/
        margin-right: 0.25em;
/*        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;*/
     }
/*    }*/
}
/*}*/
 
/*@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);*/
/*     padding-right: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);*/
/* }*/
/* 불필요한 여백 제거 */
/* .mw-footer-container {*/
/*     padding-top: 0;*/
/* }*/
/* .mw-footer-container {*/
/*     padding-bottom: 10px;*/
/* }*/
/*}*/
 
/* [X] viewport에 관계없이 사이드바 펼칠 때 항상 애니메이션 (벡터 코드에서 가져옴) */
/*.mw-checkbox-hack-checkbox ~ .mw-workspace-container #mw-panel {*/
/*    transition: transform 100ms ease-out,opacity 100ms ease-out,visibility 100ms ease-out;*/
/*}*/
/*.client-darkmode {*/
/* height: initial;*/
/*}*/

2024년 8월 30일 (금) 13:08 판

/* 본문 여백 넓히기 (가독성 향상) */
/*.mw-body {*/
/*    padding: 1em 1em 1.5em;*/
/*}*/

/* 공지 숨기기 버튼이 공지 내용을 침범하지 않도록 위로 올리기 */
/*.mw-dismissable-notice-close {*/
/*    float: none;*/
/*    text-align: right;*/
/*    margin-top: -1.75em;*/
/*    margin-right: 0.5em;*/
/*}*/

/* 공지 폭 조정 (화면 폭이 좁은 모바일에서 더 줄이면 안보이므로 점차 비율을 늘림) */
/*.mw-dismissable-notice .mw-dismissable-notice-body {*/
	/* 0 < (100vw - 600px) / 2 < (default margin) */
/*	margin-left: clamp(1em, calc(50vw - 300px), 5em);*/
/*	margin-right: clamp(1em, calc(50vw - 300px), 20%);*/
/*}*/

/*@media screen and (max-width: 799.9px) {*/
	/* 작은 화면에서 화면 폭 늘리기 */
/*	.mw-page-container {*/
/*		padding-left: 0.5em;*/
/*		padding-right: 0.5em;*/
/*	}*/
	
	/* 공지 여백 넓히기 (가독성 향상) */
/*	.vector-sitenotice-container {*/
/*		padding: 0 0.25em;*/
/*	}*/
/*}*/


@media screen and (max-width: 999px) {
	/* 최소 너비 해제 */
	.vector-header-container, .mw-logo {
		min-width: 0;
	}
	
	/* 헤더 여백 늘리기 */
/*	.mw-header {*/
/*		margin-left: 0.5em;*/
/*		margin-right: 0.5em;*/
/*	}*/
/*}*/

/* 작은 화면에서 여백 최소화 */
/*@media screen and (max-width: 600px) {*/
/*	.mw-page-container {*/
/*		padding-left: 0;*/
/*		padding-right: 0;*/
/*	}*/
	
/*	.mw-footer-container {*/
/*		margin-left: 0.5em;*/
/*		margin-right: 0.5em;*/
/*	}*/
}

/* 가능한 한 옵션 펼쳐두기 */
/*@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;*/
/*    }*/
/*}*/


/* 모바일에서 검색할 때 다른 거 치우기 */
@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;*/
/*    }*/
/*}*/

/*@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);*/
/*	    padding-right: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);*/
/*	}*/
	
	/* 불필요한 여백 제거 */
/*	.mw-footer-container {*/
/*	    padding-top: 0;*/
/*	}*/
/*	.mw-footer-container {*/
/*	    padding-bottom: 10px;*/
/*	}*/
/*}*/

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