naturallaw777
6d32bebdc6
Coloring: the base surfaces were green-tinted darks, which read as a green-hued background rather than green highlights. Shift the whole surface ramp to neutral graphite (slightly cool, and lighter overall) and keep green strictly for highlights — brand, buttons, switches, status dots and pills, sync bars, focus rings. - Tokens: bg #17191d, surface #1c1f24, card #23272c, hover #292e34, elevated #26292e, inset #121417; text neutrals #e9edec/#a9b0b3/ #7a8388. Accent, borders, radii, shadows unchanged. - Remove the green ambient radial washes behind the app (and login). - Reboot / security-reset overlay gradients neutralized. Updater icon: restore the repo's branded Sovran updater icon (/static/icons/update.svg, true colors) in the sidebar Update System row and in the update dialog header, replacing the generic refresh glyph. The rebuild dialog keeps its glyph chip (no branded icon exists for it).
461 lines
9.3 KiB
CSS
461 lines
9.3 KiB
CSS
/* ── Security Modal sections ──────────────────────────────────────── */
|
|
|
|
.security-section {
|
|
padding: 0 0 8px 0;
|
|
}
|
|
|
|
.security-section-title {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.security-section-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.security-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 18px 0;
|
|
}
|
|
|
|
/* ── Security Reset warning box ──────────────────────────────────── */
|
|
|
|
.security-warning-box {
|
|
background-color: rgba(180, 40, 40, 0.10);
|
|
border-left: 3px solid var(--red);
|
|
border-radius: 6px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.security-warning-text {
|
|
font-size: 0.85rem;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.security-warning-list {
|
|
margin: 6px 0 6px 20px;
|
|
padding: 0;
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.security-erase-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.security-erase-label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.security-erase-input {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--input-bg, var(--card-color));
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.security-reset-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: var(--red);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 8px 18px;
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background-color: var(--red);
|
|
}
|
|
|
|
.btn-danger:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.security-status-msg {
|
|
font-size: 0.83rem;
|
|
margin-top: 10px;
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.security-status-info { color: var(--text-secondary); }
|
|
.security-status-ok { color: var(--accent); }
|
|
.security-status-error { color: var(--red); }
|
|
|
|
/* ── Verify System Integrity ─────────────────────────────────────── */
|
|
|
|
.security-verify-list {
|
|
margin: 8px 0 10px 20px;
|
|
padding: 0;
|
|
font-size: 0.84rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.security-verify-loading {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-verify-result-card {
|
|
background: var(--card-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.security-verify-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.security-verify-label {
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
min-width: 130px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.security-verify-value {
|
|
font-size: 0.82rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.security-verify-mono {
|
|
font-family: monospace;
|
|
font-size: 0.78rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.security-verify-link {
|
|
font-size: 0.78rem;
|
|
color: var(--accent-color, var(--accent));
|
|
text-decoration: none;
|
|
}
|
|
|
|
.security-verify-link:hover { text-decoration: underline; }
|
|
|
|
.security-verify-badge {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.security-verify-pass {
|
|
background-color: rgba(66, 243, 154, 0.15);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.security-verify-fail {
|
|
background-color: rgba(224, 82, 82, 0.15);
|
|
color: var(--red);
|
|
}
|
|
|
|
.security-verify-errors {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-verify-pre {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
font-size: 0.75rem;
|
|
background: var(--card-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
margin-top: 6px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.security-verify-path-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-size: 0.78rem;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.security-verify-path-label {
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
min-width: 70px;
|
|
}
|
|
|
|
/* ── Security Reset full-screen overlay ──────────────────────────── */
|
|
|
|
.security-reset-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: radial-gradient(1000px 640px at 50% 18%, #202429, #0f1113 72%);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 26px;
|
|
animation: security-reset-fade-in 0.35s ease-out;
|
|
}
|
|
|
|
.security-reset-overlay.visible {
|
|
display: flex;
|
|
}
|
|
|
|
@keyframes security-reset-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.security-reset-overlay-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ── Phase 2: password display box ──────────────────────────────── */
|
|
|
|
.security-reset-password-label {
|
|
font-size: 0.88rem;
|
|
color: var(--text-secondary);
|
|
margin: 16px 0 8px 0;
|
|
}
|
|
|
|
.security-reset-password-box {
|
|
font-family: var(--mono);
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
background: var(--accent-dim);
|
|
border: 1.5px solid rgba(66, 243, 154, 0.35);
|
|
border-radius: 14px;
|
|
padding: 14px 24px;
|
|
letter-spacing: 0.04em;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
margin-bottom: 16px;
|
|
min-width: 260px;
|
|
}
|
|
|
|
.security-reset-password-warning {
|
|
font-size: 0.84rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.security-reset-reboot-btn {
|
|
background: linear-gradient(180deg, #3fd68e, #1ea263);
|
|
color: #04220f;
|
|
border: none;
|
|
border-radius: 99px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
|
|
padding: 11px 22px;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s, opacity 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.security-reset-reboot-btn:hover:not(:disabled) {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.security-reset-reboot-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ── First-login security banner ─────────────────────────────────── */
|
|
|
|
.security-first-login-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 24px;
|
|
background: rgba(233, 182, 74, 0.08);
|
|
border: 1px solid rgba(233, 182, 74, 0.30);
|
|
border-radius: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.security-banner-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.security-banner-icon {
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.security-banner-text {
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.security-banner-dismiss {
|
|
background: none;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 99px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
padding: 4px 10px;
|
|
flex-shrink: 0;
|
|
line-height: 1.4;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.security-banner-dismiss:hover {
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, 0.26);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
/* ── Legacy security inline warning banner ───────────────────────── */
|
|
|
|
.security-inline-banner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 12px;
|
|
background-color: rgba(180, 100, 0, 0.12);
|
|
border-left: 3px solid #c98d08;
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.security-inline-icon {
|
|
font-size: 1rem;
|
|
color: #e0a010;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.security-inline-text {
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-inline-link {
|
|
display: inline-block;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: #e0a010;
|
|
text-decoration: none;
|
|
border: 1px solid #c98d08;
|
|
border-radius: 4px;
|
|
padding: 4px 10px;
|
|
align-self: flex-start;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.security-inline-link:hover {
|
|
background-color: rgba(180, 100, 0, 0.22);
|
|
}
|
|
|
|
/* ── System change-password form extras ──────────────────────────── */
|
|
|
|
.sys-chpw-header {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.sys-chpw-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sys-chpw-desc {
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.pw-input-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.pw-input-wrap .matrix-form-input {
|
|
padding-right: 2.4rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.pw-toggle-btn {
|
|
position: absolute;
|
|
right: 6px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 2px 4px;
|
|
line-height: 1;
|
|
color: var(--text-secondary);
|
|
opacity: 0.75;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.pw-toggle-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pw-hint {
|
|
font-size: 0.76rem;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pw-credentials-note {
|
|
font-size: 0.78rem;
|
|
color: #c98d08;
|
|
background-color: rgba(180, 100, 0, 0.10);
|
|
border-left: 2px solid #c98d08;
|
|
border-radius: 4px;
|
|
padding: 7px 10px;
|
|
margin-bottom: 12px;
|
|
line-height: 1.5;
|
|
}
|