mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 01:27:11 +00:00
UNITRONIX
4ae5dfb8a3
Address #396 retest: vertically center menu/logo in the topbar, drop extra Settings track padding, and tighten the page-header gap on phone without changing sticky bleed. Move the sticky changelog entry to 3.5.70. Refs #396 Thanks: INSOLVE (Honorary); Marco Jakobs (@jacotec); MyNameisStitch (@MyNameisStitch); Redspin (@playerumpknow)
3803 lines
82 KiB
CSS
3803 lines
82 KiB
CSS
/**
|
||
* BetterDesk Console - Keys & Settings Page Styles
|
||
*/
|
||
|
||
/* Keys page */
|
||
.keys-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.key-card {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.key-card-header {
|
||
padding: var(--space-md) var(--space-lg);
|
||
background: var(--bg-tertiary);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.key-card-header .material-icons {
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.key-card-title {
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
|
||
.key-card-body {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
/* Public key display */
|
||
.public-key-display {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
margin-bottom: var(--space-md);
|
||
position: relative;
|
||
}
|
||
|
||
.public-key-text {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
word-break: break-all;
|
||
line-height: 1.6;
|
||
color: var(--text-primary);
|
||
padding-right: calc(var(--space-xl) + 36px);
|
||
}
|
||
|
||
.public-key-text.is-masked {
|
||
letter-spacing: 0.2em;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.public-key-reveal,
|
||
.public-key-copy {
|
||
position: absolute;
|
||
top: var(--space-sm);
|
||
right: var(--space-sm);
|
||
padding: var(--space-xs);
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-sm);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.public-key-reveal {
|
||
right: calc(var(--space-sm) + 36px);
|
||
}
|
||
|
||
.public-key-reveal:hover,
|
||
.public-key-reveal:focus-visible {
|
||
background: var(--accent-blue-muted);
|
||
border-color: var(--accent-blue);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.public-key-copy:hover {
|
||
background: var(--accent-blue-muted);
|
||
border-color: var(--accent-blue);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.public-key-copy.copied {
|
||
background: var(--accent-green-muted);
|
||
border-color: var(--accent-green);
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
/* QR Code */
|
||
.qr-code-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.qr-code-wrapper {
|
||
background: white;
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.qr-code-wrapper img {
|
||
display: block;
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
|
||
.qr-code-hint {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Key actions */
|
||
.key-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* API Key section */
|
||
.api-key-section {
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.api-key-display {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-sm) var(--space-md);
|
||
}
|
||
|
||
.api-key-text {
|
||
flex: 1;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.api-key-masked {
|
||
letter-spacing: 0.2em;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Server info section */
|
||
.server-info-grid {
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.server-info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.server-info-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.server-info-label .material-icons {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.server-info-value {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Settings page */
|
||
.settings-sections {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.settings-section {
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.settings-section-header {
|
||
padding: var(--space-md) var(--space-lg);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.settings-section-title {
|
||
font-size: var(--font-size-lg);
|
||
font-weight: var(--font-weight-semibold);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.settings-section-title .material-icons {
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.settings-section-desc {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin-top: var(--space-xs);
|
||
}
|
||
|
||
.settings-section-body {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
/* Settings form */
|
||
.settings-form {
|
||
max-width: 500px;
|
||
}
|
||
|
||
.settings-form .form-group {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.settings-form .btn {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
/* Password change form */
|
||
.password-requirements {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin-top: var(--space-md);
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.password-requirements ul {
|
||
margin-top: var(--space-sm);
|
||
padding-left: var(--space-lg);
|
||
}
|
||
|
||
.password-requirements li {
|
||
list-style: disc;
|
||
margin-bottom: var(--space-xs);
|
||
}
|
||
|
||
.password-requirements li.valid {
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
/* Audit log */
|
||
.audit-log-container {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.audit-log-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.audit-log-table th,
|
||
.audit-log-table td {
|
||
padding: var(--space-sm) var(--space-md);
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.audit-log-table th {
|
||
background: var(--bg-tertiary);
|
||
font-size: var(--font-size-sm);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-secondary);
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
.audit-log-table td {
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.audit-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
padding: 2px var(--space-sm);
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--font-size-xs);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.audit-action.login {
|
||
background: var(--accent-blue-muted);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.audit-action.ban {
|
||
background: var(--accent-red-muted);
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
.audit-action.unban {
|
||
background: var(--accent-yellow-muted);
|
||
color: var(--accent-yellow);
|
||
}
|
||
|
||
.audit-action.delete {
|
||
background: var(--accent-red-muted);
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
.audit-action.password {
|
||
background: var(--accent-purple-muted);
|
||
color: var(--accent-purple);
|
||
}
|
||
|
||
/* Generator page */
|
||
.generator-container {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.generator-form {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-xl);
|
||
}
|
||
|
||
.generator-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.generator-output {
|
||
margin-top: var(--space-xl);
|
||
}
|
||
|
||
.generator-config {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.generator-config pre {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.keys-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.generator-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ==================== TOTP (2FA) Settings Styles ==================== */
|
||
|
||
.totp-status {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.totp-status-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border-radius: var(--radius-full);
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--font-size-sm);
|
||
width: fit-content;
|
||
background: var(--accent-green-muted);
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.totp-status-badge.disabled {
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.totp-status-badge .material-icons {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.totp-status-desc {
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.totp-status-loading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.totp-status-loading .spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
/* TOTP Setup */
|
||
.totp-setup {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.totp-setup-steps {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
width: 100%;
|
||
}
|
||
|
||
.totp-step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.step-number {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: var(--accent-blue);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-size-xs);
|
||
font-weight: var(--font-weight-bold);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.totp-qr-container {
|
||
background: white;
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-lg);
|
||
border: 2px solid var(--border-primary);
|
||
}
|
||
|
||
.totp-qr-image {
|
||
width: 256px;
|
||
height: 256px;
|
||
display: block;
|
||
}
|
||
|
||
.totp-manual-key {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
background: var(--bg-tertiary);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.totp-manual-label {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.totp-secret-code {
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
word-break: break-all;
|
||
flex: 1;
|
||
}
|
||
|
||
.totp-verify-form {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.totp-verify-input-group {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
margin-top: var(--space-sm);
|
||
}
|
||
|
||
.totp-verify-input-group .form-input {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: var(--font-size-lg);
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
letter-spacing: 0.3em;
|
||
}
|
||
|
||
.totp-cancel-btn {
|
||
margin-top: var(--space-sm);
|
||
}
|
||
|
||
/* Recovery Codes */
|
||
.totp-recovery {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
text-align: center;
|
||
}
|
||
|
||
.totp-success-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.totp-success-icon {
|
||
font-size: 48px;
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.totp-success-header h3 {
|
||
font-size: var(--font-size-lg);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.totp-recovery-warning {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-sm);
|
||
background: var(--accent-yellow-muted);
|
||
border: 1px solid var(--accent-yellow);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
text-align: left;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.totp-recovery-warning .material-icons {
|
||
color: var(--accent-yellow);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.totp-recovery-warning p {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.totp-recovery-codes {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-sm);
|
||
max-width: 320px;
|
||
}
|
||
|
||
.recovery-code {
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
font-size: var(--font-size-md);
|
||
background: var(--bg-tertiary);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-primary);
|
||
text-align: center;
|
||
}
|
||
|
||
.totp-recovery-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.totp-done-btn {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
/* Disable Confirmation */
|
||
.totp-disable-confirm {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-md);
|
||
max-width: 500px;
|
||
}
|
||
|
||
.totp-disable-warning {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-sm);
|
||
background: var(--accent-red-muted);
|
||
border: 1px solid var(--accent-red);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.totp-disable-warning .material-icons {
|
||
color: var(--accent-red);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.totp-disable-warning p {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.totp-disable-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.totp-setup-steps {
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.totp-recovery-codes {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.totp-verify-input-group {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
/* ==================== Settings Tabs (panel visibility + legacy tablist) ==================== */
|
||
|
||
/* Legacy container — unused by Settings v2 shell; kept for any stray markup */
|
||
.settings-tabs {
|
||
display: flex;
|
||
gap: var(--space-xs);
|
||
margin-bottom: var(--space-lg);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
padding-bottom: 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.settings-tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.settings-tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* ==================== Advanced config editor ==================== */
|
||
|
||
.advanced-config-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(200px, 260px) 1fr;
|
||
gap: var(--space-lg);
|
||
margin-top: var(--space-md);
|
||
min-height: 420px;
|
||
}
|
||
|
||
.advanced-config-sidebar-label {
|
||
font-size: var(--font-size-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-muted);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.advanced-config-file-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.advanced-config-file-btn {
|
||
width: 100%;
|
||
text-align: left;
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-primary);
|
||
font-size: var(--font-size-sm);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), background var(--transition-fast);
|
||
}
|
||
|
||
.advanced-config-file-btn:hover:not(:disabled) {
|
||
border-color: var(--border-hover);
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
.advanced-config-file-btn.active {
|
||
border-color: var(--accent-blue);
|
||
background: var(--accent-blue-muted);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.advanced-config-file-btn:disabled {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.advanced-config-editor {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
min-width: 0;
|
||
}
|
||
|
||
.advanced-config-editor-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.advanced-config-editor-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
min-width: 0;
|
||
}
|
||
|
||
.advanced-config-path {
|
||
font-size: var(--font-size-xs);
|
||
word-break: break-all;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.advanced-config-editor-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.advanced-config-textarea {
|
||
flex: 1;
|
||
min-height: 360px;
|
||
width: 100%;
|
||
font-family: var(--font-mono, ui-monospace, monospace);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
resize: vertical;
|
||
tab-size: 4;
|
||
}
|
||
|
||
.advanced-config-textarea:disabled {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.advanced-config-restart-hint {
|
||
font-size: var(--font-size-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
border-left: 3px solid var(--accent-orange, #d29922);
|
||
}
|
||
|
||
.advanced-config-placeholder {
|
||
padding: var(--space-xl);
|
||
text-align: center;
|
||
border: 1px dashed var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.advanced-config-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ==================== Branding / Theming ==================== */
|
||
|
||
/* Logo type selector */
|
||
.logo-type-selector {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.logo-type-option {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.logo-type-option input[type="radio"] {
|
||
display: none;
|
||
}
|
||
|
||
.logo-type-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-md) var(--space-lg);
|
||
border: 2px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-secondary);
|
||
transition: all var(--transition-fast);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.logo-type-option input:checked + .logo-type-card {
|
||
border-color: var(--accent-blue);
|
||
background: var(--accent-blue-muted);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.logo-type-card:hover {
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.logo-config-panel {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
/* Logo preview */
|
||
.branding-preview-box {
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.logo-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-md) var(--space-lg);
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
min-height: 60px;
|
||
}
|
||
|
||
.logo-preview .material-icons {
|
||
font-size: 28px;
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.logo-preview-text {
|
||
font-size: var(--font-size-lg);
|
||
font-weight: var(--font-weight-bold);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.logo-preview-svg,
|
||
.sidebar-logo-svg,
|
||
.login-logo-svg {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo-preview-svg svg,
|
||
.sidebar-logo-svg svg,
|
||
.login-logo-svg svg {
|
||
height: 36px;
|
||
width: auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.login-logo-svg {
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-logo-svg svg {
|
||
height: 48px;
|
||
}
|
||
|
||
.login-logo-img {
|
||
max-height: 48px;
|
||
width: auto;
|
||
}
|
||
|
||
.sidebar-logo-img {
|
||
max-height: 32px;
|
||
width: auto;
|
||
}
|
||
|
||
/* Logo file upload */
|
||
.logo-upload-area {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.logo-file-input {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
opacity: 0.01;
|
||
}
|
||
|
||
.logo-upload-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
font-size: var(--font-size-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.logo-upload-btn:hover {
|
||
background: var(--accent-blue);
|
||
border-color: var(--accent-blue);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.logo-upload-btn .material-icons {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.logo-file-name {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
max-width: 200px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.branding-upload-status {
|
||
margin-top: var(--space-sm);
|
||
padding: var(--space-sm);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-glass-bg-tertiary, var(--bg-tertiary));
|
||
}
|
||
|
||
.branding-upload-status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.branding-upload-status-icon {
|
||
font-size: 18px;
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.branding-upload-status.is-uploading .branding-upload-status-icon,
|
||
.branding-upload-status.is-saving .branding-upload-status-icon {
|
||
animation: update-spin 1.2s linear infinite;
|
||
}
|
||
|
||
.branding-upload-status.is-success {
|
||
border-color: var(--accent-green-muted);
|
||
}
|
||
|
||
.branding-upload-status.is-success .branding-upload-status-icon {
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.branding-upload-status.is-error {
|
||
border-color: var(--accent-red-muted);
|
||
}
|
||
|
||
.branding-upload-status.is-error .branding-upload-status-icon {
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
.branding-upload-progress {
|
||
height: 6px;
|
||
margin-top: var(--space-sm);
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.branding-upload-progress-fill {
|
||
width: 0%;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: var(--accent-blue);
|
||
transition: width 0.2s ease;
|
||
}
|
||
|
||
.branding-upload-status.is-success .branding-upload-progress-fill {
|
||
background: var(--accent-green);
|
||
}
|
||
|
||
.branding-upload-status.is-error .branding-upload-progress-fill {
|
||
background: var(--accent-red);
|
||
}
|
||
|
||
.background-picker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.background-picker-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--space-md);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.background-library {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.background-library-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-xs);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||
}
|
||
|
||
.background-library-item:hover {
|
||
border-color: var(--accent-blue);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.background-library-item.active {
|
||
border-color: var(--accent-blue);
|
||
box-shadow: 0 0 0 2px var(--accent-blue-muted);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.background-library-thumb {
|
||
display: block;
|
||
aspect-ratio: 16 / 9;
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--bg-secondary);
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.background-library-name {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
|
||
.background-library-empty {
|
||
grid-column: 1 / -1;
|
||
padding: var(--space-md);
|
||
border: 1px dashed var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
color: var(--text-secondary);
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.background-current-file {
|
||
max-width: none;
|
||
}
|
||
|
||
.background-advanced-url {
|
||
border-top: 1px solid var(--border-primary);
|
||
padding-top: var(--space-sm);
|
||
}
|
||
|
||
.background-advanced-url summary {
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.background-advanced-url .form-group {
|
||
margin-top: var(--space-sm);
|
||
}
|
||
|
||
/* Color grid */
|
||
.color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.color-group {
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.color-group-title {
|
||
font-size: var(--font-size-sm);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-md);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.color-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-xs) 0;
|
||
}
|
||
|
||
.color-row .form-label {
|
||
font-size: var(--font-size-sm);
|
||
margin: 0;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.color-input-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.color-picker {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 2px solid var(--border-primary);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
background: none;
|
||
padding: 2px;
|
||
}
|
||
|
||
.color-picker::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
}
|
||
|
||
.color-picker::-webkit-color-swatch {
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.color-hex {
|
||
width: 90px !important;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Branding actions */
|
||
.branding-actions-row {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.branding-save-bar {
|
||
margin-top: var(--space-lg);
|
||
padding-top: var(--space-lg);
|
||
border-top: 1px solid var(--border-primary);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Branding studio layout */
|
||
.branding-studio {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.branding-hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: var(--space-lg);
|
||
align-items: center;
|
||
padding: clamp(18px, 3vw, 28px);
|
||
border: 1px solid rgba(59, 130, 246, 0.28);
|
||
border-radius: var(--radius-xl);
|
||
background:
|
||
radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.26), transparent 34%),
|
||
radial-gradient(circle at 82% 10%, rgba(168, 85, 247, 0.18), transparent 30%),
|
||
linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.82));
|
||
box-shadow: var(--shadow-lg);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.branding-hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: auto -48px -92px auto;
|
||
width: 220px;
|
||
height: 220px;
|
||
border-radius: 50%;
|
||
background: rgba(59, 130, 246, 0.14);
|
||
filter: blur(4px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.branding-hero-copy {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 680px;
|
||
}
|
||
|
||
.branding-hero-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
margin-bottom: var(--space-xs);
|
||
color: var(--accent-blue);
|
||
font-size: var(--font-size-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.branding-hero h2 {
|
||
margin: 0;
|
||
color: #fff;
|
||
font-size: clamp(24px, 3vw, 34px);
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.branding-hero p {
|
||
margin: var(--space-sm) 0 0;
|
||
color: rgba(226, 232, 240, 0.82);
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
.branding-hero-steps {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
min-width: 190px;
|
||
}
|
||
|
||
.branding-hero-steps span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
border-radius: var(--radius-lg);
|
||
background: rgba(15, 23, 42, 0.52);
|
||
color: rgba(248, 250, 252, 0.92);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.branding-hero-steps .material-icons {
|
||
color: var(--accent-blue);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.branding-studio-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-md);
|
||
padding: var(--space-md);
|
||
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.branding-save-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.branding-save-status.is-dirty { color: var(--accent-yellow); }
|
||
.branding-save-status.is-saving { color: var(--accent-blue); }
|
||
.branding-save-status.is-saved { color: var(--accent-green); }
|
||
.branding-save-status.is-error { color: var(--accent-red); }
|
||
.branding-status-icon { font-size: 18px; }
|
||
|
||
.branding-toolbar-actions {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.branding-profiles-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-md);
|
||
align-items: flex-end;
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.branding-profiles-main {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 240px;
|
||
}
|
||
|
||
.branding-profile-select {
|
||
min-width: 200px;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.branding-profiles-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.btn-danger-text { color: var(--accent-red) !important; }
|
||
|
||
.branding-builtin-themes {
|
||
padding: 0 var(--space-xs);
|
||
}
|
||
|
||
.branding-builtin-title {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin: 0 0 var(--space-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.branding-theme-gallery {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.branding-theme-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: var(--space-sm);
|
||
min-width: 120px;
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-secondary);
|
||
cursor: pointer;
|
||
transition: border-color var(--transition-fast), transform var(--transition-fast);
|
||
}
|
||
|
||
.branding-theme-card:hover {
|
||
border-color: var(--accent-blue);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.branding-theme-swatches {
|
||
display: flex;
|
||
gap: 3px;
|
||
height: 20px;
|
||
}
|
||
|
||
.branding-theme-swatch {
|
||
flex: 1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.branding-theme-name {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.branding-glass-config {
|
||
margin-top: var(--space-lg);
|
||
padding-top: var(--space-lg);
|
||
border-top: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.branding-subsection-title {
|
||
margin: 0 0 var(--space-xs);
|
||
font-size: var(--font-size-md);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.branding-subsection-desc {
|
||
margin: 0 0 var(--space-md);
|
||
}
|
||
|
||
.branding-studio-body {
|
||
display: grid;
|
||
grid-template-columns: 210px minmax(0, 1fr) 320px;
|
||
gap: var(--space-lg);
|
||
align-items: start;
|
||
}
|
||
|
||
.branding-module-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
position: sticky;
|
||
top: 72px;
|
||
}
|
||
|
||
.branding-module-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
font-size: var(--font-size-sm);
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.branding-module-btn .material-icons { font-size: 18px; }
|
||
|
||
.branding-module-btn:hover {
|
||
border-color: var(--border-hover);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.branding-module-btn.active {
|
||
border-color: var(--accent-blue);
|
||
background: linear-gradient(135deg, var(--accent-blue-muted), rgba(59, 130, 246, 0.1));
|
||
color: var(--accent-blue);
|
||
box-shadow: inset 3px 0 0 var(--accent-blue);
|
||
}
|
||
|
||
.branding-modules .branding-module-panel {
|
||
display: none;
|
||
}
|
||
|
||
.branding-modules .branding-module-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.branding-live-preview {
|
||
position: sticky;
|
||
top: 72px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-md);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.branding-live-preview-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.branding-live-preview-header h3 {
|
||
margin: 0;
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
.branding-preview-page-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.branding-preview-mockup {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 56px 1fr;
|
||
min-height: 220px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-primary);
|
||
background: var(--bg-primary);
|
||
}
|
||
|
||
.branding-mockup-sidebar {
|
||
background: var(--bg-secondary);
|
||
border-right: 1px solid var(--border-primary);
|
||
padding: var(--space-sm) var(--space-xs);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.branding-mockup-logo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: 9px;
|
||
color: var(--text-primary);
|
||
text-align: center;
|
||
margin-bottom: var(--space-xs);
|
||
word-break: break-word;
|
||
}
|
||
|
||
.branding-mockup-logo .material-icons { font-size: 18px; color: var(--accent-blue); }
|
||
|
||
.branding-mockup-nav-item {
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.branding-mockup-nav-item.active { background: var(--accent-blue-muted); }
|
||
|
||
.branding-mockup-main {
|
||
padding: var(--space-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.branding-mockup-card {
|
||
width: 100%;
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-sm);
|
||
padding: var(--space-sm);
|
||
}
|
||
|
||
.branding-mockup-heading {
|
||
margin: 0 0 4px;
|
||
font-size: 11px;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-heading, var(--font-family));
|
||
}
|
||
|
||
.branding-mockup-body {
|
||
margin: 0 0 var(--space-sm);
|
||
font-size: 9px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.branding-mockup-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.branding-mockup-btn {
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 3px 8px;
|
||
font-size: 8px;
|
||
cursor: default;
|
||
}
|
||
|
||
.branding-mockup-btn.primary {
|
||
background: var(--accent-blue);
|
||
color: #fff;
|
||
}
|
||
|
||
.branding-mockup-btn.secondary {
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.font-source-tabs {
|
||
display: flex;
|
||
gap: var(--space-xs);
|
||
margin-bottom: var(--space-md);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.font-source-tab {
|
||
padding: var(--space-xs) var(--space-sm);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-full);
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-xs);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.font-source-tab.active {
|
||
background: var(--accent-blue-muted);
|
||
border-color: var(--accent-blue);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.font-source-panel { display: none; margin-bottom: var(--space-md); }
|
||
.font-source-panel.active { display: block; }
|
||
|
||
.font-local-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.font-local-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-xs) var(--space-sm);
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.font-upload-area {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
align-items: center;
|
||
}
|
||
|
||
.font-upload-input { display: none; }
|
||
|
||
#tab-branding[data-can-branding-edit="0"] input,
|
||
#tab-branding[data-can-branding-edit="0"] select,
|
||
#tab-branding[data-can-branding-edit="0"] textarea,
|
||
#tab-branding[data-can-branding-edit="0"] button:not(.branding-module-btn) {
|
||
pointer-events: none;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
#tab-branding[data-can-branding-edit="0"] .branding-module-btn {
|
||
pointer-events: auto;
|
||
opacity: 1;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.branding-hero {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.branding-hero-steps {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.branding-studio-body {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.branding-module-nav {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
position: static;
|
||
}
|
||
|
||
.branding-live-preview {
|
||
position: static;
|
||
order: -1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.branding-hero-steps {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.branding-studio-toolbar,
|
||
.branding-profiles-bar {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.branding-profiles-main,
|
||
.branding-profiles-actions {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════
|
||
TYPOGRAPHY / FONT PICKER
|
||
═══════════════════════════════════════════════════ */
|
||
|
||
.font-config {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.font-slot {
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.font-slot-header {
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.font-slot-title {
|
||
font-size: var(--font-size-md);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--space-xs);
|
||
}
|
||
|
||
.font-picker-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.font-search-wrapper {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 220px;
|
||
}
|
||
|
||
.font-search-input {
|
||
width: 100%;
|
||
}
|
||
|
||
.font-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||
z-index: 100;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.font-dropdown.hidden { display: none; }
|
||
|
||
.font-dropdown-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-sm) var(--space-md);
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
border-bottom: 1px solid var(--border-secondary);
|
||
}
|
||
|
||
.font-dropdown-item:last-child { border-bottom: none; }
|
||
.font-dropdown-item:hover { background: var(--bg-hover); }
|
||
|
||
.font-dropdown-item .font-name {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.font-dropdown-item .font-category {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.font-dropdown-item .font-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.font-dropdown-item .font-status .material-icons {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.font-dropdown-item .font-downloaded {
|
||
color: var(--accent-green);
|
||
}
|
||
|
||
.font-dropdown-item .font-needs-download {
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-xs);
|
||
}
|
||
|
||
.font-current {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--accent-blue);
|
||
font-weight: var(--font-weight-medium);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.font-clear-btn {
|
||
padding: var(--space-xs) !important;
|
||
}
|
||
|
||
.font-clear-btn.hidden { display: none; }
|
||
|
||
.font-preview {
|
||
margin-top: var(--space-sm);
|
||
padding: var(--space-md);
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-secondary);
|
||
border-radius: var(--radius-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.font-preview-text {
|
||
color: var(--text-primary);
|
||
display: block;
|
||
}
|
||
|
||
.font-category-filter {
|
||
display: flex;
|
||
gap: var(--space-xs);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.font-cat-btn {
|
||
font-size: var(--font-size-xs) !important;
|
||
padding: var(--space-xs) var(--space-sm) !important;
|
||
border-radius: var(--radius-full) !important;
|
||
border: 1px solid var(--border-primary) !important;
|
||
}
|
||
|
||
.font-cat-btn.active {
|
||
background: var(--accent-blue) !important;
|
||
border-color: var(--accent-blue) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.font-local-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.font-local-info .material-icons {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.font-downloading {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-xs);
|
||
color: var(--accent-yellow);
|
||
}
|
||
|
||
.font-downloading .material-icons {
|
||
font-size: 14px;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: var(--space-sm) var(--space-xl);
|
||
font-size: var(--font-size-md);
|
||
}
|
||
|
||
/* Form textarea */
|
||
.form-textarea {
|
||
resize: vertical;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-sm);
|
||
min-height: 100px;
|
||
}
|
||
|
||
.form-hint {
|
||
display: block;
|
||
margin-top: var(--space-xs);
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.logo-type-selector {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.color-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.branding-actions-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.backend-selector {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
/* ==================== Server Backend Selector ==================== */
|
||
|
||
.backend-selector {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.backend-option {
|
||
flex: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.backend-option input[type="radio"] {
|
||
display: none;
|
||
}
|
||
|
||
.backend-card {
|
||
padding: var(--space-lg);
|
||
border: 2px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-tertiary);
|
||
transition: all var(--transition-fast);
|
||
height: 100%;
|
||
}
|
||
|
||
.backend-option input:checked + .backend-card {
|
||
border-color: var(--accent-blue);
|
||
background: var(--accent-blue-muted);
|
||
}
|
||
|
||
.backend-option.active .backend-card {
|
||
box-shadow: 0 0 0 1px var(--accent-blue);
|
||
}
|
||
|
||
.backend-card:hover {
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.backend-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.backend-icon {
|
||
font-size: 2rem;
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.backend-name {
|
||
font-size: var(--font-size-md);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.backend-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-xs);
|
||
font-weight: 500;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.badge-default {
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
border: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.badge-new {
|
||
background: var(--accent-green-muted, rgba(63, 185, 80, 0.15));
|
||
color: var(--accent-green, #3fb950);
|
||
border: 1px solid var(--accent-green, #3fb950);
|
||
}
|
||
|
||
.backend-desc {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-md);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.backend-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.backend-features li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
padding: 3px 0;
|
||
}
|
||
|
||
.backend-features li .material-icons {
|
||
font-size: 16px;
|
||
color: var(--accent-green, #3fb950);
|
||
}
|
||
|
||
/* Backend status box */
|
||
.backend-status-box {
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-secondary);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.backend-status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-xs) 0;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.backend-status-row .material-icons {
|
||
font-size: 18px;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.backend-health {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.backend-health-running {
|
||
color: var(--accent-green, #3fb950);
|
||
}
|
||
|
||
.backend-health-unreachable {
|
||
color: var(--accent-red, #f85149);
|
||
}
|
||
|
||
.backend-health-error {
|
||
color: var(--accent-red, #f85149);
|
||
}
|
||
|
||
.backend-health-unknown {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* Backend action buttons */
|
||
.backend-actions {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
align-items: center;
|
||
}
|
||
|
||
/* ==================== Backup & Restore ==================== */
|
||
|
||
.backup-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.backup-stat-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-primary);
|
||
}
|
||
|
||
.backup-stat-label {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.backup-stat-value {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.backup-actions {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.restore-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.restore-option {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-primary);
|
||
cursor: pointer;
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
.restore-option:hover {
|
||
border-color: var(--accent-primary);
|
||
}
|
||
|
||
.restore-option input[type="checkbox"] {
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.restore-option span {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.restore-option-danger {
|
||
border-color: var(--accent-red, #f85149);
|
||
flex-direction: column;
|
||
}
|
||
|
||
.restore-option-danger > span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.restore-warning {
|
||
display: block;
|
||
font-size: 11px;
|
||
color: var(--accent-red, #f85149);
|
||
margin-top: 2px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.restore-result {
|
||
margin-top: var(--space-lg);
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-primary);
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.restore-result-inner p {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-xs);
|
||
margin: var(--space-xs) 0;
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.restore-ok .material-icons {
|
||
color: var(--accent-green, #3fb950);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.restore-skip .material-icons {
|
||
color: var(--text-tertiary);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.restore-warn .material-icons {
|
||
color: var(--accent-yellow, #d29922);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.restore-meta {
|
||
color: var(--text-tertiary);
|
||
font-size: 12px;
|
||
margin-top: var(--space-sm) !important;
|
||
}
|
||
|
||
#restore-upload-label.loading {
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.spinning {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
/* ==================== Self-Update ==================== */
|
||
|
||
.update-version-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.update-version-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
padding: var(--space-xs) 0;
|
||
}
|
||
|
||
.update-label {
|
||
min-width: 160px;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
.update-value {
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.update-changelog {
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.03));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-md);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
max-height: 240px;
|
||
overflow-y: auto;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.update-files-summary {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.update-stale-warning {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
align-items: flex-start;
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--warning, #d29922);
|
||
background: rgba(210, 153, 34, 0.08);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.update-stale-icon .material-icons {
|
||
color: var(--warning, #d29922);
|
||
font-size: 28px;
|
||
}
|
||
|
||
.update-stale-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.update-stale-body strong {
|
||
display: block;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-xs);
|
||
}
|
||
|
||
.update-stale-body p {
|
||
margin: 0 0 var(--space-md) 0;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.update-docker-info {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
align-items: flex-start;
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--info, #388bfd);
|
||
background: rgba(56, 139, 253, 0.08);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.update-docker-icon .material-icons {
|
||
color: var(--info, #388bfd);
|
||
font-size: 28px;
|
||
}
|
||
|
||
.update-docker-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.update-docker-body strong {
|
||
display: block;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-xs);
|
||
}
|
||
|
||
.update-docker-body p {
|
||
margin: 0 0 var(--space-sm) 0;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.update-docker-commands {
|
||
margin: 0 0 var(--space-sm) 0;
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-secondary, rgba(0, 0, 0, 0.2));
|
||
border-radius: var(--radius-sm);
|
||
font-size: var(--font-size-sm);
|
||
overflow-x: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.update-progress {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
.update-progress-bar {
|
||
height: 6px;
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.06));
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.update-progress-fill {
|
||
height: 100%;
|
||
background: var(--primary);
|
||
border-radius: 3px;
|
||
transition: width 0.4s ease;
|
||
width: 0%;
|
||
}
|
||
|
||
.update-progress-text {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin-top: var(--space-xs);
|
||
}
|
||
|
||
/* Modal-based update progress (update wizard) */
|
||
.update-wizard {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
min-width: 440px;
|
||
}
|
||
.update-wizard-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.update-wizard-bar {
|
||
height: 6px;
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.06));
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
.update-wizard-bar-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--primary), var(--accent, var(--primary)));
|
||
border-radius: 3px;
|
||
transition: width 0.45s ease;
|
||
width: 0%;
|
||
box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 40%, transparent);
|
||
}
|
||
.update-wizard-meta {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: var(--space-sm);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
.update-wizard-step {
|
||
color: var(--text-secondary);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
.update-wizard-detail {
|
||
color: var(--text-primary);
|
||
text-align: right;
|
||
min-height: 1.3em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.update-wizard-phases,
|
||
.update-phases {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.update-phase {
|
||
display: grid;
|
||
grid-template-columns: 22px 1fr 22px;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid transparent;
|
||
border-left: 2px solid transparent;
|
||
font-size: 13px;
|
||
transition: background 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
.update-phase.is-active {
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.04));
|
||
border-left-color: var(--primary);
|
||
}
|
||
.update-phase.is-done .update-phase-label {
|
||
color: var(--text-secondary);
|
||
}
|
||
.update-phase-icon {
|
||
font-size: 18px;
|
||
color: var(--text-tertiary, var(--text-secondary));
|
||
}
|
||
.update-phase.is-active .update-phase-icon {
|
||
color: var(--primary);
|
||
}
|
||
.update-phase-label {
|
||
color: var(--text-primary);
|
||
}
|
||
.update-phase-state .material-icons {
|
||
font-size: 18px;
|
||
color: var(--text-tertiary, var(--text-secondary));
|
||
}
|
||
.update-phase-state[data-state="active"] .material-icons {
|
||
color: var(--primary);
|
||
}
|
||
.update-phase-state[data-state="done"] .material-icons {
|
||
color: var(--success, #22c55e);
|
||
}
|
||
.update-phase-state[data-state="warning"] .material-icons {
|
||
color: var(--warning, #f59e0b);
|
||
}
|
||
.update-phase-state[data-state="error"] .material-icons {
|
||
color: var(--danger, #ef4444);
|
||
}
|
||
.update-phase-state[data-state="skipped"] .material-icons {
|
||
color: var(--text-tertiary, rgba(255,255,255,0.35));
|
||
opacity: 0.7;
|
||
}
|
||
.update-phase-state .spinning {
|
||
animation: update-spin 1.2s linear infinite;
|
||
}
|
||
.update-phase-state[data-state="done"] .material-icons.just-done {
|
||
animation: updatePhaseDone 0.35s ease-out;
|
||
}
|
||
@keyframes update-spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes updatePhaseDone {
|
||
from { transform: scale(0.85); opacity: 0.6; }
|
||
to { transform: scale(1); opacity: 1; }
|
||
}
|
||
.update-wizard-log-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin-top: 2px;
|
||
}
|
||
.update-wizard-log-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-sm);
|
||
}
|
||
.update-wizard-log-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.update-wizard-log-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.update-wizard-log-actions .btn-sm {
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
min-height: 28px;
|
||
}
|
||
.update-wizard-log-actions .btn-sm .material-icons {
|
||
font-size: 16px;
|
||
}
|
||
.update-progress-log {
|
||
background: var(--bg-secondary, rgba(0,0,0,0.25));
|
||
color: var(--text-secondary);
|
||
font-family: var(--font-mono, ui-monospace, monospace);
|
||
font-size: 11px;
|
||
line-height: 1.45;
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border, rgba(255,255,255,0.06));
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
margin: 0;
|
||
transition: max-height 0.3s ease;
|
||
}
|
||
.update-wizard-log-panel.expanded .update-progress-log {
|
||
max-height: min(50vh, 420px);
|
||
}
|
||
.update-wizard-banner {
|
||
margin-top: var(--space-xs);
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border, rgba(255,255,255,0.08));
|
||
animation: updateBannerSlide 0.3s ease-out;
|
||
}
|
||
.update-wizard-banner[hidden] {
|
||
display: none !important;
|
||
}
|
||
.update-wizard-banner.is-success {
|
||
background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
|
||
border-color: color-mix(in srgb, var(--success, #22c55e) 35%, transparent);
|
||
}
|
||
.update-wizard-banner.is-error,
|
||
.update-wizard-banner.is-warning {
|
||
background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
|
||
border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
|
||
}
|
||
.update-wizard-banner.is-warning {
|
||
background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
|
||
border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent);
|
||
}
|
||
.update-wizard-banner-body {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
.update-wizard-banner-body p {
|
||
margin: 0 0 6px;
|
||
}
|
||
.update-wizard-banner-body p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.update-wizard-banner-details {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.update-wizard-banner-details ul {
|
||
margin: 6px 0 0;
|
||
padding-left: 18px;
|
||
}
|
||
.update-wizard-banner-details .update-wizard-error-list {
|
||
color: var(--danger, #ef4444);
|
||
}
|
||
.update-wizard-countdown {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.update-wizard-countdown[hidden] {
|
||
display: none !important;
|
||
}
|
||
.update-wizard-countdown span {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.update-wizard-countdown-bar {
|
||
height: 3px;
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.08));
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.update-wizard-countdown-bar-fill {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: var(--success, #22c55e);
|
||
transform-origin: left center;
|
||
animation: updateCountdownShrink 8s linear forwards;
|
||
}
|
||
@keyframes updateBannerSlide {
|
||
from { opacity: 0; transform: translateY(-6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes updateCountdownShrink {
|
||
from { transform: scaleX(1); }
|
||
to { transform: scaleX(0); }
|
||
}
|
||
.modal-footer.update-wizard-footer-enter {
|
||
animation: updateFooterFade 0.25s ease-out;
|
||
}
|
||
@keyframes updateFooterFade {
|
||
from { opacity: 0; transform: translateY(4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.update-wizard-bar-fill,
|
||
.update-phase,
|
||
.update-progress-log,
|
||
.update-wizard-banner,
|
||
.update-wizard-countdown-bar-fill,
|
||
.modal-footer.update-wizard-footer-enter,
|
||
.update-phase-state[data-state="done"] .material-icons.just-done {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
.update-backups {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.update-backup-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.03));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.branding-readability-alert {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--accent-yellow-muted);
|
||
border-radius: var(--radius-lg);
|
||
background: color-mix(in srgb, var(--accent-yellow-muted) 70%, transparent);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.branding-readability-alert[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.branding-readability-alert.has-errors {
|
||
border-color: var(--accent-red-muted);
|
||
background: color-mix(in srgb, var(--accent-red-muted) 70%, transparent);
|
||
}
|
||
|
||
.branding-readability-alert .material-icons {
|
||
color: var(--accent-yellow);
|
||
}
|
||
|
||
.branding-readability-alert.has-errors .material-icons {
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
.branding-readability-alert strong {
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.branding-readability-alert p {
|
||
margin: 0;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.update-backup-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.update-backup-info strong {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.update-backup-info .text-muted {
|
||
font-size: var(--font-size-xs, 0.75rem);
|
||
}
|
||
|
||
.update-backup-actions {
|
||
display: flex;
|
||
gap: var(--space-xs, 4px);
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.backup-retention-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--space-md);
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.03));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-md);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.backup-retention-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.backup-retention-label small {
|
||
font-weight: normal;
|
||
font-size: var(--font-size-xs, 0.75rem);
|
||
}
|
||
|
||
.backup-retention-controls {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.backup-retention-controls input[type="number"] {
|
||
width: 110px;
|
||
padding: 6px 10px;
|
||
background: var(--bg-secondary, rgba(0,0,0,0.2));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-sm, 4px);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.backup-summary {
|
||
margin-bottom: var(--space-sm);
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
|
||
/* commit list */
|
||
.update-commits {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.update-commit-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--space-sm);
|
||
padding: 4px 0;
|
||
font-size: var(--font-size-sm);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.update-commit-sha {
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.06));
|
||
border-radius: 4px;
|
||
color: var(--primary);
|
||
font-family: var(--font-mono, 'Fira Code', monospace);
|
||
}
|
||
|
||
.update-commit-msg {
|
||
flex: 1;
|
||
color: var(--text-primary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.update-commit-meta {
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
color: var(--text-muted, var(--text-secondary));
|
||
}
|
||
|
||
/* component breakdown */
|
||
.update-components {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.update-component-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: 6px var(--space-sm);
|
||
background: var(--bg-tertiary, rgba(255,255,255,0.03));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-sm, 6px);
|
||
}
|
||
|
||
.update-component-row .material-icons {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.update-component-label {
|
||
flex: 1;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.update-component-count {
|
||
font-size: var(--font-size-xs, 0.75rem);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.badge-sm {
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
}
|
||
|
||
/* server rebuild warning */
|
||
.update-warning {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
margin-top: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: rgba(255, 171, 0, 0.08);
|
||
border: 1px solid rgba(255, 171, 0, 0.25);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--font-size-sm);
|
||
color: #ffab00;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.update-warning .material-icons {
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ==================== Windows 11–inspired Updates tab ==================== */
|
||
|
||
#tab-updates.settings-tab-content {
|
||
max-width: 920px;
|
||
}
|
||
|
||
.win11-updates {
|
||
--win11-accent: #0067c0;
|
||
--win11-accent-hover: #005a9e;
|
||
--win11-card-bg: var(--bg-secondary, rgba(255, 255, 255, 0.04));
|
||
--win11-card-border: var(--border-color, rgba(255, 255, 255, 0.08));
|
||
--win11-page-bg: transparent;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 28px;
|
||
}
|
||
|
||
[data-theme="light"] .win11-updates {
|
||
--win11-accent: #0067c0;
|
||
--win11-accent-hover: #005696;
|
||
--win11-card-bg: #ffffff;
|
||
--win11-card-border: #e5e5e5;
|
||
}
|
||
|
||
.win11-updates-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Hero */
|
||
.win11-updates-hero {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: 20px 24px;
|
||
align-items: start;
|
||
padding: 4px 0 8px;
|
||
}
|
||
|
||
.win11-updates-hero-icon {
|
||
position: relative;
|
||
width: 72px;
|
||
height: 72px;
|
||
color: var(--win11-accent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.win11-updates-hero-svg {
|
||
display: block;
|
||
}
|
||
|
||
.win11-updates-hero-badge {
|
||
position: absolute;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 0 2px var(--bg-primary, #0d1117);
|
||
}
|
||
|
||
.win11-updates-hero-badge--warning {
|
||
background: #f7630c;
|
||
}
|
||
|
||
.win11-updates-hero-badge--success {
|
||
background: #107c10;
|
||
}
|
||
|
||
.win11-updates-hero-badge--error {
|
||
background: #c42b1c;
|
||
}
|
||
|
||
[data-theme="light"] .win11-updates-hero-badge {
|
||
box-shadow: 0 0 0 2px #f3f3f3;
|
||
}
|
||
|
||
.win11-updates-hero-badge .material-icons {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.win11-updates-hero-icon[data-state="success"] {
|
||
color: #107c10;
|
||
}
|
||
|
||
.win11-updates-hero-icon[data-state="warning"] {
|
||
color: var(--win11-accent);
|
||
}
|
||
|
||
.win11-updates-hero-icon[data-state="error"] {
|
||
color: #c42b1c;
|
||
}
|
||
|
||
.win11-updates-hero-icon[data-state="checking"] .win11-updates-hero-svg {
|
||
animation: spin 1.2s linear infinite;
|
||
}
|
||
|
||
.win11-updates-hero-body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.win11-updates-hero-headline {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin: 0 0 6px;
|
||
color: var(--text-primary);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.win11-updates-hero-desc {
|
||
margin: 0 0 12px;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
max-width: 52ch;
|
||
}
|
||
|
||
.win11-updates-meta {
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.win11-updates-meta .update-version-row {
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.win11-updates-meta .update-label {
|
||
min-width: 130px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.win11-updates-meta .update-value {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.win11-updates-hero-action {
|
||
align-self: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.win11-updates-primary-btn {
|
||
background: var(--win11-accent) !important;
|
||
border-color: var(--win11-accent) !important;
|
||
color: #fff !important;
|
||
border-radius: 4px;
|
||
padding: 8px 20px;
|
||
font-weight: 500;
|
||
min-height: 32px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.win11-updates-primary-btn:hover:not(:disabled) {
|
||
background: var(--win11-accent-hover) !important;
|
||
border-color: var(--win11-accent-hover) !important;
|
||
}
|
||
|
||
.win11-updates-primary-btn:disabled {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* Alerts stack */
|
||
.win11-updates-alerts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.win11-updates-alerts:empty {
|
||
display: none;
|
||
}
|
||
|
||
.win11-updates-alert {
|
||
margin: 0;
|
||
}
|
||
|
||
.update-preflight-info {
|
||
padding: 12px 14px;
|
||
border: 1px solid color-mix(in srgb, var(--win11-accent, #0067c0) 45%, transparent);
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--win11-accent, #0067c0) 10%, var(--bg-secondary, #161b22));
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.update-preflight-blocked {
|
||
border-color: color-mix(in srgb, #c42b1c 55%, transparent);
|
||
background: color-mix(in srgb, #c42b1c 8%, var(--bg-secondary, #161b22));
|
||
}
|
||
|
||
/* Available update card */
|
||
.win11-updates-available {
|
||
background: var(--win11-card-bg);
|
||
border: 1px solid var(--win11-card-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.win11-updates-available-title {
|
||
margin: 0;
|
||
padding: 14px 16px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid var(--win11-card-border);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.win11-updates-available-body {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.win11-updates-install-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.win11-updates-checkbox {
|
||
margin: 0;
|
||
}
|
||
|
||
.win11-updates-install-btn {
|
||
min-width: 140px;
|
||
}
|
||
|
||
/* More options */
|
||
.win11-updates-section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.win11-updates-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.win11-updates-option {
|
||
background: var(--win11-card-bg);
|
||
border: 1px solid var(--win11-card-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.win11-updates-option-row {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr auto;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
min-height: 56px;
|
||
}
|
||
|
||
.win11-updates-option-inline .win11-updates-option-row {
|
||
grid-template-columns: 28px 1fr auto;
|
||
}
|
||
|
||
.win11-updates-option-icon {
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.win11-updates-option-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.win11-updates-option-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.win11-updates-option-desc {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.win11-updates-select {
|
||
min-width: 180px;
|
||
max-width: 220px;
|
||
padding: 6px 28px 6px 10px;
|
||
font-size: 13px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--win11-card-border);
|
||
background: var(--bg-primary, #0d1117);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 8px center;
|
||
}
|
||
|
||
[data-theme="light"] .win11-updates-select {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.win11-updates-option-meta {
|
||
padding: 0 16px 12px 56px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.win11-updates-option-meta-sep {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.win11-updates-option-hint {
|
||
flex-basis: 100%;
|
||
margin: 6px 0 0;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Expandable option rows */
|
||
.win11-updates-option > summary {
|
||
list-style: none;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.win11-updates-option > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.win11-updates-option > summary:hover {
|
||
background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
|
||
}
|
||
|
||
[data-theme="light"] .win11-updates-option > summary:hover {
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.win11-updates-option-chevron {
|
||
font-size: 20px;
|
||
color: var(--text-secondary);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.win11-updates-option[open] .win11-updates-option-chevron {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.win11-updates-option-body {
|
||
padding: 0 16px 16px;
|
||
border-top: 1px solid var(--win11-card-border);
|
||
}
|
||
|
||
.win11-updates-option-body .backup-retention-row {
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.win11-updates-advanced-body {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.win11-updates-advanced-note {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 720px) {
|
||
.win11-updates-hero {
|
||
grid-template-columns: auto 1fr;
|
||
}
|
||
|
||
.win11-updates-hero-action {
|
||
grid-column: 1 / -1;
|
||
justify-self: start;
|
||
}
|
||
|
||
.win11-updates-option-row {
|
||
grid-template-columns: 28px 1fr;
|
||
}
|
||
|
||
.win11-updates-option-inline .win11-updates-select,
|
||
.win11-updates-option-chevron {
|
||
grid-column: 2;
|
||
justify-self: start;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.win11-updates-option-meta {
|
||
padding-left: 16px;
|
||
}
|
||
}
|
||
|
||
/* ==================== Settings v2 shell (horizontal top tabs) ==================== */
|
||
|
||
.settings-shell {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--space-lg);
|
||
align-items: start;
|
||
}
|
||
|
||
.settings-shell-main {
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-shell-nav {
|
||
--settings-nav-bleed: 0px;
|
||
--settings-nav-bleed-x: 0px;
|
||
display: block;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
border-bottom: 1px solid var(--border-primary);
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
position: sticky;
|
||
top: calc(-1 * var(--settings-nav-bleed));
|
||
padding-top: var(--settings-nav-bleed);
|
||
margin-top: calc(-1 * var(--settings-nav-bleed));
|
||
margin-inline: calc(-1 * var(--settings-nav-bleed-x));
|
||
padding-inline: var(--settings-nav-bleed-x);
|
||
z-index: 2;
|
||
/* Keep labels readable while scrolling long forms / branding wallpaper */
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent);
|
||
}
|
||
|
||
/* Classic layout: cancel .main-content padding so sticky bar is flush */
|
||
.app-page:not(.ux35-page) .settings-shell-nav {
|
||
--settings-nav-bleed: var(--space-lg);
|
||
--settings-nav-bleed-x: var(--space-lg);
|
||
}
|
||
|
||
/* Horizontal scroll lives on the track — not the sticky outer (avoids sticky breakage) */
|
||
.settings-shell-nav-track {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
gap: 4px;
|
||
overflow-x: auto;
|
||
overscroll-behavior-x: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* Settings track: no extra bottom padding from .mobile-tabs-scroll (keeps bar compact) */
|
||
.settings-shell-nav-track.mobile-tabs-scroll {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.settings-shell-nav .settings-shell-tab,
|
||
.settings-shell-nav .settings-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
flex: 0 0 auto;
|
||
padding: 10px 16px;
|
||
border: none;
|
||
border-radius: 0;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -1px;
|
||
background: none;
|
||
background-color: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
font-weight: var(--font-weight-medium);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
min-height: 44px;
|
||
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
|
||
}
|
||
|
||
.settings-shell-nav .settings-shell-tab .material-icons,
|
||
.settings-shell-nav .settings-tab .material-icons {
|
||
font-size: 18px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.settings-shell-nav .settings-shell-tab:hover,
|
||
.settings-shell-nav .settings-tab:hover {
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.settings-shell-nav .settings-shell-tab.active,
|
||
.settings-shell-nav .settings-shell-tab[aria-selected="true"],
|
||
.settings-shell-nav .settings-tab.active,
|
||
.settings-shell-nav .settings-tab[aria-selected="true"] {
|
||
background: transparent;
|
||
background-color: transparent;
|
||
color: var(--accent-blue);
|
||
border-bottom-color: var(--accent-blue);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.settings-shell-nav .settings-shell-tab:focus-visible,
|
||
.settings-shell-nav .settings-tab:focus-visible {
|
||
outline: 2px solid var(--accent-blue);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.settings-search {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-lg);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
}
|
||
|
||
.settings-search > .material-icons {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.settings-search .form-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
|
||
.settings-search-status {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-muted);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.settings-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.settings-panel,
|
||
.settings-section {
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
overflow: hidden;
|
||
}
|
||
|
||
[data-theme="light"] .settings-panel,
|
||
[data-theme="light"] .settings-section {
|
||
background: #ffffff;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.settings-panel-header,
|
||
.settings-section-header {
|
||
padding: var(--space-md) var(--space-lg);
|
||
border-bottom: 1px solid var(--border-primary);
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.settings-panel-title,
|
||
.settings-section-title {
|
||
font-size: var(--font-size-md);
|
||
font-weight: var(--font-weight-semibold);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
margin: 0;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.settings-panel-title .material-icons,
|
||
.settings-section-title .material-icons {
|
||
color: var(--accent-blue);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.settings-panel-desc,
|
||
.settings-section-desc {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin: var(--space-xs) 0 0;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.settings-panel-body,
|
||
.settings-section-body {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.settings-panel-body > .settings-form {
|
||
max-width: 560px;
|
||
}
|
||
|
||
.settings-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: var(--space-md);
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-tertiary);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.settings-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.settings-row-label {
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-row-label .form-label {
|
||
margin-bottom: 2px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.settings-row-hint {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
}
|
||
|
||
.settings-row-control {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.settings-choice-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.settings-choice-card {
|
||
position: relative;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
|
||
.settings-choice-card input[type="radio"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 1px;
|
||
height: 1px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.settings-choice-card-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-md);
|
||
border: 2px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-tertiary);
|
||
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
|
||
min-height: 100%;
|
||
}
|
||
|
||
.settings-choice-card:hover .settings-choice-card-inner {
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.settings-choice-card input:checked + .settings-choice-card-inner,
|
||
.settings-choice-card input:focus-visible + .settings-choice-card-inner {
|
||
border-color: var(--accent-blue);
|
||
background: var(--accent-blue-muted);
|
||
box-shadow: 0 0 0 1px var(--accent-blue);
|
||
}
|
||
|
||
.settings-choice-card:focus-within .settings-choice-card-inner {
|
||
outline: 2px solid var(--accent-blue);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.settings-choice-card-icon {
|
||
color: var(--accent-blue);
|
||
font-size: 22px;
|
||
}
|
||
|
||
.settings-choice-card-title {
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.settings-choice-card-desc {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.settings-auth-subnav {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-sm);
|
||
margin-bottom: var(--space-lg);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
}
|
||
|
||
.settings-auth-subtab {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
font-weight: var(--font-weight-medium);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.settings-auth-subtab.active,
|
||
.settings-auth-subtab[aria-selected="true"] {
|
||
background: var(--accent-blue-muted);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.settings-auth-panel {
|
||
display: none;
|
||
}
|
||
|
||
.settings-auth-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.settings-collapsible {
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-tertiary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.settings-collapsible > summary {
|
||
padding: var(--space-md);
|
||
cursor: pointer;
|
||
font-weight: var(--font-weight-semibold);
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.settings-collapsible > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.settings-collapsible > summary::before {
|
||
content: "▸";
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.settings-collapsible[open] > summary::before {
|
||
content: "▾";
|
||
}
|
||
|
||
.settings-collapsible-body {
|
||
padding: 0 var(--space-md) var(--space-md);
|
||
}
|
||
|
||
.server-info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.server-info-item {
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.backup-stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.backup-stat-card {
|
||
padding: var(--space-md);
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.backup-stat-card .backup-stat-label {
|
||
display: block;
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.backup-stat-card .backup-stat-value {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--font-size-md);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Branding v2 — solid surfaces */
|
||
.branding-panel-hero {
|
||
padding: var(--space-lg);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-xl);
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.branding-panel-hero h2 {
|
||
margin: 0;
|
||
font-size: var(--font-size-xl);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.branding-panel-hero p {
|
||
margin: var(--space-sm) 0 0;
|
||
color: var(--text-secondary);
|
||
font-size: var(--font-size-sm);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.branding-panel-hero-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
margin-bottom: var(--space-xs);
|
||
color: var(--accent-blue);
|
||
font-size: var(--font-size-xs);
|
||
font-weight: var(--font-weight-semibold);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.branding-panel-hero-steps {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
.branding-panel-hero-steps span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
padding: var(--space-xs) var(--space-sm);
|
||
border-radius: var(--radius-full);
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.branding-studio-toolbar,
|
||
.branding-module-nav,
|
||
.branding-live-preview {
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
}
|
||
|
||
.branding-hero {
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
border-color: var(--border-primary);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.branding-hero h2 {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.branding-hero p {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.branding-hero::after {
|
||
display: none;
|
||
}
|
||
|
||
.branding-hero-kicker {
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.branding-hero-steps span {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border-primary);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.advanced-config-sidebar,
|
||
.advanced-config-editor-wrap {
|
||
background: var(--bg-secondary);
|
||
background-color: var(--bg-secondary);
|
||
border: 1px solid var(--border-primary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.settings-row {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.settings-row-control {
|
||
justify-self: start;
|
||
}
|
||
}
|