참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 인포박스 정당 */
.party-inner-list {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 0;
}
.party-inner-item {
display: flex;
align-items: center;
gap: 7px;
width: calc(100% + 8px);
min-height: 18px;
margin: 2px -4px;
padding: 1px 9px;
border-radius: 4px;
background:
linear-gradient(
to bottom,
#252525 0%,
#1a1a1a 42%,
#111111 100%
);
border: 1px solid #444;
box-shadow:
inset 1px 0 0 rgba(255,255,255,0.10),
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 1px 2px rgba(0,0,0,0.45);
color: #fff;
box-sizing: border-box;
}
.party-color-block {
display: inline-block;
width: 11px;
height: 11px;
flex: 0 0 11px;
border: 1px solid #fff;
box-sizing: border-box;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.20),
0 0 2px rgba(0,0,0,0.75);
}
.party-inner-name {
display: inline-block;
flex: 1;
line-height: 1.35;
color: #fff;
white-space: normal;
}
.party-inner-date {
display: inline-block;
flex: 0 0 auto;
margin-left: 10px;
color: #7F7F7F;
line-height: 1.35;
white-space: nowrap;
}
/* IFP 정당 목록: 색상 박스 위치 보정 */
.party-inner-item > .party-color-block {
position: relative;
top: 1px;
}
/* 인포박스 기본 정보값 유리 커버 */
.infobox-glass-value {
position: relative;
top: -2px;
overflow: hidden;
text-align: left;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 0 16px;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.infobox-glass-value::before,
.infobox-glass-title::before,
.infobox-glass-party::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.infobox-glass-value::after,
.infobox-glass-title::after,
.infobox-glass-party::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.infobox-glass-value > *,
.infobox-glass-title > *,
.infobox-glass-party > * {
position: relative;
z-index: 3;
}
/* 인포박스 국명 / 국호 칸 */
.infobox-glass-title {
position: relative;
top: -2px;
margin-top: 5px;
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 5px;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
/* 인포박스 기간 칸 */
.infobox-glass-period {
position: relative;
top: -2px;
overflow: hidden;
width: 250px;
height: 25px;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 0 16px;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.infobox-glass-period::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
);
}
.infobox-glass-period::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.infobox-glass-period > * {
position: relative;
z-index: 3;
}
/* 인포박스 정당 목록용 값 칸 */
.infobox-glass-party {
position: relative;
top: -2px;
overflow: hidden;
text-align: left;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 3px 10px;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
/* 인포박스 본체 텍스처 */
.clbi-infobox {
border: 2px solid #1a1a1a !important;
background:
radial-gradient(
circle at 18% 12%,
rgba(255,255,255,0.030) 0%,
transparent 24%
),
radial-gradient(
circle at 84% 88%,
rgba(133,67,105,0.055) 0%,
transparent 28%
),
repeating-linear-gradient(
135deg,
rgba(255,255,255,0.015) 0px,
rgba(255,255,255,0.015) 1px,
transparent 1px,
transparent 5px
),
linear-gradient(
to bottom,
#202020 0%,
#1a1a1a 48%,
#121212 100%
) !important;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #525252,
inset 0 0 18px rgba(0,0,0,0.35),
0 0 0 3px #1A1A1A,
0 0 0 5px #854369,
0 4px 12px #000 !important;
overflow: hidden;
}
/* 인포박스 본체 텍스처 */
.clbi-infobox {
border: 2px solid #1a1a1a !important;
background:
radial-gradient(
circle at 20% 12%,
rgba(255,255,255,0.018) 0%,
transparent 34%
),
radial-gradient(
circle at 82% 88%,
rgba(133,67,105,0.022) 0%,
transparent 38%
),
linear-gradient(
to bottom,
#1d1d1d 0%,
#1a1a1a 52%,
#161616 100%
) !important;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #525252,
inset 0 0 16px rgba(0,0,0,0.28),
0 0 0 3px #1A1A1A,
0 0 0 5px #854369,
0 4px 12px #000 !important;
overflow: hidden;
}
/* 인포박스 임기 직책 제목 */
.infobox-glass-office {
position: relative;
top: -2px;
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 5px 16px 5px 16px;
line-height: 1.35;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.infobox-glass-office::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.infobox-glass-office::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.infobox-glass-office > * {
position: relative;
z-index: 3;
}
.infobox-glass-office-main {
display: block;
line-height: 1.25;
}
.infobox-glass-office-date {
display: block;
margin-top: 4px;
font-size: 9px;
line-height: 1.2;
color: #7F7F7F;
font-weight: normal;
}
/* 직위 계승 카드: 대수 / 이름 셀 */
.office-card-text-cell {
position: relative;
overflow: hidden;
width: 220px;
margin-left: auto;
margin-right: auto;
background: #0c0c0c;
color: #fff;
text-align: center;
line-height: 9pt;
box-shadow:
inset 0 -1px 0 #525252,
0 0 0 3px #1A1A1A;
padding: 5px;
box-sizing: border-box;
}
.office-card-text-cell::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.060) 0%,
rgba(255,255,255,0.022) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.040) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.024),
inset 0 0 12px rgba(0,0,0,0.28);
}
.office-card-text-cell::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.16;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.050) 0px,
rgba(255,255,255,0.050) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.office-card-text-cell > * {
position: relative;
z-index: 3;
}
.office-card-rank-cell {
margin-bottom: 5px;
border-radius: 5px 5px 0 0;
}
.office-card-name-cell {
margin-top: 5px;
margin-bottom: 5px;
border-radius: 0 0 5px 5px;
}
/* Compact CRT Orthographic Variant */
.compact-crt-media.compact-crt-orthographic {
--ortho-pad: 8px;
--ortho-effect-inset: 2px;
width: auto;
max-width: none;
padding: var(--ortho-pad);
border-radius: 5px;
line-height: 0;
box-sizing: border-box;
}
/* 일반 텍스트용 색상 박스 */
.ogb-inline {
display: inline-flex;
align-items: center;
gap: 7px;
vertical-align: middle;
line-height: 1.35;
}
.ogb-inline .party-color-block {
position: relative;
top: -1px;
width: 11px;
height: 11px;
flex: 0 0 11px;
}
.ogb-text {
display: inline-block;
position: relative;
top: -2px;
color: inherit;
}
/* 인포박스 orthographic 설명 / 범례 칸 */
.infobox-glass-orthographic {
position: relative;
top: -2px;
overflow: hidden;
width: 290px;
min-height: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
background: #101010;
color: #fff;
padding: 5px 16px;
text-align: center;
font-weight: normal;
line-height: 1.45;
box-sizing: border-box;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555;
}
.infobox-glass-orthographic::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
);
}
.infobox-glass-orthographic::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
opacity: 0.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}
.infobox-glass-orthographic > * {
position: relative;
z-index: 3;
font-weight: normal;
}
/* orthographic 범례: 묶음은 가운데, 내용은 좌측 정렬 */
.orthographic-legend-list {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 2px;
}