52 lines
4.7 KiB
CSS
52 lines
4.7 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--blue: #2376ff;
|
|
--purple: #943cff;
|
|
--panel: #141925;
|
|
--panel-2: #0d111a;
|
|
--line: rgba(255,255,255,.12);
|
|
--muted: #a9b2c4;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090c13; color: #f5f7ff; }
|
|
body { background: radial-gradient(circle at 18% 8%, rgba(35,118,255,.17), transparent 32%), radial-gradient(circle at 82% 12%, rgba(148,60,255,.16), transparent 30%), #090c13; }
|
|
.presenter-shell { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 18px 22px 20px; }
|
|
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; }
|
|
.brand { display: inline-block; background: linear-gradient(90deg,var(--blue),var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; letter-spacing: .12em; font-size: 15px; }
|
|
h1 { margin: 4px 0 0; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(20px,2vw,31px); line-height: 1.1; }
|
|
.top-meta { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; }
|
|
#current-time { min-width: 92px; color: #fff; font-size: clamp(24px,2.4vw,38px); font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
|
|
.preview-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr); gap: 18px; }
|
|
.preview-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 20px 55px rgba(0,0,0,.28); }
|
|
.current-card { border-color: rgba(35,118,255,.48); box-shadow: 0 0 0 1px rgba(35,118,255,.12), 0 20px 55px rgba(0,0,0,.28); }
|
|
.next-card { border-color: rgba(148,60,255,.42); }
|
|
.preview-label { position: absolute; top: 10px; left: 12px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: rgba(5,8,14,.78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
|
|
.preview-card iframe { width: 100%; height: 100%; border: 0; background: white; pointer-events: none; }
|
|
.control-deck { display: grid; grid-template-columns: minmax(160px,.65fr) minmax(390px,1.15fr) minmax(430px,1.25fr) minmax(300px,.85fr); align-items: center; gap: 18px; min-height: 92px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(20,25,37,.92); box-shadow: 0 18px 45px rgba(0,0,0,.26); backdrop-filter: blur(14px); }
|
|
.deck-left { display: flex; align-items: center; gap: 22px; }
|
|
.slide-counter { font-size: clamp(17px,1.4vw,23px); font-weight: 800; white-space: nowrap; }
|
|
.time-block { display: grid; gap: 2px; }
|
|
.time-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
|
|
#elapsed-time { font-size: 25px; font-weight: 750; font-variant-numeric: tabular-nums; }
|
|
.transport, .utility-controls { display: flex; align-items: center; justify-content: center; gap: 9px; }
|
|
.utility-controls { justify-content: flex-end; }
|
|
button { min-height: 44px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; padding: 10px 14px; background: #202738; color: #f7f9ff; cursor: pointer; font: inherit; font-weight: 700; white-space: nowrap; }
|
|
button:hover:not(:disabled) { transform: translateY(-1px); background: #293247; }
|
|
button:disabled { cursor: default; opacity: .35; }
|
|
button.primary { border-color: transparent; background: linear-gradient(90deg,var(--blue),var(--purple)); }
|
|
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
|
|
button.danger { border-color: rgba(255,87,106,.45); color: #ffadb7; background: rgba(130,25,45,.25); }
|
|
@media (max-width: 1150px) {
|
|
.control-deck { grid-template-columns: 1fr 1.5fr; }
|
|
.utility-controls { grid-column: 1 / -1; justify-content: center; }
|
|
}
|
|
|
|
.view-controls { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
|
|
.control-group { display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.035); }
|
|
.control-label { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin-right:2px; }
|
|
.control-group button { min-width:38px; padding:8px 10px; }
|
|
#zoom-value { min-width:52px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
|
|
.view-status { width:100%; color:var(--muted); text-align:center; font-size:12px; }
|
|
@media (max-width: 1500px) { .control-deck { grid-template-columns: 1fr 1.4fr 1.5fr; } .utility-controls { grid-column:1/-1; justify-content:center; } }
|