미디어위키:DevTools.css

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

#dev-tools-panel {
position:fixed;
right:18px;
bottom:18px;
z-index:99998;
width:306px;
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;
}

#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 {
padding:8px;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
}

#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-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;
}
/* -----------------------------------------
Decoration editor
----------------------------------------- */
.dev-tools-decoration-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-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-preview {
outline:1px dashed #d8d8d8 !important;
outline-offset:0;
box-shadow:0 0 0 1px #050505, 0 0 18px rgba(255,255,255,.12) !important;
filter:drop-shadow(0 2px 0 rgba(0,0,0,.65));
}

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