215 lines
6.1 KiB
CSS
215 lines
6.1 KiB
CSS
/* ===============================
|
||
DOS — Green Phosphor Terminal
|
||
=============================== */
|
||
/* Monospace stack leans into old-school vibe */
|
||
@font-face {
|
||
font-family: "DOSFallback";
|
||
src: local("VT323"), local("Share Tech Mono");
|
||
/* falls back to system monospace if not present */
|
||
}
|
||
|
||
html[data-theme="dos"] body{
|
||
background:#000; /* CRT black */
|
||
color:#35ff6b; /* terminal green */
|
||
min-height:100vh;
|
||
font-family: "VT323","Share Tech Mono",DOSFallback,ui-monospace,Menlo,Consolas,monospace;
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
/* Subtle scanline feel (optional; comment out if you prefer flat) */
|
||
html[data-theme="dos"] body::before{
|
||
content:"";
|
||
position:fixed; inset:0; pointer-events:none;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(53,255,107,.03) 0px,
|
||
rgba(53,255,107,.03) 1px,
|
||
transparent 2px,
|
||
transparent 3px
|
||
);
|
||
}
|
||
|
||
/* Selection = bright green block */
|
||
html[data-theme="dos"] ::selection{
|
||
background:#35ff6b;
|
||
color:#000;
|
||
}
|
||
|
||
/* ---------- Top bar (status strip) ---------- */
|
||
html[data-theme="dos"] .topbar-wrap{
|
||
background:#000;
|
||
border-bottom:1px solid #0f3; /* #00ff33-ish */
|
||
box-shadow:none;
|
||
}
|
||
html[data-theme="dos"] .topbar-wrap.is-scrolled{
|
||
box-shadow: none;
|
||
border-bottom-color:#3f6; /* a bit brighter on scroll */
|
||
}
|
||
html[data-theme="dos"] .brand-title,
|
||
html[data-theme="dos"] .version-link{
|
||
color:#35ff6b;
|
||
}
|
||
html[data-theme="dos"] .version-link:hover{ text-decoration: underline; }
|
||
|
||
/* ---------- Cards / Panels (1px “frame”) ---------- */
|
||
html[data-theme="dos"] .card,
|
||
html[data-theme="dos"] .result-card,
|
||
html[data-theme="dos"] .search-form,
|
||
html[data-theme="dos"] .form-card,
|
||
html[data-theme="dos"] .user-menu,
|
||
html[data-theme="dos"] .mobile-menu-inner{
|
||
background:#000;
|
||
color:#35ff6b;
|
||
border:1px solid #0f3;
|
||
border-radius:0;
|
||
box-shadow:none;
|
||
}
|
||
|
||
/* Headers & muted text */
|
||
html[data-theme="dos"] .page-title,
|
||
html[data-theme="dos"] .subject-title{
|
||
color:#5aff8a;
|
||
}
|
||
html[data-theme="dos"] .section-label,
|
||
html[data-theme="dos"] .meta-label,
|
||
html[data-theme="dos"] .page-subtitle,
|
||
html[data-theme="dos"] .muted{
|
||
color:#2dd160; /* dimmer green */
|
||
}
|
||
|
||
/* Dividers */
|
||
html[data-theme="dos"] .meta-grid{
|
||
border-top:1px solid #0f3;
|
||
}
|
||
|
||
/* ---------- Inputs ---------- */
|
||
html[data-theme="dos"] .search-input,
|
||
html[data-theme="dos"] .form-control,
|
||
html[data-theme="dos"] .login-input,
|
||
html[data-theme="dos"] .tool-input,
|
||
html[data-theme="dos"] textarea{
|
||
background:#000;
|
||
color:#35ff6b;
|
||
border:1px solid #0f3;
|
||
border-radius:0;
|
||
caret-color:#35ff6b;
|
||
box-shadow:none;
|
||
}
|
||
html[data-theme="dos"] .search-input::placeholder,
|
||
html[data-theme="dos"] .form-control::placeholder,
|
||
html[data-theme="dos"] .tool-input::placeholder{ color:#1ea64a; }
|
||
|
||
html[data-theme="dos"] .search-input:focus,
|
||
html[data-theme="dos"] .form-control:focus,
|
||
html[data-theme="dos"] .login-input:focus,
|
||
html[data-theme="dos"] .tool-input:focus{
|
||
outline:none;
|
||
border-color:#3f6;
|
||
box-shadow:0 0 0 2px rgba(53,255,107,.18);
|
||
}
|
||
|
||
/* Check pills & chips -> flat terminal labels */
|
||
html[data-theme="dos"] .check-pill,
|
||
html[data-theme="dos"] .chip,
|
||
html[data-theme="dos"] .chip-link,
|
||
html[data-theme="dos"] .chip-muted{
|
||
background:#000;
|
||
color:#35ff6b;
|
||
border:1px solid #0f3;
|
||
border-radius:0;
|
||
}
|
||
html[data-theme="dos"] .check-pill:hover{ background:#001a00; }
|
||
|
||
/* ---------- Buttons (solid outline; invert on hover) ---------- */
|
||
html[data-theme="dos"] .btn{
|
||
background:#000;
|
||
color:#35ff6b;
|
||
border:1px solid #0f3;
|
||
border-radius:0;
|
||
padding:8px 12px;
|
||
text-transform:uppercase;
|
||
letter-spacing:.6px;
|
||
}
|
||
html[data-theme="dos"] .btn:hover{
|
||
background:#35ff6b;
|
||
color:#000;
|
||
}
|
||
html[data-theme="dos"] .btn-primary{
|
||
border-color:#3f6;
|
||
color:#5aff8a;
|
||
}
|
||
html[data-theme="dos"] .btn-primary:hover{
|
||
background:#5aff8a; color:#000; border-color:#5aff8a;
|
||
}
|
||
html[data-theme="dos"] .btn-danger{
|
||
border-color:#ff4d4d; color:#ff6666;
|
||
}
|
||
html[data-theme="dos"] .btn-danger:hover{
|
||
background:#ff6666; color:#000;
|
||
}
|
||
|
||
/* Header nav buttons */
|
||
html[data-theme="dos"] .nav-btn{
|
||
background:#000; color:#35ff6b; border:1px solid #0f3; border-radius:0;
|
||
}
|
||
html[data-theme="dos"] .nav-btn.primary{
|
||
border-color:#3f6; color:#5aff8a;
|
||
}
|
||
html[data-theme="dos"] .nav-btn:hover{ background:#001a00; }
|
||
|
||
/* ---------- Menus ---------- */
|
||
html[data-theme="dos"] .user-menu .menu-item,
|
||
html[data-theme="dos"] .mobile-link{
|
||
color:#35ff6b;
|
||
background:transparent;
|
||
border-radius:0;
|
||
}
|
||
html[data-theme="dos"] .user-menu .menu-item:hover,
|
||
html[data-theme="dos"] .mobile-link:hover{
|
||
background:#001a00;
|
||
}
|
||
|
||
/* ---------- Messages ---------- */
|
||
html[data-theme="dos"] .msg{
|
||
background:#000;
|
||
color:#35ff6b;
|
||
border:1px solid #0f3;
|
||
border-radius:0;
|
||
}
|
||
html[data-theme="dos"] .msg.info{ border-color:#3f6; }
|
||
html[data-theme="dos"] .msg.success{ border-color:#35ff6b; }
|
||
html[data-theme="dos"] .msg.warning{ border-color:#ccf233; color:#ccf233; }
|
||
html[data-theme="dos"] .msg.error{ border-color:#ff5c5c; color:#ff5c5c; }
|
||
|
||
/* ---------- Links ---------- */
|
||
html[data-theme="dos"] a{ color:#5aff8a; }
|
||
html[data-theme="dos"] a:hover{ color:#9dffbd; text-decoration: underline; }
|
||
|
||
/* ---------- Result count & small meta ---------- */
|
||
html[data-theme="dos"] .rt-count,
|
||
html[data-theme="dos"] .meta-value.small{ color:#2dd160; }
|
||
|
||
/* ---------- Command Center bits ---------- */
|
||
html[data-theme="dos"] .settings-console .cc-panel{ border-color:#0f3; }
|
||
html[data-theme="dos"] .settings-console .cc-kicker,
|
||
html[data-theme="dos"] .settings-console .cc-panel-title,
|
||
html[data-theme="dos"] .settings-console .cc-title{
|
||
color:#5aff8a;
|
||
}
|
||
html[data-theme="dos"] .settings-console .sec-tile{
|
||
background:#000; color:#35ff6b; border:1px solid #0f3; border-radius:0;
|
||
}
|
||
html[data-theme="dos"] .settings-console .sec-tile:hover{
|
||
background:#001a00;
|
||
}
|
||
html[data-theme="dos"] .settings-console .sec-icon{
|
||
background:#000; color:#5aff8a; border:1px solid #0f3;
|
||
}
|
||
|
||
/* ---------- Tables (gridlines) ---------- */
|
||
html[data-theme="dos"] table{ border-collapse:collapse; }
|
||
html[data-theme="dos"] th, html[data-theme="dos"] td{
|
||
border:1px solid #0f3; color:#35ff6b; background:#000;
|
||
}
|
||
|
||
/* Keep Classic’s gradient opt-in separate; DOS doesn’t use .themed-bg */ |