683 lines
38 KiB
CSS
683 lines
38 KiB
CSS
@font-face{font-family:"Cantarell";src:url("../fonts/Cantarell-VF.otf") format("opentype");font-weight:100 900;font-style:normal;font-display:block}
|
|
/* BastionGuard WebUI font policy: Cantarell only.
|
|
The Debian package must depend on fonts-cantarell.
|
|
No remote fonts and no CSS fallback families are used. */
|
|
html,body,button,input,select,textarea,table,.btn,.form-control,.form-select,.dropdown-menu,.modal,.tooltip,.popover,pre,code,kbd,samp{font-family:"Cantarell" !important}
|
|
*{font-family:"Cantarell" !important}
|
|
/* BastionGuard WebUI theme
|
|
* Palette ported from the BastionGuard GTK light/dark CSS files.
|
|
* The original GTK selectors are not loaded directly because the WebUI uses HTML/Bootstrap.
|
|
*/
|
|
:root{
|
|
--bg:#f4f6f8;
|
|
--surface:#ffffff;
|
|
--surface-2:#f1f3f5;
|
|
--surface-3:#e2e6ea;
|
|
--text:#212529;
|
|
--muted:#6c757d;
|
|
--muted-2:#495057;
|
|
--border:#dee2e6;
|
|
--border-strong:#3a6ea5;
|
|
--shadow:0 1px 3px rgba(0,0,0,.10),0 12px 30px rgba(33,37,41,.06);
|
|
--sidebar-bg:#3a6ea5;
|
|
--sidebar-bg-hover:#2c5d8a;
|
|
--sidebar-bg-active:rgba(255,255,255,.20);
|
|
--sidebar-text:#ffffff;
|
|
--sidebar-muted:rgba(255,255,255,.82);
|
|
--sidebar-border:rgba(255,255,255,.12);
|
|
--primary:#0d6efd;
|
|
--primary-hover:#0b5ed7;
|
|
--primary-active:#0a58ca;
|
|
--success:#28a745;
|
|
--success-hover:#218838;
|
|
--danger:#dc3545;
|
|
--danger-hover:#c82333;
|
|
--warning:#e0952a;
|
|
--warning-hover:#c47d1a;
|
|
--info-bg:#e3f2fd;
|
|
--info-text:#0277bd;
|
|
--info-border:#81d4fa;
|
|
--warning-bg:#fff8e1;
|
|
--warning-text:#856404;
|
|
--warning-border:#ffc107;
|
|
--success-bg:#e8f5e9;
|
|
--success-text:#2e7d32;
|
|
--success-border:#81c784;
|
|
--code-bg:#f8f9fa;
|
|
--log-bg:#f8f9fa;
|
|
--log-text:#495057;
|
|
--input-bg:#ffffff;
|
|
--input-focus:#eef2ff;
|
|
--input-text:#212529;
|
|
--scroll-thumb:#3a6ea5;
|
|
--progress-track:#e9ecef;
|
|
--progress-start:#28a745;
|
|
--progress-end:#34ce57;
|
|
}
|
|
html[data-theme="dark"]{
|
|
--bg:#1a1d23;
|
|
--surface:#242830;
|
|
--surface-2:#2a2f3b;
|
|
--surface-3:#2e333e;
|
|
--text:#e4e7eb;
|
|
--muted:#b0b8c5;
|
|
--muted-2:#c9cdd4;
|
|
--border:#3a3f4b;
|
|
--border-strong:#4d8fe0;
|
|
--shadow:0 1px 3px rgba(0,0,0,.40),0 16px 38px rgba(0,0,0,.28);
|
|
--sidebar-bg:#1e3352;
|
|
--sidebar-bg-hover:#1e3a56;
|
|
--sidebar-bg-active:rgba(255,255,255,.20);
|
|
--sidebar-text:#ffffff;
|
|
--sidebar-muted:#d0d9e8;
|
|
--sidebar-border:rgba(255,255,255,.12);
|
|
--primary:#0d6efd;
|
|
--primary-hover:#0b5ed7;
|
|
--primary-active:#0a58ca;
|
|
--success:#28a745;
|
|
--success-hover:#218838;
|
|
--danger:#dc3545;
|
|
--danger-hover:#c82333;
|
|
--warning:#e0952a;
|
|
--warning-hover:#c47d1a;
|
|
--info-bg:#0a2833;
|
|
--info-text:#6dcfe0;
|
|
--info-border:#1a4a56;
|
|
--warning-bg:#332b00;
|
|
--warning-text:#f0c040;
|
|
--warning-border:#5a4800;
|
|
--success-bg:#0d2b12;
|
|
--success-text:#4dbb6a;
|
|
--success-border:#1a5c28;
|
|
--code-bg:#0f1117;
|
|
--log-bg:#0f1117;
|
|
--log-text:#c9cdd4;
|
|
--input-bg:#1e2229;
|
|
--input-focus:#1a2030;
|
|
--input-text:#e4e7eb;
|
|
--scroll-thumb:#1e3352;
|
|
--progress-track:#1a1f28;
|
|
--progress-start:#28a745;
|
|
--progress-end:#34ce57;
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
html[data-theme="system"]{
|
|
--bg:#1a1d23;--surface:#242830;--surface-2:#2a2f3b;--surface-3:#2e333e;--text:#e4e7eb;--muted:#b0b8c5;--muted-2:#c9cdd4;--border:#3a3f4b;--border-strong:#4d8fe0;--shadow:0 1px 3px rgba(0,0,0,.40),0 16px 38px rgba(0,0,0,.28);--sidebar-bg:#1e3352;--sidebar-bg-hover:#1e3a56;--sidebar-bg-active:rgba(255,255,255,.20);--sidebar-text:#ffffff;--sidebar-muted:#d0d9e8;--sidebar-border:rgba(255,255,255,.12);--primary:#0d6efd;--primary-hover:#0b5ed7;--primary-active:#0a58ca;--success:#28a745;--success-hover:#218838;--danger:#dc3545;--danger-hover:#c82333;--warning:#e0952a;--warning-hover:#c47d1a;--info-bg:#0a2833;--info-text:#6dcfe0;--info-border:#1a4a56;--warning-bg:#332b00;--warning-text:#f0c040;--warning-border:#5a4800;--success-bg:#0d2b12;--success-text:#4dbb6a;--success-border:#1a5c28;--code-bg:#0f1117;--log-bg:#0f1117;--log-text:#c9cdd4;--input-bg:#1e2229;--input-focus:#1a2030;--input-text:#e4e7eb;--scroll-thumb:#1e3352;--progress-track:#1a1f28;--progress-start:#28a745;--progress-end:#34ce57;
|
|
}
|
|
}
|
|
html,body{min-height:100%;margin:0}
|
|
body{background:var(--bg);color:var(--text);font-family:"Cantarell";direction:ltr;font-size:14px}
|
|
a{color:var(--primary)}a:hover{color:var(--primary-hover)}
|
|
.app-shell{display:grid;grid-template-columns:282px minmax(0,1fr);min-height:100vh;width:100%;direction:ltr}
|
|
.sidebar{grid-column:1;grid-row:1;width:282px;background:var(--sidebar-bg);color:var(--sidebar-text);position:sticky;top:0;left:0;right:auto;height:100vh;max-height:100vh;overflow-y:auto;padding:18px 14px;z-index:1000;border-bottom-left-radius:12px;box-shadow:8px 0 28px rgba(0,0,0,.08)}
|
|
.brand{display:flex;align-items:center;gap:12px;padding:10px 8px 18px;border-bottom:1px solid var(--sidebar-border);margin-bottom:12px}.brand strong{color:#fff;font-size:15px}.brand small{display:block;color:var(--sidebar-muted);font-size:.78rem}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
|
|
.sidebar-nav .nav-link{display:flex;align-items:center;gap:10px;color:var(--sidebar-text);border-radius:8px;padding:8px 12px;margin:0 0 6px;text-decoration:none;font-weight:500;transition:background-color .16s ease,color .16s ease,transform .16s ease}.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateX(1px)}.sidebar-nav .nav-link.active{background:var(--sidebar-bg-active);color:#fff;font-weight:600}.sidebar-nav .nav-link.text-danger{color:#ffe1e5!important}.sidebar-nav .nav-link.text-danger:hover{background:rgba(220,53,69,.32)}
|
|
.nav-group{margin:8px 0}.nav-section-toggle{width:100%;border:0;background:transparent;color:var(--sidebar-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:10px 0 4px;padding:8px 10px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:600}.nav-section-toggle:hover{background:rgba(255,255,255,.12);color:#fff}.nav-section-toggle span{display:flex;align-items:center;gap:8px}.nav-chevron{transition:transform .18s ease}.nav-section-toggle:not(.collapsed) .nav-chevron{transform:rotate(180deg)}.nav-group-collapse{padding-left:4px}
|
|
.sidebar-preferences{margin-top:14px;padding:12px 10px;border-top:1px solid var(--sidebar-border);color:var(--sidebar-text)}.sidebar-pref-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sidebar-muted);margin-bottom:8px}.sidebar-preferences .btn-outline-light{--bs-btn-color:var(--sidebar-text);--bs-btn-border-color:rgba(255,255,255,.18);--bs-btn-hover-bg:rgba(255,255,255,.12);--bs-btn-hover-border-color:rgba(255,255,255,.35)}
|
|
.main-content{grid-column:2;grid-row:1;min-width:0;margin-left:0;overflow-x:hidden}.content-inner{padding:30px;max-width:1560px;margin:0 auto}.content{background:var(--bg);padding:20px}.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.page-title h1{font-size:1.7rem;margin:0;font-weight:750;color:var(--text)}.page-title p{margin:.3rem 0 0;color:var(--muted)}.small-muted,.form-hint,.text-muted{color:var(--muted)!important}.copy-muted{white-space:pre-wrap}
|
|
.card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.card-body{padding:18px}.card h5,.card h6{font-weight:700;color:var(--text)}.section-card h5{font-weight:700}.metric{min-height:116px}.metric .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(13,110,253,.12);color:var(--primary);flex:0 0 48px;font-size:1.25rem}
|
|
.card .btn,.card button.btn,.page-title .btn,.sidebar-preferences .btn{border-radius:6px;font-weight:500;padding:6px 12px}.card .btn{box-shadow:0 1px 2px rgba(0,0,0,.08)}.card .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12)}.card .btn:active{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}
|
|
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-hover);--bs-btn-hover-border-color:var(--primary-hover);--bs-btn-active-bg:var(--primary-active);--bs-btn-active-border-color:var(--primary-active);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}.btn-success{--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success);--bs-btn-hover-bg:var(--success-hover);--bs-btn-hover-border-color:var(--success-hover);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger);--bs-btn-hover-bg:var(--danger-hover);--bs-btn-hover-border-color:var(--danger-hover);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}.btn-warning{--bs-btn-bg:var(--warning);--bs-btn-border-color:var(--warning);--bs-btn-hover-bg:var(--warning-hover);--bs-btn-hover-border-color:var(--warning-hover);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
|
|
.btn-outline-primary{--bs-btn-color:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary);--bs-btn-hover-border-color:var(--primary);--bs-btn-hover-color:#fff}.btn-outline-danger{--bs-btn-color:var(--danger);--bs-btn-border-color:var(--danger);--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger);--bs-btn-hover-color:#fff}.btn-outline-warning{--bs-btn-color:var(--warning);--bs-btn-border-color:var(--warning);--bs-btn-hover-bg:var(--warning);--bs-btn-hover-border-color:var(--warning);--bs-btn-hover-color:#fff}.btn-outline-secondary{--bs-btn-color:var(--muted-2);--bs-btn-border-color:var(--border);--bs-btn-hover-bg:var(--surface-3);--bs-btn-hover-border-color:var(--border);--bs-btn-hover-color:var(--text)}.btn-light{--bs-btn-bg:var(--surface-2);--bs-btn-border-color:var(--border);--bs-btn-color:var(--text);--bs-btn-hover-bg:var(--surface-3);--bs-btn-hover-color:var(--text)}.btn:disabled,.btn.disabled{background:var(--surface-3)!important;border-color:var(--border)!important;color:var(--muted)!important;box-shadow:none!important}
|
|
.action-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}.action-card .btn{align-self:flex-start}.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.card-actions .btn{min-width:120px}.input-group .btn{box-shadow:none}.input-group .btn:hover{transform:none}
|
|
.list-group-item{background:var(--surface);color:var(--text);border-color:var(--border)}.list-group-flush>.list-group-item{background:transparent}.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--border);--bs-table-hover-bg:var(--surface-2)}.table td,.table th{vertical-align:middle;color:var(--text);border-color:var(--border)}.table thead th{color:var(--muted-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}.table-service-status tbody tr{border-top:1px solid var(--border)}
|
|
.form-control,.form-select,textarea.form-control{background-color:var(--input-bg);color:var(--input-text);border-color:var(--border);border-radius:10px}.form-control:focus,.form-select:focus,textarea.form-control:focus{background-color:var(--input-focus);color:var(--input-text);border-color:var(--border-strong);box-shadow:0 0 0 .18rem rgba(13,110,253,.16)}.form-control::placeholder{color:var(--muted)}.form-check-input{background-color:var(--input-bg);border-color:var(--border)}.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}.form-label,.form-check-label{color:var(--text)}
|
|
.nav-tabs{border-bottom:1px solid var(--border)}.nav-tabs .nav-link{background:var(--surface);border:1px solid var(--border);border-bottom:0;color:var(--muted-2);border-top-left-radius:6px;border-top-right-radius:6px;margin-right:4px}.nav-tabs .nav-link:hover{background:var(--surface-2);color:var(--text)}.nav-tabs .nav-link.active{background:var(--surface-3);color:var(--text);border-color:var(--border);border-bottom:2px solid var(--border-strong)}.tab-pane{padding-top:18px}
|
|
.alert{border-radius:8px}.alert-light{background:var(--surface-2);color:var(--text);border-color:var(--border)}.alert-info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border)}.alert-warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.alert-success,.success-label{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}.danger-zone{border:1px dashed var(--danger)}
|
|
.log-box{background:var(--log-bg);color:var(--log-text);border:1px solid var(--border);border-radius:6px;padding:16px;min-height:180px;max-height:520px;overflow:auto;white-space:pre-wrap;font-family:"Cantarell";font-size:.86rem}.code-box,pre.code-box{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:12px;color:var(--text);font-family:"Cantarell"}.list-scroll,.import-preview{max-height:360px;overflow:auto}
|
|
.badge-soft{background:rgba(13,110,253,.12);color:var(--primary);border:1px solid rgba(13,110,253,.22)}.password-cell,.service-name,.samba-share{font-family:"Cantarell"}.password-mask{letter-spacing:.15em;color:var(--muted)}.service-meta{font-size:.82rem;color:var(--muted)}.state-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:999px;margin-right:.35rem;background:#9ca3af}.state-dot.active{background:#16a34a}.state-dot.failed{background:#dc2626}.state-dot.activating{background:#f59e0b}.pm-file-ok{color:#16a34a}.pm-file-missing{color:#f59e0b}
|
|
.brand-logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px}.brand-logo svg{width:34px;height:34px;max-width:34px;max-height:34px;display:block}.brand-logo.fallback{font-size:22px}.about-logo{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px}.about-logo svg{width:72px;height:72px;max-width:72px;max-height:72px}
|
|
.progress,.progress-BastionGuard{background:var(--progress-track);border-radius:10px;min-height:14px}.progress-bar,.progress-BastionGuard progress{background-image:linear-gradient(90deg,var(--progress-start),var(--progress-end))}.spinner-border{color:var(--primary)}
|
|
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:rgba(58,110,165,.08);border-radius:8px}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--sidebar-bg-hover)}
|
|
@media(max-width:980px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto;max-height:none;border-radius:0}.main-content{margin-left:0}.content-inner{padding:18px;max-width:none}.page-title{display:block}.page-title .d-flex{margin-top:12px}.card-actions .btn{min-width:auto;width:100%}}
|
|
|
|
/* ===========================
|
|
* AUTH / SETUP SPLIT WEBPANEL
|
|
* v15 - BastionGuard WebPanel login and setup
|
|
* =========================== */
|
|
body.auth-page{
|
|
min-height:100vh;
|
|
overflow:auto;
|
|
background:#f5f8fc;
|
|
color:#1f2937;
|
|
}
|
|
.auth-shell{
|
|
min-height:100vh;
|
|
display:grid;
|
|
grid-template-columns:minmax(420px,56vw) minmax(420px,44vw);
|
|
background:#f5f8fc;
|
|
}
|
|
.auth-brand-panel{
|
|
position:relative;
|
|
overflow:hidden;
|
|
display:flex;
|
|
align-items:center;
|
|
padding:clamp(44px,7vw,110px) clamp(38px,8vw,160px);
|
|
background:
|
|
radial-gradient(circle at 78% 0%, rgba(30,83,132,.72) 0 0, rgba(30,83,132,.72) 14%, transparent 14.3%),
|
|
radial-gradient(circle at 52% 104%, rgba(24,80,130,.38) 0 0, rgba(24,80,130,.38) 18%, transparent 18.4%),
|
|
linear-gradient(135deg,#062844 0%,#061f36 48%,#082b4c 100%);
|
|
color:#fff;
|
|
isolation:isolate;
|
|
}
|
|
.auth-brand-panel:before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
background:
|
|
linear-gradient(90deg,rgba(255,255,255,.035) 0 0) 68% 0/1px 100% no-repeat,
|
|
linear-gradient(180deg,rgba(255,255,255,.035) 0 0) 0 38%/100% 1px no-repeat,
|
|
linear-gradient(135deg,transparent 0 59%,rgba(28,95,150,.28) 59.2% 72%,transparent 72.2%) 62% 38%/32% 40% no-repeat,
|
|
linear-gradient(135deg,rgba(4,20,38,.05),rgba(30,97,154,.28));
|
|
z-index:-2;
|
|
}
|
|
.auth-brand-panel:after{
|
|
content:"";
|
|
position:absolute;
|
|
width:34vw;
|
|
height:34vw;
|
|
min-width:360px;
|
|
min-height:360px;
|
|
border-radius:50%;
|
|
left:30%;
|
|
bottom:-22%;
|
|
background:radial-gradient(circle,transparent 0 42%,rgba(14,74,126,.34) 42.3% 70%,transparent 70.4%);
|
|
z-index:-1;
|
|
}
|
|
.auth-brand-content{
|
|
position:relative;
|
|
z-index:3;
|
|
max-width:720px;
|
|
}
|
|
.auth-kicker{
|
|
margin:0 0 18px;
|
|
font-size:clamp(1.1rem,1.6vw,1.55rem);
|
|
color:rgba(255,255,255,.86);
|
|
font-weight:400;
|
|
}
|
|
.auth-brand-content h1{
|
|
margin:0;
|
|
color:#fff;
|
|
font-weight:850;
|
|
letter-spacing:-.055em;
|
|
line-height:.98;
|
|
font-size:clamp(3.4rem,6.1vw,6.7rem);
|
|
text-shadow:0 4px 22px rgba(0,0,0,.22);
|
|
}
|
|
.auth-brand-lockup{
|
|
margin-top:42px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:18px;
|
|
}
|
|
.auth-brand-logo{
|
|
width:72px;
|
|
height:72px;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
|
|
}
|
|
.auth-brand-logo svg{
|
|
width:72px;
|
|
height:72px;
|
|
max-width:72px;
|
|
max-height:72px;
|
|
display:block;
|
|
}
|
|
.auth-brand-logo.fallback{font-size:54px;color:#fff}
|
|
.auth-brand-lockup strong{
|
|
display:block;
|
|
color:#fff;
|
|
font-size:clamp(1.8rem,2.9vw,3rem);
|
|
font-weight:800;
|
|
letter-spacing:-.035em;
|
|
}
|
|
.auth-brand-lockup span{
|
|
display:block;
|
|
margin-top:2px;
|
|
color:#32b8ff;
|
|
font-size:.88rem;
|
|
text-transform:uppercase;
|
|
font-weight:800;
|
|
letter-spacing:.065em;
|
|
}
|
|
.auth-shape{
|
|
position:absolute;
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
.auth-shape-one{
|
|
right:9%;
|
|
top:37%;
|
|
width:27vw;
|
|
height:27vw;
|
|
min-width:320px;
|
|
min-height:320px;
|
|
background:linear-gradient(135deg,rgba(23,87,145,.28),rgba(2,22,39,.18));
|
|
border-radius:2px;
|
|
}
|
|
.auth-shape-two{
|
|
right:-5%;
|
|
bottom:12%;
|
|
width:23vw;
|
|
height:23vw;
|
|
min-width:260px;
|
|
min-height:260px;
|
|
background:linear-gradient(135deg,transparent 0 49%,rgba(30,104,170,.45) 50% 100%);
|
|
border-radius:2px;
|
|
}
|
|
.auth-dot-grid{
|
|
position:absolute;
|
|
right:8.2%;
|
|
top:42%;
|
|
width:230px;
|
|
height:260px;
|
|
background-image:radial-gradient(circle,rgba(43,150,226,.52) 0 12px,transparent 13px);
|
|
background-size:72px 72px;
|
|
opacity:.68;
|
|
z-index:1;
|
|
}
|
|
.auth-form-panel{
|
|
min-height:100vh;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:48px;
|
|
background:linear-gradient(135deg,#f9fbfe 0%,#eef3f9 100%);
|
|
}
|
|
.auth-card-wrap{
|
|
position:relative;
|
|
width:min(430px,100%);
|
|
}
|
|
.setup-card-wrap{width:min(520px,100%)}
|
|
.auth-floating-logo{
|
|
position:absolute;
|
|
top:-48px;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
width:96px;
|
|
height:96px;
|
|
border-radius:22px;
|
|
background:#fff;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
box-shadow:0 14px 32px rgba(15,45,80,.14),0 3px 12px rgba(15,45,80,.08);
|
|
z-index:2;
|
|
}
|
|
.auth-floating-logo-mark,
|
|
.auth-floating-logo-mark svg{
|
|
width:66px;
|
|
height:66px;
|
|
max-width:66px;
|
|
max-height:66px;
|
|
display:block;
|
|
}
|
|
.auth-floating-logo-mark.fallback{font-size:48px}
|
|
.auth-card{
|
|
position:relative;
|
|
background:#fff;
|
|
border:1px solid rgba(215,223,232,.92);
|
|
border-radius:22px;
|
|
padding:78px 36px 34px;
|
|
box-shadow:0 30px 80px rgba(14,37,65,.15),0 10px 24px rgba(14,37,65,.08);
|
|
color:#1f2937;
|
|
}
|
|
.setup-card{padding-top:76px}
|
|
.auth-card-header{text-align:center;margin-bottom:28px}
|
|
.auth-card-header h2{
|
|
margin:0;
|
|
font-size:1.62rem;
|
|
color:#1f2937;
|
|
font-weight:800;
|
|
letter-spacing:-.025em;
|
|
}
|
|
.auth-card-header p{
|
|
margin:.45rem 0 0;
|
|
color:#8491a3;
|
|
font-size:1rem;
|
|
}
|
|
.auth-card .form-label{
|
|
color:#374151;
|
|
font-weight:600;
|
|
margin-bottom:.55rem;
|
|
}
|
|
.auth-input,
|
|
.auth-card .form-control,
|
|
.auth-card .form-select{
|
|
height:52px;
|
|
border-radius:11px;
|
|
background:#fff;
|
|
color:#1f2937;
|
|
border:1px solid #d8e1eb;
|
|
box-shadow:inset 0 1px 1px rgba(17,24,39,.02);
|
|
}
|
|
.auth-card .form-control:focus,
|
|
.auth-card .form-select:focus{
|
|
background:#fff;
|
|
color:#1f2937;
|
|
border-color:#8fc4f5;
|
|
box-shadow:0 0 0 .22rem rgba(13,110,253,.12);
|
|
}
|
|
.auth-password-field{position:relative}
|
|
.auth-password-field .form-control{padding-right:52px}
|
|
.auth-eye{
|
|
position:absolute;
|
|
right:12px;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
border:0;
|
|
background:transparent;
|
|
color:#7b8797;
|
|
width:34px;
|
|
height:34px;
|
|
border-radius:9px;
|
|
display:grid;
|
|
place-items:center;
|
|
font-size:18px;
|
|
line-height:1;
|
|
}
|
|
.auth-eye:hover{background:#f0f5fb;color:#0b4a6d}
|
|
.auth-submit{
|
|
height:56px;
|
|
border-radius:11px!important;
|
|
background:linear-gradient(135deg,#0b4a6d,#062f5f)!important;
|
|
border-color:#06355a!important;
|
|
box-shadow:0 10px 22px rgba(6,47,95,.22)!important;
|
|
font-size:1.05rem;
|
|
font-weight:800;
|
|
}
|
|
.auth-submit:hover{background:linear-gradient(135deg,#0a4262,#052a55)!important;transform:translateY(-1px)}
|
|
.auth-version{
|
|
position:absolute;
|
|
right:22px;
|
|
bottom:18px;
|
|
color:#a8b2c1;
|
|
font-size:.78rem;
|
|
}
|
|
.auth-info-note{
|
|
border:1px solid #9bd0ff;
|
|
background:#edf7ff;
|
|
color:#1166b1;
|
|
border-radius:10px;
|
|
padding:12px 14px;
|
|
font-weight:600;
|
|
font-size:.9rem;
|
|
}
|
|
.setup-card .form-hint{font-size:.82rem;color:#7b8797!important;margin-top:.35rem}
|
|
.setup-card .alert{border-radius:12px}
|
|
@media(max-width:1100px){
|
|
.auth-shell{grid-template-columns:1fr;}
|
|
.auth-brand-panel{min-height:44vh;padding:52px 34px;}
|
|
.auth-form-panel{min-height:56vh;padding:72px 24px 44px;}
|
|
.auth-brand-content h1{font-size:clamp(3.2rem,10vw,5.8rem)}
|
|
.auth-dot-grid{right:5%;top:35%}
|
|
}
|
|
@media(max-width:560px){
|
|
.auth-brand-panel{padding:44px 24px;min-height:42vh}
|
|
.auth-brand-content h1{font-size:3rem}
|
|
.auth-brand-lockup{margin-top:26px}
|
|
.auth-brand-logo,.auth-brand-logo svg{width:56px;height:56px;max-width:56px;max-height:56px}
|
|
.auth-brand-lockup strong{font-size:1.7rem}
|
|
.auth-brand-lockup span{font-size:.68rem}
|
|
.auth-form-panel{padding:72px 16px 32px}
|
|
.auth-card{padding:70px 22px 32px;border-radius:18px}
|
|
.auth-floating-logo{width:84px;height:84px;top:-42px;border-radius:20px}
|
|
.auth-floating-logo-mark,.auth-floating-logo-mark svg{width:58px;height:58px;max-width:58px;max-height:58px}
|
|
}
|
|
|
|
/* v16 - WebPanel users setup shortcut */
|
|
.sidebar-user-setup {
|
|
margin: .75rem 0 .65rem 0;
|
|
padding-top: .65rem;
|
|
border-top: 1px solid rgba(255,255,255,.12);
|
|
}
|
|
.sidebar-user-setup .nav-link {
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
background: rgba(255,255,255,.08);
|
|
}
|
|
.sidebar-user-setup .nav-link:hover,
|
|
.sidebar-user-setup .nav-link.active {
|
|
background: rgba(255,255,255,.18);
|
|
}
|
|
|
|
/* v17 - auth i18n and quick theme/language controls */
|
|
.auth-preferences{
|
|
position:fixed;
|
|
top:18px;
|
|
right:20px;
|
|
z-index:20;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
padding:6px;
|
|
border-radius:999px;
|
|
background:rgba(255,255,255,.82);
|
|
border:1px solid rgba(209,217,229,.75);
|
|
box-shadow:0 10px 24px rgba(15,23,42,.08);
|
|
backdrop-filter:blur(12px);
|
|
}
|
|
.auth-preferences a{
|
|
min-width:38px;
|
|
text-align:center;
|
|
text-decoration:none;
|
|
color:#5f6b7a;
|
|
border-radius:999px;
|
|
padding:6px 10px;
|
|
font-size:.78rem;
|
|
font-weight:800;
|
|
line-height:1;
|
|
}
|
|
.auth-preferences a:hover{background:#eef5fb;color:#06355a}
|
|
.auth-preferences a.active{background:#0b4a6d;color:#fff}
|
|
.auth-preferences span{width:1px;height:18px;background:#d9e0ea;margin:0 2px}
|
|
[data-theme="dark"] .auth-preferences{
|
|
background:rgba(30,34,41,.86);
|
|
border-color:rgba(58,63,75,.9);
|
|
box-shadow:0 10px 24px rgba(0,0,0,.28);
|
|
}
|
|
[data-theme="dark"] .auth-preferences a{color:#c9d2df}
|
|
[data-theme="dark"] .auth-preferences a:hover{background:#2a2f3b;color:#fff}
|
|
[data-theme="dark"] .auth-preferences a.active{background:#4d8fe0;color:#fff}
|
|
[data-theme="dark"] .auth-preferences span{background:#3a3f4b}
|
|
[data-theme="dark"] .auth-form-panel{background:#1a1d23}
|
|
[data-theme="dark"] .auth-card{background:#242830;border-color:#3a3f4b;color:#e4e7eb}
|
|
[data-theme="dark"] .auth-card-header h2{color:#f2f4f7}
|
|
[data-theme="dark"] .auth-card-header p,
|
|
[data-theme="dark"] .auth-card .form-label,
|
|
[data-theme="dark"] .setup-card .form-hint{color:#c9d2df!important}
|
|
[data-theme="dark"] .auth-input{background:#1e2229;border-color:#3a3f4b;color:#e4e7eb}
|
|
[data-theme="dark"] .auth-input:focus{background:#1e2229;color:#fff;border-color:#4d8fe0;box-shadow:0 0 0 .22rem rgba(77,143,224,.18)}
|
|
[data-theme="dark"] .auth-eye:hover{background:#2a2f3b;color:#fff}
|
|
[data-theme="dark"] .auth-info-note{background:#0a2833;border-color:#1a4a56;color:#6dcfe0}
|
|
@media(max-width:560px){.auth-preferences{left:14px;right:14px;justify-content:center}}
|
|
|
|
|
|
/* v18 - initial wizard aligned with setup/login split screen */
|
|
.wizard-auth-page .wizard-form-panel{align-items:flex-start;padding-top:96px;padding-bottom:56px;}
|
|
.wizard-card-wrap{width:min(760px,100%)}
|
|
.wizard-card{padding-bottom:44px;}
|
|
.wizard-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
|
|
.wizard-status-item{border:1px solid #d8e1eb;border-radius:12px;padding:11px 12px;background:#f8fbff;min-width:0;}
|
|
.wizard-status-item span{display:block;color:#7b8797;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
|
|
.wizard-status-item strong{display:block;color:#1f2937;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.wizard-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
|
|
.wizard-section-title h3{font-size:1rem;font-weight:850;color:#1f2937;margin:0;}
|
|
.wizard-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
|
|
.wizard-choice-card{display:flex;align-items:flex-start;gap:10px;border:1px solid #d8e1eb;border-radius:13px;background:#fff;padding:12px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;}
|
|
.wizard-choice-card:hover{background:#f8fbff;border-color:#8fc4f5;transform:translateY(-1px);}
|
|
.wizard-choice-card input{margin-top:4px;flex:0 0 auto;}
|
|
.wizard-choice-card span{display:block;min-width:0;}
|
|
.wizard-choice-card strong{display:block;color:#1f2937;font-weight:800;margin-bottom:2px;}
|
|
.wizard-choice-card small{display:block;color:#7b8797;line-height:1.32;}
|
|
.wizard-choice-card code{display:block;margin-top:6px;font-size:.72rem;color:#0b4a6d;background:#eef6ff;border:1px solid #cde5fb;border-radius:6px;padding:2px 5px;white-space:normal;word-break:break-word;}
|
|
.wizard-actions{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;}
|
|
.wizard-details{border:1px solid #d8e1eb;border-radius:12px;padding:10px 12px;background:#f8fbff;}
|
|
.wizard-details summary{font-weight:800;color:#1f2937;cursor:pointer;margin-bottom:8px;}
|
|
.wizard-card .log-box{max-height:260px;min-height:120px;}
|
|
[data-theme="dark"] .wizard-status-item,
|
|
[data-theme="dark"] .wizard-choice-card,
|
|
[data-theme="dark"] .wizard-details{background:#1e2229;border-color:#3a3f4b;}
|
|
[data-theme="dark"] .wizard-status-item strong,
|
|
[data-theme="dark"] .wizard-section-title h3,
|
|
[data-theme="dark"] .wizard-choice-card strong,
|
|
[data-theme="dark"] .wizard-details summary{color:#f2f4f7;}
|
|
[data-theme="dark"] .wizard-status-item span,
|
|
[data-theme="dark"] .wizard-choice-card small{color:#c9d2df;}
|
|
[data-theme="dark"] .wizard-choice-card:hover{background:#2a2f3b;border-color:#4d8fe0;}
|
|
[data-theme="dark"] .wizard-choice-card code{background:#0a2833;border-color:#1a4a56;color:#6dcfe0;}
|
|
@media(max-width:760px){.wizard-status-grid,.wizard-service-grid{grid-template-columns:1fr}.wizard-actions{grid-template-columns:1fr}.wizard-card-wrap{width:100%}}
|
|
|
|
/* v19 - coherent WebPanel users setup */
|
|
.section-eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.45rem;color:var(--muted);font-size:.74rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.web-users-hero{background:linear-gradient(135deg,rgba(13,110,253,.09),rgba(40,167,69,.05)),var(--surface)}.hero-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(13,110,253,.12);color:var(--primary);font-size:1.55rem;flex:0 0 56px}.web-user-form-card,.web-users-list-card{border-radius:16px}.role-picker{display:grid;gap:10px}.role-card{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);padding:12px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.role-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}.role-card.selected{border-color:var(--primary);background:rgba(13,110,253,.10)}.role-card input{margin-top:4px;flex:0 0 auto}.role-card span{display:block;min-width:0}.role-card strong{display:block;color:var(--text);font-size:.96rem}.role-card small{display:block;color:var(--muted);line-height:1.35;margin-top:2px}.web-users-table-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden}.web-users-table{margin-bottom:0}.web-users-table thead th{background:var(--surface-2);padding:.8rem .7rem}.web-users-table tbody td{padding:.85rem .7rem}.user-cell{display:flex;align-items:center;gap:10px}.user-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(13,110,253,.12);color:var(--primary);font-weight:800}.sidebar-user-setup{border-top:1px solid var(--sidebar-border);margin-top:12px;padding-top:12px}.sidebar-user-setup .nav-link{display:flex;align-items:center;gap:10px;color:var(--sidebar-text);border-radius:8px;padding:8px 12px;text-decoration:none;font-weight:600}.sidebar-user-setup .nav-link:hover,.sidebar-user-setup .nav-link.active{background:var(--sidebar-bg-active);color:#fff}@media(max-width:980px){.web-users-title .d-flex{justify-content:flex-start!important}.web-users-table .btn{width:100%}}
|
|
|
|
/* WebPanel malware/ransomware toast notifications.
|
|
* Native JavaScript implementation: positioned without Bootstrap utilities so it
|
|
* also works with the local lightweight Bootstrap-compatible subset.
|
|
*/
|
|
.bg-toast-container{
|
|
position:fixed !important;
|
|
top:16px !important;
|
|
right:16px !important;
|
|
bottom:auto !important;
|
|
left:auto !important;
|
|
z-index:2147483000 !important;
|
|
width:min(440px, calc(100vw - 32px));
|
|
max-width:440px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
pointer-events:none;
|
|
}
|
|
.bg-alert-toast{
|
|
pointer-events:auto;
|
|
overflow:hidden;
|
|
border-radius:14px;
|
|
background:var(--surface);
|
|
color:var(--text);
|
|
border:1px solid var(--border);
|
|
box-shadow:0 18px 45px rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.12);
|
|
animation:bgToastIn .22s ease-out both;
|
|
}
|
|
.bg-alert-toast-leaving{animation:bgToastOut .18s ease-in both;}
|
|
.bg-alert-toast-header{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
padding:12px 14px;
|
|
border-bottom:1px solid var(--border);
|
|
background:linear-gradient(90deg, rgba(220,53,69,.14), rgba(13,110,253,.06));
|
|
}
|
|
.bg-alert-toast-title{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:9px;
|
|
min-width:0;
|
|
font-weight:800;
|
|
}
|
|
.bg-alert-toast-title i{color:var(--danger);font-size:1.15rem;}
|
|
.bg-alert-toast-meta{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap;}
|
|
.bg-toast-close{
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--muted);
|
|
width:28px;
|
|
height:28px;
|
|
border-radius:8px;
|
|
line-height:1;
|
|
font-size:22px;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
.bg-toast-close:hover{background:var(--surface-3);color:var(--text);}
|
|
.bg-alert-toast-body{padding:12px 14px 14px;}
|
|
.bg-alert-toast-family{font-weight:800;margin-bottom:4px;word-break:break-word;}
|
|
.bg-alert-toast-path{font-size:.86rem;color:var(--muted);word-break:break-all;margin-bottom:12px;}
|
|
.bg-alert-toast-actions{display:flex;gap:8px;flex-wrap:wrap;}
|
|
.bg-alert-toast-ransomware{border-color:rgba(220,53,69,.55);}
|
|
.bg-alert-toast-malware{border-color:rgba(220,53,69,.38);}
|
|
.bg-alert-toast-warning .bg-alert-toast-header{background:var(--warning-bg);color:var(--warning-text);}
|
|
.bg-alert-toast-warning .bg-alert-toast-title i{color:var(--warning-text);}
|
|
@keyframes bgToastIn{from{opacity:0;transform:translate3d(22px,-10px,0) scale(.985);}to{opacity:1;transform:none;}}
|
|
@keyframes bgToastOut{from{opacity:1;transform:none;}to{opacity:0;transform:translate3d(22px,-10px,0) scale(.985);}}
|
|
@media (max-width: 576px){
|
|
.bg-toast-container{left:12px !important;right:12px !important;top:12px !important;width:auto;max-width:none;}
|
|
}
|
|
|
|
/* v31: mobile off-canvas navigation */
|
|
.mobile-topbar{display:none;position:sticky;top:0;z-index:1200;height:58px;padding:10px 14px;background:var(--sidebar-bg);color:var(--sidebar-text);border-bottom:1px solid var(--sidebar-border);align-items:center;gap:12px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
|
|
.mobile-menu-btn{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;font-size:1.25rem}
|
|
.mobile-menu-btn:hover{background:rgba(255,255,255,.16)}
|
|
.mobile-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;min-width:0}.mobile-brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:0 0 34px}.mobile-brand-mark img,.mobile-brand-mark svg{width:24px;height:24px}
|
|
.sidebar-close{display:none;position:absolute;top:12px;right:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;place-items:center;font-size:1rem;z-index:2}.sidebar-close:hover{background:rgba(255,255,255,.16)}
|
|
.sidebar-scrim{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:1240;opacity:0;transition:opacity .18s ease}.sidebar-scrim.is-visible{opacity:1}body.sidebar-open{overflow:hidden}
|
|
@media(max-width:980px){
|
|
.mobile-topbar{display:flex}
|
|
.app-shell{display:block;min-height:calc(100vh - 58px);width:100%;overflow-x:hidden}
|
|
.sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(86vw,322px)!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;transform:translateX(-105%);transition:transform .22s ease;z-index:1250;padding-top:62px!important;box-shadow:18px 0 42px rgba(0,0,0,.36)!important}
|
|
.sidebar.is-open{transform:translateX(0)}
|
|
.sidebar-close{display:grid}
|
|
.main-content{display:block;width:100%;min-width:0;margin-left:0!important;overflow-x:hidden}
|
|
.content-inner{padding:18px!important;max-width:none!important;width:100%}
|
|
.page-title{display:block;margin-bottom:16px}.page-title h1{font-size:1.55rem;line-height:1.22}.page-title p{font-size:.95rem}
|
|
.row{--bs-gutter-x:1rem}.card{max-width:100%}.card-body{padding:1rem}.table-responsive,.log-box,pre{max-width:100%;overflow-x:auto}
|
|
.btn-group.w-100>.btn{min-width:0;white-space:nowrap}
|
|
}
|
|
@media(max-width:420px){.content-inner{padding:14px!important}.page-title h1{font-size:1.35rem}.sidebar{width:88vw!important}.card-body{padding:.9rem}.mobile-brand span:last-child{font-size:.95rem}}
|
|
|
|
|
|
/* v33: stronger mobile/tablet offcanvas navigation.
|
|
* Uses a larger breakpoint because the WebPanel can be embedded in narrow
|
|
* frames even when the browser viewport is wider than a phone.
|
|
*/
|
|
@media (max-width:1280px){
|
|
body:not(.auth-page){padding-top:58px;}
|
|
.mobile-topbar{display:flex!important;position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1300!important;}
|
|
.app-shell{display:block!important;min-height:calc(100vh - 58px)!important;width:100%!important;overflow-x:hidden!important;}
|
|
.sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(86vw,322px)!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;transform:translate3d(-110%,0,0)!important;transition:transform .22s ease!important;z-index:1320!important;padding-top:66px!important;box-shadow:18px 0 42px rgba(0,0,0,.38)!important;will-change:transform;}
|
|
.sidebar.is-open{transform:translate3d(0,0,0)!important;}
|
|
.sidebar-close{display:grid!important;}
|
|
.sidebar-scrim{z-index:1310!important;}
|
|
.main-content{display:block!important;width:100%!important;min-width:0!important;margin-left:0!important;overflow-x:hidden!important;}
|
|
.content-inner{padding:18px!important;max-width:none!important;width:100%!important;}
|
|
.page-title{display:block!important;margin-bottom:16px!important;}
|
|
.page-title h1{font-size:1.55rem!important;line-height:1.22!important;}
|
|
.page-title p{font-size:.95rem!important;}
|
|
.card,.card-body,.table-responsive,.log-box,pre{max-width:100%!important;}
|
|
.table-responsive,.log-box,pre{overflow-x:auto!important;}
|
|
.row{--bs-gutter-x:1rem!important;}
|
|
}
|
|
@media (min-width:1281px){
|
|
body:not(.auth-page){padding-top:0!important;}
|
|
.mobile-topbar{display:none!important;}
|
|
.sidebar{transform:none!important;}
|
|
}
|
|
|
|
/* v37 - real step-by-step wizard with desktop-config lock */
|
|
.wizard-stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:16px 0 18px;}
|
|
.wizard-stepper-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;border:1px solid #d8e1eb;border-radius:12px;background:#fff;color:#526070;font-weight:800;padding:10px 8px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;text-align:left;}
|
|
.wizard-stepper-item span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef6ff;color:#0b4a6d;font-size:.8rem;}
|
|
.wizard-stepper-item:hover{border-color:#8fc4f5;transform:translateY(-1px);}
|
|
.wizard-stepper-item.active{background:#0d6efd;color:#fff;border-color:#0d6efd;}
|
|
.wizard-stepper-item.active span{background:rgba(255,255,255,.22);color:#fff;}
|
|
.wizard-stepper-item.done{background:#eef6ff;border-color:#b6daf8;color:#0b4a6d;}
|
|
.wizard-step-pane{display:none;}
|
|
.wizard-step-pane.active{display:block;}
|
|
.wizard-step-pane>h3{font-size:1.05rem;font-weight:850;color:#1f2937;margin:0 0 8px;}
|
|
[data-theme="dark"] .wizard-stepper-item{background:#1e2229;border-color:#3a3f4b;color:#c9d2df;}
|
|
[data-theme="dark"] .wizard-stepper-item span{background:#0a2833;color:#6dcfe0;}
|
|
[data-theme="dark"] .wizard-stepper-item:hover{background:#2a2f3b;border-color:#4d8fe0;}
|
|
[data-theme="dark"] .wizard-stepper-item.active{background:#4d8fe0;border-color:#4d8fe0;color:#fff;}
|
|
[data-theme="dark"] .wizard-stepper-item.active span{background:rgba(255,255,255,.18);color:#fff;}
|
|
[data-theme="dark"] .wizard-stepper-item.done{background:#0a2833;border-color:#1a4a56;color:#6dcfe0;}
|
|
[data-theme="dark"] .wizard-step-pane>h3{color:#f2f4f7;}
|
|
@media(max-width:760px){.wizard-stepper{grid-template-columns:1fr 1fr}.wizard-stepper-item{justify-content:flex-start}}
|
|
@media(max-width:460px){.wizard-stepper{grid-template-columns:1fr}}
|
|
|
|
.wizard-review-list h4{font-size:.92rem;font-weight:850;margin:12px 0 6px;color:#1f2937}.wizard-review-list ul{margin:0 0 8px 18px;padding:0}.wizard-review-list li{margin:2px 0;color:#526070}[data-theme="dark"] .wizard-review-list h4{color:#f2f4f7}[data-theme="dark"] .wizard-review-list li{color:#c9d2df}
|
|
|
|
|
|
|