편집토론문서 역사

미디어위키:MainPage.css: 두 판 사이의 차이

(Install package: clbiwiki-mainpage-bottom-three-frames-20260711 / css/MainPage.css)
(Install package: clbiwiki-mainpage-status-information-vertical-buttons-fix-20260711 / css/MainPage.css)
721번째 줄: 721번째 줄:


.main-portal .portal-information-body {
.main-portal .portal-information-body {
     grid-template-rows:40px 41px 40px 41px 40px;
    grid-template-columns:repeat(5,minmax(0,1fr));
     grid-template-rows:minmax(0,1fr);
}
 
.main-portal .portal-information-body .portal-dock-button > a {
    padding:8px 0;
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:1px;
    white-space:normal;
}
}


2026년 7월 11일 (토) 09:11 판

/* =========================================
COASTLINE: BLACK ICE - MainPage
대문 전용 v3 스타일
========================================= */

/*
책임 범위
-----------------------------------------
- 대문 본문 .main-portal 내부만 담당한다.
- 사이트 공통 셸은 Layout.css가 담당한다.
- 카테고리 네비의 SVG 구조는 CategoryNav.js가 생성한다.
- 대문에서 제거된 보조 모듈의 레거시 스타일은 이 파일에 두지 않는다.
*/

.main-portal {
    --panel:#1d1d1d;
    --well:#080808;
    --item:#101010;
    --edge:#050505;
    --highlight:#555555;
    --shadow:#101010;
    --text:#e2e2e2;
    --text-strong:#ffffff;
    --meta:#8a8a8a;
    --muted:#626262;
    --gap:2px;
    --block-gap:8px;
    --frame:8px;
    width:100%;
    margin:0;
    padding:0;
    color:var(--text);
    background:transparent;
    font-size:12px;
    line-height:18px;
    box-sizing:border-box;
}

.main-portal *,
.main-portal *::before,
.main-portal *::after {
    box-sizing:border-box;
}

.main-portal a,
.main-portal a:visited {
    color:var(--text) !important;
    text-decoration:none !important;
}

.main-portal a:hover,
.main-portal a:focus {
    color:var(--text-strong) !important;
    text-decoration:none !important;
}

/* -----------------------------------------
공통 돌출 프레임
----------------------------------------- */

.main-portal .lab-logo,
.main-portal .console,
.portal-category-nav {
    background:var(--panel, #1d1d1d);
    border:1px solid var(--edge, #050505);
    border-radius:0;
    box-shadow:
        inset 0 1px 0 var(--highlight, #555555),
        inset -1px 0 0 var(--highlight, #555555),
        inset 1px 0 0 var(--shadow, #101010),
        inset 0 -1px 0 var(--shadow, #101010);
}

.main-portal .lab-logo,
.main-portal [data-component="category-nav"],
.main-portal .console {
    margin:0 0 var(--block-gap);
}

/* -----------------------------------------
로고 프레임
----------------------------------------- */

.main-portal .lab-logo {
    padding:var(--frame);
    overflow:hidden;
}

.main-portal .portal-logo-well {
    min-height:86px;
    padding:10px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--well);
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
    line-height:0;
}

.main-portal .portal-logo-well a,
.main-portal .portal-logo-well .mw-file-description {
    display:inline-block;
    line-height:0;
}

.main-portal .portal-logo-well img,
.main-portal .portal-logo-well .mw-file-element {
    display:block;
    width:1000px;
    max-width:144%;
    height:auto;
    filter:grayscale(1) contrast(1.04) brightness(1.02);
}

/* -----------------------------------------
카테고리 네비
----------------------------------------- */

.main-portal [data-component="category-nav"] {
    display:block;
    width:100%;
}

.portal-category-nav {
    position:relative;
    width:100%;
    height:24px;
    margin:0;
    padding:0;
    overflow:hidden;
}

.portal-category-svg {
    display:block;
    width:100%;
    height:100%;
}

.portal-cat-shape {
    fill:transparent;
    stroke:none;
    pointer-events:all;
}

.portal-cat-anchor:hover .portal-cat-shape {
    fill:rgba(255,255,255,0.035);
}

.portal-cat-anchor:active .portal-cat-shape {
    fill:rgba(0,0,0,0.18);
}

.portal-cat-label {
    fill:#e2e2e2;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
    paint-order:stroke;
    stroke:#050505;
    stroke-width:2px;
    stroke-linejoin:round;
}

.portal-cat-anchor:hover .portal-cat-label {
    fill:#ffffff;
}

.portal-cat-divider {
    stroke:#050505;
    stroke-width:1;
    shape-rendering:crispEdges;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
}

/* -----------------------------------------
메인 콘솔
----------------------------------------- */

.main-portal .console {
    width:100%;
    padding:0 var(--frame) var(--frame);
    overflow:hidden;
}

.main-portal .titlebar,
.main-portal .screen-title {
    height:34px;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0;
    overflow:hidden;
    background:transparent;
    border:0;
    box-shadow:none;
    color:var(--text-strong);
    font-size:12px;
    font-weight:700;
    line-height:34px;
    white-space:nowrap;
}

.main-portal .titlebar > span,
.main-portal .screen-title > span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.main-portal .titlebar > span:last-child,
.main-portal .screen-title > span:last-child {
    flex:0 0 auto;
    color:var(--meta);
    font-size:11px;
}

.main-portal .console-body {
    padding:3px;
    background:var(--well);
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

.main-portal .console-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap);
    align-items:stretch;
}

.main-portal .main-screen,
.main-portal .archive-screen {
    min-width:0;
    padding:var(--frame);
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
}

.main-portal .main-screen {
    display:grid;
    grid-template-rows:auto auto;
    gap:var(--gap);
}

.main-portal .archive-screen {
    display:flex;
    flex-direction:column;
    padding-top:0;
}

/* -----------------------------------------
이미지 피드
----------------------------------------- */

.main-portal .image-feed {
    position:relative;
    width:100%;
    height:260px;
    min-height:260px;
    overflow:hidden;
    isolation:isolate;
    background:#030303;
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

.main-portal .feed-layer {
    position:absolute;
    inset:-12px;
    z-index:1;
    opacity:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    filter:brightness(0.78) contrast(1.12) saturate(0.78) grayscale(0.16);
    transform:translate(0,0) scale(1.06);
    transform-origin:center;
    will-change:opacity, transform;
    animation-duration:24s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.main-portal .feed-bg-001 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-001.png'); }
.main-portal .feed-bg-002 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-002.png'); }
.main-portal .feed-bg-003 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-003.png'); }
.main-portal .feed-bg-004 { background-image:url('/index.php?title=특수:Redirect/file/Bg-Feed-004.png'); }

.main-portal .feed-layer-1 { animation-name:image-feed-drift-left; animation-delay:0s; }
.main-portal .feed-layer-2 { animation-name:image-feed-drift-right; animation-delay:6s; }
.main-portal .feed-layer-3 { animation-name:image-feed-drift-left; animation-delay:12s; }
.main-portal .feed-layer-4 { animation-name:image-feed-drift-right; animation-delay:18s; }

@keyframes image-feed-drift-left {
    0% { opacity:0; transform:translate(0,0) scale(1.06); }
    4.166% { opacity:1; transform:translate(0,0) scale(1.06); }
    25% { opacity:1; transform:translate(-22px,14px) scale(1.075); }
    29.166% { opacity:0; transform:translate(-26px,16px) scale(1.078); }
    100% { opacity:0; transform:translate(0,0) scale(1.06); }
}

@keyframes image-feed-drift-right {
    0% { opacity:0; transform:translate(0,0) scale(1.06); }
    4.166% { opacity:1; transform:translate(0,0) scale(1.06); }
    25% { opacity:1; transform:translate(22px,14px) scale(1.075); }
    29.166% { opacity:0; transform:translate(26px,16px) scale(1.078); }
    100% { opacity:0; transform:translate(0,0) scale(1.06); }
}

.main-portal .image-feed::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.18), transparent 22%, transparent 74%, rgba(0,0,0,0.30)),
        linear-gradient(to right, rgba(0,0,0,0.22), transparent 10%, transparent 90%, rgba(0,0,0,0.22));
}

.main-portal .image-feed::after {
    content:"";
    position:absolute;
    inset:-40px 0;
    z-index:6;
    pointer-events:none;
    opacity:0.18;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.09) 0,
            rgba(255,255,255,0.09) 1px,
            transparent 2px,
            transparent 5px
        );
    mix-blend-mode:screen;
}

.main-portal .feed-caption {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:8;
    height:24px;
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    overflow:hidden;
    background:rgba(16,16,16,0.94);
    border-top:1px solid var(--edge);
    color:var(--text);
    font-size:11px;
    font-weight:700;
    line-height:23px;
}

.main-portal .feed-caption span:first-child {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.main-portal .feed-caption span:last-child {
    flex:0 0 auto;
    color:var(--meta);
}

/* -----------------------------------------
선언문
----------------------------------------- */

.main-portal .statement-plate {
    padding:12px 16px;
    background:var(--well);
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

.main-portal .statement-plate h2 {
    margin:0 0 8px !important;
    padding:0 0 7px !important;
    border:0 !important;
    border-bottom:1px solid var(--item) !important;
    color:var(--text-strong) !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:20px !important;
    text-align:center !important;
}

.main-portal .statement-plate p {
    max-width:840px;
    margin:0 auto 8px;
    color:var(--text);
    font-size:12px;
    font-weight:400;
    line-height:18px;
    text-align:center;
    word-break:keep-all;
}

.main-portal .statement-plate p:last-child {
    margin-bottom:0;
}

/* -----------------------------------------
ARCHIVE STATUS
----------------------------------------- */

.main-portal .archive-screen .screen-title {
    flex:0 0 34px;
}

.main-portal .instrument-body {
    flex:1 1 auto;
    min-height:0;
    padding:3px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:var(--gap);
    background:var(--well);
    border:0;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

.main-portal .instrument-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--gap);
}

.main-portal .gauge,
.main-portal .instrument-line {
    background:var(--item);
    border:1px solid var(--edge);
    box-shadow:inset 0 1px 0 var(--panel);
}

.main-portal .gauge {
    height:72px;
    padding:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
}

.main-portal .gauge b {
    display:block;
    color:var(--text-strong);
    font-family:Consolas, Monaco, monospace !important;
    font-size:20px;
    font-weight:700;
    line-height:24px;
}

.main-portal .gauge span {
    display:block;
    margin-top:4px;
    color:var(--meta);
    font-size:10px;
    line-height:12px;
    white-space:nowrap;
}

.main-portal .instrument-lines {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap);
}

.main-portal .instrument-line {
    height:24px;
    min-height:24px;
    padding:0 8px;
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    align-items:center;
    gap:8px;
    overflow:hidden;
    font-size:11px;
    line-height:22px;
}

.main-portal .instrument-label {
    color:var(--meta);
    white-space:nowrap;
}

.main-portal .instrument-value {
    min-width:0;
    overflow:hidden;
    color:var(--text);
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.main-portal .gauge:hover,
.main-portal .instrument-line:hover {
    color:var(--text-strong);
}

.main-portal .instrument-line:hover .instrument-value {
    color:var(--text-strong);
}

/* -----------------------------------------
반응형
----------------------------------------- */

@media screen and (max-width:1100px) {
    .main-portal .console-grid {
        grid-template-columns:minmax(0,1fr);
    }

    .main-portal .archive-screen {
        min-height:190px;
    }
}

@media screen and (max-width:820px) {

    .main-portal .image-feed {
        height:220px;
        min-height:220px;
    }

    .portal-cat-label {
        font-size:11px;
    }
}

@media screen and (max-width:620px) {
    .main-portal .lab-logo,
    .main-portal .console {
        --frame:6px;
    }

    .main-portal .statement-plate {
        padding:10px 12px;
    }

    .main-portal .instrument-grid {
        grid-template-columns:minmax(0,1fr);
    }
}

/* 아날로그 UI는 상태 변화를 즉시 보여준다. */
.main-portal a,
.main-portal button,
.main-portal .portal-cat-shape,
.main-portal .portal-cat-label,
.main-portal .gauge,
.main-portal .instrument-line {
    transition:none !important;
}

/* =========================================
대문 하단 3분할 도크
- 왼쪽: ARCHIVE STATUS
- 가운데: INFORMATION (남는 폭 전체 사용)
- 오른쪽: PROJECTS
- 세 프레임 모두 왼쪽 33px 시각 면의 세로 제목을 사용한다.
========================================= */

.main-portal .portal-bottom-row {
    width:100%;
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 415px;
    gap:var(--block-gap);
    align-items:stretch;
}

.main-portal .portal-bottom-frame {
    min-width:0;
    height:234px;
    padding:var(--frame) var(--frame) var(--frame) 0;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:0;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
}

.main-portal .portal-side-title {
    grid-column:1;
    grid-row:1;
    width:34px;
    min-width:34px;
    max-width:34px;
    position:relative;
    display:block;
    padding:0;
    background:transparent;
    color:var(--text-strong);
    font-size:12px;
    font-weight:700;
    line-height:12px;
    text-align:center;
}

.main-portal .portal-side-title-stack {
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    transform:translate(-50%,-50%) translateX(1px);
}

.main-portal .portal-side-title-stack > span {
    width:12px;
    height:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:12px;
    text-align:center;
}

.main-portal .portal-dock-body {
    grid-column:2;
    grid-row:1;
    min-width:0;
    min-height:0;
    height:216px;
    padding:3px;
    background:var(--well);
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

/* ARCHIVE STATUS */
.main-portal .portal-status-body {
    display:grid;
    grid-template-rows:minmax(0,1fr) 82px;
    gap:var(--gap);
}

.main-portal .portal-status-body .instrument-grid,
.main-portal .portal-status-body .instrument-lines {
    min-height:0;
}

.main-portal .portal-status-body .gauge {
    height:auto;
    min-height:0;
}

.main-portal .portal-status-body .instrument-lines {
    grid-template-rows:40px 40px;
}

.main-portal .portal-status-body .instrument-line {
    height:40px;
    min-height:40px;
    line-height:38px;
}

/* INFORMATION / PROJECTS 공통 버튼 */
.main-portal .portal-button-list {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap);
}

.main-portal .portal-information-body {
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
}

.main-portal .portal-information-body .portal-dock-button > a {
    padding:8px 0;
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:1px;
    white-space:normal;
}

.main-portal .portal-project-body {
    grid-template-rows:104px 104px;
}

.main-portal .portal-dock-button,
.main-portal .portal-dock-button > a {
    width:100%;
    min-width:0;
    height:100%;
}

.main-portal .portal-dock-button > a {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--edge);
    box-shadow:
        inset 0 1px 0 var(--highlight),
        inset -1px 0 0 var(--highlight),
        inset 1px 0 0 var(--shadow),
        inset 0 -1px 0 var(--shadow);
    color:var(--text) !important;
    font-size:13px;
    font-weight:700;
    line-height:normal;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.main-portal .portal-project-body .portal-dock-button > a {
    font-size:14px;
}

.main-portal .portal-dock-button > a:hover,
.main-portal .portal-dock-button > a:focus {
    color:var(--text-strong) !important;
}

.main-portal .portal-dock-button > a:active {
    color:var(--text) !important;
    box-shadow:
        inset 0 1px 0 var(--shadow),
        inset -1px 0 0 var(--shadow),
        inset 1px 0 0 var(--highlight),
        inset 0 -1px 0 var(--highlight);
}

@media screen and (max-width:1100px) {
    .main-portal .portal-bottom-row {
        grid-template-columns:260px minmax(0,1fr);
    }

    .main-portal .portal-project-frame {
        grid-column:1 / -1;
    }
}

@media screen and (max-width:620px) {
    .main-portal .portal-bottom-row {
        grid-template-columns:minmax(0,1fr);
    }

    .main-portal .portal-project-frame {
        grid-column:auto;
    }
}