|
|
| 1번째 줄: |
1번째 줄: |
| /* ========================================= | | /* ========================================= |
| COASTLINE: BLACK ICE - Theme | | COASTLINE: BLACK ICE - Theme |
| | Halftone blotch mask background v36 |
| ========================================= */ | | ========================================= */ |
| /* screen-header 쓰는 문서만 푸커 숨기기 */
| |
| body:has(.screen-header) .liberty-footer {
| |
| display: none !important;
| |
| }
| |
| body:has(.screen-header) footer {
| |
| display: none !important;
| |
| }
| |
|
| |
|
| /* 색상 텍스트 틀 및 색상 범위 공통 처리 */
| | html { |
| .color-text {
| | min-height: 100%; |
| color: var(--text-color, #fff) !important; | | background-color: #000 !important; |
| } | | } |
|
| |
|
| .color-text a,
| | body { |
| .color-text a:visited,
| | min-height: 100%; |
| .color-text a.external {
| | margin: 0 !important; |
| color: var(--text-color, #fff) !important; | |
| }
| |
| | |
| .color-text a:hover {
| |
| color: var(--text-color, #fff) !important;
| |
| }
| |
| | |
| /* 선택 영역 */
| |
| ::selection {
| |
| background: rgba(133, 67, 105, 0.50);
| |
| color: #ffffff;
| |
| }
| |
| | |
| ::-moz-selection {
| |
| background: rgba(133, 67, 105, 0.50); | |
| color: #ffffff;
| |
| }
| |
| | |
| /* SVG + 테두리일 때 사각 테두리 제거, 형태 외곽선만 적용 */
| |
| .mw-image-border:has(img[src$=".svg.png"]) {
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| background: transparent !important; | | background: transparent !important; |
| padding: 0 !important; | | position: relative; |
| } | | } |
|
| |
|
| .mw-image-border img[src$=".svg.png"] { | | /* legacy JS background off */ |
| border: none !important; | | .WW-bg { |
| box-shadow: none !important;
| | display: none !important; |
| filter:
| |
| drop-shadow(1px 0 0 #ffffff)
| |
| drop-shadow(-1px 0 0 #ffffff)
| |
| drop-shadow(0 1px 0 #ffffff)
| |
| drop-shadow(0 -1px 0 #ffffff);
| |
| } | | } |
|
| |
|
| /* 폰트 */ | | /* static halftone plate */ |
| @font-face {
| | body::before { |
| font-family: 'Galmuri11'; | | content: ""; |
| src: url('/fonts/Galmuri11.woff2') format('woff2'); | | position: fixed; |
| font-weight: 400; | | inset: 0; |
| font-display: block; | | pointer-events: none; |
| | z-index: -2; |
| | background-color: #000; |
| | background-image: |
| | radial-gradient(circle at 1px 1px, rgba(226,226,226,0.86) 1.05px, transparent 1.45px); |
| | background-size: 10px 10px; |
| | background-position: 0 0; |
| | opacity: 1; |
| } | | } |
|
| |
|
| @font-face {
| | /* breathing dark blotch mask over the fixed halftone */ |
| font-family: 'Galmuri11';
| | body::after { |
| src: url('/fonts/Galmuri11-Bold.woff2') format('woff2');
| | content: ""; |
| font-weight: 700;
| | position: fixed; |
| font-display: block;
| | inset: 0; |
| }
| | pointer-events: none; |
| | | z-index: -1; |
| @font-face {
| | background-repeat: no-repeat; |
| font-family: 'BoldRound';
| |
| src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/BoldDungGeunMo.woff2') format('woff2');
| |
| font-weight: normal;
| |
| font-display: swap;
| |
| }
| |
| | |
| html body, html .liberty-content-main {
| |
| font-family: 'Galmuri11', sans-serif !important;
| |
| font-weight: 400 !important;
| |
| font-size: 12px;
| |
| }
| |
| | |
| * { font-family: inherit !important; }
| |
| | |
| .fa, .far, .fas, .fab, [class*="fa-"] {
| |
| font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important;
| |
| }
| |
| | |
| .mw-page-title-main, .mw-page-title-namespace,
| |
| .liberty-content-main h1, .liberty-content-main h2,
| |
| .liberty-content-main h3, .liberty-content-main h4,
| |
| .liberty-content-main h5, .liberty-content-main h6 {
| |
| font-family: 'BoldRound', sans-serif !important;
| |
| }
| |
| | |
| /* 배경: breathing halftone field | |
| - DOM 레이어를 만들지 않는다.
| |
| - 도트판은 고정한다.
| |
| - 밝아질 수 있는 얼룩 위치만 고정하고, 각 위치의 밀도만 숨쉬듯 변화시킨다.
| |
| */ | |
| @property --halftone-spot-a {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-b {
| |
| syntax: '<number>'; | |
| inherits: false; | |
| initial-value: 0; | |
| }
| |
| | |
| @property --halftone-spot-c {
| |
| syntax: '<number>';
| |
| inherits: false; | |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-d {
| |
| syntax: '<number>'; | |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-e {
| |
| syntax: '<number>';
| |
| inherits: false; | |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-f {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-g {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-h {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-i {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-j {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-k {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| @property --halftone-spot-l {
| |
| syntax: '<number>';
| |
| inherits: false;
| |
| initial-value: 0;
| |
| }
| |
| | |
| :root {
| |
| --halftone-spot-a: 0.08;
| |
| --halftone-spot-b: 0.34;
| |
| --halftone-spot-c: 0.14;
| |
| --halftone-spot-d: 0.28;
| |
| --halftone-spot-e: 0.10;
| |
| --halftone-spot-f: 0.20;
| |
| --halftone-spot-g: 0.42;
| |
| --halftone-spot-h: 0.16;
| |
| --halftone-spot-i: 0.30;
| |
| --halftone-spot-j: 0.12;
| |
| --halftone-spot-k: 0.26;
| |
| --halftone-spot-l: 0.18;
| |
| }
| |
| | |
| html {
| |
| position: relative;
| |
| min-height: 100%;
| |
| overflow-y: scroll;
| |
| background-color: #000000 !important;
| |
| background-image: | | background-image: |
| radial-gradient( | | radial-gradient(ellipse 24% 18% at 18% 14%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.58) 68%, transparent 84%), |
| circle,
| | radial-gradient(ellipse 22% 16% at 48% 12%, rgba(0,0,0,0.84) 0 50%, rgba(0,0,0,0.46) 67%, transparent 84%), |
| rgba(226,226,226,0.135) 0,
| | radial-gradient(ellipse 28% 20% at 74% 18%, rgba(0,0,0,0.92) 0 52%, rgba(0,0,0,0.56) 68%, transparent 84%), |
| rgba(226,226,226,0.135) 0.82px,
| | radial-gradient(ellipse 26% 19% at 28% 39%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.54) 69%, transparent 84%), |
| transparent 1.22px,
| | radial-gradient(ellipse 23% 17% at 58% 35%, rgba(0,0,0,0.88) 0 50%, rgba(0,0,0,0.48) 67%, transparent 83%), |
| transparent 100%
| | radial-gradient(ellipse 30% 22% at 82% 42%, rgba(0,0,0,0.92) 0 52%, rgba(0,0,0,0.56) 69%, transparent 86%), |
| ); | | radial-gradient(ellipse 28% 20% at 14% 68%, rgba(0,0,0,0.92) 0 54%, rgba(0,0,0,0.58) 71%, transparent 87%), |
| background-size: 8px 8px;
| | radial-gradient(ellipse 23% 17% at 42% 62%, rgba(0,0,0,0.88) 0 50%, rgba(0,0,0,0.50) 66%, transparent 82%), |
| background-position: 0 0;
| | radial-gradient(ellipse 25% 18% at 66% 72%, rgba(0,0,0,0.90) 0 52%, rgba(0,0,0,0.54) 69%, transparent 84%), |
| background-attachment: fixed; | | radial-gradient(ellipse 28% 22% at 86% 82%, rgba(0,0,0,0.94) 0 54%, rgba(0,0,0,0.60) 71%, transparent 86%), |
| | radial-gradient(ellipse 18% 14% at 6% 90%, rgba(0,0,0,0.88) 0 52%, rgba(0,0,0,0.48) 68%, transparent 84%), |
| | radial-gradient(ellipse 18% 14% at 51% 88%, rgba(0,0,0,0.86) 0 50%, rgba(0,0,0,0.46) 66%, transparent 82%); |
| | animation: halftoneBreathA 16s ease-in-out infinite; |
| } | | } |
|
| |
|
| | /* second soft mask layer to avoid clean radial circles and make the surface feel more organic */ |
| html::before { | | html::before { |
| content: ""; | | content: ""; |
| position: fixed; | | position: fixed; |
| inset: 0; | | inset: 0; |
| z-index: 0;
| |
| pointer-events: none; | | pointer-events: none; |
| | z-index: -1; |
| | opacity: 0.78; |
| | background-repeat: no-repeat; |
| background-image: | | background-image: |
| radial-gradient(
| | radial-gradient(ellipse 16% 12% at 12% 10%, rgba(0,0,0,0.42) 0 44%, transparent 76%), |
| circle,
| | radial-gradient(ellipse 20% 15% at 39% 18%, rgba(0,0,0,0.36) 0 42%, transparent 76%), |
| rgba(226,226,226,0.78) 0,
| | radial-gradient(ellipse 15% 12% at 67% 12%, rgba(0,0,0,0.34) 0 40%, transparent 74%), |
| rgba(226,226,226,0.78) 0.92px,
| | radial-gradient(ellipse 17% 12% at 86% 24%, rgba(0,0,0,0.40) 0 44%, transparent 76%), |
| transparent 1.32px,
| | radial-gradient(ellipse 18% 14% at 20% 47%, rgba(0,0,0,0.40) 0 44%, transparent 76%), |
| transparent 100%
| | radial-gradient(ellipse 16% 12% at 50% 44%, rgba(0,0,0,0.30) 0 40%, transparent 72%), |
| );
| | radial-gradient(ellipse 20% 15% at 76% 55%, rgba(0,0,0,0.34) 0 42%, transparent 74%), |
| background-size: 8px 8px;
| | radial-gradient(ellipse 18% 14% at 10% 78%, rgba(0,0,0,0.40) 0 44%, transparent 76%), |
| background-position: 0 0;
| | radial-gradient(ellipse 15% 12% at 34% 72%, rgba(0,0,0,0.30) 0 40%, transparent 72%), |
| background-attachment: fixed;
| | radial-gradient(ellipse 18% 14% at 62% 84%, rgba(0,0,0,0.34) 0 42%, transparent 74%), |
| opacity: 0.92;
| | radial-gradient(ellipse 18% 14% at 88% 74%, rgba(0,0,0,0.40) 0 44%, transparent 76%); |
| -webkit-mask-image:
| | animation: halftoneBreathB 21s ease-in-out infinite reverse; |
| radial-gradient(ellipse 32% 24% at 14% 18%, rgba(0,0,0,var(--halftone-spot-a)) 0%, rgba(0,0,0,var(--halftone-spot-a)) 18%, transparent 62%), | |
| radial-gradient(ellipse 26% 32% at 34% 20%, rgba(0,0,0,var(--halftone-spot-b)) 0%, rgba(0,0,0,var(--halftone-spot-b)) 18%, transparent 62%), | |
| radial-gradient(ellipse 30% 24% at 56% 17%, rgba(0,0,0,var(--halftone-spot-c)) 0%, rgba(0,0,0,var(--halftone-spot-c)) 18%, transparent 62%), | |
| radial-gradient(ellipse 34% 30% at 78% 24%, rgba(0,0,0,var(--halftone-spot-d)) 0%, rgba(0,0,0,var(--halftone-spot-d)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 24% 28% at 90% 42%, rgba(0,0,0,var(--halftone-spot-e)) 0%, rgba(0,0,0,var(--halftone-spot-e)) 18%, transparent 62%), | |
| radial-gradient(ellipse 38% 26% at 18% 48%, rgba(0,0,0,var(--halftone-spot-f)) 0%, rgba(0,0,0,var(--halftone-spot-f)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 30% 38% at 43% 49%, rgba(0,0,0,var(--halftone-spot-g)) 0%, rgba(0,0,0,var(--halftone-spot-g)) 18%, transparent 62%), | |
| radial-gradient(ellipse 36% 30% at 67% 52%, rgba(0,0,0,var(--halftone-spot-h)) 0%, rgba(0,0,0,var(--halftone-spot-h)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 26% 34% at 83% 64%, rgba(0,0,0,var(--halftone-spot-i)) 0%, rgba(0,0,0,var(--halftone-spot-i)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 34% 30% at 24% 76%, rgba(0,0,0,var(--halftone-spot-j)) 0%, rgba(0,0,0,var(--halftone-spot-j)) 18%, transparent 62%), | |
| radial-gradient(ellipse 30% 26% at 50% 83%, rgba(0,0,0,var(--halftone-spot-k)) 0%, rgba(0,0,0,var(--halftone-spot-k)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 32% 36% at 72% 81%, rgba(0,0,0,var(--halftone-spot-l)) 0%, rgba(0,0,0,var(--halftone-spot-l)) 18%, transparent 62%);
| |
| mask-image:
| |
| radial-gradient(ellipse 32% 24% at 14% 18%, rgba(0,0,0,var(--halftone-spot-a)) 0%, rgba(0,0,0,var(--halftone-spot-a)) 18%, transparent 62%), | |
| radial-gradient(ellipse 26% 32% at 34% 20%, rgba(0,0,0,var(--halftone-spot-b)) 0%, rgba(0,0,0,var(--halftone-spot-b)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 30% 24% at 56% 17%, rgba(0,0,0,var(--halftone-spot-c)) 0%, rgba(0,0,0,var(--halftone-spot-c)) 18%, transparent 62%), | |
| radial-gradient(ellipse 34% 30% at 78% 24%, rgba(0,0,0,var(--halftone-spot-d)) 0%, rgba(0,0,0,var(--halftone-spot-d)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 24% 28% at 90% 42%, rgba(0,0,0,var(--halftone-spot-e)) 0%, rgba(0,0,0,var(--halftone-spot-e)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 38% 26% at 18% 48%, rgba(0,0,0,var(--halftone-spot-f)) 0%, rgba(0,0,0,var(--halftone-spot-f)) 18%, transparent 62%), | |
| radial-gradient(ellipse 30% 38% at 43% 49%, rgba(0,0,0,var(--halftone-spot-g)) 0%, rgba(0,0,0,var(--halftone-spot-g)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 36% 30% at 67% 52%, rgba(0,0,0,var(--halftone-spot-h)) 0%, rgba(0,0,0,var(--halftone-spot-h)) 18%, transparent 62%), | |
| radial-gradient(ellipse 26% 34% at 83% 64%, rgba(0,0,0,var(--halftone-spot-i)) 0%, rgba(0,0,0,var(--halftone-spot-i)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 34% 30% at 24% 76%, rgba(0,0,0,var(--halftone-spot-j)) 0%, rgba(0,0,0,var(--halftone-spot-j)) 18%, transparent 62%), | |
| radial-gradient(ellipse 30% 26% at 50% 83%, rgba(0,0,0,var(--halftone-spot-k)) 0%, rgba(0,0,0,var(--halftone-spot-k)) 18%, transparent 62%),
| |
| radial-gradient(ellipse 32% 36% at 72% 81%, rgba(0,0,0,var(--halftone-spot-l)) 0%, rgba(0,0,0,var(--halftone-spot-l)) 18%, transparent 62%);
| |
| -webkit-mask-repeat: no-repeat;
| |
| mask-repeat: no-repeat;
| |
| -webkit-mask-size: 100% 100%;
| |
| mask-size: 100% 100%;
| |
| -webkit-mask-composite: source-over;
| |
| mask-composite: add;
| |
| animation: halftone-breathing-field 38s ease-in-out infinite; | |
| } | | } |
|
| |
|
| body {
| | @keyframes halftoneBreathA { |
| position: relative;
| |
| z-index: 1;
| |
| min-height: 100vh;
| |
| margin: 0 !important;
| |
| background: transparent !important;
| |
| overflow-x: auto;
| |
| }
| |
| | |
| .WW-bg,
| |
| #halftone-bg,
| |
| .halftone-blotch {
| |
| display: none !important;
| |
| visibility: hidden !important;
| |
| pointer-events: none !important;
| |
| }
| |
| | |
| @keyframes halftone-breathing-field { | |
| 0% { | | 0% { |
| --halftone-spot-a: 0.08; | | opacity: 0.76; |
| --halftone-spot-b: 0.34; | | filter: blur(9px); |
| --halftone-spot-c: 0.14;
| |
| --halftone-spot-d: 0.28;
| |
| --halftone-spot-e: 0.10;
| |
| --halftone-spot-f: 0.20;
| |
| --halftone-spot-g: 0.42;
| |
| --halftone-spot-h: 0.16;
| |
| --halftone-spot-i: 0.30;
| |
| --halftone-spot-j: 0.12;
| |
| --halftone-spot-k: 0.26;
| |
| --halftone-spot-l: 0.18;
| |
| } | | } |
| | | 20% { |
| 8% { | | opacity: 0.90; |
| --halftone-spot-a: 0.38; | | filter: blur(10px); |
| --halftone-spot-b: 0.18; | | } |
| --halftone-spot-c: 0.30;
| | 38% { |
| --halftone-spot-d: 0.12;
| | opacity: 0.82; |
| --halftone-spot-e: 0.24;
| | filter: blur(8px); |
| --halftone-spot-f: 0.46; | |
| --halftone-spot-g: 0.22; | |
| --halftone-spot-h: 0.40;
| |
| --halftone-spot-i: 0.14;
| |
| --halftone-spot-j: 0.34;
| |
| --halftone-spot-k: 0.10;
| |
| --halftone-spot-l: 0.28;
| |
| } | | } |
| | | 55% { |
| 17% { | | opacity: 0.96; |
| --halftone-spot-a: 0.18; | | filter: blur(11px); |
| --halftone-spot-b: 0.46;
| |
| --halftone-spot-c: 0.10;
| |
| --halftone-spot-d: 0.36;
| |
| --halftone-spot-e: 0.20;
| |
| --halftone-spot-f: 0.12;
| |
| --halftone-spot-g: 0.34; | |
| --halftone-spot-h: 0.24;
| |
| --halftone-spot-i: 0.44;
| |
| --halftone-spot-j: 0.16;
| |
| --halftone-spot-k: 0.30;
| |
| --halftone-spot-l: 0.08;
| |
| } | | } |
| | | 74% { |
| 27% { | | opacity: 0.84; |
| --halftone-spot-a: 0.44; | | filter: blur(8px); |
| --halftone-spot-b: 0.12;
| |
| --halftone-spot-c: 0.38;
| |
| --halftone-spot-d: 0.18;
| |
| --halftone-spot-e: 0.32;
| |
| --halftone-spot-f: 0.28;
| |
| --halftone-spot-g: 0.10; | |
| --halftone-spot-h: 0.46;
| |
| --halftone-spot-i: 0.20;
| |
| --halftone-spot-j: 0.40;
| |
| --halftone-spot-k: 0.14;
| |
| --halftone-spot-l: 0.34;
| |
| } | | } |
| | | 100% { |
| 39% { | | opacity: 0.76; |
| --halftone-spot-a: 0.16; | | filter: blur(9px); |
| --halftone-spot-b: 0.40;
| |
| --halftone-spot-c: 0.24;
| |
| --halftone-spot-d: 0.44;
| |
| --halftone-spot-e: 0.12;
| |
| --halftone-spot-f: 0.36;
| |
| --halftone-spot-g: 0.30; | |
| --halftone-spot-h: 0.14;
| |
| --halftone-spot-i: 0.38;
| |
| --halftone-spot-j: 0.22;
| |
| --halftone-spot-k: 0.48;
| |
| --halftone-spot-l: 0.18;
| |
| } | | } |
| | } |
|
| |
|
| 51% { | | @keyframes halftoneBreathB { |
| --halftone-spot-a: 0.30; | | 0% { |
| --halftone-spot-b: 0.14; | | opacity: 0.58; |
| --halftone-spot-c: 0.46;
| | filter: blur(16px); |
| --halftone-spot-d: 0.10;
| |
| --halftone-spot-e: 0.42;
| |
| --halftone-spot-f: 0.16;
| |
| --halftone-spot-g: 0.40;
| |
| --halftone-spot-h: 0.28;
| |
| --halftone-spot-i: 0.12;
| |
| --halftone-spot-j: 0.34;
| |
| --halftone-spot-k: 0.20;
| |
| --halftone-spot-l: 0.44;
| |
| } | | } |
| | | 24% { |
| 63% { | | opacity: 0.72; |
| --halftone-spot-a: 0.12; | | filter: blur(18px); |
| --halftone-spot-b: 0.32; | |
| --halftone-spot-c: 0.18;
| |
| --halftone-spot-d: 0.40;
| |
| --halftone-spot-e: 0.26;
| |
| --halftone-spot-f: 0.44;
| |
| --halftone-spot-g: 0.16;
| |
| --halftone-spot-h: 0.36;
| |
| --halftone-spot-i: 0.24;
| |
| --halftone-spot-j: 0.10;
| |
| --halftone-spot-k: 0.42;
| |
| --halftone-spot-l: 0.30;
| |
| } | | } |
| | | 47% { |
| 74% { | | opacity: 0.50; |
| --halftone-spot-a: 0.36; | | filter: blur(15px); |
| --halftone-spot-b: 0.20;
| |
| --halftone-spot-c: 0.34;
| |
| --halftone-spot-d: 0.22;
| |
| --halftone-spot-e: 0.48;
| |
| --halftone-spot-f: 0.10;
| |
| --halftone-spot-g: 0.28; | |
| --halftone-spot-h: 0.18;
| |
| --halftone-spot-i: 0.46;
| |
| --halftone-spot-j: 0.30;
| |
| --halftone-spot-k: 0.12;
| |
| --halftone-spot-l: 0.40;
| |
| } | | } |
| | | 71% { |
| 86% { | | opacity: 0.74; |
| --halftone-spot-a: 0.20; | | filter: blur(19px); |
| --halftone-spot-b: 0.44;
| |
| --halftone-spot-c: 0.12;
| |
| --halftone-spot-d: 0.30;
| |
| --halftone-spot-e: 0.18;
| |
| --halftone-spot-f: 0.38;
| |
| --halftone-spot-g: 0.46; | |
| --halftone-spot-h: 0.10;
| |
| --halftone-spot-i: 0.34;
| |
| --halftone-spot-j: 0.24;
| |
| --halftone-spot-k: 0.36;
| |
| --halftone-spot-l: 0.14;
| |
| } | | } |
|
| |
| 100% { | | 100% { |
| --halftone-spot-a: 0.08; | | opacity: 0.58; |
| --halftone-spot-b: 0.34; | | filter: blur(16px); |
| --halftone-spot-c: 0.14;
| |
| --halftone-spot-d: 0.28;
| |
| --halftone-spot-e: 0.10;
| |
| --halftone-spot-f: 0.20;
| |
| --halftone-spot-g: 0.42;
| |
| --halftone-spot-h: 0.16;
| |
| --halftone-spot-i: 0.30;
| |
| --halftone-spot-j: 0.12;
| |
| --halftone-spot-k: 0.26;
| |
| --halftone-spot-l: 0.18;
| |
| } | | } |
|
| |
| } | | } |
|
| |
|
| |
|
| @media (prefers-reduced-motion: reduce) { | | @media (prefers-reduced-motion: reduce) { |
| html::before { | | html::before, |
| | body::after { |
| animation: none !important; | | animation: none !important; |
| --halftone-spot-a: 0.20;
| |
| --halftone-spot-b: 0.22;
| |
| --halftone-spot-c: 0.18;
| |
| --halftone-spot-d: 0.20;
| |
| --halftone-spot-e: 0.16;
| |
| --halftone-spot-f: 0.22;
| |
| --halftone-spot-g: 0.24;
| |
| --halftone-spot-h: 0.18;
| |
| --halftone-spot-i: 0.22;
| |
| --halftone-spot-j: 0.16;
| |
| --halftone-spot-k: 0.20;
| |
| --halftone-spot-l: 0.18;
| |
| } | | } |
| }
| |
|
| |
| /* 스크롤 */
| |
| html { overflow-y: scroll; }
| |
| ::-webkit-scrollbar { width: 6px; }
| |
| ::-webkit-scrollbar-track { background: #0a0909; }
| |
| ::-webkit-scrollbar-thumb { background: #854369; border-radius: 3px; }
| |
|
| |
| /* 제목 */
| |
| .mw-page-title-main {
| |
| border-radius: 5px 5px 0 0 !important;
| |
| padding: 7px !important;
| |
| border: 2px solid #854369 !important;
| |
| border-bottom: none !important;
| |
| background: #171717 !important;
| |
| color: #e2e2e2 !important;
| |
| display: inline-block !important;
| |
| position: relative !important;
| |
| }
| |
|
| |
| .mw-page-title-main::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| right: 0;
| |
| height: 2px;
| |
| background: #171717;
| |
| }
| |
|
| |
| .mw-page-title-namespace {
| |
| padding: 7px 0 7px 7px !important;
| |
| border: 2px solid #854369 !important;
| |
| border-right: none !important;
| |
| border-bottom: none !important;
| |
| border-radius: 5px 0 0 0 !important;
| |
| background: #171717 !important;
| |
| color: #e2e2e2 !important;
| |
| display: inline-block !important;
| |
| vertical-align: bottom !important;
| |
| position: relative !important;
| |
| }
| |
|
| |
| .mw-page-title-namespace::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| right: 0;
| |
| height: 2px;
| |
| background: #171717;
| |
| }
| |
|
| |
| .mw-page-title-separator {
| |
| padding: 7px 0 !important;
| |
| border-top: 2px solid #854369 !important;
| |
| border-bottom: none !important;
| |
| background: #171717 !important;
| |
| color: #e2e2e2 !important;
| |
| display: inline-block !important;
| |
| vertical-align: bottom !important;
| |
| position: relative !important;
| |
| }
| |
|
| |
| .mw-page-title-separator::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| right: 0;
| |
| height: 2px;
| |
| background: #171717;
| |
| }
| |
|
| |
| .mw-page-title-namespace ~ .mw-page-title-main {
| |
| border-radius: 0 5px 0 0 !important;
| |
| padding: 7px 7px 7px 0 !important;
| |
| border-left: none !important;
| |
| vertical-align: bottom !important;
| |
| }
| |
|
| |
| /* 특수 페이지 h1 */
| |
| .liberty-content-header .title h1:not(:has(.mw-page-title-main)) {
| |
| 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 {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| right: 0;
| |
| height: 2px;
| |
| background: #171717;
| |
| }
| |
|
| |
| /* 대문 제목 숨기기 */
| |
| .mw-page-title-main.clbi-hide,
| |
| .mw-page-title-main.clbi-hide::after {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* 본문 */
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main,
| |
| .mw-datatable th, .mw-datatable tr:hover td, textarea,
| |
| div.mw-warning-with-logexcerpt, div.mw-lag-warn-high,
| |
| div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
| |
| background: #171717;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .mw-references-columns {
| |
| border-top: 1px solid #414141 !important;
| |
| }
| |
|
| |
| /* 문단 보더 */
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main h1,
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main h2,
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main h3,
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main h4,
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main h5,
| |
| .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;
| |
| }
| |
|
| |
| /* 링크 색상 */
| |
| 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; }
| |
|
| |
| /* CLBI 템플릿 링크 */
| |
| .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; }
| |
|
| |
| /* 편집 버튼 */
| |
| .btn-secondary {
| |
| color: #e2e2e2 !important;
| |
| background-color: #171717 !important;
| |
| border: 2px solid #854369 !important;
| |
| border-bottom: none !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: 0 2px 0 0 #854369 !important;
| |
| }
| |
|
| |
| .btn-secondary:hover {
| |
| color: #d46262 !important;
| |
| background-color: #171717 !important;
| |
| border: 2px solid #854369 !important;
| |
| border-bottom: none !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: 0 2px 0 0 #854369 !important;
| |
| }
| |
|
| |
| .btn-group .btn:first-child { border-radius: 5px 0 0 0 !important; }
| |
| .btn-group .dropdown-toggle { border-radius: 0 5px 0 0 !important; }
| |
|
| |
| /* 기본 목차: 본문에서는 숨김 */
| |
| .liberty-content-main #toc,
| |
| .liberty-content-main .toc {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 전체 내용 영역 */
| |
| #side-toc-box .toc-sidebar-content {
| |
| padding: 10px 12px !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 새로 생성한 목차 목록 */
| |
| #side-toc-box .generated-toc {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| list-style: none !important;
| |
| background: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 목록 항목 */
| |
| #side-toc-box .generated-toc li {
| |
| margin: 0 0 4px 0 !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| line-height: 1.5 !important;
| |
| }
| |
|
| |
| #side-toc-box .generated-toc li:last-child {
| |
| margin-bottom: 0 !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 링크 박스 */
| |
| #side-toc-box .generated-toc a {
| |
| display: block !important;
| |
| color: #E2E2E2 !important;
| |
| text-decoration: none !important;
| |
| padding: 4px 6px !important;
| |
| border-radius: 4px !important;
| |
| overflow: hidden !important;
| |
| }
| |
|
| |
| #side-toc-box .generated-toc a:hover {
| |
| background: rgba(133, 67, 105, 0.18) !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 긴 제목 감싸는 영역 */
| |
| #side-toc-box .toc-scroll-wrap {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| overflow: hidden !important;
| |
| position: relative !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 실제로 스크롤되는 긴 제목에만 오른쪽 페이드 적용 */
| |
| #side-toc-box .toc-scroll-wrap.is-scrolling {
| |
| mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
| |
| -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 실제 스크롤되는 텍스트 */
| |
| #side-toc-box .toc-scroll-text {
| |
| display: inline-block !important;
| |
| white-space: nowrap !important;
| |
| max-width: none !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: h2 항목 */
| |
| #side-toc-box .toc-level-2 .toc-scroll-text {
| |
| font-size: 12px !important;
| |
| font-weight: 700 !important;
| |
| color: #E2E2E2 !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: h3 항목 */
| |
| #side-toc-box .toc-level-3 {
| |
| padding-left: 12px !important;
| |
| }
| |
|
| |
| #side-toc-box .toc-level-3 .toc-scroll-text {
| |
| font-size: 11px !important;
| |
| font-weight: 400 !important;
| |
| color: #b8b8b8 !important;
| |
| }
| |
|
| |
| #side-toc-box .toc-level-3 a:hover .toc-scroll-text {
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 문서 스크롤 중에도 목차가 화면 안에 남도록 처리 */
| |
| #clbi-left-sidebar {
| |
| align-self: stretch !important;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 목차 박스만 화면 상단에 고정되듯 따라오게 함 */
| |
| #side-toc-box {
| |
| position: sticky !important;
| |
| top: 10px !important;
| |
| z-index: 1001;
| |
| max-height: calc(100vh - 40px);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* 왼쪽 목차: 항목이 많을 때 목차 내부만 스크롤되게 함 */
| |
| #side-toc-box .toc-sidebar-content {
| |
| max-height: calc(100vh - 88px);
| |
| overflow-y: auto;
| |
| overflow-x: hidden;
| |
| }
| |
|
| |
| /* 분류 칸 */
| |
| .catlinks {
| |
| background: #1A1A1A !important;
| |
| border: 2px solid #854369 !important;
| |
| border-radius: 5px !important;
| |
| font-size: 12px !important;
| |
| box-shadow: 0px 0px 3px #361427 !important;
| |
| color: #e2e2e2 !important;
| |
| padding: 2px 10px !important;
| |
| margin: -7px auto 10px auto !important;
| |
| width: calc(100% + 8px) !important;
| |
| position: relative !important;
| |
| left: -3px !important;
| |
| }
| |
|
| |
| .catlinks ul {
| |
| padding: 0 !important;
| |
| margin: 0 !important;
| |
| background-color: #1A1A1A !important;
| |
| }
| |
|
| |
| .catlinks a {
| |
| color: #854369 !important;
| |
| }
| |
|
| |
| .catlinks a:hover {
| |
| color: #d45aa2 !important;
| |
| }
| |
|
| |
| /* 분류 문서 */
| |
| .mw-category-generated { color: #e2e2e2 !important; }
| |
| .mw-category-generated a { color: #854369 !important; }
| |
| .CategoryTreeToggle { color: #854369 !important; }
| |
| .number-link { color: #854369 !important; }
| |
|
| |
| /* 편집 섹션 */
| |
| .mw-editsection {
| |
| color: #b45c8f !important;
| |
| float: right;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| /* 넘겨주기 */
| |
| .mw-redirectedfrom { color: #854369 !important; }
| |
| .mw-redirectedfrom a { color: #854369 !important; }
| |
|
| |
| /* 서브페이지 */
| |
| .subpages { color: #fdecec !important; }
| |
| .subpages a { color: #854369 !important; }
| |
| .subpages a:active { color: #854369 !important; }
| |
|
| |
| /* 공지사항 */
| |
| .alert-info {
| |
| background-color: #171717 !important;
| |
| border: 2px solid #854369 !important;
| |
| box-shadow: 0px 0px 3px #000000;
| |
| }
| |
|
| |
| /* 푸터 */
| |
| .footer-info-lastmod { color: #e2e2e2 !important; }
| |
| .footer-info-copyright { color: #e2e2e2 !important; }
| |
| .footer-places-privacy a { color: #c95197 !important; }
| |
| .footer-places-privacy a:active { color: #e2e2e2 !important; }
| |
| .footer-places-about a { color: #c95197 !important; }
| |
| .footer-places-about a:active { color: #e2e2e2 !important; }
| |
| .footer-places-disclaimers a { color: #c95197 !important; }
| |
| .footer-places-disclaimers a:active { color: #e2e2e2 !important; }
| |
|
| |
| /* 리스트 */
| |
| .liberty-content-main ul:not(#toc) {
| |
| list-style-type: disc;
| |
| list-style-image: none;
| |
| }
| |
|
| |
| .liberty-content-main ul ul:not(#toc) {
| |
| list-style-type: circle;
| |
| list-style-image: none;
| |
| }
| |
|
| |
| .liberty-content-main ul ul ul:not(#toc) {
| |
| list-style-type: square;
| |
| list-style-image: none;
| |
| }
| |
|
| |
| /* 반전 */
| |
| .invert {
| |
| filter: invert(1);
| |
| }
| |
|
| |
| /* 편집 권한에 따라 우측 모서리 처리 */
| |
| .liberty-content.content-tools-hidden .liberty-content-main {
| |
| border-top-right-radius: 5px !important;
| |
| }
| |
|
| |
| /* 분류 */
| |
| .liberty-content-main .catlinks {
| |
| width: calc(100% + 10px) !important;
| |
| left: -5px !important;
| |
| margin: 14px auto 0 auto !important;
| |
| padding: 5px 10px !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
|
| |
| /* 이미지 위에 이미지 얹기 */
| |
| .portrait-overlay-img,
| |
| .portrait-overlay-img a {
| |
| max-width: none !important;
| |
| max-height: none !important;
| |
| overflow: visible !important;
| |
| }
| |
|
| |
| .portrait-overlay-img img {
| |
| height: var(--overlay-height, 180px) !important;
| |
| width: auto !important;
| |
| max-width: none !important;
| |
| max-height: none !important;
| |
| }
| |
|
| |
| /* 관련 틀 본문 하단 여백 보정 */
| |
| .related-template-body > *:last-child {
| |
| margin-bottom: 1px !important;
| |
| }
| |
|
| |
| .related-template-body table:last-child,
| |
| .related-template-body .wikitable:last-child,
| |
| .related-template-body [id^="collapsible"]:last-child {
| |
| margin-bottom: 1px !important;
| |
| }
| |
|
| |
| .related-template-body > br:last-child {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* 컨트리볼 */
| |
| #clbi-left-nations-image {
| |
| display: block;
| |
| width: 100%;
| |
| height: auto;
| |
| margin: 0;
| |
| padding: 0;
| |
| border: 0;
| |
| } | | } |