사용자:Hsl0/common.css: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
imported>Hsl0
편집 요약 없음
imported>Hsl0
편집 요약 없음
1번째 줄: 1번째 줄:
/* 추가 스크롤 생성 방지 */
body {
    overflow-x: hidden;
}
@media screen and (max-width: 999px) {
@media screen and (max-width: 999px) {
/* 추가 스크롤 생성 방지 */
body {
    overflow-x: hidden;
}
.mw-page-container {
.mw-page-container {
    padding-left: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
    padding-left: clamp(0px, calc(50vw - 14.6875em), 0.9375em);
11번째 줄: 11번째 줄:
    overflow-y: hidden;
    overflow-y: hidden;
}
}
}
/* 불필요한 여백 제거 */
 
.mw-footer-container {
/* 불필요한 여백 제거 */
    padding-top: 0;
.mw-footer-container {
}
    padding-top: 0;
.mw-footer-container {
}
    padding-bottom: 10px;
.mw-footer-container {
}
    padding-bottom: 10px;
}
}



2022년 6월 29일 (수) 04:07 판

@media screen and (max-width: 999px) {
	/* 추가 스크롤 생성 방지 */
	body {
	    overflow-x: hidden;
	}
	.mw-page-container {
	    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;
	    overflow-y: hidden;
	}
	/* 불필요한 여백 제거 */
	.mw-footer-container {
	    padding-top: 0;
	}
	.mw-footer-container {
	    padding-bottom: 10px;
	}
}

/* 반응형 폭 조정 */
.mw-header {
    padding-left: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);
    padding-right: clamp(0px, calc(0.9375em + 50% - 50vw), 0.46875em);
}
#content, #footer {
    padding-right: clamp(0.5em, calc(50vw - 13.75em), 0.9375em);
    padding-left: clamp(0.5em, calc(50vw - 13.75em), 0.9375em);
}

/* 배경이 들어가는 여백 폭 넓히기 */
.mw-content-container, .mw-article-toolbar-container {
    max-width: 61.875em;
}

/* 모바일 환경에서 알림창 폭을 화면 폭에 맞추기 */
@media(max-width: 530px) {
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
        left: 0 !important;
    }
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup {
        width: min(100vw, 500px) !important;
    }
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
        width: 100% !important;
    }
}

/* 모바일에서도 옆에서 사이드바 펼치기 */
@media screen and (max-width: 720px) {
    .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container #mw-panel {
        position: absolute;
        width: 11em;
        height: 100%;
        left: -1em;
    }
}