미디어위키:Common.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
:root {
--wiki: #81b11f;
--current: light-dark(#e0ffdb,#123a0d);
--alternativehistorytab: light-dark(#f5efe3, #2b251e);
--alternativehistoryborder: light-dark(#d1c4b6, #696058);
--alternativehistorytext: light-dark(#524940, HSL(30, 12%, 75%));
--usa: linear-gradient(120deg, #002664 0% 78%, #bb133e 78% 81%, #fff 81% 84%, #bb133e 84% 87%, #fff 87% 90%, #bb133e 90% 93%, #fff 93% 96%, #bb133e 96%);
--korea: linear-gradient(120deg, #fff 5%, #000 5%, #000 9%, #fff 9%, #fff 10%, #000 10%, #000 14%, #fff 14%, #fff 15%, #000 15%, #000 19%, #fff 19%, #fff 81%, #cd313a 81%, #cd313a 90%, #0047a0 90%);
--japan: radial-gradient(circle, #FE0000 69.9%, #fff 70.1%);
--duan: linear-gradient(120deg, #b3344b 11%, #fff 11%, #fff 13%, #b3344b 13%, #b3344b 18%, #fff 18%, #fff 82%, #356c9c 82%, #356c9c 87%, #fff 87%, #fff 89%, #356c9c 89%);
}
#daemunche1 {
background: url(https://w.halv.kr/images/e/ed/%EB%8C%80%EB%AC%B8%EC%A0%9C1.png) center no-repeat;
background-size: contain;
}
#daemunche2 {
background: url(https://w.halv.kr/images/2/26/%EB%8C%80%EB%AC%B8%EC%A0%9C2.png) center no-repeat;
background-size: contain;
}
#daemunche3 {
background: url(https://w.halv.kr/images/d/d5/%EB%8C%80%EB%AC%B8%EC%A0%9C3.png) center no-repeat;
background-size: contain;
}
#daemunche4 {
background: url(https://w.halv.kr/images/c/c5/%EB%8C%80%EB%AC%B8%EC%A0%9C4.png) center no-repeat;
background-size: contain;
}
#daemunche5 {
background: url(https://w.halv.kr/images/2/22/%EB%8C%80%EB%AC%B8%EC%A0%9C5.png) center no-repeat;
background-size: contain;
}
#daemunche6 {
background: url(https://w.halv.kr/images/8/8e/%EB%8C%80%EB%AC%B8%EC%A0%9C6.png) center no-repeat;
background-size: contain;
}
#daemunchett {
background: url(https://w.halv.kr/images/d/d0/%EB%8C%80%EB%AC%B8%EC%A0%9Ctt.png) center no-repeat;
background-size: contain;
}
.rt-target {
background: light-dark(#eaf3ff, #273445) !important;
}
.table-wrap.scrolled #stickyparent {
box-shadow: 3px 0 0 var(--text), -5px 0 0 var(--bg);
}
#stickyparent {
position: sticky;
left: 0px !important;
z-index: 3;
background: var(--bg);
clip-path: inset(0.8px -1.25px 0.8px -3px);
border-right: none !important;
background-clip: padding-box;
}
/* 배지 공통 */
.badge{
display:inline-block;
width:1.9rem; height:1rem;
border:1px solid var(--text);
font-size:.75rem; line-height:1.1;
vertical-align:middle; overflow:hidden; position:relative;
}
.badge--circle{ border-radius:40%; }
.badge--filled{ background:var(--text); color:var(--bg); }
.badge--tight{ width:1.8rem; height:.95rem; line-height:.9; }
.badge--num{
font-family: SeoulAlrimTTF, "Zen Kaku Gothic Antique", CUSTOMFONT, TIMETABLEFONT, TIMETABLEFONT2 !important;
line-height:1;
}
.timetable tr.forcetopalign > td {
vertical-align: top;
}
/* 아이콘 큰 사이즈(LEX/LSL/XSL 등에 사용) */
.icon-lg{
font-size:1.8rem; display:inline-block; margin-top:7px;
}
/* 괄호/브래킷 기호 라인박스 보정 */
.bracket-open{ display:block; margin-top:-7.5px; height:0; margin-bottom:-0.15rem; }
.bracket-close{ display:block; margin-top:-3px; height:0; margin-bottom:-6px; }
/* (참고) 제목 등에서 이미 쓰던 클래스가 있다면 그대로 유지 */
.forcetopalign {
margin-bottom: 0.1rem;
}
/* 공통 스타일 */
/* 공통 스타일 */
.arrow{
--size: 20;
--inner-scale: 0.92;
position: relative;
width: calc(var(--size)*1px);
aspect-ratio: 1 / 2.5;
display: inline-flex;
place-items: center;
font-size: calc(var(--size)*0.78px);
z-index: 0;
font-family: "Zen Kaku Gothic Antique", "CUSTOMFONT","Pretendard", DiaPro, SUITE Variable, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji;
vertical-align: middle;
vertical-align: -webkit-baseline-middle;
justify-content: center;
}
.arrow{ color:var(--text); } /* 기본 글자색 */
.arrow::before,
.arrow::after{
content:"";
position:absolute;
inset:0;
z-index:-1; /* 글자 뒤로 */
}
/* 아래쪽 뾰족(하행) 오각형 */
.arrow--down::before,
.arrow--down::after{
clip-path: polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
}
/* 위쪽 뾰족(상행) 오각형 */
.arrow--up::before,
.arrow--up::after{
clip-path: polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%);
}
.arrow--up {
padding-top: 4px;
}
.arrow--down {
padding-bottom: 4px;
}
/* 테두리 있는 흰 배경(하행) */
.outline{ color:var(--text); }
.outline::before{ background:var(--text); } /* 바깥(테두리색) */
.outline::after{
background:var(--bg); /* 안쪽(배경색) */
transform: scale(var(--inner-scale)); /* 수축해서 테두리 두께 생성 */
transform-origin: 50% 50%;
}
/* 꽉 찬 검정 배경(상행) */
.solid{ color:var(--bg); }
.solid::before{ background:var(--text); } /* 단색 채움 */