418 lines
10 KiB
CSS
418 lines
10 KiB
CSS
:root {
|
|
--bg:#08080f; --hud-bg:rgba(10,10,18,.72);
|
|
--frame:#00e7ff; --grid-major:#1e2a35; --grid-minor:rgba(30,42,53,.55);
|
|
--label:#8fd3d4; --line:#36bdf8; --warn:#ff3b3b; --ok:#34d399; --mid:#ffe066;
|
|
}
|
|
html,body{margin:0;height:100%;background:var(--bg);color:#ddd;font:16px ui-monospace,monospace}
|
|
#cv{display:block;width:100vw;height:100vh;pointer-events:auto;position:fixed;top:0;left:0;z-index:2;touch-action:none}
|
|
canvas.spectrogram-layer,
|
|
canvas.waveform-layer{
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:0;
|
|
height:0;
|
|
pointer-events:none;
|
|
z-index:1;
|
|
}
|
|
.hud{
|
|
position:fixed;top:10px;left:10px;z-index:9999;display:flex;gap:10px;align-items:center;pointer-events:auto;
|
|
background:var(--hud-bg);border:1px solid #2b2f3a;border-radius:10px;padding:8px 10px;backdrop-filter:blur(6px)
|
|
}
|
|
.screensaver-active .hud,
|
|
.screensaver-active #optionsPanelNew {
|
|
display:none !important;
|
|
}
|
|
.screensaver-active #recorderHud,
|
|
.screensaver-active .rec-processing,
|
|
.screensaver-active .rec-warning,
|
|
.screensaver-active .calibration-modal,
|
|
.screensaver-active .split-popup {
|
|
display:none !important;
|
|
}
|
|
.hud select{accent-color:var(--frame);background:#0b0b12;color:#ddd;border:1px solid #333;border-radius:8px;padding:6px 10px;font:14px ui-monospace,monospace}
|
|
.hud label{display:flex;gap:6px;align-items:center}
|
|
.err{position:fixed;left:12px;top:12px;max-width:70vw;color:#fff;background:#7a1b1b;border:1px solid #3b0d0d;border-radius:8px;padding:8px 10px;display:none;z-index:99999;white-space:pre-wrap}
|
|
|
|
/* Options-Panel (responsive) */
|
|
.options { position:fixed; inset:80px 12px 20px 12px; z-index:9000; display:none; background:rgba(10,10,18,.85); border:1px solid #2b2f3a; border-radius:14px; padding:20px; padding-bottom:calc(20px + var(--options-kb-inset, 0px) + var(--options-extra-scroll, 42vh)); overflow:auto; backdrop-filter: blur(8px); }
|
|
.options h2{margin:0 0 12px 0; color:#cfefff; font:600 18px ui-monospace,monospace}
|
|
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px}
|
|
.opt{ display:flex; align-items:center; gap:10px; background:#0c1017; border:1px solid #202633; border-radius:10px; padding:10px; flex-wrap:wrap; }
|
|
.opt label{min-width:150px; color:#9fc9ff}
|
|
.opt input[type="range"], .opt select, .opt input[type="number"], .opt input[type="color"]{ accent-color:var(--frame); background:#0b0b12; color:#ddd; border:1px solid #333; border-radius:8px; padding:6px 10px; font:16px ui-monospace,monospace }
|
|
.opt input[type="color"]{
|
|
padding:2px;
|
|
width:56px;
|
|
height:34px;
|
|
background:transparent;
|
|
border:1px solid #333;
|
|
border-radius:8px;
|
|
appearance:auto;
|
|
-webkit-appearance:auto;
|
|
}
|
|
.opt input[type="color"]::-webkit-color-swatch-wrapper{
|
|
padding:0;
|
|
}
|
|
.opt input[type="color"]::-webkit-color-swatch{
|
|
border:none;
|
|
border-radius:6px;
|
|
}
|
|
.opt input[type="color"]::-moz-color-swatch{
|
|
border:none;
|
|
border-radius:6px;
|
|
}
|
|
#optionsPanelNew .offset-block{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
flex: 1 1 440px;
|
|
}
|
|
#optionsPanelNew .offset-row{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
width:100%;
|
|
}
|
|
#optionsPanelNew .offset-row .ch{
|
|
min-width:12px;
|
|
color:#cfefff;
|
|
}
|
|
#optionsPanelNew .offset-row input[type="range"]{
|
|
flex: 1 1 340px;
|
|
min-width: 340px;
|
|
}
|
|
#optionsPanelNew .offset-row .offset-val{
|
|
min-width:80px;
|
|
text-align:right;
|
|
color:#cfefff;
|
|
}
|
|
#optionsPanelNew .offset-notes{
|
|
flex: 1 0 100%;
|
|
margin-left:160px;
|
|
max-width: 440px;
|
|
}
|
|
#optionsPanelNew .offset-notes small{
|
|
display:block;
|
|
}
|
|
@media (max-width: 520px){
|
|
#optionsPanelNew .offset-row input[type="range"]{ min-width: 240px; }
|
|
#optionsPanelNew .offset-notes{ margin-left:0; }
|
|
}
|
|
.opt select:disabled,
|
|
.opt input[type="range"]:disabled,
|
|
.opt input[type="number"]:disabled,
|
|
.opt input[type="color"]:disabled,
|
|
.opt button:disabled{
|
|
opacity:0.55;
|
|
cursor:not-allowed;
|
|
filter:grayscale(0.35);
|
|
}
|
|
.opt small{opacity:.75}
|
|
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
|
|
.btn { background:#0b0f1a; color:#dff6ff; border:1px solid #284a5a; border-radius:10px; padding:8px 12px; cursor:pointer }
|
|
.btn:hover{background:#0e1422}
|
|
.btn-lg{font-size:22px; padding:18px 28px; border-radius:14px;}
|
|
.btn-danger-border{border-color:#d33;}
|
|
.btn-active{background:#12301f; border-color:#34d399; color:#eafff1; box-shadow:0 0 0 1px rgba(52,211,153,.3) inset;}
|
|
.rec-auto-armed{
|
|
border-color:#ff9f1a;
|
|
color:#fff4d9;
|
|
animation: recAutoArmedBlink 0.8s ease-in-out infinite alternate;
|
|
}
|
|
.rec-auto-recording{
|
|
border-color:#d33;
|
|
background:#3a0d0d;
|
|
color:#ffeaea;
|
|
box-shadow:0 0 0 1px rgba(211,51,51,.28) inset;
|
|
animation:none;
|
|
}
|
|
.btn:disabled{
|
|
opacity:0.45;
|
|
cursor:not-allowed;
|
|
filter:grayscale(0.35);
|
|
}
|
|
|
|
.split-popup{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:9500;
|
|
display:none;
|
|
align-items:center;
|
|
justify-content:center;
|
|
background:rgba(8,8,15,0.55);
|
|
backdrop-filter:blur(3px);
|
|
pointer-events:auto;
|
|
}
|
|
.split-popup__box{
|
|
width:min(520px, calc(100vw - 24px));
|
|
padding:14px 14px 10px;
|
|
background:rgba(12,14,22,0.95);
|
|
border:1px solid #284a5a;
|
|
border-radius:14px;
|
|
color:#e8f5ff;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
|
font-family:ui-monospace,monospace;
|
|
}
|
|
.split-popup__head{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:10px;
|
|
margin-bottom:10px;
|
|
}
|
|
.split-popup__row{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
padding:6px 0;
|
|
}
|
|
|
|
#recorderHud{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:9100;
|
|
display:none;
|
|
background:transparent;
|
|
pointer-events:none;
|
|
}
|
|
.rec-floating{
|
|
position:fixed;
|
|
pointer-events:auto;
|
|
}
|
|
#recorderHud a{color:#9cf;}
|
|
.rec-list{
|
|
background:rgba(10,12,18,0.8);
|
|
border:1px solid #284a5a;
|
|
border-radius:12px;
|
|
padding:10px;
|
|
min-width:220px;
|
|
max-width:none;
|
|
overflow-y:auto;
|
|
color:#cfefff;
|
|
font:14px ui-monospace,monospace;
|
|
box-shadow:0 4px 18px rgba(0,0,0,0.25);
|
|
}
|
|
.rec-list h4{
|
|
margin:0 0 6px 0;
|
|
font:14px ui-monospace,monospace;
|
|
color:#9fdba0;
|
|
}
|
|
.rec-list .rec-item{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:6px 0;
|
|
border-bottom:1px solid rgba(255,255,255,0.05);
|
|
}
|
|
.rec-list .rec-item:last-child{border-bottom:none;}
|
|
.rec-list .rec-name{flex:1; word-break:break-word;}
|
|
.rec-list .btn-compact{
|
|
padding:6px 10px;
|
|
font:13px ui-monospace,monospace;
|
|
border-radius:8px;
|
|
}
|
|
.rec-list--external{
|
|
padding:8px;
|
|
font:13px ui-monospace,monospace;
|
|
}
|
|
.rec-list--external h4{
|
|
margin:0 0 4px 0;
|
|
font:13px ui-monospace,monospace;
|
|
}
|
|
.rec-list--external .rec-item{
|
|
gap:8px;
|
|
padding:4px 0;
|
|
}
|
|
.rec-list--external .btn-compact{
|
|
padding:5px 8px;
|
|
font:12px ui-monospace,monospace;
|
|
}
|
|
.rec-timer{
|
|
display:block;
|
|
color:#cfefff;
|
|
font:600 37px ui-monospace,monospace;
|
|
text-align:center;
|
|
}
|
|
.rec-timer .hund{
|
|
font-size:18.5px;
|
|
opacity:0.8;
|
|
vertical-align:baseline;
|
|
}
|
|
|
|
.rec-label {
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:10px;
|
|
padding:18px 28px;
|
|
border-radius:14px;
|
|
background:#0f2c0f;
|
|
color:#dff6dd;
|
|
font:22px ui-monospace,monospace;
|
|
min-width:220px;
|
|
}
|
|
.rec-label.active {
|
|
background:#0f2c0f;
|
|
}
|
|
.rec-label.blink {
|
|
animation: recBlink 0.8s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes recBlink {
|
|
from { background: #2d0a0a; }
|
|
to { background: #5c0f0f; }
|
|
}
|
|
@keyframes recAutoArmedBlink {
|
|
from { background:#3a2204; }
|
|
to { background:#7a4708; }
|
|
}
|
|
.rec-processing{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:9200;
|
|
display:none;
|
|
align-items:center;
|
|
justify-content:center;
|
|
background:rgba(8,8,15,0.55);
|
|
backdrop-filter:blur(3px);
|
|
pointer-events:none;
|
|
}
|
|
.rec-processing-box{
|
|
min-width:280px;
|
|
padding:18px 26px;
|
|
background:rgba(12,14,22,0.9);
|
|
border:1px solid #284a5a;
|
|
border-radius:14px;
|
|
text-align:center;
|
|
color:#e8f5ff;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
|
}
|
|
.rec-processing-text{
|
|
font:600 18px ui-monospace,monospace;
|
|
margin:10px 0 4px;
|
|
letter-spacing:0.3px;
|
|
}
|
|
.rec-processing-sub{
|
|
font:14px ui-monospace,monospace;
|
|
color:#9cb7d1;
|
|
}
|
|
.rec-spinner{
|
|
width:54px;
|
|
height:54px;
|
|
border-radius:50%;
|
|
margin:0 auto;
|
|
border:4px solid rgba(0,231,255,0.25);
|
|
border-top-color:#00e7ff;
|
|
animation: recSpin 1s linear infinite;
|
|
}
|
|
@keyframes recSpin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.rec-warning{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:9300;
|
|
display:none;
|
|
align-items:center;
|
|
justify-content:center;
|
|
background:rgba(8,8,15,0.65);
|
|
backdrop-filter:blur(4px);
|
|
pointer-events:auto;
|
|
}
|
|
.rec-warning-box{
|
|
max-width:460px;
|
|
padding:18px 22px;
|
|
background:rgba(12,14,22,0.95);
|
|
border:1px solid #284a5a;
|
|
border-radius:14px;
|
|
color:#e8f5ff;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
|
}
|
|
.rec-warning-box h3{
|
|
margin:0 0 8px;
|
|
font:600 18px ui-monospace,monospace;
|
|
color:#9fdba0;
|
|
}
|
|
.rec-warning-box p{
|
|
margin:0 0 10px;
|
|
font:14px ui-monospace,monospace;
|
|
color:#cfefff;
|
|
line-height:1.5;
|
|
}
|
|
.rec-warning-ack{
|
|
align-items:center;
|
|
gap:10px;
|
|
margin:10px 0 14px;
|
|
color:#cfefff;
|
|
}
|
|
.rec-warning-box .btn{
|
|
width:100%;
|
|
justify-content:center;
|
|
}
|
|
|
|
.calibration-modal{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:9400;
|
|
display:none;
|
|
align-items:flex-start;
|
|
justify-content:center;
|
|
padding:70px 18px 24px;
|
|
background:rgba(8,8,15,0.7);
|
|
backdrop-filter:blur(4px);
|
|
pointer-events:auto;
|
|
}
|
|
.calibration-box{
|
|
width:100%;
|
|
max-width:700px;
|
|
max-height:78vh;
|
|
overflow-y:auto;
|
|
padding:18px 22px;
|
|
background:rgba(12,14,22,0.95);
|
|
border:1px solid #2f4d5d;
|
|
border-radius:16px;
|
|
color:#e8f5ff;
|
|
box-shadow:0 10px 34px rgba(0,0,0,0.4);
|
|
font-family:ui-monospace,monospace;
|
|
}
|
|
.calibration-box h3{
|
|
margin:0 0 8px;
|
|
font:600 19px ui-monospace,monospace;
|
|
color:#c7ffe9;
|
|
}
|
|
.calibration-box h4{
|
|
margin:12px 0 6px;
|
|
font:600 16px ui-monospace,monospace;
|
|
color:#9fdba0;
|
|
}
|
|
.calibration-box p{
|
|
margin:0 0 8px;
|
|
line-height:1.5;
|
|
font:15px ui-monospace,monospace;
|
|
color:#dcefff;
|
|
}
|
|
.calibration-box .calibration-quote{
|
|
color:#c9e7ff;
|
|
font-style:italic;
|
|
}
|
|
.calibration-divider{
|
|
height:1px;
|
|
margin:10px 0 8px;
|
|
background:linear-gradient(90deg, transparent 0%, #24424f 15%, #3e5c74 50%, #24424f 85%, transparent 100%);
|
|
}
|
|
.calibration-box .btn{
|
|
width:100%;
|
|
justify-content:center;
|
|
margin-top:6px;
|
|
}
|
|
|
|
/* --- Option Sections --- */
|
|
.opt-head { grid-column: 1 / -1; padding-top: 8px; }
|
|
.opt-head h3 { margin: 6px 0 2px; color: #c7ffe9; font: 600 16px ui-monospace, monospace; border-bottom: 1px solid #1e2a35; padding-bottom: 6px; }
|
|
|
|
#optionsPanelNew summary{font-size:17px;padding:8px 4px;}
|
|
#optionsPanelNew .opt{font-size:16px;}
|