틀:Namucat/styles.css: 두 판 사이의 차이

2024년 5월 19일 (일) 23:33 기준 최신판

/* 기본 분류 가리기 */
.catlinks {
	display: none!important;
}

/* 모바일에서 */
@media screen and (max-width: 768px) {
	/* 모바일 분류 박스 */
	.namucat-main-box {
    	margin-bottom: .8rem;
    	border: 1px solid #ccc;
    	border-radius: 4px;
    	padding: 3px 3px 3px 5px;
	}
	/* 모바일 미분류 박스 */
	.namucat-no-box {
		margin-bottom: .8rem;
		border: 1px solid #bcdff1;
		padding: 10px;
		background: #d9edf7;
		border-radius: 5px;
		color: #31708f;
	}
	/* 헬퍼 버튼 */
	.namucat-helper-btn {
		margin-bottom: .8rem;
		flex: 1;
		border-radius: 5px;
		background: #880e4f;
		padding: 10px;
		color: white;
		text-align: center;
		transition: font-weight .25s, font-size .25s, padding .25s;
	}
	/* 링크 클릭 시 파란 박스 */
	a:active {
		animation-name: btn-background;
		animation-duration: .5s;
		animation-iteration-count: 1;
		animation-timing-function: steps(1, end);
		animation-fill-mode: forwards;
	}
	/* 순환 링크 애니메이션 제외 */
	a.selflink:active {
		animation: none;
	}
	/* 모바일에서 문서 제목 볼드체 해제 */
	.pagename-nobold {
		font-weight: normal;
	}
}
/* 파란 박스가 0.5초 뒤 사라지는 애니메이션 */
@keyframes btn-background {
	from {
		background: rgba(0, 0, 255, .1);
	}
	to {
		background: inherit;
	}
}

/* PC에서 */
@media screen and (min-width: 768px) {
	/* PC 분류 박스 */
	.namucat-main-box {
    	margin-bottom: .8rem;
    	border: 1px solid #ccc;
    	border-radius: 4px;
    	padding: 3px 3px 3px 5px;
	}
	/* PC 미분류 박스 */
	.namucat-no-box {
		margin-bottom: .8rem;
		border: 1px solid #bcdff1;
		padding: 10px;
		background: #d9edf7;
		border-radius: 5px;
		color: #31708f;
	}
	/* 헬퍼 버튼 */
	.namucat-helper-btn {
		margin-bottom: .8rem;
		flex: 1;
		border-radius: 5px;
		background: #880e4f;
		padding: 10px;
		color: white;
		text-align: center;
		transition: font-weight .25s, font-size .25s, padding .25s;
	}
}

/* 헬퍼 버튼 사이 여백 */
.namucat-helper-btn-margin {
	display: inline-block;
	width: 5px;
}

/* 분류 블러 */
.namucat-blur {
	filter: blur(3px);
}
.namucat-blur:hover {
	filter: none;
}

/* 분류 간 구분선 */
.namucat-stick:after {
	border-left: 1px solid #888;
	content: "";
	display: inline-block;
	height: 0.8rem;
	margin: 0 0.4rem -0.1rem;
}

/* 리스트를 나무위키처럼 */
ul:not(#toc) {
	margin: .2em 0 .2em 1.5em!important;
	padding-left: .5rem!important;
	list-style-type: disc;
	list-style-image: none;
}
ol:not(#toc) {
	margin: .2em 0 .2em 1.5em!important;
	padding-left: .5rem!important;
}
dl {
	margin: .2em 0 .2em 1.5em!important;
	padding-left: .5rem!important;
}
li:not(#toc) {
	margin: .2em 0!important;
}
dt {
	margin: .2em 0!important;
}
dd {
	margin: .2em 0!important;
}
ul ul:not(#toc) {
	list-style-type: circle;
	list-style-image: none;
}
ul ul ul:not(#toc) {
	list-style-type: square;
	list-style-image: none;
}
#toc ul {
	margin: 0!important;
	padding: 0.6rem 1.2rem!important;
	border: none;
	border-radius: 0;
	background-color: transparent;
}
#toc ul ul {
	margin: 0 0 0 1rem!important;
	padding: 0!important;
}
#toc li {
	margin: 0!important;
	padding: 0!important;
	border: none;
	border-radius: 0;
	background-color: transparent;
}

/* 목차를 나무위키처럼 */
.toc {
	border-radius: 0!important;
	margin-left: 5px;
	font-size: 15px!important;
	background-color: transparent;
}
.toctitle {
	min-width: 0!important;
	border: none!important;
	background-color: transparent!important;
}
#mw-toc-heading {
	border: none!important;
	font-weight: normal;
	user-select: none;
	background-color: transparent;
}
.tocnumber:after {
	content: '.';
}
.toctext {
	cursor: default;
}
.toctogglespan {
	display: none;
}

/* 문단을 나무위키처럼 */
.reference-paragraph {
	border-bottom: 1px solid #777!important;
}
.mw-headline {
	font-weight: bold;
}
.mw-headline-number {
	cursor: pointer;
}
.mw-headline-number:hover {
	text-decoration: underline;
}
.mw-editsection {
	float: right;
	font-weight: bold;
}
.mw-editsection-visualeditor {
	display: none;
}
.mw-editsection-divider {
	display: none;
}

/* 기타 */
/* 이미지 테두리 색 변경 */
.mw-image-border .mw-file-element {
	border: 1px solid #ddd;
}
/* pre 태그 상하 여백 */
pre {
	margin: .8rem 0;
}
/* del 태그도 마우스 올리면 취소선 해제 */
s:hover {
	text-decoration: none;
}
del:hover {
	text-decoration: none;
}
/* 수식 텍스트 모드 겹침 해결 */
.ltx_document {
	display: none!important;
}