미디어위키:DevTools.css

/* =========================================
Developer Tools Panel
owner-only floating tools
========================================= */

#dev-tools-panel {
position:fixed;
right:18px;
bottom:18px;
z-index:99998;
width:306px;
max-height:calc(100vh - 36px);
display:flex;
flex-direction:column;
background:#171717;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 8px 24px rgba(0,0,0,0.58);
color:#e2e2e2;
font-size:12px;
line-height:1.4;
/* 내부 스크롤을 독립 paint root로 제한해 뒤의 고정 셸을 재합성하지 않는다. */
isolation:isolate;
contain:layout paint style;
transform:translateZ(0);
backface-visibility:hidden;
}

#dev-tools-panel,
#dev-tools-panel * {
box-sizing:border-box;
}

#dev-tools-panel.dev-tools-collapsed {
width:auto;
min-width:176px;
}

#dev-tools-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:30px;
padding:0 8px 0 10px;
border-bottom:1px solid #050505;
background:#1d1d1d;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
cursor:default;
user-select:none;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.050);
}

#dev-tools-title {
display:flex;
align-items:center;
gap:7px;
min-width:0;
white-space:nowrap;
letter-spacing:.3px;
}

.dev-tools-led {
display:block;
width:7px;
height:7px;
background:#8fd09a;
border:1px solid #050505;
box-shadow:0 0 6px rgba(143,208,154,.28);
}

#dev-tools-toggle {
width:22px;
height:22px;
padding:0;
border:1px solid #202020;
border-top-color:#444444;
border-bottom-color:#050505;
border-radius:0;
background:#141414;
color:#e2e2e2;
font-size:14px;
line-height:18px;
font-weight:700;
text-align:center;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

#dev-tools-toggle:hover {
background:#202020;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}

#dev-tools-toggle:active {
background:#101010;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}

#dev-tools-body {
min-height:0;
max-height:calc(100vh - 68px);
padding:8px;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
overflow-y:auto;
overscroll-behavior:contain;
contain:layout paint;
scrollbar-gutter:stable;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-body {
display:none;
}

#dev-tools-panel.dev-tools-collapsed #dev-tools-header {
border-bottom:none;
}

.dev-tools-section {
display:flex;
flex-direction:column;
gap:6px;
margin:0 0 8px;
padding:7px;
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.dev-tools-section:last-of-type {
margin-bottom:8px;
}

.dev-tools-section-title {
height:18px;
line-height:18px;
padding:0 5px;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
}

.dev-tools-note {
color:#8a8a8a;
font-size:10px;
line-height:1.45;
}

.dev-tools-section-collapsible {
gap:6px;
}

.dev-tools-section-toggle {
display:flex;
align-items:center;
gap:6px;
width:100%;
height:18px;
line-height:18px;
padding:0 5px;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
text-align:left;
cursor:pointer;
}

.dev-tools-section-caret {
display:inline-flex;
align-items:center;
justify-content:center;
width:10px;
min-width:10px;
font-size:10px;
}

.dev-tools-section-toggle-label {
flex:1 1 auto;
}

.dev-tools-section-content {
display:flex;
flex-direction:column;
gap:6px;
}

.dev-tools-section-collapsible.is-collapsed .dev-tools-section-content {
display:none;
}

.dev-tools-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-button {
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:25px;
box-sizing:border-box;
padding:0 7px;
border-radius:0;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
background:linear-gradient(to bottom,#171717 0%,#141414 56%,#101010 100%);
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:center;
cursor:pointer;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.040);
}

.dev-tools-button:hover {
background:linear-gradient(to bottom,#202020 0%,#1a1a1a 56%,#141414 100%);
border-color:#444444 #333333 #101010 #333333;
color:#ffffff;
}

.dev-tools-button:active {
background:linear-gradient(to bottom,#0c0c0c 0%,#101010 55%,#171717 100%);
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}

.dev-tools-button:disabled,
.dev-tools-input:disabled {
cursor:default;
opacity:.55;
}

.dev-tools-danger {
border-color:#4a2828 #2e2020 #050505 #2e2020;
color:#c88a80;
}

.dev-tools-danger:hover {
border-color:#6a3933 #4a2828 #101010 #4a2828;
color:#e0a199;
}

.dev-tools-label {
margin:2px 0 -2px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
}

.dev-tools-input {
width:100%;
height:24px;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#e2e2e2;
padding:0 7px;
border-radius:0;
font-size:11px;
line-height:22px;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

.dev-tools-input:focus {
border-color:#555555 #333333 #050505 #333333;
background:#0c0c0c;
}

.dev-tools-progress-readout {
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:5px;
background:#070707;
border:1px solid #202020;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}

.dev-tools-progress-readout span {
display:block;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#dev-tools-status {
min-height:18px;
padding:4px 6px;
background:#101010;
border:1px solid #202020;
color:#8a8a8a;
font-size:10px;
line-height:1.25;
word-break:keep-all;
text-shadow:1px 1px 0 #000;
}

#dev-tools-status.dev-tools-status-error {
color:#d46262;
}

#dev-tools-status.dev-tools-status-ok {
color:#95c884;
}

/* =========================================
Analog hover normalization
========================================= */
#dev-tools-panel button,
#dev-tools-panel .dev-tools-button,
#dev-tools-panel .dev-tools-action,
#dev-tools-panel .dev-tools-control,
#dev-tools-panel input,
#dev-tools-panel select {
transition:none !important;
}
/* -----------------------------------------
Language status editor
----------------------------------------- */

.dev-tools-language-page {
min-height:20px;
padding:0 5px;
display:flex;
align-items:center;
background:#080808;
border:1px solid #202020;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-language-list {
display:flex;
flex-direction:column;
gap:4px;
}

.dev-tools-language-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 118px;
gap:5px;
align-items:center;
min-height:24px;
}

.dev-tools-language-name {
display:flex;
align-items:center;
min-width:0;
height:24px;
padding:0 6px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-select {
width:100%;
height:24px;
box-sizing:border-box;
padding:0 4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
outline:none;
text-shadow:1px 1px 0 #000;
}

.dev-tools-select:hover {
background:#101010;
border-color:#333333 #202020 #050505 #202020;
color:#ffffff;
}

.dev-tools-select:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
}
/* -----------------------------------------
Package installer
----------------------------------------- */

.dev-tools-package-section {
position:relative;
}

.dev-tools-file-input {
width:100%;
box-sizing:border-box;
min-height:24px;
padding:4px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#cfcfcf;
font-size:9px;
font-weight:700;
line-height:1.2;
outline:none;
text-shadow:1px 1px 0 #000;
}

.dev-tools-file-input:hover,
.dev-tools-file-input:focus {
background:#101010;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-package-summary {
min-height:20px;
padding:5px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#a8a8a8;
font-size:9px;
font-weight:700;
line-height:1.35;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-list {
max-height:185px;
overflow:auto;
background:#050505;
border:1px solid #1a1a1a;
padding:3px;
box-sizing:border-box;
}

.dev-tools-package-subtitle {
height:18px;
display:flex;
align-items:center;
padding:0 4px;
margin:3px 0;
box-sizing:border-box;
background:#101010;
border:1px solid #242424;
color:#d0d0d0;
font-size:8px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr);
gap:3px;
align-items:center;
min-height:20px;
padding:2px 3px;
box-sizing:border-box;
border-bottom:1px solid #111111;
color:#bdbdbd;
font-size:8px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}

.dev-tools-package-row:last-child {
border-bottom:0;
}

.dev-tools-package-source,
.dev-tools-package-target {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-package-target {
color:#e2e2e2;
}

.dev-tools-package-arrow {
color:#777777;
text-align:center;
}

.dev-tools-package-skipped {
color:#777777;
}

.dev-tools-package-skipped .dev-tools-package-target {
color:#9a9a9a;
}

.dev-tools-package-empty {
min-height:20px;
display:flex;
align-items:center;
padding:0 4px;
color:#777777;
font-size:8px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}


.dev-tools-svg-section .dev-tools-textarea,
.dev-tools-svg-textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    box-sizing: border-box;
    background: #070707;
    color: #e2e2e2;
    border: 1px solid #2a2a2a;
    padding: 6px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.45;
}

.dev-tools-svg-section .dev-tools-textarea:focus,
.dev-tools-svg-textarea:focus {
    outline: none;
    border-color: #4a4a4a;
}

.dev-tools-svg-summary {
    margin-top: 6px;
    color: #b8b8b8;
    font-size: 11px;
    line-height: 1.45;
}

.dev-tools-svg-list {
    margin-top: 6px;
}

/* -----------------------------------------
Decoration editor
----------------------------------------- */
.dev-tools-decoration-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:5px;
}

.dev-tools-decoration-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}

.dev-tools-decoration-continent-row {
display:grid;
grid-template-columns:minmax(0, 1fr) 108px;
gap:5px;
align-items:stretch;
}

.dev-tools-decoration-continent-readout {
min-width:0;
height:25px;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-decoration-scope-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-decoration-scope-grid label {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
letter-spacing:.35px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-scope-grid .dev-tools-input {
height:22px;
padding:0 5px;
font-size:10px;
}

/* -----------------------------------------
Decoration layer editor v2
----------------------------------------- */
.dev-tools-decoration-section.is-editing {
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
inset 0 -1px 0 rgba(0,0,0,0.76),
0 0 0 1px rgba(255,255,255,0.020);
}

.dev-tools-decoration-headline {
display:grid;
grid-template-columns:82px minmax(0, 1fr);
gap:5px;
}

.dev-tools-decoration-mode,
.dev-tools-decoration-page {
height:22px;
min-width:0;
display:flex;
align-items:center;
padding:0 6px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.35px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-section.is-editing .dev-tools-decoration-mode {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-decoration-mainbar {
display:grid;
grid-template-columns:1.1fr .9fr .9fr;
gap:5px;
}

.dev-tools-decoration-layerbar {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
}

.dev-tools-button.is-active,
#dev-tools-decoration-grid-toggle[data-grid="1"] {
background:linear-gradient(to bottom,#242424 0%,#1d1d1d 56%,#141414 100%);
border-color:#555555 #333333 #101010 #333333;
color:#ffffff;
}

.dev-tools-decoration-layer-list {
min-height:58px;
max-height:132px;
overflow:auto;
display:flex;
flex-direction:column;
gap:3px;
padding:4px;
background:#070707;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
}

.dev-tools-decoration-layer {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px;
width:100%;
min-height:25px;
padding:0 7px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:left;
cursor:pointer;
text-shadow:1px 1px 0 #000;
}

.dev-tools-decoration-layer:hover {
background:#171717;
border-color:#333333;
color:#ffffff;
}

.dev-tools-decoration-layer.is-selected {
background:#1d1d1d;
border-color:#555555 #333333 #050505 #333333;
color:#ffffff;
}

.dev-tools-decoration-layer-name,
.dev-tools-decoration-layer-meta {
display:flex;
align-items:center;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dev-tools-decoration-layer-meta {
justify-content:flex-end;
color:#8a8a8a;
font-size:9px;
font-weight:700;
}

.dev-tools-decoration-empty {
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
color:#626262;
font-size:10px;
font-weight:700;
text-align:center;
}

.dev-tools-decoration-quickbar {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}

.dev-tools-decoration-work-preview {
touch-action:none;
outline:1px dashed rgba(216,216,216,.55) !important;
outline-offset:0;
box-shadow:0 0 0 1px #050505, 0 0 14px rgba(255,255,255,.10) !important;
filter:drop-shadow(0 2px 0 rgba(0,0,0,.65));
}

.dev-tools-decoration-work-preview.is-selected {
outline:1px dashed #ffffff !important;
box-shadow:0 0 0 1px #050505, 0 0 22px rgba(255,255,255,.26) !important;
}

.dev-tools-decoration-work-preview.is-dragging {
outline-style:solid !important;
}

.dev-tools-decoration-grid-overlay {
position:absolute;
inset:0;
z-index:2147483000;
pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.32) calc(50% - 1px), rgba(255,255,255,.32) calc(50% + 1px), transparent calc(50% + 1px));
background-size:16px 16px, 16px 16px, 100% 100%, 100% 100%;
background-position:0 0, 0 0, 0 0, 0 0;
opacity:.72;
mix-blend-mode:screen;
}

body.clbi-decoration-edit-mode::before {
content:"DECORATION EDIT MODE";
position:fixed;
left:50%;
top:8px;
z-index:99997;
transform:translateX(-50%);
height:22px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
background:#101010;
border:1px solid #050505;
box-shadow:
inset 0 1px 0 #555555,
inset 0 -1px 0 #101010,
0 5px 16px rgba(0,0,0,.54);
color:#e2e2e2;
font-size:10px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
text-shadow:1px 1px 0 #000;
pointer-events:none;
}