2 lines
45 KiB
CSS
2 lines
45 KiB
CSS
|
:root{--navy: #1b1f40;--teal: #008ca8;--red: #ec2f23;--gold: #d4920a;--bg: #edf1f8;--surface: #ffffff;--border: #d8dce8;--text: #1b1f40;--muted: #687798;--ok: #0d8a64}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{background:radial-gradient(circle at 10% 0%,#f7f8fc 0,#edf1f8 40%,#e8edf7);color:var(--text);font-family:Cairo,sans-serif}.mode-fade-enter-active,.mode-fade-leave-active{transition:opacity .24s ease,transform .24s ease}.mode-fade-enter-from,.mode-fade-leave-to{opacity:0;transform:translateY(8px)}.app-shell{min-height:100vh}.app-shell.mode-live{background:#0d1931}.app-shell.mode-live .masthead{background:#0d1931;border-bottom:1px solid rgba(0,140,168,.45);box-shadow:none}.app-shell.mode-live .masthead:after{height:3px;background:#ed2e23}.app-shell.mode-live .masthead-title,.app-shell.mode-live .masthead-subtitle{color:#fff}.app-shell.mode-live .masthead-main{align-items:center;gap:12px;padding:10px clamp(12px,1.25vw,24px) 12px}.app-shell.mode-live .masthead-brand{gap:4px}.app-shell.mode-live .masthead-logo{width:clamp(220px,20.5vw,390px)}.app-shell.mode-live .masthead-subtitle{margin:0;font-size:clamp(10px,.72vw,13px);line-height:1.2;opacity:.84}.app-shell.mode-live .masthead-controls{min-width:0;gap:6px}.app-shell.mode-live .control-toggle-row{gap:6px}.app-shell.mode-live .control-toggle-btn{border-color:#008ca86b;background:#ffffff14;color:#e9f3ff;box-shadow:none;border-radius:10px;padding:5px 9px;font-size:clamp(11px,.78vw,14px)}.app-shell.mode-live .control-toggle-btn:hover{background:#ffffff24}.app-shell.mode-live .control-toggle-meta{color:#e9f3ffc7;font-size:clamp(10px,.68vw,12px)}.app-shell.mode-live .control-icon-btn{width:34px;height:34px;border-radius:10px;border-color:#008ca86b;background:#ffffff14;color:#e9f3ff;box-shadow:none}.app-shell.mode-live .control-icon-btn:hover{background:#ffffff24}.app-shell.mode-live .control-icon-btn svg{width:16px;height:16px}.app-shell.mode-live .controls-popover{min-width:240px;padding:8px;border-color:#008ca859}.app-shell.mode-live .control-label{font-size:10px}.app-shell.mode-live .language-switcher{border-radius:10px}.app-shell.mode-live .lang-btn{padding:6px 10px;font-size:clamp(12px,.82vw,14px)}.app-shell.mode-live .status-row{gap:8px}.app-shell.mode-live .live-badge,.app-shell.mode-live .server-time{font-size:clamp(10px,.72vw,12px)}.app-shell.mode-live .page-content{padding:10px clamp(10px,1.1vw,24px) 12px}.hidden-file-input{display:none}.masthead{position:relative;background:linear-gradient(120deg,#1b1f400d,#008ca80a),var(--surface);border-bottom:1px solid var(--border);box-shadow:0 12px 24px #1b1f4014}.masthead:after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--navy) 0 33%,var(--teal) 33% 66%,var(--red) 66% 100%)}.masthead-main{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:24px 28px 26px}.masthead-brand{display:grid;gap:8px}.masthead-logo{display:block;width:min(420px,68vw);height:auto;object-fit:contain}.masthead-title{margin:0;font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:.6px}.masthead-subtitle{margin:8px 0 0;color:var(--muted);font-size:15px;font-weight:700}.masthead-controls{display:grid;gap:10px;justify-items:end;min-width:360px}.controls-grid{display:grid;gap:8px}.controls-popup-anchor{position:relative;width:fit-content}.control-toggle-row{display:flex;justify-content:flex-end;align-items:center;gap:8px}.control-toggle-btn{border:1px solid #cfd6e7;background:linear-gradient(180deg,#f8fbff,#eef4ff);border-radius:12px;padding:6px 10px;display:inline-flex;align-items:center;gap:10px;color:#445478;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #1b1f4014}.control-toggle-btn:hover{background:linear-gradient(180deg,#f0f6ff,#e6f0ff)}.control-icon-btn{width:38px;height:38px;border:1px solid #cfd6e7;background:linear-gradient(180deg,#f8fbff,#eef4ff);border-radius:12px;color:#445478;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #1b1f4014}.control-icon-btn:ho
|