mirror of
https://github.com/fr33n0w/rmap-rnode-web-flasher
synced 2026-08-12 18:08:52 -04:00
368 lines
22 KiB
CSS
368 lines
22 KiB
CSS
/* rmap.css — premium UI, rmap.world style (navy + blue→green) */
|
|
:root{
|
|
--bg:#0d1b2a;
|
|
--panel:#0e2336;
|
|
--card:rgba(255,255,255,0.035);
|
|
--line:rgba(52,152,219,0.28);
|
|
--line-soft:rgba(255,255,255,0.10);
|
|
--blue:#3498db; --blue2:#2980b9; --cyan:#0099ff;
|
|
--green:#27ae60; --green2:#2ecc71;
|
|
--red:#e74c3c; --amber:#f39c12;
|
|
--txt:#fff; --dim:rgba(255,255,255,0.62); --dim2:rgba(255,255,255,0.4);
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{
|
|
background:
|
|
radial-gradient(1200px 600px at 80% -10%, rgba(41,128,185,0.18), transparent 60%),
|
|
radial-gradient(900px 500px at -10% 110%, rgba(39,174,96,0.14), transparent 60%),
|
|
var(--bg);
|
|
color:var(--txt);
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
min-height:100vh;
|
|
}
|
|
|
|
/* topbar */
|
|
.topbar{
|
|
position:sticky; top:0; z-index:50;
|
|
display:flex; align-items:center; gap:14px;
|
|
padding:0 20px; height:56px;
|
|
background:rgba(13,27,42,0.92); backdrop-filter:blur(8px);
|
|
border-bottom:1px solid var(--line);
|
|
box-shadow:0 2px 16px rgba(0,0,0,0.4);
|
|
}
|
|
.logo{display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; letter-spacing:.5px}
|
|
.logo i{color:var(--blue)}
|
|
.badge{
|
|
background:linear-gradient(90deg,var(--blue2),var(--green));
|
|
font-size:10px; font-weight:800; letter-spacing:.5px;
|
|
padding:3px 9px; border-radius:11px;
|
|
}
|
|
.back{flex:1; color:var(--dim); text-decoration:none; font-size:13px; display:flex; align-items:center; gap:7px}
|
|
.back:hover{color:var(--blue)}
|
|
.serial-status{flex:1; justify-content:flex-end; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim)}
|
|
.dot{width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red)}
|
|
.dot.on{background:var(--green2); box-shadow:0 0 8px var(--green2); animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
|
|
/* hero quick steps */
|
|
.hero{max-width:1100px; margin:22px auto 6px; padding:0 20px}
|
|
.hero h1{font-size:24px; font-weight:800}
|
|
.hero p{color:var(--dim); margin-top:4px; font-size:14px}
|
|
|
|
/* layout — wizard (left) + console (right) */
|
|
main.layout{max-width:1240px; margin:16px auto 20px; padding:0 20px;
|
|
display:flex; justify-content:center; gap:18px; align-items:stretch}
|
|
.wizard{width:600px; flex:none; min-width:0}
|
|
.logside{width:600px; flex:none; position:sticky; top:74px}
|
|
body:not(.console-open) .logside{display:none}
|
|
/* right column: console + tools panels, both can be open (stacked, internal scroll) */
|
|
.rightcol{width:600px; flex:none; position:sticky; top:74px; display:flex; flex-direction:column; gap:16px; align-self:stretch}
|
|
body:not(.console-open):not(.tools-open) .rightcol{display:none}
|
|
.sidepanel{flex:1 1 0; min-height:0; display:flex}
|
|
.sidepanel > .logpanel{flex:1; min-height:0; width:100%}
|
|
body:not(.console-open) #consoleSide{display:none}
|
|
body:not(.tools-open) #toolsSide{display:none}
|
|
.toolsbody{flex:1 1 0; min-height:0; overflow-y:auto; padding-right:4px}
|
|
.topbar-right{display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end}
|
|
.topbar-right .serial-status{flex:0 0 auto}
|
|
.iconbtn{display:flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 12px; border-radius:8px;
|
|
background:rgba(255,255,255,0.06); border:1px solid var(--line-soft); color:var(--dim); text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap; transition:.15s}
|
|
.iconbtn:hover{color:#fff; border-color:var(--line)}
|
|
.console-toggle{background:rgba(255,255,255,0.06); border:1px solid var(--line-soft); color:var(--dim);
|
|
padding:0 13px; height:34px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px; transition:.15s}
|
|
.console-toggle:hover{color:#fff; border-color:var(--line)}
|
|
body.console-open .console-toggle{background:rgba(52,152,219,0.22); border-color:var(--blue); color:#fff}
|
|
.logpanel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 8px 30px rgba(0,0,0,0.4); display:flex; flex-direction:column; height:100%}
|
|
.logtitle{font-size:12px; color:var(--dim); font-weight:700; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between}
|
|
.logtitle i{color:var(--blue)}
|
|
.logbtns{display:flex; gap:6px}
|
|
.logbtn{background:rgba(255,255,255,0.06); border:1px solid var(--line-soft); color:var(--dim); border-radius:6px; padding:4px 9px; font-size:11px; cursor:pointer}
|
|
.logbtn:hover{color:#fff; border-color:var(--blue)}
|
|
.log{background:#08111d; border:1px solid var(--line-soft); border-radius:8px; padding:10px 12px; flex:1 1 0; min-height:200px; overflow:auto; font-size:12px; color:#9fb4c7; font-family:ui-monospace,Menlo,Consolas,monospace}
|
|
.logline{margin-bottom:7px; white-space:pre-wrap; line-height:1.35}
|
|
.logline.next{color:var(--green2); font-weight:600}
|
|
.logline.warn{color:var(--amber); font-weight:600}
|
|
@media(max-width:1300px){ main.layout{flex-direction:column; align-items:center} .wizard,.logside,.rightcol{width:100%; max-width:600px} .logside,.rightcol{position:static} body.console-open .advanced-wrap{max-width:600px} }
|
|
.stepno{display:inline-flex; align-items:center; justify-content:center;
|
|
width:26px; height:26px; border-radius:50%; font-size:14px; font-weight:800;
|
|
background:linear-gradient(90deg,var(--blue2),var(--green)); color:#04130a; margin-right:6px}
|
|
|
|
/* left rail: steps with instructions */
|
|
.rail{display:flex; flex-direction:column; gap:10px; position:sticky; top:74px; align-self:start}
|
|
.step{
|
|
display:flex; gap:12px; padding:14px;
|
|
background:var(--card); border:1px solid var(--line-soft);
|
|
border-radius:12px; cursor:pointer; transition:.18s;
|
|
}
|
|
.step:hover{border-color:var(--line)}
|
|
.step.active{border-color:var(--blue); background:rgba(52,152,219,0.10);
|
|
box-shadow:0 6px 24px rgba(0,0,0,0.35)}
|
|
.step.done .num{background:linear-gradient(90deg,var(--blue2),var(--green)); color:#04130a}
|
|
.step .num{
|
|
flex:none; width:30px; height:30px; border-radius:50%;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-weight:800; background:rgba(255,255,255,0.08); color:var(--dim);
|
|
}
|
|
.step.active .num{background:var(--blue); color:#04121f}
|
|
.step .t{font-weight:700; font-size:15px}
|
|
.step .d{color:var(--dim); font-size:12.5px; margin-top:2px; line-height:1.4}
|
|
|
|
/* right content panels */
|
|
.panel{
|
|
background:var(--panel); border:1px solid var(--line);
|
|
border-radius:14px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,0.4);
|
|
margin-bottom:0; scroll-margin-top:74px; height:620px; overflow-y:auto; box-sizing:border-box;
|
|
display:flex; flex-direction:column;
|
|
}
|
|
.panel.hidden{display:none}
|
|
.panel h2{font-size:17px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:9px}
|
|
.panel h2 i{color:var(--blue)}
|
|
.panel .sub{color:var(--dim); font-size:13px; margin-bottom:16px}
|
|
.sep{height:2px; border-radius:2px; margin:18px 0 14px;
|
|
background:linear-gradient(90deg,rgba(52,152,219,.55),rgba(39,174,96,.55))}
|
|
|
|
/* brand filter chips */
|
|
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
|
|
.chip{
|
|
padding:7px 14px; border-radius:18px; font-size:13px; cursor:pointer;
|
|
background:rgba(255,255,255,0.05); border:1px solid var(--line-soft); color:var(--dim);
|
|
transition:.15s;
|
|
}
|
|
.chip:hover{color:#fff; border-color:var(--line)}
|
|
.chip.active{background:rgba(52,152,219,0.22); border-color:var(--blue); color:#fff}
|
|
|
|
/* model selection — gallery-style cards (appear after device pick) */
|
|
/* dead-simple variant: single centered column, everything visible */
|
|
.simple{max-width:760px; margin:16px auto 16px; padding:0 20px; display:flex; flex-direction:column; gap:16px}
|
|
.block{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,0.4)}
|
|
.block > h2{font-size:16px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px}
|
|
.block > h2 i{color:var(--blue)}
|
|
.block.hidden{display:none}
|
|
.simple .log{flex:none; height:240px; min-height:0}
|
|
.simple .gallery{max-height:300px}
|
|
/* simple: one-screen accordion card */
|
|
#panelOne{height:828px; padding:15px 16px}
|
|
#panelOne .wnav{margin-top:auto}
|
|
.exp{color:var(--amber); font-size:11px; font-weight:600}
|
|
#panelOne .gallery{max-height:320px}
|
|
#accTools .acc-body{max-height:380px; overflow-y:auto}
|
|
/* simple page: wider interface (longer, more readable status bar) */
|
|
body.simplepage main.layout{max-width:1440px}
|
|
body.simplepage .wizard{width:780px}
|
|
/* dropdown version: a bit wider so it's not narrow & tall */
|
|
body.dropdownpage main.layout{max-width:1420px}
|
|
body.dropdownpage .wizard{width:760px}
|
|
|
|
/* Google Translate overlay widget */
|
|
.goog-te-banner-frame{display:none !important}
|
|
body{top:0 !important}
|
|
#google_translate_element .goog-te-gadget{font-size:0; color:transparent; line-height:0}
|
|
#google_translate_element .goog-logo-link, #google_translate_element span{display:none !important}
|
|
.goog-te-combo{background:#0d1b2a !important; color:#e7eef5 !important; border:1px solid var(--line-soft) !important;
|
|
border-radius:8px; padding:0 8px; height:34px; font-size:13px; cursor:pointer; font-family:inherit; max-width:160px; color-scheme:dark}
|
|
.goog-te-combo option{background:#0d1b2a; color:#e7eef5}
|
|
.goog-te-combo:hover{border-color:var(--line) !important}
|
|
|
|
/* about modal: stats + help list */
|
|
.statbox{display:flex; gap:12px; margin-top:16px}
|
|
.statbox .stat{flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--line-soft); border-radius:10px;
|
|
padding:12px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
|
|
.statbox .stat i{color:var(--blue); font-size:16px}
|
|
.statbox .stat span{color:var(--dim2); font-size:11px}
|
|
.statbox .stat b{color:var(--txt); font-size:20px; font-weight:800}
|
|
.modal .help{margin:6px 0 0; padding-left:20px; color:var(--dim); font-size:13px; line-height:1.6}
|
|
.modal .help b{color:var(--txt)}
|
|
.modal code{background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; font-size:12px}
|
|
.cfg-group input[type=range]{width:100%; margin-top:4px; accent-color:var(--blue)}
|
|
.cfg-group input[type=file]{width:100%; font-size:12px; color:var(--dim); margin-top:4px; background:rgba(255,255,255,0.04); border:1px solid var(--line-soft); border-radius:7px; padding:6px}
|
|
.cfg-group input[type=file]::file-selector-button{background:rgba(255,255,255,0.08); color:#fff; border:1px solid var(--line-soft); border-radius:6px; padding:5px 10px; cursor:pointer; margin-right:8px; font-size:12px}
|
|
.cfg-group #briVal{color:var(--blue); font-weight:700}
|
|
|
|
/* info / about modal */
|
|
.modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px}
|
|
.modal.hidden{display:none}
|
|
.modal .backdrop{position:absolute; inset:0; background:rgba(2,8,15,0.72)}
|
|
.modal .box{position:relative; max-width:580px; width:100%; max-height:86vh; overflow-y:auto;
|
|
background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.6)}
|
|
.modal .box h2{font-size:18px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:9px}
|
|
.modal .box h2 i{color:var(--blue)}
|
|
.modal .box h4{font-size:13px; font-weight:700; margin:16px 0 4px}
|
|
.modal .box p{font-size:13.5px; color:var(--dim); line-height:1.55; margin-top:8px}
|
|
.modal .mclose{position:absolute; top:13px; right:13px; background:rgba(255,255,255,0.06); border:1px solid var(--line-soft);
|
|
color:var(--dim); width:32px; height:32px; border-radius:8px; cursor:pointer}
|
|
.modal .mclose:hover{color:#fff; border-color:var(--line)}
|
|
.modal .credits{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
|
|
.modal .credits li{font-size:13px; color:var(--dim); line-height:1.45}
|
|
.modal .credits b{color:var(--txt)}
|
|
.modal a{color:var(--blue); text-decoration:none}
|
|
.modal a:hover{text-decoration:underline}
|
|
/* in-card terminal-style step guide (sits in the empty space above Restart) */
|
|
.guideterm{margin:0; background:#04110a; border:1px solid rgba(39,174,96,0.35); border-radius:10px;
|
|
padding:13px 16px; font-family:ui-monospace,Menlo,Consolas,monospace; color:#39ff8a; font-size:13.5px;
|
|
display:flex; align-items:center; gap:10px; letter-spacing:.3px;
|
|
box-shadow:inset 0 0 18px rgba(39,174,96,0.12); text-shadow:0 0 6px rgba(57,255,138,0.55)}
|
|
.guideterm .gdot{width:9px; height:9px; border-radius:50%; background:#39ff8a; box-shadow:0 0 9px #39ff8a; flex:none; animation:gblink 1.4s infinite}
|
|
.guideterm #guideText{flex:1}
|
|
.guideterm #guideText.ok{color:#8effc0}
|
|
.guideterm #guideText.ok i{margin-right:6px}
|
|
.guideterm #guideText.busy{color:#ffd479}
|
|
.guideterm #guideText.busy i{margin-right:6px}
|
|
@keyframes gblink{0%,55%{opacity:1} 75%,100%{opacity:.18}}
|
|
|
|
/* single-page (quick) variant: one auto-height card */
|
|
.onecard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px;
|
|
box-shadow:0 8px 30px rgba(0,0,0,0.4); display:flex; flex-direction:column; box-sizing:border-box}
|
|
.flash-block{margin-top:2px}
|
|
.flash-block .summary{margin-top:0}
|
|
|
|
/* step 1 accordion (device / model) */
|
|
.accordion{display:flex; flex-direction:column; gap:10px; margin-top:4px}
|
|
.acc-item{border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; background:rgba(255,255,255,0.02)}
|
|
.acc-item.open{border-color:var(--line)}
|
|
.acc-head{width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; background:transparent; border:0; cursor:pointer; color:var(--txt); font-size:14px; font-weight:700; font-family:inherit}
|
|
.acc-head:hover{background:rgba(255,255,255,0.04)}
|
|
.acc-title{display:flex; align-items:center; gap:8px; white-space:nowrap}
|
|
.acc-title i{color:var(--blue)}
|
|
.acc-sel{flex:1; text-align:right; color:var(--green2); font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
|
|
.acc-chev{color:var(--dim); transition:transform .2s; font-size:12px}
|
|
.acc-item.open .acc-chev{transform:rotate(180deg)}
|
|
.acc-body{display:none; padding:0 14px 14px}
|
|
.acc-item.open .acc-body{display:block}
|
|
|
|
.modelchips{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:4px}
|
|
#modelChips{min-height:150px}
|
|
.model-hint{grid-column:1/-1; color:var(--dim2); font-size:13px; padding:48px 8px; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px}
|
|
@media(max-width:600px){.modelchips{grid-template-columns:repeat(3,1fr)}}
|
|
.modelcard{position:relative; background:rgba(255,255,255,0.03); border:1px solid var(--line-soft);
|
|
border-radius:12px; padding:10px; cursor:pointer; transition:.16s; text-align:center; min-height:150px}
|
|
.modelcard:hover{border-color:var(--line); transform:translateY(-2px)}
|
|
.modelcard.sel{border-color:var(--green); background:rgba(39,174,96,0.10); box-shadow:0 6px 20px rgba(0,0,0,0.35)}
|
|
.modelcard .mthumb{height:70px; border-radius:9px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:3px;
|
|
background:linear-gradient(160deg,rgba(52,152,219,0.16),rgba(39,174,96,0.10)); border:1px solid var(--line-soft)}
|
|
.modelcard .mthumb i{font-size:34px; color:var(--blue)}
|
|
.modelcard .mthumb .freq{font-size:26px; font-weight:800; color:#fff; line-height:1}
|
|
.modelcard .mthumb .unit{font-size:10px; color:var(--dim); align-self:flex-end; margin-bottom:6px}
|
|
.modelcard .nm{font-weight:700; font-size:12px; line-height:1.25}
|
|
.modelcard .sub{color:var(--dim2); font-size:10px; margin-top:2px}
|
|
.modelcard.unsupported{opacity:.32}
|
|
.modelcard.sel::after{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:9px; color:#04130a;
|
|
position:absolute; right:7px; top:7px; width:16px; height:16px; border-radius:50%;
|
|
display:flex; align-items:center; justify-content:center;
|
|
background:linear-gradient(90deg,var(--blue2),var(--green)); box-shadow:0 0 8px rgba(39,174,96,.8)}
|
|
|
|
/* device gallery */
|
|
.gallery{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; max-height:225px; overflow-y:auto; padding-right:4px}
|
|
@media(max-width:600px){.gallery{grid-template-columns:repeat(3,1fr)}}
|
|
.dev{
|
|
background:rgba(255,255,255,0.03); border:1px solid var(--line-soft);
|
|
border-radius:12px; padding:10px; cursor:pointer; transition:.16s; text-align:center;
|
|
min-height:150px;
|
|
}
|
|
.dev:hover{border-color:var(--line); transform:translateY(-2px)}
|
|
.dev.sel{border-color:var(--green); background:rgba(39,174,96,0.10);
|
|
box-shadow:0 6px 20px rgba(0,0,0,0.35)}
|
|
.dev .thumb{
|
|
height:70px; border-radius:9px; margin-bottom:8px; position:relative;
|
|
display:flex; align-items:center; justify-content:center;
|
|
background:linear-gradient(160deg,rgba(52,152,219,0.15),rgba(39,174,96,0.10));
|
|
border:1px solid var(--line-soft); overflow:hidden;
|
|
}
|
|
.dev .thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
|
|
background:linear-gradient(180deg,rgba(255,255,255,0.10),transparent 45%)}
|
|
.dev.sel .thumb::before{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
|
|
position:absolute; right:6px; bottom:6px; z-index:2;
|
|
width:18px; height:18px; border-radius:50%; font-size:9px; color:#04130a;
|
|
display:flex; align-items:center; justify-content:center;
|
|
background:linear-gradient(90deg,var(--blue2),var(--green)); box-shadow:0 0 10px rgba(39,174,96,.9)}
|
|
.dev .thumb img{max-width:86%; max-height:86%; object-fit:contain; position:relative; z-index:1;
|
|
filter:drop-shadow(0 3px 8px rgba(0,0,0,0.5))}
|
|
.dev .thumb i{font-size:34px; color:var(--blue); position:relative; z-index:1}
|
|
.dev.sel .thumb{border-color:var(--green)}
|
|
.dev .nm{font-weight:700; font-size:12px; line-height:1.2}
|
|
.dev .pl{color:var(--dim2); font-size:10.5px; margin-top:2px}
|
|
.dev .pl.nrf{color:var(--amber)}
|
|
|
|
/* form controls */
|
|
label{display:block; margin:14px 0 6px; font-size:13px; color:var(--dim)}
|
|
select{
|
|
width:100%; padding:11px 12px; border-radius:9px; font-size:14px;
|
|
background:#0a1726; color:#fff; border:1px solid var(--line-soft); outline:none;
|
|
}
|
|
select:focus{border-color:var(--blue)}
|
|
.status{margin-top:12px; font-size:13px; color:var(--dim)}
|
|
.status.ok{color:var(--green2)} .status.warn{color:var(--amber)} .status.err{color:var(--red)}
|
|
|
|
/* selected summary */
|
|
.summary{display:flex; align-items:center; gap:12px; padding:12px;
|
|
background:rgba(255,255,255,0.04); border:1px solid var(--line-soft); border-radius:10px; margin-bottom:6px}
|
|
.summary .thumb{width:48px; height:48px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
|
|
background:linear-gradient(160deg,rgba(52,152,219,0.18),rgba(39,174,96,0.12)); border:1px solid var(--line-soft); overflow:hidden}
|
|
.summary .thumb img{max-width:86%; max-height:86%; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.5))}
|
|
.summary .thumb i{color:var(--blue); font-size:22px}
|
|
.summary b{font-size:14px} .summary span{color:var(--dim); font-size:12.5px; display:block}
|
|
|
|
/* buttons */
|
|
.btns{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
|
|
button{
|
|
padding:11px 16px; border-radius:9px; font-size:14px; cursor:pointer;
|
|
background:rgba(255,255,255,0.06); color:#fff; border:1px solid var(--line-soft); transition:.15s;
|
|
display:inline-flex; align-items:center; gap:8px;
|
|
}
|
|
button:hover:not(:disabled){background:rgba(52,152,219,0.22); border-color:var(--blue)}
|
|
button:disabled{opacity:.4; cursor:not-allowed}
|
|
button.primary{
|
|
background:linear-gradient(90deg,var(--blue2),var(--green));
|
|
border:none; color:#04130a; font-weight:800; font-size:15px; padding:14px 22px;
|
|
box-shadow:0 8px 24px rgba(39,174,96,0.25);
|
|
}
|
|
button.primary:hover:not(:disabled){filter:brightness(1.08)}
|
|
button.ghost{background:transparent}
|
|
.danger button{border-color:rgba(231,76,60,0.4)}
|
|
.danger button:hover:not(:disabled){background:rgba(231,76,60,0.18); border-color:var(--red)}
|
|
.btn-erase{background:rgba(231,76,60,0.16); border-color:var(--red); color:#ffd5cf; font-weight:600}
|
|
.btn-erase:hover:not(:disabled){background:rgba(231,76,60,0.32); color:#fff}
|
|
details{margin-top:12px} summary{cursor:pointer; color:var(--dim); font-size:13px}
|
|
.wnav{display:flex; gap:10px; justify-content:space-between; align-items:center;
|
|
margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft)}
|
|
.nextbtn{border-color:var(--blue)}
|
|
.nextbtn:hover:not(:disabled){background:rgba(52,152,219,0.22)}
|
|
|
|
/* progress */
|
|
.progress{height:12px; background:#0a1726; border:1px solid var(--line-soft);
|
|
border-radius:7px; overflow:hidden; margin-top:14px}
|
|
.progress.hidden{display:none}
|
|
.bar{height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--green2)); transition:width .12s}
|
|
.flash-status{margin-top:10px; font-size:13.5px; color:var(--dim); min-height:20px; display:flex; align-items:center; gap:8px}
|
|
.flash-status.act{color:var(--blue)}
|
|
.flash-status.ok{color:var(--green2); font-weight:600}
|
|
.flash-status.err{color:var(--red); font-weight:600}
|
|
|
|
/* log */
|
|
.advanced-wrap{max-width:600px; margin:6px auto 14px; padding:0 20px}
|
|
body.console-open .advanced-wrap{max-width:1218px}
|
|
.advanced-wrap details{background:var(--card); border:1px solid var(--line-soft); border-radius:10px; padding:10px 14px}
|
|
.advanced-wrap summary{font-size:13px; color:var(--dim)}
|
|
.adv-hint{color:var(--dim2); font-size:12px; margin:6px 0 8px}
|
|
|
|
/* flash step: stacked full-width actions */
|
|
.flash-actions{display:flex; flex-direction:column; gap:10px; margin:12px 0}
|
|
.flash-actions > button{width:100%; justify-content:center; min-height:48px}
|
|
.flash-actions .row2{display:flex; gap:10px}
|
|
.flash-actions .row2 button{flex:1; justify-content:center}
|
|
|
|
/* after-flash config grid */
|
|
.cfg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:6px}
|
|
.cfg-group{background:rgba(255,255,255,0.03); border:1px solid var(--line-soft); border-radius:10px; padding:12px}
|
|
.cfg-group.wide{grid-column:1/-1}
|
|
.cfg-group h4{font-size:13px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:7px; color:var(--txt)}
|
|
.cfg-group h4 i{color:var(--blue)}
|
|
.cfg-group .btns{margin:0}
|
|
.cfg-group .btns button{flex:1 1 auto; min-width:0; justify-content:center}
|
|
.cfg-fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:12px}
|
|
.cfg-fields label{display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; color:var(--dim)}
|
|
.cfg-fields input, .cfg-fields select{padding:8px 10px; border-radius:7px; background:#0a1726; color:#fff; border:1px solid var(--line-soft); font-size:13px}
|
|
.rotbtns button{min-width:48px; justify-content:center}
|
|
.logwrap{max-width:720px; margin:0 auto 50px; padding:0 20px}
|
|
footer{max-width:760px; margin:0 auto 30px; padding:16px 20px 0; color:var(--dim2); font-size:12px; text-align:center; border-top:1px solid var(--line-soft)}
|
|
footer a{color:var(--blue); text-decoration:none}
|
|
footer a:hover{text-decoration:underline}
|