미디어위키:Test.css

/* =========================================
COASTLINE: BLACK ICE
MediaWiki:Test.css
Sandbox-only style test
Matte gunmetal archive console
Screen device / record module / status instrument / team work module
========================================= */

/*
Scope:
- This file is globally imported.
- Every visual rule is scoped to .stylelab.
- No body, top-nav, sidebar, page shell, or global layout selectors.
*/

/* -----------------------------------------
0. Style tokens
----------------------------------------- */

.stylelab {
--surface-page:#070707;
--surface-frame:#101010;
--surface-frame-soft:#141414;
--surface-title:#1d1d1d;
--surface-title-hover:#252525;
--surface-well:#080808;
--surface-screen:#060606;
--surface-row:#121212;
--surface-row-alt:#151515;
--surface-inset:#070707;

--edge-top:#555555;
--edge-side:#2b2b2b;
--edge-bottom:#050505;
--edge-soft:#202020;
--edge-mid:#333333;
--edge-weak:#181818;

--text-main:#e2e2e2;
--text-soft:#c8c8c8;
--text-dim:#8a8a8a;
--text-faint:#626262;

--signal-blue:#6f8fa8;
--signal-teal:#5a9b92;
--signal-green:#78966c;
--signal-amber:#c4a04a;
--signal-red:#a85c50;
--signal-gray:#9a9a9a;

--wip-yellow:#f2c300;
--wip-black:#050505;

--gap:8px;
--gap-tight:6px;
--pad:8px;
--title-h:24px;
--row-h:22px;

width:100%;
margin:0 auto;
padding:var(--gap);
color:var(--text-main);
background:var(--surface-page);
font-size:11px;
line-height:1.5;
box-sizing:border-box;
}

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

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

.stylelab a:hover {
color:#ffffff !important;
text-decoration:underline !important;
}

/* -----------------------------------------
1. Frame system
North-light rule:
top bright / sides neutral / bottom dark
----------------------------------------- */

.stylelab .frame,
.stylelab .lab-logo,
.stylelab .directory,
.stylelab .console,
.stylelab .panel,
.stylelab .instrument-panel,
.stylelab .ticker {
border:1px solid;
border-color:
var(--edge-top)
var(--edge-side)
var(--edge-bottom)
var(--edge-side);
background:var(--surface-frame);
border-radius:0;
box-shadow:none;
outline:none;
overflow:hidden;
}

.stylelab .titlebar {
position:relative;
min-height:var(--title-h);
padding:0 var(--pad);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap);
background:var(--surface-title);
border-bottom:1px solid var(--edge-bottom);
color:#f0f0f0;
font-size:10px;
font-weight:700;
line-height:var(--title-h);
white-space:nowrap;
overflow:hidden;
text-shadow:1px 1px 0 #000;
}

.stylelab .titlebar > span {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}

.stylelab .titlebar > span:last-child {
flex:0 0 auto;
color:#a8a8a8;
font-weight:700;
}

/* -----------------------------------------
2. Logo
----------------------------------------- */

.stylelab .lab-logo {
width:100%;
margin:0 0 var(--gap);
padding:10px 0 8px;
text-align:center;
line-height:0;
}

.stylelab .lab-logo a,
.stylelab .lab-logo .mw-file-description {
display:inline-block;
line-height:0;
}

.stylelab .lab-logo img,
.stylelab .lab-logo .mw-file-element {
width:720px;
max-width:88%;
height:auto;
filter:
grayscale(1)
contrast(1.04)
brightness(1.02);
}

/* -----------------------------------------
3. Directory strip
Test component only. Not a global navigation replacement.
----------------------------------------- */

.stylelab .directory {
width:100%;
margin:0 0 var(--gap) !important;
border-collapse:collapse !important;
table-layout:fixed !important;
}

.stylelab .directory tbody,
.stylelab .directory tr {
width:100%;
}

.stylelab .directory td {
margin:0 !important;
padding:0 !important;
border:none !important;
border-right:1px solid var(--edge-bottom) !important;
background:var(--surface-frame-soft) !important;
vertical-align:middle !important;
text-align:center !important;
}

.stylelab .directory td:last-child {
border-right:none !important;
}

.stylelab .directory a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:30px !important;
padding:7px 6px 6px !important;
color:var(--text-main) !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}

.stylelab .directory td:hover,
.stylelab .directory td:hover a {
background:var(--surface-title-hover) !important;
color:#ffffff !important;
text-decoration:none !important;
}

/* -----------------------------------------
4. Main console
Type: SCREEN DEVICE
frame > titlebar > body > screen panels
----------------------------------------- */

.stylelab .console {
width:100%;
margin:0 0 var(--gap);
padding:0;
}

.stylelab .console-body {
padding:var(--gap-tight);
background:var(--surface-frame);
}

.stylelab .console-grid {
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
gap:var(--gap-tight);
}

.stylelab .main-screen,
.stylelab .side-screen {
position:relative;
min-width:0;
overflow:hidden;
border:1px solid var(--edge-soft);
background:var(--surface-screen);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.018),
inset 0 0 18px rgba(0,0,0,0.70);
}

.stylelab .main-screen::before,
.stylelab .side-screen::before {
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(
ellipse at 50% 42%,
rgba(255,255,255,0.030) 0%,
transparent 42%
),
linear-gradient(
to bottom,
rgba(255,255,255,0.030) 0%,
transparent 24%,
rgba(0,0,0,0.16) 100%
);
}

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

.stylelab .main-screen > *,
.stylelab .side-screen > * {
position:relative;
z-index:3;
}

.stylelab .main-screen {
min-height:260px;
padding:18px 18px 16px;
}

.stylelab .main-screen h2 {
margin:0 0 12px !important;
padding:0 0 8px !important;
border-bottom:1px solid var(--edge-soft) !important;
color:#f4f4f4 !important;
font-size:22px !important;
line-height:1.25 !important;
text-align:center !important;
text-shadow:
1px 1px 0 #000,
0 0 4px rgba(255,255,255,0.10) !important;
}

.stylelab .main-screen p {
max-width:800px;
margin:0 auto 10px;
color:#d8d8d8;
font-size:12px;
line-height:1.72;
text-align:center;
text-shadow:1px 1px 0 #000;
}

.stylelab .main-screen p:last-child {
margin-bottom:0;
}

.stylelab .side-screen {
padding:var(--pad);
}

/* -----------------------------------------
5. Screen subcomponents
Only used inside SCREEN DEVICE.
----------------------------------------- */

.stylelab .data-title {
min-height:22px;
margin:0 0 6px;
padding:5px 7px;
border:1px solid var(--edge-soft);
background:#151515;
color:#f0f0f0;
font-size:10px;
font-weight:700;
line-height:1.2;
text-shadow:1px 1px 0 #000;
}

.stylelab .data-table {
width:100%;
margin:0;
border-collapse:collapse;
table-layout:fixed;
font-size:10px;
}

.stylelab .data-table td {
padding:5px 6px;
border:1px solid var(--edge-soft);
background:#111;
color:var(--text-soft);
vertical-align:middle;
}

.stylelab .data-table td:first-child {
width:72px;
color:var(--text-dim);
background:#0b0b0b;
}

/* -----------------------------------------
6. Ticker
Type: RECORD STRIP
Not a screen device.
----------------------------------------- */

.stylelab .ticker {
height:22px;
margin:0 0 var(--gap-tight);
padding:0 var(--pad);
color:#bdbdbd;
background:#171717;
font-size:10px;
line-height:22px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

/* -----------------------------------------
7. Module grid
----------------------------------------- */

.stylelab .module-grid {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) 250px 250px;
gap:var(--gap-tight);
}

/* -----------------------------------------
8. Record modules
No scanlines. No screen treatment.
----------------------------------------- */

.stylelab .panel {
min-width:0;
}

.stylelab .panel-body {
padding:var(--pad);
background:var(--surface-well);
}

.stylelab .record-list {
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

.stylelab .record-list li {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:var(--gap);
min-height:var(--row-h);
margin:0;
padding:4px 2px;
border-bottom:1px solid var(--edge-soft);
color:var(--text-soft);
line-height:1.35;
}

.stylelab .record-list li:first-child {
border-top:1px solid var(--edge-soft);
}

.stylelab .record-list li span:first-child {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.stylelab .meta {
color:var(--text-dim);
white-space:nowrap;
font-size:9px;
}

/* -----------------------------------------
9. Status tags
Small functional color only.
No structural color use.
----------------------------------------- */

.stylelab .status-tag {
display:inline-block;
min-width:34px;
padding:1px 4px;
border:1px solid #303030;
background:#161616;
color:var(--text-soft);
font-size:9px;
text-align:center;
line-height:1.25;
}

.stylelab .status-tag.is-progress {
border-color:#6d5b2c;
color:#d3bb72;
background:#19170f;
}

.stylelab .status-tag.is-review {
border-color:#36515d;
color:#8bb6c6;
background:#10171a;
}

.stylelab .status-tag.is-wait {
border-color:#484848;
color:#a4a4a4;
background:#151515;
}

.stylelab .status-tag.is-done {
border-color:#3d5c38;
color:#9fbe96;
background:#111811;
}

.stylelab .status-tag.is-alert {
border-color:#6a3933;
color:#d48679;
background:#1b1110;
}

/* -----------------------------------------
10. Team work module
Use WIP construction motif only where the making team is foregrounded.
Only motif: left vertical construction rail.
----------------------------------------- */

.stylelab .team-panel .panel-body {
position:relative;
padding-left:15px;
}

.stylelab .team-panel .panel-body::before {
content:"";
position:absolute;
left:6px;
top:7px;
bottom:7px;
width:4px;
pointer-events:none;
background:
repeating-linear-gradient(
45deg,
var(--wip-yellow) 0 4px,
var(--wip-yellow) 4px 5px,
var(--wip-black) 5px 9px,
var(--wip-black) 9px 10px
);
opacity:0.95;
}

.stylelab .team-panel .titlebar > span:last-child {
color:#c6c6c6;
}

/* -----------------------------------------
11. Status instrument
Type: STATUS INSTRUMENT
No scanlines. Gauge cells may have recessed finish.
----------------------------------------- */

.stylelab .instrument-panel {
min-width:0;
}

.stylelab .instrument-body {
padding:var(--pad);
background:var(--surface-well);
}

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

.stylelab .gauge {
min-width:0;
padding:7px 6px;
border:1px solid var(--edge-soft);
background:var(--surface-inset);
text-align:center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

.stylelab .gauge b {
display:block;
color:#f0f0f0;
font-family:Consolas, Monaco, monospace !important;
font-size:18px;
line-height:1.1;
text-shadow:1px 1px 0 #000;
}

.stylelab .gauge span {
display:block;
margin-top:3px;
color:var(--text-dim);
font-size:9px;
}

.stylelab .instrument-lines {
border-top:1px solid var(--edge-soft);
border-bottom:1px solid var(--edge-soft);
}

.stylelab .instrument-line {
display:grid;
grid-template-columns:82px minmax(0,1fr);
gap:6px;
min-height:20px;
padding:4px 2px;
border-bottom:1px solid var(--edge-soft);
font-size:10px;
line-height:1.25;
}

.stylelab .instrument-line:last-child {
border-bottom:none;
}

.stylelab .instrument-label {
color:var(--text-dim);
white-space:nowrap;
}

.stylelab .instrument-value {
color:var(--text-soft);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* -----------------------------------------
12. Guestbook
Type: RECORD MODULE
Separate from ARCHIVE STATUS.
----------------------------------------- */

.stylelab .guest-lines {
border-top:1px solid var(--edge-soft);
border-bottom:1px solid var(--edge-soft);
}

.stylelab .guest-line {
padding:5px 2px;
border-bottom:1px solid var(--edge-soft);
font-size:10px;
line-height:1.45;
color:var(--text-soft);
}

.stylelab .guest-line:last-child {
border-bottom:none;
}

.stylelab .guest-name {
color:#eeeeee;
font-weight:700;
}

/* -----------------------------------------
13. Manual samples
Type: RECORD MODULE
----------------------------------------- */

.stylelab .manual-panel {
margin-top:var(--gap-tight);
}

.stylelab .sample-row {
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:var(--gap-tight);
padding:5px 0;
border-bottom:1px solid var(--edge-soft);
}

.stylelab .sample-row:first-child {
border-top:1px solid var(--edge-soft);
}

.stylelab .sample-label {
color:var(--text-dim);
font-size:10px;
}

.stylelab .sample-value {
color:var(--text-soft);
font-size:10px;
}

/* -----------------------------------------
14. Responsive
----------------------------------------- */

@media screen and (max-width:1380px) {
.stylelab .module-grid {
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
}

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

.stylelab .module-grid {
grid-template-columns:minmax(0,1fr);
}

.stylelab .directory {
table-layout:auto !important;
}

.stylelab .directory,
.stylelab .directory tbody,
.stylelab .directory tr,
.stylelab .directory td {
display:block !important;
width:100% !important;
}

.stylelab .directory td {
border-right:none !important;
border-bottom:1px solid var(--edge-bottom) !important;
}

.stylelab .directory td:last-child {
border-bottom:none !important;
}
}