|
|
| 1번째 줄: |
1번째 줄: |
| @import url('/index.php?title=MediaWiki:Template.Infobox.css&action=raw&ctype=text/css');
| |
|
| |
| /* ========================================= | | /* ========================================= |
| Proitem Animation | | COASTLINE: BLACK ICE - Theme |
| ========================================= */ | | ========================================= */ |
| | | /* screen-header 쓰는 문서만 푸커 숨기기 */ |
| .wip-stripe-layer {
| | body:has(.screen-header) .liberty-footer { |
| position: absolute;
| | display: none !important; |
| top: 0;
| |
| left: -280px;
| |
| width: calc(100% + 560px);
| |
| height: 100%;
| |
| opacity: 0.08;
| |
| background: repeating-linear-gradient(
| |
| 45deg,
| |
| #969696,
| |
| #969696 10px,
| |
| transparent 10px,
| |
| transparent 20px
| |
| ); | |
| z-index: 0;
| |
| } | | } |
| | | body:has(.screen-header) footer { |
| .wip-active .wip-stripe-layer {
| | display: none !important; |
| animation: wip-stripe-move 8s linear infinite;
| |
| }
| |
| | |
| .wip-standby .wip-stripe-layer { | |
| animation: none; | |
| }
| |
| | |
| @keyframes wip-stripe-move {
| |
| from { transform: translateX(0); }
| |
| to { transform: translateX(280px); }
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* 색상 텍스트 틀 및 색상 범위 공통 처리 */ |
| Collapsible
| |
| ========================================= */
| |
| | |
| [id^="collapsible"] {
| |
| overflow: hidden;
| |
| transition: max-height .25s ease;
| |
| max-height: 0;
| |
| }
| |
| | |
| /* =========================================
| |
| Color
| |
| ========================================= */
| |
| | |
| .color-text { | | .color-text { |
| color: var(--text-color); | | color: var(--text-color, #fff) !important; |
| } | | } |
|
| |
|
| .color-text a, | | .color-text a, |
| .color-text a:visited, | | .color-text a:visited, |
| .color-text a:hover, | | .color-text a.external { |
| .color-text a:active { | | color: var(--text-color, #fff) !important; |
| color: var(--text-color) !important; | |
| text-decoration-color: var(--text-color) !important;
| |
| } | | } |
|
| |
|
| /* =========================================
| | .color-text a:hover { |
| CRT Glitch Panel
| | color: var(--text-color, #fff) !important; |
| ========================================= */
| |
| | |
| .crt-glitch-panel { | |
| position: relative; | |
| overflow: hidden;
| |
| isolation: isolate;
| |
| border-radius: 5px;
| |
| box-shadow:
| |
| inset 0 0 18px rgba(255,255,255,0.04),
| |
| inset 0 0 42px rgba(133,67,105,0.10),
| |
| 0 0 18px rgba(133,67,105,0.20);
| |
| } | | } |
|
| |
|
| .crt-glitch-panel .vanishing-grid-bg {
| | /* 선택 영역 */ |
| position: relative;
| | ::selection { |
| overflow: hidden;
| | background: rgba(133, 67, 105, 0.50); |
| border-radius: 5px;
| | color: #ffffff; |
| background: | |
| radial-gradient(circle at 50% 45%, rgba(212,90,162,0.18) 0%, transparent 32%),
| |
| linear-gradient(to bottom, #111 0%, #090909 58%, #030303 100%) !important;
| |
| } | | } |
|
| |
|
| .crt-glitch-panel > * {
| | ::-moz-selection { |
| position: relative; | | background: rgba(133, 67, 105, 0.50); |
| z-index: 2; | | color: #ffffff; |
| } | | } |
|
| |
|
| .crt-glow-content { | | /* SVG + 테두리일 때 사각 테두리 제거, 형태 외곽선만 적용 */ |
| position: relative; | | .mw-image-border:has(img[src$=".svg.png"]) { |
| z-index: 2; | | border: none !important; |
| text-shadow: | | box-shadow: none !important; |
| -1px 0 0 rgba(80,160,255,0.75),
| | background: transparent !important; |
| 1px 0 0 rgba(255,55,90,0.65),
| | padding: 0 !important; |
| 2px 0 0 rgba(255,210,70,0.45),
| |
| 0 0 2px rgba(255,255,255,0.35),
| |
| 0 0 6px rgba(212,90,162,0.22),
| |
| 0 0 12px rgba(133,67,105,0.18);
| |
| filter: drop-shadow(0 0 5px rgba(212,90,162,0.18)); | |
| } | | } |
|
| |
|
| .crt-glow-content::before { | | .mw-image-border img[src$=".svg.png"] { |
| content: "";
| | border: none !important; |
| position: absolute;
| | box-shadow: none !important; |
| inset: -24px;
| |
| z-index: -1;
| |
| pointer-events: none; | |
| background: | |
| radial-gradient(
| |
| circle at 50% 35%,
| |
| rgba(255,255,255,0.08) 0%,
| |
| rgba(212,90,162,0.10) 18%,
| |
| rgba(133,67,105,0.08) 34%,
| |
| transparent 68%
| |
| );
| |
| filter: blur(18px);
| |
| opacity: 0.75;
| |
| }
| |
| | |
| .crt-glitch-panel .fake-h1,
| |
| .crt-glitch-panel h1,
| |
| .crt-glitch-panel h2,
| |
| .crt-glitch-panel strong {
| |
| text-shadow:
| |
| -1px 0 0 rgba(80,160,255,0.95),
| |
| 1px 0 0 rgba(255,55,90,0.85),
| |
| 2px 0 0 rgba(255,210,70,0.55),
| |
| 0 0 3px rgba(255,255,255,0.65),
| |
| 0 0 10px rgba(255,255,255,0.28),
| |
| 0 0 18px rgba(212,90,162,0.35),
| |
| 0 0 32px rgba(133,67,105,0.24);
| |
| }
| |
| | |
| .crt-glitch-panel img {
| |
| filter: | | filter: |
| drop-shadow(-1px 0 0 rgba(80,160,255,0.65)) | | drop-shadow(1px 0 0 #ffffff) |
| drop-shadow(1px 0 0 rgba(255,55,90,0.55)) | | drop-shadow(-1px 0 0 #ffffff) |
| drop-shadow(2px 0 0 rgba(255,210,70,0.35)) | | drop-shadow(0 1px 0 #ffffff) |
| drop-shadow(0 0 6px rgba(212,90,162,0.18)); | | drop-shadow(0 -1px 0 #ffffff); |
| } | | } |
|
| |
|
| .crt-glitch-panel::before {
| | /* 폰트 */ |
| content: ""; | | @font-face { |
| position: absolute;
| | font-family: 'Galmuri11'; |
| inset: -80px 0;
| | src: url('/fonts/Galmuri11.woff2') format('woff2'); |
| z-index: 3;
| | font-weight: 400; |
| pointer-events: none;
| | font-display: block; |
| opacity: 0.22;
| |
| background: | |
| repeating-linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.08) 0px,
| |
| rgba(255,255,255,0.08) 1px,
| |
| transparent 2px,
| |
| transparent 5px
| |
| );
| |
| mix-blend-mode: screen; | |
| animation: crt-scanlines-up 7s linear infinite; | |
| } | | } |
|
| |
|
| .crt-glitch-panel::after {
| | @font-face { |
| content: ""; | | font-family: 'Galmuri11'; |
| position: absolute;
| | src: url('/fonts/Galmuri11-Bold.woff2') format('woff2'); |
| inset: 0;
| | font-weight: 700; |
| z-index: 4;
| | font-display: block; |
| pointer-events: none; | |
| opacity: 0;
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.18) 48%,
| |
| rgba(212,90,162,0.28) 50%,
| |
| rgba(90,120,255,0.16) 52%,
| |
| transparent 56%
| |
| );
| |
| mix-blend-mode: screen; | |
| animation: crt-glitch-band-up 6.5s steps(1, end) infinite; | |
| } | | } |
|
| |
|
| /* =========================================
| | @font-face { |
| Horizontal CRT Warp
| | font-family: 'BoldRound'; |
| ========================================= */
| | src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/BoldDungGeunMo.woff2') format('woff2'); |
| | | font-weight: normal; |
| .crt-horizontal-warp { | | font-display: swap; |
| position: relative;
| |
| overflow: hidden; | |
| isolation: isolate; | |
| } | | } |
|
| |
|
| .crt-horizontal-warp .crt-glow-content { | | html body, html .liberty-content-main { |
| animation: crt-base-drift 9s steps(1, end) infinite; | | font-family: 'Galmuri11', sans-serif !important; |
| background-image: | | font-weight: 400 !important; |
| repeating-linear-gradient(
| | font-size: 12px; |
| to bottom,
| |
| rgba(120,180,255,0.00) 0px,
| |
| rgba(120,180,255,0.00) 3px,
| |
| rgba(120,180,255,0.05) 4px,
| |
| rgba(255,80,170,0.035) 5px,
| |
| rgba(120,180,255,0.00) 7px
| |
| );
| |
| background-blend-mode: screen; | |
| } | | } |
|
| |
|
| .crt-horizontal-warp .crt-glow-content::after {
| | * { font-family: inherit !important; } |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 6;
| |
| pointer-events: none;
| |
| opacity: 0;
| |
| background:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| rgba(120,180,255,0.18) 10%,
| |
| rgba(255,255,255,0.18) 48%,
| |
| rgba(212,90,162,0.20) 78%,
| |
| transparent 100%
| |
| );
| |
| mix-blend-mode: screen;
| |
| animation: crt-wide-horizontal-tear 3.8s steps(1, end) infinite;
| |
| } | |
|
| |
|
| /* =========================================
| | .fa, .far, .fas, .fab, [class*="fa-"] { |
| CRT Animations
| | font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important; |
| ========================================= */
| |
| | |
| @keyframes crt-scanlines-up {
| |
| from { | |
| transform: translateY(0);
| |
| }
| |
| | |
| to {
| |
| transform: translateY(-80px);
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes crt-glitch-band-up {
| | .mw-page-title-main, .mw-page-title-namespace, |
| 0%, 12%, 27%, 43%, 58%, 76%, 100% {
| | .liberty-content-main h1, .liberty-content-main h2, |
| opacity: 0;
| | .liberty-content-main h3, .liberty-content-main h4, |
| transform: translateY(100%);
| | .liberty-content-main h5, .liberty-content-main h6 { |
| }
| | font-family: 'BoldRound', sans-serif !important; |
| | |
| 13% {
| |
| opacity: 0.75;
| |
| transform: translateY(70%);
| |
| }
| |
| | |
| 14% {
| |
| opacity: 0.15;
| |
| transform: translateY(62%) skewX(-2deg);
| |
| }
| |
| | |
| 28% {
| |
| opacity: 0.55;
| |
| transform: translateY(35%);
| |
| }
| |
| | |
| 29% {
| |
| opacity: 0.18;
| |
| transform: translateY(28%) skewX(2deg);
| |
| }
| |
| | |
| 44% {
| |
| opacity: 0.65;
| |
| transform: translateY(10%);
| |
| }
| |
| | |
| 45% {
| |
| opacity: 0.12;
| |
| transform: translateY(4%) skewX(-1deg);
| |
| }
| |
| | |
| 59% {
| |
| opacity: 0.5;
| |
| transform: translateY(-20%);
| |
| }
| |
| | |
| 60% {
| |
| opacity: 0.16;
| |
| transform: translateY(-26%) skewX(2deg);
| |
| } | |
| | |
| 77% {
| |
| opacity: 0.55;
| |
| transform: translateY(-55%);
| |
| }
| |
| | |
| 78% {
| |
| opacity: 0;
| |
| transform: translateY(-70%);
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes crt-base-drift {
| | /* 배경 */ |
| 0%, 88%, 100% {
| | html { |
| transform: translateX(0);
| | min-height: 100%; |
| filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
| | overflow-y: scroll; |
| }
| | background: #000000 !important; |
| | |
| 89% { | |
| transform: translateX(-2px) skewX(-0.4deg);
| |
| filter:
| |
| contrast(1.08)
| |
| brightness(1.05)
| |
| drop-shadow(0 0 7px rgba(212,90,162,0.24));
| |
| }
| |
| | |
| 90% {
| |
| transform: translateX(3px) skewX(0.5deg);
| |
| } | |
| | |
| 91% {
| |
| transform: translateX(-1px);
| |
| } | |
| | |
| 92% {
| |
| transform: translateX(0);
| |
| filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes crt-wide-horizontal-tear {
| | body { |
| 0%, 8%, 17%, 29%, 43%, 61%, 78%, 100% { | | min-height: 100%; |
| opacity: 0;
| | margin: 0 !important; |
| transform: translateX(0);
| | background: #000000 !important; |
| clip-path: inset(0 0 0 0);
| |
| }
| |
| | |
| 9% {
| |
| opacity: 0.45;
| |
| transform: translateX(-18px) skewX(-3deg);
| |
| clip-path: inset(18% 0 70% 0);
| |
| }
| |
| | |
| 10% {
| |
| opacity: 0.28;
| |
| transform: translateX(24px) skewX(4deg);
| |
| clip-path: inset(21% 0 64% 0);
| |
| }
| |
| | |
| 18% {
| |
| opacity: 0.38;
| |
| transform: translateX(32px) skewX(5deg);
| |
| clip-path: inset(42% 0 47% 0);
| |
| }
| |
| | |
| 19% {
| |
| opacity: 0.16;
| |
| transform: translateX(-28px) skewX(-4deg);
| |
| clip-path: inset(46% 0 43% 0);
| |
| }
| |
| | |
| 30% {
| |
| opacity: 0.48;
| |
| transform: translateX(-36px) skewX(-6deg);
| |
| clip-path: inset(58% 0 30% 0);
| |
| }
| |
| | |
| 31% {
| |
| opacity: 0.18;
| |
| transform: translateX(20px) skewX(3deg);
| |
| clip-path: inset(61% 0 27% 0);
| |
| }
| |
| | |
| 44% {
| |
| opacity: 0.36;
| |
| transform: translateX(18px) skewX(3deg);
| |
| clip-path: inset(8% 0 84% 0);
| |
| }
| |
| | |
| 45% {
| |
| opacity: 0.12;
| |
| transform: translateX(-14px) skewX(-2deg);
| |
| clip-path: inset(11% 0 80% 0);
| |
| }
| |
| | |
| 62% {
| |
| opacity: 0.44;
| |
| transform: translateX(-42px) skewX(-7deg);
| |
| clip-path: inset(73% 0 16% 0);
| |
| } | |
| | |
| 63% {
| |
| opacity: 0.18;
| |
| transform: translateX(30px) skewX(4deg);
| |
| clip-path: inset(76% 0 12% 0);
| |
| }
| |
| | |
| 79% {
| |
| opacity: 0.42;
| |
| transform: translateX(26px) skewX(4deg);
| |
| clip-path: inset(31% 0 58% 0);
| |
| } | |
| | |
| 80% {
| |
| opacity: 0.14;
| |
| transform: translateX(-20px) skewX(-3deg);
| |
| clip-path: inset(34% 0 54% 0);
| |
| }
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* 이전 JS 배경 레이어는 사용하지 않음 */ |
| Retro Horizon Grid Background
| | .WW-bg { |
| ========================================= */
| | display: none !important; |
| | |
| .retro-grid-bg { | |
| position: relative; | |
| overflow: hidden;
| |
| border-radius: 5px;
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(13, 6, 19, 0.98) 0%,
| |
| rgba(25, 9, 33, 0.82) 44%,
| |
| rgba(53, 19, 56, 0.50) 60%,
| |
| rgba(4, 4, 7, 0.96) 61%,
| |
| rgba(2, 2, 4, 1) 100%
| |
| ) !important;
| |
| }
| |
| | |
| .retro-grid-bg .crt-glow-content {
| |
| position: relative;
| |
| z-index: 5;
| |
| }
| |
| | |
| .retro-grid-bg::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: -10%;
| |
| right: -10%;
| |
| top: 56%;
| |
| height: 16%;
| |
| z-index: 1;
| |
| pointer-events: none;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 50%,
| |
| rgba(230,210,225,0.28) 0%,
| |
| rgba(204,94,168,0.30) 20%,
| |
| rgba(184,56,142,0.20) 44%,
| |
| transparent 76%
| |
| );
| |
| filter: blur(9px);
| |
| opacity: 0.68;
| |
| }
| |
| | |
| .retro-grid-bg::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 50%;
| |
| top: 61%;
| |
| width: 150%;
| |
| height: 115%;
| |
| z-index: 2;
| |
| pointer-events: none;
| |
| background-image:
| |
| linear-gradient(
| |
| to right,
| |
| rgba(204,64,156,0.72) 1px,
| |
| transparent 1px
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(204,64,156,0.70) 1px,
| |
| transparent 1px
| |
| );
| |
| background-size:
| |
| 48px 100%,
| |
| 100% 26px;
| |
| transform-origin: 50% 0%;
| |
| transform:
| |
| translateX(-50%)
| |
| perspective(430px)
| |
| rotateX(66deg);
| |
| opacity: 0.78;
| |
| filter:
| |
| drop-shadow(0 0 3px rgba(204,64,156,0.58))
| |
| drop-shadow(0 0 10px rgba(204,64,156,0.30));
| |
| animation: retro-grid-flow 1.8s linear infinite;
| |
| mask-image:
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| black 4%,
| |
| black 82%,
| |
| transparent 100%
| |
| );
| |
| -webkit-mask-image:
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| black 4%,
| |
| black 82%,
| |
| transparent 100%
| |
| );
| |
| }
| |
| | |
| .retro-grid-bg .crt-glow-content::before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: -42px;
| |
| z-index: -1;
| |
| pointer-events: none;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 56%,
| |
| rgba(220,220,225,0.05) 0%,
| |
| rgba(204,64,156,0.07) 22%,
| |
| rgba(96,152,204,0.05) 42%,
| |
| transparent 70%
| |
| );
| |
| filter: blur(20px);
| |
| opacity: 0.52;
| |
| } | | } |
|
| |
|
| @keyframes retro-grid-flow {
| | /* Canvas 기반 고정 하프톤 배경 */ |
| from {
| | #site-halftone-bg { |
| background-position:
| | position: fixed; |
| 0 0,
| |
| 0 0;
| |
| }
| |
| | |
| to {
| |
| background-position:
| |
| 0 0,
| |
| 0 -26px;
| |
| }
| |
| }
| |
| | |
| /* ========================================= | |
| CRT Monitor Frame
| |
| ========================================= */
| |
| | |
| .crt-monitor-frame {
| |
| position: relative;
| |
| box-sizing: border-box;
| |
| padding: 34px 46px 38px 46px;
| |
| border-radius: 22px;
| |
| background:
| |
| linear-gradient(145deg, #303030 0%, #181818 22%, #080808 58%, #202020 100%);
| |
| border: 2px solid #2f2f2f;
| |
| box-shadow:
| |
| inset 0 2px 0 rgba(255,255,255,0.18),
| |
| inset 0 -3px 0 rgba(0,0,0,0.85),
| |
| inset 3px 0 0 rgba(255,255,255,0.06),
| |
| inset -3px 0 0 rgba(0,0,0,0.75),
| |
| 0 0 0 3px #050505,
| |
| 0 0 0 5px #242424,
| |
| 0 12px 20px rgba(0,0,0,0.62),
| |
| 0 24px 42px rgba(0,0,0,0.52),
| |
| 0 42px 70px rgba(0,0,0,0.34);
| |
| }
| |
| | |
| .crt-monitor-frame::before {
| |
| content: "";
| |
| position: absolute; | |
| inset: 0; | | inset: 0; |
| border-radius: 22px; | | width: 100vw; |
| | height: 100vh; |
| | z-index: 0; |
| pointer-events: none; | | pointer-events: none; |
| opacity: 0.16;
| | background: #000000; |
| background: | |
| repeating-linear-gradient(
| |
| 135deg,
| |
| rgba(255,255,255,0.035) 0px,
| |
| rgba(255,255,255,0.035) 1px,
| |
| transparent 1px,
| |
| transparent 5px
| |
| ),
| |
| radial-gradient(
| |
| ellipse at 28% 12%,
| |
| rgba(255,255,255,0.12) 0%,
| |
| transparent 45%
| |
| );
| |
| mix-blend-mode: screen;
| |
| }
| |
| | |
| .crt-monitor-frame::after {
| |
| content: none;
| |
| } | | } |
|
| |
|
| .crt-monitor-inner {
| | /* 배경 캔버스보다 실제 위키 UI가 위에 놓이도록 함 */ |
| | body > :not(#site-halftone-bg) { |
| position: relative; | | position: relative; |
| box-sizing: border-box; | | z-index: 1; |
| padding: 18px;
| |
| border-radius: 16px;
| |
| background:
| |
| linear-gradient(145deg, #050505 0%, #111 44%, #070707 100%);
| |
| border: 1px solid #050505;
| |
| box-shadow:
| |
| inset 0 5px 14px rgba(0,0,0,0.95),
| |
| inset 0 -2px 4px rgba(255,255,255,0.06),
| |
| inset 4px 0 10px rgba(0,0,0,0.85),
| |
| inset -4px 0 10px rgba(0,0,0,0.85),
| |
| 0 1px 0 rgba(255,255,255,0.12);
| |
| } | | } |
|
| |
|
| .crt-monitor-screen {
| | /* 관리자 툴은 기존 우선순위를 유지 */ |
| position: relative; | | #dev-tools-panel { |
| overflow: hidden;
| | position: fixed !important; |
| border-radius: 9px / 18px;
| | z-index: 99998 !important; |
| background: #050505;
| |
| border: 2px solid #050505; | |
| box-shadow:
| |
| inset 0 0 0 2px #151515,
| |
| inset 0 0 22px rgba(0,0,0,0.95),
| |
| inset 0 0 48px rgba(0,0,0,0.75),
| |
| 0 0 0 1px rgba(255,255,255,0.08),
| |
| 0 0 18px rgba(133,67,105,0.18);
| |
| } | | } |
|
| |
|
| .crt-monitor-screen::before {
| | /* OOUI/MediaWiki 팝업 계열 안전 보정 */ |
| content: "";
| | .oo-ui-windowManager, |
| position: absolute;
| | .oo-ui-defaultOverlay, |
| inset: 0;
| | .mw-notification-area, |
| z-index: 20;
| | .mw-notification-area-overlay { |
| pointer-events: none;
| |
| border-radius: 9px / 18px;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 50%,
| |
| transparent 0%,
| |
| transparent 58%,
| |
| rgba(0,0,0,0.22) 82%,
| |
| rgba(0,0,0,0.58) 100%
| |
| ),
| |
| linear-gradient(
| |
| 105deg,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.05) 18%,
| |
| transparent 38%,
| |
| transparent 100%
| |
| );
| |
| box-shadow:
| |
| inset 0 0 28px rgba(255,255,255,0.04),
| |
| inset 0 0 60px rgba(0,0,0,0.65);
| |
| }
| |
| | |
| .crt-monitor-screen .crt-glitch-panel, | |
| .crt-monitor-screen .retro-grid-bg { | |
| border-radius: 8px / 16px;
| |
| }
| |
| | |
| .crt-monitor-screen .crt-glitch-panel { | |
| box-shadow: none;
| |
| }
| |
| | |
| #clbi-main-crt-hero-wrap {
| |
| width: 100%;
| |
| margin: 0 auto 14px auto;
| |
| }
| |
| | |
| #clbi-main-crt-hero {
| |
| width: 100%;
| |
| }
| |
| | |
| /* =========================================
| |
| Compact CRT Media Frame
| |
| ========================================= */
| |
| | |
| .compact-crt-media {
| |
| position: relative; | | position: relative; |
| box-sizing: border-box; | | z-index: 100000 !important; |
| width: fit-content;
| |
| max-width: 100%;
| |
| margin: 6px auto;
| |
| padding: 10px 14px;
| |
| border-radius: 10px;
| |
| background:
| |
| linear-gradient(
| |
| 145deg,
| |
| #242424 0%,
| |
| #141414 34%,
| |
| #070707 70%,
| |
| #171717 100%
| |
| );
| |
| border: 1px solid #2b2b2b;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.12),
| |
| inset 0 -2px 0 rgba(0,0,0,0.82),
| |
| inset 2px 0 0 rgba(255,255,255,0.035),
| |
| inset -2px 0 0 rgba(0,0,0,0.62),
| |
| 0 0 0 2px #050505,
| |
| 0 0 0 3px #242424,
| |
| 0 4px 12px rgba(0,0,0,0.68);
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .compact-crt-media .mw-default-size,
| | /* 스크롤 */ |
| .compact-crt-media .mw-file-element,
| | html { overflow-y: scroll; } |
| .compact-crt-media img {
| | ::-webkit-scrollbar { width: 6px; } |
| position: relative;
| | ::-webkit-scrollbar-track { background: #0a0909; } |
| z-index: 1;
| | ::-webkit-scrollbar-thumb { background: #854369; border-radius: 3px; } |
| } | |
|
| |
|
| .compact-crt-media img { | | /* 제목 */ |
| max-width: 100%; | | .mw-page-title-main { |
| height: auto; | | border-radius: 5px 5px 0 0 !important; |
| filter: | | padding: 7px !important; |
| drop-shadow(0 1px 3px rgba(0,0,0,0.72))
| | border: 2px solid #854369 !important; |
| drop-shadow(0 0 4px rgba(255,255,255,0.06));
| | border-bottom: none !important; |
| animation: compact-crt-image-jitter 1.25s steps(1, end) infinite; | | background: #171717 !important; |
| | color: #e2e2e2 !important; |
| | display: inline-block !important; |
| | position: relative !important; |
| } | | } |
|
| |
|
| .compact-crt-media::before { | | .mw-page-title-main::after { |
| content: ""; | | content: ''; |
| position: absolute; | | position: absolute; |
| inset: 6px; | | bottom: -2px; |
| z-index: 3; | | left: 0; |
| border-radius: 7px; | | right: 0; |
| pointer-events: none; | | height: 2px; |
| background: | | background: #171717; |
| radial-gradient(
| |
| ellipse at 50% 50%,
| |
| transparent 0%,
| |
| transparent 54%,
| |
| rgba(0,0,0,0.20) 78%,
| |
| rgba(0,0,0,0.58) 100%
| |
| ),
| |
| linear-gradient(
| |
| 105deg,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.040) 18%,
| |
| transparent 38%,
| |
| transparent 100%
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.030) 0%,
| |
| transparent 34%,
| |
| rgba(0,0,0,0.26) 100%
| |
| );
| |
| box-shadow:
| |
| inset 0 0 18px rgba(255,255,255,0.028),
| |
| inset 0 0 38px rgba(0,0,0,0.66);
| |
| } | | } |
|
| |
|
| .compact-crt-media::after { | | .mw-page-title-namespace { |
| content: ""; | | padding: 7px 0 7px 7px !important; |
| position: absolute; | | border: 2px solid #854369 !important; |
| inset: 6px; | | border-right: none !important; |
| z-index: 4; | | border-bottom: none !important; |
| border-radius: 7px; | | border-radius: 5px 0 0 0 !important; |
| pointer-events: none; | | background: #171717 !important; |
| opacity: 0.34; | | color: #e2e2e2 !important; |
| background: | | display: inline-block !important; |
| repeating-linear-gradient(
| | vertical-align: bottom !important; |
| to bottom,
| | position: relative !important; |
| rgba(255,255,255,0.070) 0px,
| |
| rgba(255,255,255,0.070) 1px,
| |
| transparent 2px,
| |
| transparent 4px
| |
| );
| |
| mix-blend-mode: screen; | |
| } | | } |
|
| |
|
| .compact-crt-static { | | .mw-page-title-namespace::after { |
| | content: ''; |
| position: absolute; | | position: absolute; |
| inset: 6px; | | bottom: -2px; |
| z-index: 5;
| | left: 0; |
| border-radius: 7px;
| | right: 0; |
| pointer-events: none; | | height: 2px; |
| opacity: 0.30;
| | background: #171717; |
| background: | |
| repeating-linear-gradient(
| |
| to bottom,
| |
| transparent 0px,
| |
| transparent 4px,
| |
| rgba(255,255,255,0.10) 5px,
| |
| transparent 6px,
| |
| transparent 10px
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| transparent 43%,
| |
| rgba(255,255,255,0.11) 49%,
| |
| rgba(180,180,180,0.08) 50%,
| |
| rgba(90,90,90,0.08) 51%,
| |
| transparent 56%,
| |
| transparent 100%
| |
| );
| |
| mix-blend-mode: screen; | |
| animation: | |
| compact-crt-static-roll 3.8s linear infinite,
| |
| compact-crt-static-flicker 1.7s steps(1, end) infinite;
| |
| } | | } |
|
| |
|
| .compact-crt-media:hover::after { | | .mw-page-title-separator { |
| opacity: 0.40; | | padding: 7px 0 !important; |
| }
| | border-top: 2px solid #854369 !important; |
| | | border-bottom: none !important; |
| .compact-crt-media:hover .compact-crt-static {
| | background: #171717 !important; |
| opacity: 0.36; | | color: #e2e2e2 !important; |
| }
| | display: inline-block !important; |
| | | vertical-align: bottom !important; |
| .compact-crt-media:hover img {
| | position: relative !important; |
| filter:
| |
| drop-shadow(0 1px 3px rgba(0,0,0,0.78))
| |
| drop-shadow(0 0 5px rgba(255,255,255,0.08));
| |
| }
| |
| | |
| @keyframes compact-crt-static-roll {
| |
| from { | |
| background-position:
| |
| 0 0,
| |
| 0 110%;
| |
| } | |
| | |
| to {
| |
| background-position:
| |
| 0 -32px,
| |
| 0 -30%;
| |
| } | |
| }
| |
| | |
| @keyframes compact-crt-static-flicker {
| |
| 0%, 100% {
| |
| transform: translateX(0);
| |
| opacity: 0.26;
| |
| } | |
| | |
| 11% {
| |
| transform: translateX(-1px);
| |
| opacity: 0.36;
| |
| } | |
| | |
| 12% {
| |
| transform: translateX(1px);
| |
| opacity: 0.22;
| |
| }
| |
| | |
| 36% {
| |
| transform: translateX(0);
| |
| opacity: 0.30;
| |
| }
| |
| | |
| 37% {
| |
| transform: translateX(1px);
| |
| opacity: 0.38;
| |
| }
| |
| | |
| 38% {
| |
| transform: translateX(-1px);
| |
| opacity: 0.24;
| |
| } | |
| | |
| 64% {
| |
| transform: translateX(0);
| |
| opacity: 0.32;
| |
| }
| |
| | |
| 65% {
| |
| transform: translateX(-1px);
| |
| opacity: 0.40;
| |
| }
| |
| | |
| 66% {
| |
| transform: translateX(0);
| |
| opacity: 0.26;
| |
| }
| |
| } | | } |
|
| |
|
| @keyframes compact-crt-image-jitter {
| | .mw-page-title-separator::after { |
| 0%, 82%, 100% {
| | content: ''; |
| transform: translateX(0);
| |
| }
| |
| | |
| 83% {
| |
| transform: translateX(-1px);
| |
| }
| |
| | |
| 84% {
| |
| transform: translateX(1px);
| |
| }
| |
| | |
| 85% {
| |
| transform: translateX(0);
| |
| }
| |
| | |
| 92% {
| |
| transform: translateX(1px);
| |
| }
| |
| | |
| 93% {
| |
| transform: translateX(-1px);
| |
| }
| |
| | |
| 94% {
| |
| transform: translateX(0);
| |
| }
| |
| }
| |
| | |
| .compact-crt-media.compact-crt-portrait {
| |
| padding: 4px 5px;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| .compact-crt-media.compact-crt-portrait::before {
| |
| inset: 3px;
| |
| border-radius: 5px;
| |
| }
| |
| | |
| .compact-crt-media.compact-crt-portrait::after {
| |
| inset: 3px;
| |
| border-radius: 5px;
| |
| }
| |
| | |
| .compact-crt-media.compact-crt-portrait .compact-crt-static {
| |
| inset: 3px;
| |
| border-radius: 5px;
| |
| }
| |
| | |
| .compact-crt-media.compact-crt-portrait img,
| |
| .compact-crt-media.compact-crt-portrait .mw-file-element {
| |
| display: block;
| |
| }
| |
| | |
| /* =========================================
| |
| Related Template Title
| |
| ========================================= */
| |
| | |
| .related-template-title {
| |
| position: relative;
| |
| overflow: hidden;
| |
| width: 100%;
| |
| border-radius: 5px;
| |
| background: #111111;
| |
| color: #fff;
| |
| box-shadow:
| |
| inset 1px 0 0 #494949,
| |
| inset 0 -1px 0 #555;
| |
| }
| |
| | |
| .related-template-title::before {
| |
| content: ""; | |
| position: absolute; | | position: absolute; |
| inset: 0; | | bottom: -2px; |
| z-index: 1; | | left: 0; |
| pointer-events: none; | | right: 0; |
| border-radius: inherit; | | height: 2px; |
| background: | | background: #171717; |
| 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);
| |
| } | | } |
|
| |
|
| .related-template-title::after { | | .mw-page-title-namespace ~ .mw-page-title-main { |
| content: "";
| | border-radius: 0 5px 0 0 !important; |
| position: absolute;
| | padding: 7px 7px 7px 0 !important; |
| inset: 0;
| | border-left: none !important; |
| z-index: 2;
| | vertical-align: bottom !important; |
| 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; | |
| } | | } |
|
| |
|
| .related-template-title > * { | | /* 특수 페이지 h1 */ |
| position: relative; | | .liberty-content-header .title h1:not(:has(.mw-page-title-main)) { |
| z-index: 3; | | background: #171717 !important; |
| | color: #e2e2e2 !important; |
| | border: 2px solid #854369 !important; |
| | border-bottom: none !important; |
| | border-radius: 5px 5px 0 0 !important; |
| | padding: 7px !important; |
| | display: inline-block !important; |
| | position: relative !important; |
| | font-family: 'BoldRound', sans-serif !important; |
| } | | } |
|
| |
|
| /* =========================================
| | .liberty-content-header .title h1:not(:has(.mw-page-title-main))::after { |
| Page Top CRT Banner
| | content: ''; |
| Template use:
| |
| {{Banner|[[파일:example.png{{!}}1000px{{!}}link=]]|80px|20px}}
| |
| 2번 인자: 양수면 좌측 이동
| |
| 3번 인자: 양수면 아래 이동
| |
| ========================================= */
| |
| | |
| .crt-page-monitor-frame { | |
| position: relative;
| |
| box-sizing: border-box;
| |
| width: 100%;
| |
| aspect-ratio: 2560 / 580;
| |
| margin: 0 auto 16px auto;
| |
| padding: 14px 20px 16px 20px;
| |
| border-radius: 18px;
| |
| background:
| |
| linear-gradient(
| |
| 145deg,
| |
| #151515 0%,
| |
| #0b0b0b 28%,
| |
| #050505 58%,
| |
| #181818 100%
| |
| );
| |
| border: 2px solid #242424;
| |
| box-shadow:
| |
| inset 0 3px 8px rgba(0,0,0,0.78),
| |
| inset 0 -2px 0 rgba(255,255,255,0.030),
| |
| inset 4px 0 10px rgba(0,0,0,0.72),
| |
| inset -3px 0 0 rgba(0,0,0,0.78),
| |
| 0 0 0 3px #050505,
| |
| 0 0 0 5px #242424;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .crt-page-monitor-frame::before {
| |
| content: ""; | |
| position: absolute; | | position: absolute; |
| inset: 0; | | bottom: -2px; |
| border-radius: 18px;
| | left: 0; |
| pointer-events: none; | | right: 0; |
| opacity: 0.08; | | height: 2px; |
| background: | | background: #171717; |
| linear-gradient(
| |
| to bottom,
| |
| rgba(0,0,0,0.38) 0%,
| |
| transparent 20%,
| |
| transparent 100%
| |
| ),
| |
| linear-gradient(
| |
| to right,
| |
| rgba(0,0,0,0.34) 0%,
| |
| transparent 18%,
| |
| transparent 100%
| |
| );
| |
| mix-blend-mode: normal; | |
| } | | } |
|
| |
|
| .crt-page-monitor-frame::after { | | /* 대문 제목 숨기기 */ |
| content: none; | | .mw-page-title-main.clbi-hide, |
| | .mw-page-title-main.clbi-hide::after { |
| | display: none !important; |
| } | | } |
|
| |
|
| .crt-page-monitor-inner { | | /* 본문 */ |
| position: relative;
| | .Liberty .content-wrapper .liberty-content .liberty-content-main, |
| box-sizing: border-box;
| | .mw-datatable th, .mw-datatable tr:hover td, textarea, |
| width: 100%;
| | div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, |
| height: 100%;
| | div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon { |
| padding: 6px;
| | background: #171717; |
| border-radius: 13px;
| | color: #ffffff; |
| background:
| |
| linear-gradient(
| |
| 145deg,
| |
| #020202 0%,
| |
| #080808 45%,
| |
| #030303 100%
| |
| );
| |
| border: 1px solid #020202; | |
| box-shadow: | |
| inset 0 11px 24px rgba(0,0,0,0.98),
| |
| inset 0 -2px 3px rgba(255,255,255,0.028),
| |
| inset 8px 0 20px rgba(0,0,0,0.94),
| |
| inset -8px 0 20px rgba(0,0,0,0.94),
| |
| 0 0 0 1px rgba(255,255,255,0.030);
| |
| } | | } |
|
| |
|
| .crt-page-monitor-screen { | | .mw-references-columns { |
| position: relative;
| | border-top: 1px solid #414141 !important; |
| width: 100%;
| |
| height: 100%;
| |
| overflow: hidden;
| |
| border-radius: 8px / 15px; | |
| background: #050505;
| |
| border: 1px solid #060606;
| |
| box-shadow:
| |
| inset 0 0 18px rgba(0,0,0,0.88),
| |
| inset 0 0 42px rgba(0,0,0,0.70),
| |
| 0 0 0 1px rgba(255,255,255,0.026);
| |
| } | | } |
|
| |
|
| .crt-page-monitor-image, | | /* 문단 보더 */ |
| .crt-page-monitor-image-base, | | .Liberty .content-wrapper .liberty-content .liberty-content-main h1, |
| .crt-page-monitor-image-bloom, | | .Liberty .content-wrapper .liberty-content .liberty-content-main h2, |
| .crt-page-monitor-slice { | | .Liberty .content-wrapper .liberty-content .liberty-content-main h3, |
| position: absolute; | | .Liberty .content-wrapper .liberty-content .liberty-content-main h4, |
| inset: 0; | | .Liberty .content-wrapper .liberty-content .liberty-content-main h5, |
| line-height: 0; | | .Liberty .content-wrapper .liberty-content .liberty-content-main h6 { |
| | margin-top: 1rem; |
| | border-bottom: 1px solid #414141 !important; |
| | margin-bottom: 0.6rem; |
| | padding-bottom: 0.6rem; |
| | overflow-wrap: break-word; |
| overflow: hidden; | | overflow: hidden; |
| } | | } |
|
| |
|
| .crt-page-monitor-image { | | /* 링크 색상 */ |
| z-index: 1;
| | a { color: #d45aa2 !important; } |
| } | | a:hover { color: #fdecf9 !important; } |
| | a:active { color: #b3337d !important; } |
| | a.new { color: #ba0000 !important; } |
| | a.new:hover { color: #fe5757 !important; } |
| | a.new:active { color: #ba0000 !important; } |
| | a.external { color: #33b733 !important; text-decoration: underline !important; } |
| | a.external:hover { color: #95ed95 !important; } |
| | a.external:active { color: #33b733 !important; } |
| | a.external:before { display: none !important; } |
|
| |
|
| .crt-page-monitor-image-base { | | /* CLBI 템플릿 링크 */ |
| z-index: 3;
| | .CLBI-template a { color: #d45aa2 !important; } |
| } | | .CLBI-template a:hover { color: #fdecf9 !important; } |
| | .CLBI-template a:active { color: #b3337d !important; } |
| | .CLBI-template a.new { color: #ba0000 !important; } |
| | .CLBI-template a.new:hover { color: #fe5757 !important; } |
| | .CLBI-template a.new:active { color: #ba0000 !important; } |
| | .CLBI-template a.external { color: #33b733 !important; } |
| | .CLBI-template a.external:hover { color: #95ed95 !important; } |
| | .CLBI-template a.external:active { color: #33b733 !important; } |
|
| |
|
| .crt-page-monitor-image-bloom { | | /* 편집 버튼 */ |
| z-index: 4; | | .btn-secondary { |
| pointer-events: none; | | color: #e2e2e2 !important; |
| opacity: 0.38; | | background-color: #171717 !important; |
| mix-blend-mode: normal; | | border: 2px solid #854369 !important; |
| filter: | | border-bottom: none !important; |
| blur(9px)
| | border-radius: 0 !important; |
| brightness(0.92)
| | box-shadow: 0 2px 0 0 #854369 !important; |
| contrast(1.02)
| |
| saturate(1.04);
| |
| } | | } |
|
| |
|
| .crt-page-monitor-image-base a, | | .btn-secondary:hover { |
| .crt-page-monitor-image-base span,
| | color: #d46262 !important; |
| .crt-page-monitor-image-base .mw-file-description,
| | background-color: #171717 !important; |
| .crt-page-monitor-image-base .mw-default-size,
| | border: 2px solid #854369 !important; |
| .crt-page-monitor-image-base .mw-image-border,
| | border-bottom: none !important; |
| .crt-page-monitor-image-bloom a,
| | border-radius: 0 !important; |
| .crt-page-monitor-image-bloom span,
| | box-shadow: 0 2px 0 0 #854369 !important; |
| .crt-page-monitor-image-bloom .mw-file-description,
| |
| .crt-page-monitor-image-bloom .mw-default-size,
| |
| .crt-page-monitor-image-bloom .mw-image-border,
| |
| .crt-page-monitor-slice a,
| |
| .crt-page-monitor-slice span,
| |
| .crt-page-monitor-slice .mw-file-description,
| |
| .crt-page-monitor-slice .mw-default-size,
| |
| .crt-page-monitor-slice .mw-image-border {
| |
| position: absolute !important;
| |
| inset: 0 !important; | |
| display: block !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| } | | } |
|
| |
|
| .crt-page-monitor-image-base img, | | .btn-group .btn:first-child { border-radius: 5px 0 0 0 !important; } |
| .crt-page-monitor-image-base .mw-file-element, | | .btn-group .dropdown-toggle { border-radius: 0 5px 0 0 !important; } |
| .crt-page-monitor-image-bloom img,
| |
| .crt-page-monitor-image-bloom .mw-file-element,
| |
| .crt-page-monitor-slice img,
| |
| .crt-page-monitor-slice .mw-file-element,
| |
| .crt-page-monitor-slice-img {
| |
| position: absolute !important;
| |
| inset: 0 !important;
| |
| display: block !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| max-width: none !important;
| |
| max-height: none !important;
| |
| object-fit: cover !important;
| |
| object-position: center center;
| |
| border: 0 !important;
| |
| transform:
| |
| translate(
| |
| calc(0px - var(--crt-img-left, 0px)),
| |
| var(--crt-img-down, 0px)
| |
| )
| |
| scale(var(--crt-img-scale, 1.04));
| |
| transform-origin: center center;
| |
| } | |
|
| |
|
| .crt-page-monitor-image-base img, | | /* 기본 목차: 본문에서는 숨김 */ |
| .crt-page-monitor-image-base .mw-file-element { | | .liberty-content-main #toc, |
| filter: | | .liberty-content-main .toc { |
| brightness(0.84)
| | display: none !important; |
| contrast(1.08)
| |
| saturate(0.90);
| |
| } | | } |
|
| |
|
| .crt-page-monitor-image-bloom img,
| | /* 왼쪽 목차: 전체 내용 영역 */ |
| .crt-page-monitor-image-bloom .mw-file-element {
| | #side-toc-box .toc-sidebar-content { |
| transform: | | padding: 10px 12px !important; |
| translate(
| |
| calc(0px - var(--crt-img-left, 0px)),
| |
| var(--crt-img-down, 0px)
| |
| )
| |
| scale(calc(var(--crt-img-scale, 1.04) + 0.02));
| |
| } | | } |
|
| |
|
| .crt-page-monitor-slice img,
| | /* 왼쪽 목차: 새로 생성한 목차 목록 */ |
| .crt-page-monitor-slice .mw-file-element,
| | #side-toc-box .generated-toc { |
| .crt-page-monitor-slice-img {
| | margin: 0 !important; |
| filter:
| | padding: 0 !important; |
| brightness(0.96)
| | list-style: none !important; |
| contrast(1.18)
| | background: transparent !important; |
| saturate(0.82);
| |
| }
| |
| | |
| .crt-page-monitor-image::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: -3%;
| |
| z-index: 6;
| |
| pointer-events: none;
| |
| opacity: 0.16;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 45%,
| |
| rgba(220,235,230,0.12) 0%,
| |
| rgba(170,190,185,0.05) 34%,
| |
| rgba(70,85,82,0.03) 62%,
| |
| transparent 100%
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.04) 0%,
| |
| rgba(255,255,255,0.014) 28%,
| |
| transparent 70%,
| |
| rgba(0,0,0,0.08) 100%
| |
| );
| |
| mix-blend-mode: normal;
| |
| }
| |
| | |
| .crt-page-monitor-slice {
| |
| z-index: 5;
| |
| opacity: 0;
| |
| pointer-events: none;
| |
| mix-blend-mode: screen;
| |
| will-change: transform, opacity, clip-path, filter;
| |
| }
| |
| | |
| .crt-page-monitor-slice-a {
| |
| animation: crt-slice-tear-a 4.7s steps(1, end) infinite;
| |
| }
| |
| | |
| .crt-page-monitor-slice-b {
| |
| animation: crt-slice-tear-b 6.1s steps(1, end) infinite;
| |
| }
| |
| | |
| .crt-page-monitor-slice-c {
| |
| animation: crt-slice-tear-c 7.4s steps(1, end) infinite;
| |
| }
| |
| | |
| .crt-page-monitor-screen::before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 20;
| |
| pointer-events: none;
| |
| border-radius: 8px / 15px;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 50%,
| |
| transparent 0%,
| |
| transparent 62%,
| |
| rgba(0,0,0,0.16) 78%,
| |
| rgba(0,0,0,0.42) 100%
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(0,0,0,0.18) 0%,
| |
| transparent 14%,
| |
| transparent 82%,
| |
| rgba(0,0,0,0.24) 100%
| |
| ),
| |
| linear-gradient(
| |
| to right,
| |
| rgba(0,0,0,0.18) 0%,
| |
| transparent 8%,
| |
| transparent 92%,
| |
| rgba(0,0,0,0.18) 100%
| |
| ),
| |
| linear-gradient(
| |
| 105deg,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.030) 18%,
| |
| transparent 38%,
| |
| transparent 100%
| |
| );
| |
| box-shadow:
| |
| inset 0 0 20px rgba(255,255,255,0.018),
| |
| inset 0 0 54px rgba(0,0,0,0.54);
| |
| }
| |
| | |
| .crt-page-monitor-screen::after {
| |
| content: ""; | |
| position: absolute;
| |
| inset: -80px 0;
| |
| z-index: 21;
| |
| pointer-events: none;
| |
| opacity: 0.20;
| |
| background:
| |
| repeating-linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.08) 0px,
| |
| rgba(255,255,255,0.08) 1px,
| |
| transparent 2px,
| |
| transparent 5px
| |
| );
| |
| mix-blend-mode: screen;
| |
| animation: crt-scanlines-up 7s linear infinite;
| |
| }
| |
| | |
| .crt-page-monitor-glitch {
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 22;
| |
| pointer-events: none;
| |
| opacity: 0;
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.12) 48%,
| |
| rgba(212,90,162,0.14) 50%,
| |
| rgba(90,120,255,0.08) 52%,
| |
| transparent 56%
| |
| );
| |
| mix-blend-mode: screen;
| |
| animation: crt-soft-glitch-band 8.2s steps(1, end) infinite;
| |
| }
| |
| | |
| .crt-page-monitor-tear {
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 23;
| |
| pointer-events: none;
| |
| opacity: 0;
| |
| background:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| rgba(120,180,255,0.07) 10%,
| |
| rgba(255,255,255,0.11) 48%,
| |
| rgba(212,90,162,0.08) 78%,
| |
| transparent 100%
| |
| );
| |
| mix-blend-mode: screen;
| |
| animation: crt-soft-horizontal-tear 5.6s steps(1, end) infinite;
| |
| }
| |
| | |
| @keyframes crt-slice-tear-a {
| |
| 0%, 11%, 100% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 12% {
| |
| opacity: 0.38;
| |
| transform: translateX(-18px);
| |
| clip-path: inset(17% 0 78% 0);
| |
| }
| |
| | |
| 13% {
| |
| opacity: 0.22;
| |
| transform: translateX(11px);
| |
| clip-path: inset(18% 0 77% 0);
| |
| filter: hue-rotate(-8deg);
| |
| }
| |
| | |
| 14% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 63% {
| |
| opacity: 0.30;
| |
| transform: translateX(9px);
| |
| clip-path: inset(24% 0 70% 0);
| |
| }
| |
| | |
| 64% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| }
| |
| | |
| @keyframes crt-slice-tear-b {
| |
| 0%, 37%, 100% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 38% {
| |
| opacity: 0.42;
| |
| transform: translateX(24px);
| |
| clip-path: inset(43% 0 50% 0);
| |
| }
| |
| | |
| 39% {
| |
| opacity: 0.26;
| |
| transform: translateX(-14px);
| |
| clip-path: inset(45% 0 48% 0);
| |
| filter: hue-rotate(10deg) brightness(1.08);
| |
| }
| |
| | |
| 40% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 78% {
| |
| opacity: 0.34;
| |
| transform: translateX(-20px);
| |
| clip-path: inset(51% 0 43% 0);
| |
| }
| |
| | |
| 79% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| }
| |
| | |
| @keyframes crt-slice-tear-c {
| |
| 0%, 21%, 100% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 22% {
| |
| opacity: 0.28;
| |
| transform: translateX(-30px);
| |
| clip-path: inset(67% 0 25% 0);
| |
| }
| |
| | |
| 23% {
| |
| opacity: 0.18;
| |
| transform: translateX(16px);
| |
| clip-path: inset(68% 0 23% 0);
| |
| filter: contrast(1.25) brightness(1.06);
| |
| }
| |
| | |
| 24% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| | |
| 91% {
| |
| opacity: 0.36;
| |
| transform: translateX(18px);
| |
| clip-path: inset(73% 0 18% 0);
| |
| }
| |
| | |
| 92% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 100% 0);
| |
| }
| |
| }
| |
| | |
| @keyframes crt-soft-glitch-band {
| |
| 0%, 52%, 100% {
| |
| opacity: 0;
| |
| transform: translateY(80%);
| |
| }
| |
| | |
| 53% {
| |
| opacity: 0.42;
| |
| transform: translateY(36%);
| |
| }
| |
| | |
| 54% {
| |
| opacity: 0.16;
| |
| transform: translateY(20%) skewX(-1deg);
| |
| }
| |
| | |
| 55% {
| |
| opacity: 0;
| |
| transform: translateY(-20%);
| |
| }
| |
| }
| |
| | |
| @keyframes crt-soft-horizontal-tear {
| |
| 0%, 68%, 100% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 0 0);
| |
| }
| |
| | |
| 69% {
| |
| opacity: 0.32;
| |
| transform: translateX(-16px);
| |
| clip-path: inset(34% 0 58% 0);
| |
| }
| |
| | |
| 70% {
| |
| opacity: 0.18;
| |
| transform: translateX(12px);
| |
| clip-path: inset(37% 0 55% 0);
| |
| }
| |
| | |
| 71% {
| |
| opacity: 0;
| |
| transform: translateX(0);
| |
| clip-path: inset(0 0 0 0);
| |
| }
| |
| }
| |
| | |
| @media (prefers-reduced-motion: reduce) {
| |
| .crt-page-monitor-slice-a,
| |
| .crt-page-monitor-slice-b,
| |
| .crt-page-monitor-slice-c,
| |
| .crt-page-monitor-screen::after,
| |
| .crt-page-monitor-glitch,
| |
| .crt-page-monitor-tear {
| |
| animation: none !important;
| |
| } | |
| | |
| .crt-page-monitor-slice,
| |
| .crt-page-monitor-glitch,
| |
| .crt-page-monitor-tear {
| |
| opacity: 0 !important;
| |
| } | |
| }
| |
| | |
| /* =========================================
| |
| Historical Events Timeline
| |
| ========================================= */
| |
| | |
| .timeline-event {
| |
| position: relative;
| |
| display: block;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| line-height: inherit;
| |
| text-align: center;
| |
| }
| |
| | |
| .timeline-title {
| |
| position: relative;
| |
| z-index: 2;
| |
| display: inline-block;
| |
| text-align: center;
| |
| }
| |
| | |
| .timeline-event.he-linked::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: -2px;
| |
| left: 2px;
| |
| right: 2px;
| |
| height: 3px;
| |
| border-radius: 999px;
| |
| pointer-events: none;
| |
| background: | |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| color-mix(in srgb, var(--he-color) 18%, transparent) 8%,
| |
| color-mix(in srgb, var(--he-color) 92%, transparent) 14%,
| |
| color-mix(in srgb, var(--he-color) 92%, transparent) 86%,
| |
| color-mix(in srgb, var(--he-color) 18%, transparent) 92%,
| |
| transparent 100%
| |
| );
| |
| box-shadow:
| |
| 0 0 7px color-mix(in srgb, var(--he-color) 28%, transparent);
| |
| }
| |
| | |
| .timeline-event.he-root {
| |
| overflow: visible;
| |
| }
| |
| | |
| .timeline-event.he-root::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 6%;
| |
| right: 6%;
| |
| top: 50%;
| |
| height: 16px;
| |
| transform: translateY(-50%);
| |
| border-radius: 999px;
| |
| pointer-events: none;
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.05) 0%,
| |
| rgba(0,0,0,0.24) 100%
| |
| ),
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| color-mix(in srgb, var(--he-color) 10%, transparent) 8%,
| |
| color-mix(in srgb, var(--he-color) 24%, transparent) 18%,
| |
| color-mix(in srgb, var(--he-color) 36%, transparent) 50%,
| |
| color-mix(in srgb, var(--he-color) 24%, transparent) 82%,
| |
| color-mix(in srgb, var(--he-color) 10%, transparent) 92%,
| |
| transparent 100%
| |
| );
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.05),
| |
| inset 0 -1px 0 rgba(0,0,0,0.42),
| |
| 0 0 8px color-mix(in srgb, var(--he-color) 16%, transparent);
| |
| -webkit-mask-image:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| black 10%,
| |
| black 90%,
| |
| transparent 100%
| |
| );
| |
| mask-image:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| black 10%,
| |
| black 90%,
| |
| transparent 100%
| |
| );
| |
| }
| |
| | |
| .timeline-event.he-root::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 10%;
| |
| right: 10%;
| |
| top: 50%;
| |
| height: 22px;
| |
| transform: translateY(-50%);
| |
| pointer-events: none;
| |
| background:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| color-mix(in srgb, var(--he-color) 48%, transparent) 16%,
| |
| color-mix(in srgb, var(--he-color) 48%, transparent) 84%,
| |
| transparent 100%
| |
| ) top center / 100% 1px no-repeat,
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| color-mix(in srgb, var(--he-color) 24%, transparent) 16%,
| |
| color-mix(in srgb, var(--he-color) 24%, transparent) 84%,
| |
| transparent 100%
| |
| ) bottom center / 100% 1px no-repeat;
| |
| }
| |
| | |
| .timeline-event.he-root .timeline-title {
| |
| text-shadow:
| |
| 0 0 4px color-mix(in srgb, var(--he-color) 34%, transparent),
| |
| 0 0 9px color-mix(in srgb, var(--he-color) 16%, transparent);
| |
| }
| |
| | |
| /* =========================================
| |
| Tree List
| |
| ========================================= */
| |
| | |
| .tree-container {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .tree-node {
| |
| position: relative;
| |
| padding-left: 20px;
| |
| margin: 0;
| |
| text-indent: 0;
| |
| line-height: 1.55;
| |
| }
| |
| | |
| .tree-node::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 7px;
| |
| width: 1.2px;
| |
| height: 100%;
| |
| background: #7F7F7F;
| |
| }
| |
| | |
| .tree-node::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 12px;
| |
| left: 7px;
| |
| width: 8px;
| |
| height: 0;
| |
| border-top: 1.2px solid #7F7F7F;
| |
| }
| |
| | |
| .tree-node:last-of-type::before {
| |
| height: 12px;
| |
| }
| |
| | |
| /* =========================================
| |
| Meeting Composition Panel
| |
| ========================================= */
| |
| | |
| .meeting-panel {
| |
| position: relative;
| |
| isolation: isolate;
| |
| z-index: 0;
| |
| width: calc(100% + 4px);
| |
| left: -2px;
| |
| margin: 0 auto 15px auto;
| |
| border: 2px solid #1a1a1a;
| |
| border-radius: 5px;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 35%,
| |
| rgba(255,255,255,0.025) 0%,
| |
| transparent 46%
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| #1A1A1A 0%,
| |
| #181818 52%,
| |
| #151515 100%
| |
| );
| |
| color: #FFF;
| |
| box-shadow:
| |
| 0 4px 12px #000;
| |
| text-align: center;
| |
| font-size: 11px;
| |
| box-sizing: border-box;
| |
| overflow: visible;
| |
| }
| |
| | |
| .meeting-panel::before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: -5px;
| |
| z-index: -2;
| |
| border-radius: 8px;
| |
| background: #854369;
| |
| pointer-events: none;
| |
| }
| |
| | |
| .meeting-panel::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: -3px;
| |
| z-index: -1;
| |
| border-radius: 7px;
| |
| background: #1A1A1A;
| |
| pointer-events: none;
| |
| }
| |
| | |
| .meeting-panel-body {
| |
| width: 100%;
| |
| color: #E4E4E4;
| |
| padding: 4.5px 9px 9px 9px;
| |
| box-sizing: border-box;
| |
| border-radius: 3px;
| |
| background: transparent;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .meeting-title-wrap {
| |
| width: 100%;
| |
| max-width: 760px;
| |
| margin: 5px auto 8px auto;
| |
| }
| |
| | |
| .meeting-title-wrap .infobox-glass-title {
| |
| top: 0;
| |
| margin-top: 0;
| |
| padding: 5px;
| |
| line-height: 1.2;
| |
| }
| |
| | |
| .meeting-title-table {
| |
| width: auto;
| |
| max-width: 100%;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| border: 2px solid transparent;
| |
| border-collapse: collapse;
| |
| table-layout: auto;
| |
| }
| |
| | |
| .meeting-title-table td,
| |
| .meeting-title-table th {
| |
| background: none !important;
| |
| border: none !important; | | border: none !important; |
| vertical-align: middle !important; | | box-shadow: none !important; |
| }
| |
| | |
| .meeting-title-table .meeting-title-image-left {
| |
| width: auto;
| |
| text-align: right !important;
| |
| padding: 0 6px 0 0 !important;
| |
| line-height: 0;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .meeting-title-table .meeting-title-image-right {
| |
| width: auto;
| |
| text-align: left !important;
| |
| padding: 0 0 0 6px !important;
| |
| line-height: 0;
| |
| white-space: nowrap;
| |
| } | | } |
|
| |
|
| .meeting-title-table .meeting-title-cell {
| | /* 왼쪽 목차: 목록 항목 */ |
| width: auto; | | #side-toc-box .generated-toc li { |
| line-height: 1.15 !important;
| | margin: 0 0 4px 0 !important; |
| background: none !important;
| |
| text-align: center !important;
| |
| white-space: nowrap;
| |
| padding: 0 !important; | | padding: 0 !important; |
| | background: transparent !important; |
| | line-height: 1.5 !important; |
| } | | } |
|
| |
|
| .meeting-title-image-left img,
| | #side-toc-box .generated-toc li:last-child { |
| .meeting-title-image-right img, | | margin-bottom: 0 !important; |
| .meeting-title-image-left .mw-file-element,
| |
| .meeting-title-image-right .mw-file-element {
| |
| display: block; | |
| border: 0 !important;
| |
| vertical-align: middle;
| |
| filter:
| |
| drop-shadow(0 1px 2px rgba(0,0,0,0.75))
| |
| drop-shadow(0 0 3px rgba(255,255,255,0.08));
| |
| } | | } |
|
| |
|
| .meeting-title-name { | | /* 왼쪽 목차: 링크 박스 */ |
| display: block; | | #side-toc-box .generated-toc a { |
| line-height: 1.15; | | display: block !important; |
| text-align: center; | | color: #E2E2E2 !important; |
| | text-decoration: none !important; |
| | padding: 4px 6px !important; |
| | border-radius: 4px !important; |
| | overflow: hidden !important; |
| } | | } |
|
| |
|
| .meeting-title-meta { | | #side-toc-box .generated-toc a:hover { |
| display: block; | | background: rgba(133, 67, 105, 0.18) !important; |
| margin-top: 1px;
| | color: #ffffff !important; |
| color: #7F7F7F; | |
| font-size: 10px;
| |
| font-weight: normal;
| |
| line-height: 1.15;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
| .meeting-seatmap { | | /* 왼쪽 목차: 긴 제목 감싸는 영역 */ |
| position: relative; | | #side-toc-box .toc-scroll-wrap { |
| margin: 0 auto; | | display: block !important; |
| padding: 5px 0 4px 0; | | width: 100% !important; |
| background: transparent; | | overflow: hidden !important; |
| border-radius: 0;
| | position: relative !important; |
| overflow: visible;
| |
| } | | } |
|
| |
|
| .meeting-seatmap::before { | | /* 왼쪽 목차: 실제로 스크롤되는 긴 제목에만 오른쪽 페이드 적용 */ |
| content: ""; | | #side-toc-box .toc-scroll-wrap.is-scrolling { |
| position: absolute;
| | mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; |
| left: 50%;
| | -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important; |
| top: 84px;
| |
| bottom: 145px;
| |
| width: 2px;
| |
| transform: translateX(-50%);
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| transparent 0%,
| |
| rgba(65,65,65,0.72) 18%,
| |
| #414141 50%,
| |
| rgba(65,65,65,0.72) 82%,
| |
| transparent 100%
| |
| );
| |
| box-shadow: 0 0 6px rgba(65,65,65,0.16); | |
| pointer-events: none;
| |
| } | | } |
|
| |
|
| .meeting-table-zone::before { | | /* 왼쪽 목차: 실제 스크롤되는 텍스트 */ |
| content: ""; | | #side-toc-box .toc-scroll-text { |
| position: absolute;
| | display: inline-block !important; |
| left: 7%;
| | white-space: nowrap !important; |
| right: 7%;
| | max-width: none !important; |
| top: 50%;
| |
| height: 2px;
| |
| transform: translateY(-50%);
| |
| background: | |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| rgba(65,65,65,0.72) 14%,
| |
| #414141 50%,
| |
| rgba(65,65,65,0.72) 86%,
| |
| transparent 100%
| |
| );
| |
| box-shadow: 0 0 6px rgba(65,65,65,0.14);
| |
| pointer-events: none; | |
| } | | } |
|
| |
|
| .meeting-axis-label {
| | /* 왼쪽 목차: h2 항목 */ |
| position: relative;
| | #side-toc-box .toc-level-2 .toc-scroll-text { |
| z-index: 4;
| | font-size: 12px !important; |
| display: inline-block;
| | font-weight: 700 !important; |
| min-width: 42px;
| | color: #E2E2E2 !important; |
| margin: 2px auto 4px auto;
| |
| padding: 2px 9px;
| |
| border-radius: 5px;
| |
| background: #0c0c0c;
| |
| color: #E4E4E4;
| |
| font-weight: bold;
| |
| line-height: 1.35;
| |
| box-shadow:
| |
| inset 0 -1px 0 #525252,
| |
| 0 0 0 3px #1A1A1A;
| |
| }
| |
| | |
| .meeting-chair-line { | |
| position: relative; | |
| z-index: 3;
| |
| display: flex; | |
| justify-content: center;
| |
| margin: 0 0 6px 0; | |
| background: transparent;
| |
| } | | } |
|
| |
|
| .meeting-table-zone {
| | /* 왼쪽 목차: h3 항목 */ |
| position: relative;
| | #side-toc-box .toc-level-3 { |
| z-index: 3;
| | padding-left: 12px !important; |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
| |
| align-items: center;
| |
| width: 100%;
| |
| max-width: 980px;
| |
| min-height: 210px; | |
| margin: 0 auto;
| |
| background: transparent;
| |
| } | | } |
|
| |
|
| .meeting-side { | | #side-toc-box .toc-level-3 .toc-scroll-text { |
| display: flex;
| | font-size: 11px !important; |
| flex-wrap: nowrap;
| | font-weight: 400 !important; |
| justify-content: center;
| | color: #b8b8b8 !important; |
| align-items: center; | |
| gap: 0;
| |
| min-width: 0; | |
| background: transparent; | |
| } | | } |
|
| |
|
| .meeting-side-left { | | #side-toc-box .toc-level-3 a:hover .toc-scroll-text { |
| padding-right: 4px; | | color: #ffffff !important; |
| } | | } |
|
| |
|
| .meeting-side-right {
| | /* 왼쪽 목차: 문서 스크롤 중에도 목차가 화면 안에 남도록 처리 */ |
| padding-left: 4px; | | #clbi-left-sidebar { |
| | align-self: stretch !important; |
| } | | } |
|
| |
|
| .meeting-center-spine {
| | /* 왼쪽 목차: 목차 박스만 화면 상단에 고정되듯 따라오게 함 */ |
| position: relative;
| | #side-toc-box { |
| display: flex;
| | position: sticky !important; |
| align-items: center;
| | top: 10px !important; |
| justify-content: center;
| | z-index: 1001; |
| align-self: stretch;
| | max-height: calc(100vh - 40px); |
| min-height: 210px;
| | overflow: hidden; |
| z-index: 4;
| |
| background: transparent;
| |
| }
| |
| | |
| .meeting-center-spine .meeting-axis-label {
| |
| position: absolute; | |
| top: 50%; | |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| writing-mode: vertical-rl;
| |
| text-orientation: mixed;
| |
| min-width: 0;
| |
| min-height: 42px;
| |
| margin: 0;
| |
| padding: 8px 3px;
| |
| }
| |
| | |
| .meeting-advisory-zone {
| |
| position: relative;
| |
| z-index: 3; | |
| margin-top: 6px;
| |
| background: transparent;
| |
| }
| |
| | |
| .meeting-advisory-zone > .meeting-axis-label {
| |
| margin-bottom: 6px;
| |
| }
| |
| | |
| .meeting-advisory-grid {
| |
| position: relative;
| |
| display: flex;
| |
| flex-wrap: nowrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 0;
| |
| width: 100%;
| |
| max-width: 760px; | |
| margin: 0 auto;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| background: transparent;
| |
| }
| |
| | |
| .meeting-advisory-grid::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 7%;
| |
| right: 7%;
| |
| top: 94px;
| |
| height: 2px;
| |
| background:
| |
| linear-gradient(
| |
| to right,
| |
| transparent 0%,
| |
| rgba(65,65,65,0.72) 14%,
| |
| #414141 50%,
| |
| rgba(65,65,65,0.72) 86%,
| |
| transparent 100%
| |
| );
| |
| box-shadow: 0 0 6px rgba(65,65,65,0.14);
| |
| pointer-events: none; | |
| }
| |
| | |
| .meeting-person-card {
| |
| position: relative;
| |
| z-index: 3;
| |
| background: transparent;
| |
| color: #fff;
| |
| text-align: center;
| |
| vertical-align: top;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .meeting-chair-card {
| |
| width: 180px;
| |
| }
| |
| | |
| .meeting-side .meeting-person-card {
| |
| width: 50%;
| |
| min-width: 0;
| |
| }
| |
| | |
| .meeting-advisory-card {
| |
| width: 33.333%;
| |
| min-width: 0;
| |
| }
| |
| | |
| .meeting-person-inner {
| |
| display: flex;
| |
| justify-content: center;
| |
| padding: 0;
| |
| background: transparent;
| |
| }
| |
| | |
| .meeting-person-stack {
| |
| width: 90%;
| |
| margin-top: 3px;
| |
| background: transparent;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| }
| |
| | |
| .meeting-side .meeting-person-stack {
| |
| width: 94%;
| |
| }
| |
| | |
| .meeting-advisory-card .meeting-person-stack {
| |
| width: 92%;
| |
| }
| |
| | |
| .meeting-person-stack .compact-crt-media {
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| .meeting-person-stack .office-card-name-cell {
| |
| width: 170px;
| |
| max-width: 100%;
| |
| margin-top: 6px;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| .meeting-chair-card .office-card-name-cell {
| |
| width: 170px;
| |
| }
| |
| | |
| .meeting-advisory-card .office-card-name-cell {
| |
| width: 170px;
| |
| }
| |
| | |
| .meeting-office {
| |
| display: block;
| |
| margin-top: 2px;
| |
| color: #7F7F7F;
| |
| font-size: 10px;
| |
| line-height: 1.3;
| |
| font-weight: normal;
| |
| } | | } |
|
| |
|
| /* ===================================================================== | | /* 왼쪽 목차: 항목이 많을 때 목차 내부만 스크롤되게 함 */ |
| ScreenHeader + Screen Bezel Module
| | #side-toc-box .toc-sidebar-content { |
|
| | max-height: calc(100vh - 88px); |
| Template.css에서 교체할 범위:
| | overflow-y: auto; |
| [/* ScreenHeader */] 주석부터
| | overflow-x: hidden; |
| [/* Document View System — doc-* */] 주석 바로 위까지
| |
| 전체를 지우고 이 파일 내용으로 교체하세요.
| |
| ===================================================================== */
| |
| | |
| /* =========================================
| |
| ScreenHeader — 컨테이너 & 레이아웃 제어
| |
| ========================================= */
| |
| | |
| .liberty-content:has(.screen-header) .liberty-content-header .title {
| |
| display: none !important; | |
| } | | } |
|
| |
|
| /* screen-header 문서 — 컨테이너를 베젤로 */ | | /* 분류 칸 */ |
| .Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main { | | .catlinks { |
| position: relative !important;
| |
| box-sizing: border-box !important;
| |
| border: 2px solid #854369 !important;
| |
| border-radius: 5px !important;
| |
| background: linear-gradient(
| |
| 160deg,
| |
| #2e2e2e 0%,
| |
| #1e1e1e 30%,
| |
| #121212 65%,
| |
| #1a1a1a 100%
| |
| ) !important;
| |
| box-shadow:
| |
| inset 0 3px 0 rgba(255,255,255,0.10),
| |
| inset 0 -4px 0 rgba(0,0,0,0.85),
| |
| inset 4px 0 0 rgba(255,255,255,0.04),
| |
| inset -4px 0 0 rgba(0,0,0,0.70) !important;
| |
| overflow: hidden !important;
| |
| }
| |
| | |
| /* 상단 빛반사 */
| |
| .Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| height: 40%;
| |
| border-radius: 5px 5px 0 0;
| |
| background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%);
| |
| pointer-events: none;
| |
| z-index: 0;
| |
| }
| |
| | |
| .liberty-content:has(.screen-header) .screen-title-plate,
| |
| .liberty-content:has(.screen-header) .screen-header-frame,
| |
| .liberty-content:has(.screen-header) .screen-header-inner,
| |
| .liberty-content:has(.screen-header) .screen-header-media,
| |
| .liberty-content:has(.screen-header) .screen-header-vignette,
| |
| .liberty-content:has(.screen-header) .screen-header-scanline,
| |
| .liberty-content:has(.screen-header) .screen-header-mask,
| |
| .liberty-content:has(.screen-header) .screen-header-glass,
| |
| .liberty-content:has(.screen-header) .screen-header-subtitle {
| |
| display: none !important;
| |
| }
| |
| | |
| /* =========================================
| |
| screen-header
| |
| 베젤 좌우 padding(24px)을 정확히 상쇄
| |
| width: calc(100% + 48px), margin: 0 -24px
| |
| ========================================= */
| |
| | |
| .screen-header {
| |
| position: relative !important; | | position: relative !important; |
| | z-index: 49 !important; |
| | display: block !important; |
| width: 100% !important; | | width: 100% !important; |
| height: var(--screen-header-height, 360px) !important; | | left: auto !important; |
| margin: 0 !important; | | right: auto !important; |
| padding: 8px 8px 4px 8px !important; | | margin: 4px 0 0 0 !important; |
| | padding: 4px 7px !important; |
| box-sizing: border-box !important; | | box-sizing: border-box !important; |
| overflow: hidden !important;
| | background: #1d1d1d !important; |
| background: #050505 !important; | | border: 1px solid #050505 !important; |
| border: 0 !important; | | border-radius: 0 !important; |
| border-bottom: 0 !important;
| |
| isolation: isolate !important;
| |
| }
| |
| | |
| .screen-header-recess {
| |
| position: relative !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| margin: 0 !important;
| |
| padding: 4px !important;
| |
| box-sizing: border-box !important;
| |
| overflow: hidden !important;
| |
| background: #050505 !important;
| |
| border: 1px solid rgba(255,255,255,0.035) !important;
| |
| border-radius: 6px !important; | |
| box-shadow: | | box-shadow: |
| inset 0 18px 30px rgba(0,0,0,0.82), | | inset 0 1px 0 #555555, |
| inset 0 -9px 16px rgba(255,255,255,0.026), | | inset -1px 0 0 #555555, |
| inset 18px 0 30px rgba(0,0,0,0.66), | | inset 1px 0 0 #101010, |
| inset -18px 0 30px rgba(0,0,0,0.66), | | inset 0 -1px 0 #101010 !important; |
| 0 1px 0 rgba(255,255,255,0.030),
| | color: #e2e2e2 !important; |
| 0 -1px 0 rgba(0,0,0,0.70) !important;
| | font-size: 12px !important; |
| | line-height: 1.5 !important; |
| | text-shadow: 1px 1px 0 #000 !important; |
| } | | } |
|
| |
|
| .screen-header-recess::before { | | .catlinks .mw-normal-catlinks, |
| content: "";
| | .catlinks .mw-hidden-catlinks { |
| position: absolute;
| | display: block !important; |
| inset: 0;
| |
| z-index: 1;
| |
| pointer-events: none;
| |
| opacity: 0.10;
| |
| background: repeating-linear-gradient(
| |
| 135deg,
| |
| rgba(255,255,255,0.030) 0px,
| |
| rgba(255,255,255,0.030) 1px,
| |
| transparent 1px,
| |
| transparent 5px
| |
| );
| |
| mix-blend-mode: screen;
| |
| }
| |
| | |
| .screen-header-recess::after {
| |
| content: ""; | |
| position: absolute;
| |
| inset: 14px;
| |
| z-index: 12;
| |
| pointer-events: none;
| |
| border-radius: 0;
| |
| box-shadow:
| |
| 0 -20px 32px rgba(0,0,0,0.86),
| |
| 0 12px 18px rgba(255,255,255,0.024),
| |
| -20px 0 32px rgba(0,0,0,0.78),
| |
| 20px 0 32px rgba(0,0,0,0.78),
| |
| inset 0 0 0 1px rgba(255,255,255,0.018) !important;
| |
| }
| |
| | |
| .screen-header .screen-header-crt {
| |
| position: relative !important;
| |
| z-index: 2 !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| aspect-ratio: auto !important;
| |
| margin: 0 !important; | | margin: 0 !important; |
| padding: 0 !important; | | padding: 0 !important; |
| box-sizing: border-box !important;
| |
| overflow: hidden !important;
| |
| background: transparent !important; | | background: transparent !important; |
| border: 0 !important; | | border: 0 !important; |
| border-radius: 0 !important; | | color: #e2e2e2 !important; |
| box-shadow: none !important; | | font-size: 12px !important; |
| | line-height: 1.5 !important; |
| } | | } |
|
| |
|
| .screen-header .screen-header-crt::before, | | .catlinks .mw-hidden-catlinks { |
| .screen-header .screen-header-crt::after {
| | margin-top: 4px !important; |
| content: none !important; | |
| } | | } |
|
| |
|
| .screen-header .crt-page-monitor-inner { | | .catlinks ul { |
| position: relative !important; | | display: inline !important; |
| width: 100% !important;
| |
| height: 100% !important;
| |
| padding: 5px !important;
| |
| margin: 0 !important; | | margin: 0 !important; |
| box-sizing: border-box !important; | | padding: 0 !important; |
| border-radius: 0 !important;
| | list-style: none !important; |
| background: linear-gradient( | | list-style-image: none !important; |
| 145deg,
| | background: transparent !important; |
| #050505 0%,
| |
| #0d0d0d 46%,
| |
| #050505 100%
| |
| ) !important;
| |
| border: 1px solid #050505 !important;
| |
| box-shadow: | |
| inset 0 10px 20px rgba(0,0,0,0.97),
| |
| inset 0 -2px 3px rgba(255,255,255,0.030),
| |
| inset 8px 0 18px rgba(0,0,0,0.90),
| |
| inset -8px 0 18px rgba(0,0,0,0.90) !important;
| |
| }
| |
| | |
| .screen-header .crt-page-monitor-screen {
| |
| position: relative !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| overflow: hidden !important;
| |
| border-radius: 0 !important;
| |
| background: #050505 !important;
| |
| border: 1px solid #050505 !important;
| |
| box-shadow:
| |
| inset 0 0 0 1px #111,
| |
| inset 0 0 24px rgba(0,0,0,0.94),
| |
| inset 0 0 64px rgba(0,0,0,0.80),
| |
| inset 0 0 118px rgba(0,0,0,0.50),
| |
| 0 0 0 1px rgba(255,255,255,0.030) !important;
| |
| }
| |
| | |
| .screen-header .crt-page-monitor-image,
| |
| .screen-header .crt-page-monitor-image-base,
| |
| .screen-header .crt-page-monitor-image-bloom,
| |
| .screen-header .crt-page-monitor-slice {
| |
| position: absolute !important;
| |
| inset: 0 !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| .screen-header .crt-page-monitor-image-base a,
| |
| .screen-header .crt-page-monitor-image-base span,
| |
| .screen-header .crt-page-monitor-image-base .mw-file-description,
| |
| .screen-header .crt-page-monitor-image-base .mw-default-size,
| |
| .screen-header .crt-page-monitor-image-base .mw-image-border,
| |
| .screen-header .crt-page-monitor-image-bloom a,
| |
| .screen-header .crt-page-monitor-image-bloom span,
| |
| .screen-header .crt-page-monitor-image-bloom .mw-file-description,
| |
| .screen-header .crt-page-monitor-image-bloom .mw-default-size,
| |
| .screen-header .crt-page-monitor-image-bloom .mw-image-border,
| |
| .screen-header .crt-page-monitor-slice a,
| |
| .screen-header .crt-page-monitor-slice span,
| |
| .screen-header .crt-page-monitor-slice .mw-file-description,
| |
| .screen-header .crt-page-monitor-slice .mw-default-size,
| |
| .screen-header .crt-page-monitor-slice .mw-image-border {
| |
| position: absolute !important;
| |
| inset: 0 !important;
| |
| display: block !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| }
| |
| | |
| .screen-header .crt-page-monitor-image-base img,
| |
| .screen-header .crt-page-monitor-image-base .mw-file-element,
| |
| .screen-header .crt-page-monitor-image-bloom img,
| |
| .screen-header .crt-page-monitor-image-bloom .mw-file-element,
| |
| .screen-header .crt-page-monitor-slice img,
| |
| .screen-header .crt-page-monitor-slice .mw-file-element,
| |
| .screen-header .crt-page-monitor-slice-img {
| |
| position: absolute !important;
| |
| inset: 0 !important;
| |
| display: block !important;
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| max-width: none !important;
| |
| max-height: none !important; | |
| object-fit: cover !important;
| |
| object-position: var(--screen-image-position, center center) !important;
| |
| border: 0 !important; | | border: 0 !important; |
| border-radius: 0 !important;
| |
| }
| |
|
| |
| .screen-header .crt-page-monitor-screen::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| inset: -4px !important;
| |
| z-index: 20 !important;
| |
| pointer-events: none !important;
| |
| border-radius: 0 !important;
| |
| background:
| |
| radial-gradient(
| |
| ellipse at 50% 50%,
| |
| transparent 0%,
| |
| transparent 62%,
| |
| rgba(0,0,0,0.18) 78%,
| |
| rgba(0,0,0,0.48) 100%
| |
| ),
| |
| linear-gradient(
| |
| to bottom,
| |
| rgba(0,0,0,0.20) 0%,
| |
| transparent 14%,
| |
| transparent 82%,
| |
| rgba(0,0,0,0.28) 100%
| |
| ),
| |
| linear-gradient(
| |
| to right,
| |
| rgba(0,0,0,0.20) 0%,
| |
| transparent 8%,
| |
| transparent 92%,
| |
| rgba(0,0,0,0.20) 100%
| |
| ),
| |
| linear-gradient(
| |
| 105deg,
| |
| transparent 0%,
| |
| rgba(255,255,255,0.030) 18%,
| |
| transparent 38%,
| |
| transparent 100%
| |
| ) !important;
| |
| box-shadow:
| |
| inset 0 0 0 1px rgba(255,255,255,0.018),
| |
| inset 0 0 24px rgba(255,255,255,0.015),
| |
| inset 0 0 74px rgba(0,0,0,0.64),
| |
| inset 0 22px 38px rgba(0,0,0,0.60),
| |
| inset 0 -20px 36px rgba(0,0,0,0.44),
| |
| inset 18px 0 36px rgba(0,0,0,0.56),
| |
| inset -18px 0 36px rgba(0,0,0,0.56) !important;
| |
| }
| |
|
| |
| .screen-header .crt-page-monitor-screen::after {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| inset: -80px -4px !important;
| |
| z-index: 21 !important;
| |
| pointer-events: none !important;
| |
| opacity: 0.22 !important;
| |
| border-radius: 0 !important;
| |
| background: repeating-linear-gradient(
| |
| to bottom,
| |
| rgba(255,255,255,0.08) 0px,
| |
| rgba(255,255,255,0.08) 1px,
| |
| transparent 2px,
| |
| transparent 5px
| |
| ) !important;
| |
| mix-blend-mode: screen !important;
| |
| animation: crt-scanlines-up 7s linear infinite !important;
| |
| } | | } |
|
| |
|
| .screen-header .crt-page-monitor-glitch, | | .catlinks li { |
| .screen-header .crt-page-monitor-tear {
| | display: inline !important; |
| inset: -4px !important; | | margin: 0 0 0 4px !important; |
| border-radius: 0 !important; | |
| }
| |
| | |
| .screen-header .crt-page-monitor-glitch { z-index: 22 !important; }
| |
| .screen-header .crt-page-monitor-tear { z-index: 23 !important; }
| |
| | |
| .screen-header-title {
| |
| position: absolute !important;
| |
| left: 5px !important;
| |
| bottom: 5px !important;
| |
| z-index: 40 !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important; | | padding: 0 !important; |
| max-width: calc(100% - 10px) !important; | | list-style: none !important; |
| box-sizing: border-box !important; | | list-style-image: none !important; |
| background: transparent !important; | | background: transparent !important; |
| border: 0 !important; | | border: 0 !important; |
| box-shadow: none !important; | | color: #e2e2e2 !important; |
| | font-size: 12px !important; |
| | line-height: 1.5 !important; |
| } | | } |
|
| |
|
| .screen-header-title-main { | | .catlinks li::before, |
| margin: 0 !important;
| | .catlinks li::after { |
| padding: 0 0 8px 10px !important;
| | content: none !important; |
| border: 0 !important;
| |
| background: transparent !important;
| |
| box-shadow: none !important;
| |
| color: #ffffff !important;
| |
| font-family: 'BoldRound', sans-serif !important;
| |
| font-size: 40px !important;
| |
| font-weight: 700 !important;
| |
| line-height: 0.95 !important;
| |
| letter-spacing: 0.06em !important;
| |
| text-shadow:
| |
| 3px 3px 0 rgba(0,0,0,0.98),
| |
| 0 0 6px rgba(0,0,0,0.98),
| |
| 0 0 14px rgba(0,0,0,0.95),
| |
| 0 0 26px rgba(0,0,0,0.92),
| |
| -1px 0 0 rgba(80,160,255,0.24),
| |
| 1px 0 0 rgba(255,55,90,0.22) !important;
| |
| white-space: nowrap !important; | |
| } | | } |
|
| |
|
| .screen-header-subtitle { | | .catlinks a { |
| display: none !important; | | display: inline !important; |
| | color: #c8c8c8 !important; |
| | text-decoration: none !important; |
| | font-size: 12px !important; |
| | font-weight: 400 !important; |
| | line-height: 1.5 !important; |
| } | | } |
|
| |
|
| /* =========================================
| | .catlinks a:hover { |
| screen-body
| | color: #ffffff !important; |
| 베젤 좌우 padding(24px)을 정확히 상쇄
| | text-decoration: none !important; |
| 하단 -28px은 베젤 하단 padding을 상쇄해서 베젤 닫음
| |
| ========================================= */
| |
| | |
| .screen-header + .screen-body { | |
| margin-top: 0 !important; | |
| border-top: 0 !important; | |
| }
| |
| | |
| .screen-body {
| |
| position: relative;
| |
| width: 100%;
| |
| margin: 0;
| |
| padding: 4px 8px 4px 8px;
| |
| box-sizing: border-box;
| |
| background: #171717;
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* 분류 문서 */ |
| Document View System — doc-*
| | .mw-category-generated { color: #e2e2e2 !important; } |
| ========================================= */
| | .mw-category-generated a { color: #854369 !important; } |
| | .CategoryTreeToggle { color: #854369 !important; } |
| | .number-link { color: #854369 !important; } |
|
| |
|
| .doc-body { | | /* 편집 섹션 */ |
| position: relative; | | .mw-editsection { |
| z-index: 3; | | color: #b45c8f !important; |
| box-sizing: border-box; | | float: right; |
| width: 100%;
| | font-weight: bold; |
| padding: 0;
| |
| background: transparent;
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* 넘겨주기 */ |
| doc-header
| | .mw-redirectedfrom { color: #854369 !important; } |
| ========================================= */
| | .mw-redirectedfrom a { color: #854369 !important; } |
|
| |
|
| .doc-header { | | /* 서브페이지 */ |
| position: relative;
| | .subpages { color: #fdecec !important; } |
| display: grid;
| | .subpages a { color: #854369 !important; } |
| grid-template-columns: 24px 1fr auto 24px;
| | .subpages a:active { color: #854369 !important; } |
| align-items: center;
| |
| height: 28px;
| |
| margin-bottom: 7px;
| |
| padding: 0 8px;
| |
| box-sizing: border-box;
| |
| background:
| |
| linear-gradient(
| |
| to bottom,
| |
| #282828 0%,
| |
| #1a1a1a 40%,
| |
| #161616 100%
| |
| );
| |
| border-top: 1px solid #3a3a3a;
| |
| border-bottom: 1px solid #0a0a0a;
| |
| border-left: 1px solid #222;
| |
| border-right: 1px solid #222;
| |
| border-radius: 2px;
| |
| } | |
|
| |
|
| .doc-header::before { | | /* 공지사항 */ |
| content: ""; | | .alert-info { |
| position: absolute; | | background-color: #171717 !important; |
| inset: 0; | | border: 2px solid #854369 !important; |
| pointer-events: none;
| | box-shadow: 0px 0px 3px #000000; |
| opacity: 0.06;
| |
| background: repeating-linear-gradient(
| |
| 135deg,
| |
| rgba(255,255,255,0.08) 0px,
| |
| rgba(255,255,255,0.08) 1px,
| |
| transparent 1px,
| |
| transparent 4px
| |
| );
| |
| border-radius: inherit;
| |
| } | | } |
|
| |
|
| .doc-header-id { | | /* 푸터 */ |
| font-size: 10px;
| | .footer-info-lastmod { color: #e2e2e2 !important; } |
| font-weight: 700;
| | .footer-info-copyright { color: #e2e2e2 !important; } |
| letter-spacing: 0.18em;
| | .footer-places-privacy a { color: #c95197 !important; } |
| color: #c0c0c0;
| | .footer-places-privacy a:active { color: #e2e2e2 !important; } |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| | .footer-places-about a { color: #c95197 !important; } |
| position: relative;
| | .footer-places-about a:active { color: #e2e2e2 !important; } |
| z-index: 1;
| | .footer-places-disclaimers a { color: #c95197 !important; } |
| } | | .footer-places-disclaimers a:active { color: #e2e2e2 !important; } |
|
| |
|
| .doc-screw { | | /* 리스트 */ |
| position: relative;
| | .liberty-content-main ul:not(#toc) { |
| z-index: 1;
| | list-style-type: disc; |
| width: 10px;
| | list-style-image: none; |
| height: 10px;
| |
| border-radius: 50%;
| |
| background:
| |
| radial-gradient(circle at 36% 32%, rgba(255,255,255,0.35) 0%, transparent 28%),
| |
| linear-gradient(145deg, #505050 0%, #282828 55%, #0e0e0e 100%);
| |
| border: 1px solid #090909; | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,0.15),
| |
| inset 0 -1px 0 rgba(0,0,0,0.60),
| |
| 0 0 0 1px #333;
| |
| justify-self: center;
| |
| } | | } |
|
| |
|
| .doc-screw::after { | | .liberty-content-main ul ul:not(#toc) { |
| content: "";
| | list-style-type: circle; |
| position: absolute;
| | list-style-image: none; |
| top: 50%;
| |
| left: 15%;
| |
| right: 15%;
| |
| height: 1px;
| |
| transform: translateY(-50%);
| |
| background: rgba(0,0,0,0.55); | |
| border-radius: 1px; | |
| } | | } |
|
| |
|
| .doc-status { | | .liberty-content-main ul ul ul:not(#toc) { |
| display: flex; | | list-style-type: square; |
| align-items: center; | | list-style-image: none; |
| gap: 5px;
| |
| position: relative;
| |
| z-index: 1;
| |
| } | | } |
|
| |
|
| .doc-status-lamp { | | /* 반전 */ |
| display: inline-block; | | .invert { |
| width: 8px;
| | filter: invert(1); |
| height: 8px;
| |
| border-radius: 50%;
| |
| background: #111;
| |
| border: 1px solid #060606;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.06),
| |
| 0 0 0 1px #252525;
| |
| } | | } |
|
| |
|
| .doc-status-lamp.on { | | /* 편집 권한에 따라 우측 모서리 처리 */ |
| background: radial-gradient(circle at 38% 32%, #d9ff9d 0%, #7ec43e 45%, #253d18 100%); | | .liberty-content.content-tools-hidden .liberty-content-main { |
| box-shadow:
| | border-top-right-radius: 5px !important; |
| inset 0 1px 0 rgba(255,255,255,0.28),
| |
| 0 0 0 1px #1a3010,
| |
| 0 0 5px rgba(100,200,50,0.45);
| |
| } | | } |
|
| |
|
| .doc-status-lamp.warn { | | /* 분류 */ |
| background: radial-gradient(circle at 38% 32%, #ffe8b0 0%, #d89a42 45%, #4d2a0d 100%); | | .liberty-content-main .catlinks { |
| box-shadow: | | width: 100% !important; |
| inset 0 1px 0 rgba(255,255,255,0.28),
| | left: auto !important; |
| 0 0 0 1px #3a1f06,
| | margin: 4px 0 0 0 !important; |
| 0 0 5px rgba(220,140,40,0.45);
| | padding: 4px 7px !important; |
| | box-sizing: border-box !important; |
| } | | } |
|
| |
|
| /* ========================================= | | /* 이미지 위에 이미지 얹기 */ |
| doc-layout
| | .portrait-overlay-img, |
| ========================================= */
| | .portrait-overlay-img a { |
| | | max-width: none !important; |
| .doc-layout {
| | max-height: none !important; |
| display: grid;
| | overflow: visible !important; |
| grid-template-columns: 200px minmax(0, 1fr) 320px;
| |
| gap: 7px;
| |
| align-items: stretch;
| |
| min-height: 620px;
| |
| }
| |
| | |
| .doc-layout-left, | |
| .doc-layout-center, | |
| .doc-layout-right {
| |
| min-width: 0; | |
| }
| |
| | |
| .doc-layout-center,
| |
| .doc-layout-right {
| |
| display: flex; | |
| flex-direction: column;
| |
| gap: 7px; | |
| } | | } |
|
| |
|
| .doc-layout-lower { | | .portrait-overlay-img img { |
| display: grid;
| | height: var(--overlay-height, 180px) !important; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
| | width: auto !important; |
| gap: 7px;
| |
| flex: 1;
| |
| }
| |
| | |
| /* =========================================
| |
| doc-panel
| |
| ========================================= */
| |
| | |
| .doc-panel {
| |
| position: relative;
| |
| box-sizing: border-box;
| |
| width: 100%;
| |
| min-width: 0;
| |
| background: #1a1a1a;
| |
| border-top: 1px solid #303030;
| |
| border-bottom: 1px solid #080808;
| |
| border-left: 1px solid #222;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .doc-panel::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 4px;
| |
| left: 4px;
| |
| width: 5px;
| |
| height: 5px; | |
| border-radius: 50%;
| |
| background:
| |
| radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
| |
| linear-gradient(145deg, #444 0%, #1e1e1e 100%);
| |
| border: 1px solid #080808;
| |
| box-shadow: 0 0 0 1px #2a2a2a;
| |
| pointer-events: none;
| |
| z-index: 10;
| |
| }
| |
| | |
| .doc-panel::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 4px;
| |
| right: 4px;
| |
| width: 5px;
| |
| height: 5px;
| |
| border-radius: 50%;
| |
| background:
| |
| radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
| |
| linear-gradient(145deg, #444 0%, #1e1e1e 100%);
| |
| border: 1px solid #080808;
| |
| box-shadow: 0 0 0 1px #2a2a2a;
| |
| pointer-events: none;
| |
| z-index: 10;
| |
| }
| |
| | |
| .doc-panel-title {
| |
| position: relative;
| |
| z-index: 3;
| |
| box-sizing: border-box;
| |
| padding: 6px 10px 5px 10px;
| |
| font-family: 'Galmuri11', sans-serif !important;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| line-height: 1.2;
| |
| letter-spacing: 0.10em;
| |
| color: #888;
| |
| background: linear-gradient(to bottom, #161616 0%, #121212 100%);
| |
| border-bottom: 1px solid #0d0d0d;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| text-transform: uppercase;
| |
| }
| |
| | |
| .doc-panel-heading {
| |
| padding: 10px 18px;
| |
| font-size: 11px;
| |
| font-weight: 700;
| |
| color: #7a7a7a;
| |
| letter-spacing: 0.06em;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| position: relative;
| |
| z-index: 3;
| |
| }
| |
| | |
| .doc-panel table {
| |
| width: 100%; | |
| border-collapse: collapse;
| |
| margin: 0;
| |
| }
| |
| | |
| .doc-panel table th,
| |
| .doc-panel table td {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| vertical-align: middle !important;
| |
| }
| |
| | |
| .doc-panel table th[style],
| |
| .doc-panel table td[style] {
| |
| background: revert !important;
| |
| border: revert !important;
| |
| padding: revert !important;
| |
| }
| |
| | |
| /* =========================================
| |
| doc-display
| |
| ========================================= */
| |
| | |
| .doc-display {
| |
| position: relative;
| |
| z-index: 3;
| |
| box-sizing: border-box;
| |
| padding: 4px 14px;
| |
| margin-bottom: 0;
| |
| min-height: 90px;
| |
| line-height: 1.8;
| |
| color: #d8d8d8;
| |
| background: #111111;
| |
| border-top: 1px solid #0a0a0a;
| |
| box-shadow:
| |
| inset 0 2px 6px rgba(0,0,0,0.55),
| |
| inset 0 0 1px rgba(0,0,0,0.80);
| |
| }
| |
| | |
| /* =========================================
| |
| doc-info
| |
| ========================================= */
| |
| | |
| .doc-info-row {
| |
| position: relative;
| |
| z-index: 3;
| |
| display: grid;
| |
| grid-template-columns: 68px minmax(0, 1fr);
| |
| gap: 8px;
| |
| align-items: center;
| |
| margin: 7px 10px 0 10px;
| |
| }
| |
| | |
| .doc-info-key {
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| color: #7a7a7a;
| |
| letter-spacing: 0.06em;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.70);
| |
| }
| |
| | |
| .doc-info-value {
| |
| position: relative;
| |
| overflow: hidden;
| |
| text-align: right;
| |
| border-radius: 2px;
| |
| background: #0e0e0e;
| |
| color: #d8d8d8;
| |
| padding: 4px 9px;
| |
| font-size: 11px;
| |
| font-weight: 700;
| |
| box-sizing: border-box;
| |
| border-top: 1px solid #0a0a0a;
| |
| border-bottom: 1px solid #252525;
| |
| border-left: 1px solid #111;
| |
| border-right: 1px solid #111;
| |
| box-shadow:
| |
| inset 0 2px 4px rgba(0,0,0,0.60),
| |
| inset 1px 0 0 rgba(255,255,255,0.015);
| |
| }
| |
| | |
| .doc-info-value::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 2;
| |
| pointer-events: none;
| |
| opacity: 0.15;
| |
| 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;
| |
| }
| |
| | |
| .doc-info-block {
| |
| padding: 0 8px 6px 8px;
| |
| background: #1a1a1a;
| |
| }
| |
| | |
| .doc-info-block-label {
| |
| display: block;
| |
| padding: 6px 2px 4px 2px;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| letter-spacing: 0.08em;
| |
| text-transform: uppercase;
| |
| color: #9a9a9a;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| }
| |
| | |
| /* =========================================
| |
| doc-nav
| |
| ========================================= */
| |
| | |
| .doc-nav {
| |
| height: 100%;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .doc-nav-item {
| |
| position: relative;
| |
| z-index: 3;
| |
| box-sizing: border-box;
| |
| width: calc(100% - 16px);
| |
| margin: 5px 8px 0 8px;
| |
| padding: 7px 24px 7px 10px;
| |
| font-size: 11px;
| |
| font-weight: 700;
| |
| line-height: 1.35;
| |
| color: #666;
| |
| background: linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #161616 100%);
| |
| border-top: 1px solid #2e2e2e;
| |
| border-bottom: 1px solid #0a0a0a;
| |
| border-left: 1px solid #222;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.025),
| |
| 0 1px 0 rgba(255,255,255,0.012);
| |
| cursor: pointer;
| |
| display: block;
| |
| text-decoration: none;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.70);
| |
| }
| |
| | |
| .doc-nav-item::after {
| |
| content: "›";
| |
| position: absolute;
| |
| right: 8px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| color: #333;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .doc-nav-item.active {
| |
| color: #e8e8e8;
| |
| background: linear-gradient(to bottom, #5a2040 0%, #3d1a2f 52%, #2e1222 100%);
| |
| border-top-color: #7a3055;
| |
| border-bottom-color: #1a0810;
| |
| border-left-color: #6a2848;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.06),
| |
| 0 0 6px rgba(212,90,162,0.10);
| |
| }
| |
| | |
| .doc-nav-item.active::after {
| |
| color: #d45aa2;
| |
| }
| |
| | |
| /* =========================================
| |
| doc-status-row
| |
| ========================================= */
| |
| | |
| .doc-status-row {
| |
| position: relative;
| |
| z-index: 3;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 7px;
| |
| margin: 5px 8px 0 8px;
| |
| padding: 5px 9px;
| |
| box-sizing: border-box;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| color: #555;
| |
| background: #111;
| |
| border-top: 1px solid #0a0a0a;
| |
| border-bottom: 1px solid #222;
| |
| border-left: 1px solid #111;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| box-shadow: inset 0 2px 4px rgba(0,0,0,0.50);
| |
| letter-spacing: 0.06em;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| }
| |
| | |
| /* =========================================
| |
| doc-link
| |
| ========================================= */
| |
| | |
| .doc-link {
| |
| position: relative;
| |
| z-index: 3;
| |
| box-sizing: border-box;
| |
| margin: 5px 10px 0 10px;
| |
| padding: 6px 10px 6px 14px;
| |
| font-size: 11px;
| |
| font-weight: 700;
| |
| color: #888;
| |
| background: linear-gradient(to bottom, #1a1a1a 0%, #151515 100%);
| |
| border-top: 1px solid #242424;
| |
| border-bottom: 1px solid #080808;
| |
| border-left: 1px solid #1e1e1e;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
| |
| display: block;
| |
| text-decoration: none;
| |
| cursor: pointer;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.70);
| |
| }
| |
| | |
| .doc-link::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 5px;
| |
| top: 20%;
| |
| bottom: 20%;
| |
| width: 2px;
| |
| background: #2e2e2e;
| |
| border-radius: 1px;
| |
| }
| |
| | |
| .doc-link:hover {
| |
| color: #c0c0c0;
| |
| background: linear-gradient(to bottom, #222 0%, #1a1a1a 100%);
| |
| border-top-color: #333;
| |
| }
| |
| | |
| .doc-link:hover::before {
| |
| background: #854369;
| |
| }
| |
| | |
| /* =========================================
| |
| doc-tab-bar
| |
| ========================================= */
| |
| | |
| .doc-tab-bar {
| |
| position: relative;
| |
| z-index: 3;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 4px;
| |
| padding: 5px 6px;
| |
| background: linear-gradient(to bottom, #141414 0%, #111 100%);
| |
| border-top: 1px solid #0a0a0a;
| |
| box-shadow: inset 0 1px 0 rgba(0,0,0,0.60);
| |
| }
| |
| | |
| .doc-tab-key {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| flex: 0 0 auto;
| |
| gap: 3px;
| |
| padding: 0 4px;
| |
| user-select: none;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .doc-tab-key kbd {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 30px;
| |
| height: 30px;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| font-family: inherit;
| |
| color: #e2e2e2;
| |
| background: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%);
| |
| border-top: 1px solid #3a3a3a;
| |
| border-bottom: 1px solid #080808;
| |
| border-left: 1px solid #2e2e2e;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.06),
| |
| 0 1px 0 rgba(255,255,255,0.02);
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| }
| |
| | |
| .doc-tab-key .doc-tab-arrow {
| |
| font-size: 10px;
| |
| color: #333;
| |
| line-height: 1;
| |
| }
| |
| | |
| .doc-tab {
| |
| flex: 1;
| |
| box-sizing: border-box;
| |
| padding: 6px 4px;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| letter-spacing: 0.06em;
| |
| color: #e2e2e2;
| |
| background: linear-gradient(to bottom, #1e1e1e 0%, #181818 100%);
| |
| border-top: 1px solid #2a2a2a;
| |
| border-bottom: 1px solid #080808;
| |
| border-left: 1px solid #222;
| |
| border-right: 1px solid #111;
| |
| border-radius: 2px;
| |
| cursor: pointer;
| |
| text-align: center;
| |
| text-shadow: 0 1px 0 rgba(0,0,0,0.80);
| |
| text-transform: uppercase;
| |
| user-select: none;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
| | |
| .doc-tab:hover {
| |
| color: #ffffff;
| |
| background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
| |
| border-top-color: #333;
| |
| }
| |
| | |
| .doc-tab.active {
| |
| color: #ffffff;
| |
| background: linear-gradient(to bottom, #2e1222 0%, #3d1a2f 52%, #5a2040 100%);
| |
| border-top-color: #7a3055;
| |
| border-bottom-color: #1a0810;
| |
| border-left-color: #6a2848;
| |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
| |
| }
| |
| | |
| /* =========================================
| |
| doc-footer
| |
| ========================================= */
| |
| | |
| .doc-footer {
| |
| position: relative;
| |
| display: grid;
| |
| grid-template-columns: 1fr 110px 44px 110px 200px;
| |
| gap: 12px;
| |
| align-items: center;
| |
| height: 44px;
| |
| margin-top: 7px;
| |
| padding: 0 10px;
| |
| box-sizing: border-box;
| |
| background: linear-gradient(to bottom, #282828 0%, #1a1a1a 40%, #161616 100%);
| |
| box-shadow:
| |
| inset 1px 0 0 #494949,
| |
| inset 0 -1px 0 #555,
| |
| inset 0 2px 6px rgba(0,0,0,0.55);
| |
| border-top: 1px solid #3a3a3a;
| |
| border-bottom: 1px solid #0a0a0a;
| |
| border-left: 1px solid #222;
| |
| border-right: 1px solid #222;
| |
| border-radius: 2px;
| |
| }
| |
| | |
| .doc-footer::before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| pointer-events: none;
| |
| opacity: 0.05;
| |
| background: repeating-linear-gradient(
| |
| 135deg,
| |
| rgba(255,255,255,0.08) 0px,
| |
| rgba(255,255,255,0.08) 1px,
| |
| transparent 1px,
| |
| transparent 4px
| |
| );
| |
| }
| |
| | |
| .doc-footer-sliders {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| }
| |
| | |
| .doc-slider {
| |
| position: relative;
| |
| width: 80px;
| |
| height: 6px;
| |
| background: #0a0a0a;
| |
| border-top: 1px solid #080808;
| |
| border-bottom: 1px solid #222;
| |
| border-radius: 99px;
| |
| box-shadow: inset 0 1px 3px rgba(0,0,0,0.70);
| |
| }
| |
| | |
| .doc-slider.short {
| |
| width: 54px;
| |
| }
| |
| | |
| .doc-slider::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: -6px;
| |
| left: 48%;
| |
| width: 10px;
| |
| height: 18px;
| |
| border-radius: 2px;
| |
| background: linear-gradient(to bottom, #c8c0b2 0%, #8a8278 100%);
| |
| border-top: 1px solid #d8d0c2;
| |
| border-bottom: 1px solid #2a2622;
| |
| border-left: 1px solid #aaa49c;
| |
| border-right: 1px solid #5a544e;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.30),
| |
| 0 1px 3px rgba(0,0,0,0.40);
| |
| }
| |
| | |
| .doc-date {
| |
| box-sizing: border-box;
| |
| height: 26px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| letter-spacing: 0.12em;
| |
| color: #d45aa2;
| |
| background: #0a0a0a;
| |
| border-top: 1px solid #080808;
| |
| border-bottom: 1px solid #2a1a22;
| |
| border-left: 1px solid #0e0e0e;
| |
| border-right: 1px solid #0e0e0e;
| |
| border-radius: 2px;
| |
| box-shadow: inset 0 2px 5px rgba(0,0,0,0.70);
| |
| text-shadow: 0 0 8px rgba(212,90,162,0.40);
| |
| }
| |
| | |
| .doc-knob {
| |
| justify-self: center;
| |
| width: 32px;
| |
| height: 32px;
| |
| border-radius: 50%;
| |
| background:
| |
| radial-gradient(circle at 36% 28%, rgba(255,255,255,0.30) 0%, transparent 24%),
| |
| linear-gradient(145deg, #c8bfb0 0%, #8a8278 48%, #464039 100%);
| |
| border: 1px solid #2a2520;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.30),
| |
| inset 0 -2px 0 rgba(0,0,0,0.22),
| |
| 0 2px 5px rgba(0,0,0,0.50);
| |
| }
| |
| | |
| .doc-keys {
| |
| display: grid;
| |
| grid-template-columns: repeat(5, 1fr);
| |
| gap: 5px;
| |
| }
| |
| | |
| .doc-keys span {
| |
| height: 22px;
| |
| border-radius: 2px;
| |
| background: linear-gradient(to bottom, #d8d4ca 0%, #a09890 55%, #6e6660 100%);
| |
| border-top: 1px solid #e0dcd2;
| |
| border-bottom: 1px solid #1e1c18;
| |
| border-left: 1px solid #b8b0a8;
| |
| border-right: 1px solid #4a4440;
| |
| box-shadow:
| |
| inset 0 1px 0 rgba(255,255,255,0.40),
| |
| 0 1px 2px rgba(0,0,0,0.30);
| |
| }
| |
| | |
| .doc-keys span.red {
| |
| background: linear-gradient(to bottom, #cc6058 0%, #922e28 55%, #521410 100%);
| |
| border-top-color: #d87070;
| |
| border-bottom-color: #1e0808;
| |
| }
| |
| | |
| .doc-keys span.amber {
| |
| background: linear-gradient(to bottom, #e4bc6c 0%, #b87c28 55%, #6c3e08 100%);
| |
| border-top-color: #ecd080;
| |
| border-bottom-color: #201008;
| |
| }
| |
| | |
| /* =========================================
| |
| Responsive
| |
| ========================================= */
| |
| | |
| @media screen and (max-width: 1280px) {
| |
| .doc-layout {
| |
| grid-template-columns: 210px minmax(0, 1fr);
| |
| }
| |
| | |
| .doc-layout-right {
| |
| grid-column: 1 / -1;
| |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
| |
| gap: 7px;
| |
| }
| |
| | |
| .doc-footer {
| |
| grid-template-columns: 1fr 110px 44px 110px;
| |
| }
| |
| | |
| .doc-keys {
| |
| display: none;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 980px) {
| |
| .doc-layout,
| |
| .doc-layout-lower,
| |
| .doc-layout-right {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .doc-footer {
| |
| grid-template-columns: 1fr;
| |
| height: auto;
| |
| padding: 8px 10px;
| |
| }
| |
| | |
| .doc-footer-sliders {
| |
| justify-content: center;
| |
| }
| |
| | |
| .doc-date,
| |
| .doc-knob {
| |
| justify-self: center;
| |
| }
| |
| }
| |
| | |
| /* =========================================
| |
| CLBI Nations & Factions inline-theme support
| |
| 원본 표 구조 유지 / 외곽 패널 4px 패딩만 CSS에서 담당
| |
| ========================================= */
| |
| | |
| body.page-국가_및_조합 .liberty-content-main .mw-parser-output > .clbi-nations-board,
| |
| body.page-Nations_\&_Factions .liberty-content-main .mw-parser-output > .clbi-nations-board {
| |
| position: relative;
| |
| display: block;
| |
| width: 100%;
| |
| margin: 0 !important;
| |
| padding: 4px !important;
| |
| box-sizing: border-box;
| |
| background: #1d1d1d;
| |
| border: 1px solid #050505;
| |
| border-radius: 0;
| |
| color: #e2e2e2;
| |
| overflow: visible;
| |
| box-shadow:
| |
| inset 0 1px 0 #555555,
| |
| inset -1px 0 0 #555555,
| |
| inset 1px 0 0 #101010,
| |
| inset 0 -1px 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-board .clbi-nations-table,
| |
| body.page-Nations_\&_Factions .clbi-nations-board .clbi-nations-table {
| |
| width: 100% !important;
| |
| max-width: none !important; | | max-width: none !important; |
| margin: 0 !important; | | max-height: none !important; |
| border-collapse: collapse !important;
| |
| border-spacing: 0 !important;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-board a:not(.new):not(.external),
| |
| body.page-Nations_\&_Factions .clbi-nations-board a:not(.new):not(.external) {
| |
| color: #e2e2e2 !important;
| |
| text-decoration: none !important;
| |
| } | | } |
|
| |
|
| body.page-국가_및_조합 .clbi-nations-board a:not(.new):not(.external):hover,
| | /* 관련 틀 본문 하단 여백 보정 */ |
| body.page-Nations_\&_Factions .clbi-nations-board a:not(.new):not(.external):hover {
| | .related-template-body > *:last-child { |
| color: #ffffff !important; | | margin-bottom: 1px !important; |
| text-decoration: none !important;
| |
| } | | } |
|
| |
|
| body.page-국가_및_조합 .clbi-nations-board img,
| | .related-template-body table:last-child, |
| body.page-Nations_\&_Factions .clbi-nations-board img { | | .related-template-body .wikitable:last-child, |
| vertical-align: middle; | | .related-template-body [id^="collapsible"]:last-child { |
| | margin-bottom: 1px !important; |
| } | | } |
|
| |
|
| /* =========================================
| | .related-template-body > br:last-child { |
| CLBI Nations & Factions continent tabs
| | display: none !important; |
| 하단 대륙 정보 패널 / 선택 탭 패널 융합형
| |
| ========================================= */
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-switcher,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-switcher { | |
| display: block; | |
| width: 100%;
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| } | | } |
|
| |
|
| body.page-국가_및_조합 .clbi-nations-continent-tabs,
| | /* 컨트리볼 */ |
| body.page-Nations_\&_Factions .clbi-nations-continent-tabs {
| | #clbi-left-nations-image { |
| display: block; | | display: block; |
| width: 100%; | | width: 100%; |
| | height: auto; |
| margin: 0; | | margin: 0; |
| padding: 0; | | padding: 0; |
| box-sizing: border-box;
| | border: 0; |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-tabbar,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-tabbar {
| |
| position: relative;
| |
| z-index: 2;
| |
| display: flex;
| |
| align-items: flex-end;
| |
| justify-content: flex-start;
| |
| gap: 4px;
| |
| min-height: 28px;
| |
| margin: 0 0 -1px 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| overflow: visible;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-tab,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-tab {
| |
| position: relative;
| |
| z-index: 1;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| min-width: 92px;
| |
| height: 24px;
| |
| padding: 0 10px;
| |
| box-sizing: border-box;
| |
| background: #101010;
| |
| border: 1px solid #050505;
| |
| border-radius: 0;
| |
| color: #c8c8c8;
| |
| font-size: 11px;
| |
| font-weight: 700;
| |
| line-height: 1;
| |
| text-align: center;
| |
| text-shadow: 1px 1px 0 #000;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| box-shadow:
| |
| inset 0 1px 0 #555555,
| |
| inset -1px 0 0 #555555,
| |
| inset 1px 0 0 #101010,
| |
| inset 0 -1px 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-tab:hover,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-tab:hover {
| |
| background: #1d1d1d;
| |
| color: #ffffff;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-tab.is-active,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-tab.is-active {
| |
| z-index: 4;
| |
| height: 28px;
| |
| background: #1d1d1d;
| |
| border-bottom-color: #1d1d1d;
| |
| color: #ffffff;
| |
| box-shadow:
| |
| inset 0 1px 0 #555555,
| |
| inset -1px 0 0 #555555,
| |
| inset 1px 0 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-body,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-body {
| |
| position: relative;
| |
| z-index: 1;
| |
| display: block;
| |
| width: 100%;
| |
| min-height: 320px;
| |
| margin: 0;
| |
| padding: 4px;
| |
| box-sizing: border-box;
| |
| background: #1d1d1d;
| |
| border: 1px solid #050505;
| |
| border-radius: 0; | |
| color: #e2e2e2;
| |
| overflow: hidden;
| |
| box-shadow:
| |
| inset 0 1px 0 #555555,
| |
| inset -1px 0 0 #555555,
| |
| inset 1px 0 0 #101010,
| |
| inset 0 -1px 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-panel,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-panel {
| |
| display: none;
| |
| width: 100%;
| |
| height: 100%;
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-panel.is-active,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-panel.is-active {
| |
| display: block;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-heading,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-heading {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| gap: 8px;
| |
| min-height: 24px;
| |
| margin: 0 0 4px;
| |
| padding: 0 7px;
| |
| box-sizing: border-box;
| |
| border-bottom: 1px solid #050505;
| |
| color: #e2e2e2;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| line-height: 1;
| |
| text-shadow: 1px 1px 0 #000;
| |
| box-shadow: 0 1px 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-continent-heading span:last-child,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-heading span:last-child {
| |
| color: #8a8a8a;
| |
| font-size: 9px;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-row,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-row {
| |
| display: grid;
| |
| grid-template-columns: 132px minmax(0, 1fr);
| |
| min-height: 25px;
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| border-bottom: 1px solid #050505;
| |
| box-shadow: 0 1px 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-row:last-child,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-row:last-child {
| |
| border-bottom: 0;
| |
| box-shadow: none;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-name,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-name {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| min-width: 0;
| |
| padding: 4px 7px;
| |
| box-sizing: border-box;
| |
| border-right: 1px solid #050505;
| |
| color: #c8c8c8;
| |
| font-size: 10px;
| |
| font-weight: 700;
| |
| line-height: 1.35;
| |
| text-align: center;
| |
| text-shadow: 1px 1px 0 #000;
| |
| box-shadow: 1px 0 0 #101010;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-content,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-content {
| |
| min-width: 0;
| |
| padding: 4px 8px;
| |
| box-sizing: border-box;
| |
| color: #e2e2e2;
| |
| font-size: 11px;
| |
| line-height: 1.55;
| |
| text-align: left;
| |
| word-break: keep-all;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-content img,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-content img {
| |
| vertical-align: -2px;
| |
| }
| |
| | |
| @media screen and (max-width: 1100px) {
| |
| body.page-국가_및_조합 .clbi-nations-continent-tab,
| |
| body.page-Nations_\&_Factions .clbi-nations-continent-tab {
| |
| min-width: 0;
| |
| flex: 1 1 0;
| |
| padding: 0 5px;
| |
| font-size: 10px;
| |
| }
| |
| | |
| body.page-국가_및_조합 .clbi-nations-region-row,
| |
| body.page-Nations_\&_Factions .clbi-nations-region-row {
| |
| grid-template-columns: 100px minmax(0, 1fr);
| |
| }
| |
| } | | } |