@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/src-web/css/settings/base.css

@@ -1,92 +1,35 @@
 /* web: settings/base.css — split from settings.css, rules kept in original order */
+/* Scope element rules with :where() so lazy loading cannot restyle other pages
+   and existing specificity relationships inside Settings remain intact. */
 
-:root {
-    --bg-color: #101010;
-    --bg-gradient: #101010;
-    --panel-bg: #101010;
-    --sidebar-bg: #1b1b1c;
-    --chrome-bg: #101010;
-    --surface-bg: #151515;
-    --surface-strong: #1d1d1e;
-    --surface-hover: #29292b;
-    --input-bg: #2f2f30;
-    --input-focus-bg: #343435;
-    --text-main: #e8e8ea;
-    --text-muted: #8c8c90;
-    --text-soft: #c4c4c7;
-    --accent: #4f83e6;
-    --accent-hover: #75a2ff;
-    --accent-soft: #343435;
-    --border: rgba(255, 255, 255, 0.075);
-    --border-strong: rgba(255, 255, 255, 0.12);
-    --danger: #ff4d4d;
-    --placeholder: #77777c;
-    --shadow: 0 24px 72px rgba(0, 0, 0, 0.5);
-    --glass-blur: none;
-}
-
-[data-theme="light"] {
-    --bg-color: #eef2f7;
-    --bg-gradient: linear-gradient(145deg, #f8fafc 0%, #e8edf5 100%);
-    --panel-bg: rgba(255, 255, 255, 0.94);
-    --sidebar-bg: rgba(241, 245, 249, 0.82);
-    --chrome-bg: rgba(255, 255, 255, 0.82);
-    --surface-bg: rgba(15, 23, 42, 0.035);
-    --surface-strong: rgba(15, 23, 42, 0.065);
-    --surface-hover: rgba(15, 23, 42, 0.085);
-    --input-bg: rgba(15, 23, 42, 0.045);
-    --input-focus-bg: #ffffff;
-    --text-main: #0f172a;
-    --text-muted: #64748b;
-    --text-soft: #334155;
-    --border: rgba(15, 23, 42, 0.12);
-    --border-strong: rgba(15, 23, 42, 0.18);
-    --placeholder: #8590a2;
-    --shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
-}
-
-[data-theme="midnight"] {
-    --bg-color: #020617;
-    --bg-gradient: linear-gradient(145deg, #020617 0%, #080a22 55%, #120828 100%);
-    --panel-bg: rgba(5, 8, 24, 0.94);
-    --sidebar-bg: rgba(2, 6, 23, 0.82);
-    --chrome-bg: rgba(2, 6, 23, 0.78);
-    --surface-bg: rgba(99, 102, 241, 0.055);
-    --surface-strong: rgba(99, 102, 241, 0.085);
-    --surface-hover: rgba(99, 102, 241, 0.13);
-    --input-bg: rgba(0, 0, 0, 0.46);
-    --input-focus-bg: rgba(0, 0, 0, 0.64);
-    --text-main: #e2e8f0;
-    --text-muted: #74809a;
-    --text-soft: #bac4d6;
-    --border: rgba(99, 102, 241, 0.16);
-    --border-strong: rgba(99, 102, 241, 0.26);
-    --placeholder: #68708a;
-}
-
-* {
+.settings-container {
+    --sidebar-bg: var(--bg-surface-soft);
+}
+
+:where(.settings-container),
+:where(.settings-container) * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
-body {
+:where(.settings-container) {
     height: 100vh;
     overflow: hidden;
     background: transparent;
-    color: var(--text-main);
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: var(--text-primary);
+    font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
     user-select: none;
 }
 
-button,
-input,
-select,
-textarea {
+:where(.settings-container) button,
+:where(.settings-container) input,
+:where(.settings-container) select,
+:where(.settings-container) textarea {
     font: inherit;
 }
 
-button {
+:where(.settings-container) button {
     -webkit-app-region: no-drag;
 }
 
@@ -95,7 +38,8 @@ button {
     grid-template-rows: auto minmax(0, 1fr) auto;
     height: 100%;
     overflow: hidden;
-    background: var(--panel-bg);
+    background: var(--bg-overlay);
+    color: var(--text-primary);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow);
@@ -117,7 +61,7 @@ button {
 .settings-footer {
     display: flex;
     align-items: center;
-    background: var(--panel-bg);
+    background: var(--bg-overlay);
     border-color: var(--border);
     backdrop-filter: var(--glass-blur);
 }
@@ -145,12 +89,12 @@ button {
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-lg);
     background: var(--surface-strong);
-    color: var(--accent-hover);
+    color: var(--interactive-fg-hover);
     font-size: 1rem;
 }
 
-h1 {
-    color: var(--text-main);
+:where(.settings-container) h1 {
+    color: var(--text-primary);
     font-size: 1.02rem;
     font-weight: 600;
     letter-spacing: 0;
@@ -181,8 +125,8 @@ h1 {
 }
 
 .close-btn:hover {
-    background: rgba(239, 68, 68, 0.12);
-    border-color: rgba(239, 68, 68, 0.28);
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
     color: var(--danger);
     transform: translateY(-50%) scale(1.05);
 }
@@ -200,6 +144,7 @@ h1 {
     padding: 24px 8px 12px;
     overflow-y: auto;
     background: var(--sidebar-bg);
+    color: var(--text-primary);
     border-right: 1px solid var(--border);
 }
 
@@ -213,7 +158,7 @@ h1 {
     border: 1px solid transparent;
     border-radius: var(--radius-sm);
     background: transparent;
-    color: var(--text-muted);
+    color: var(--text-secondary);
     cursor: pointer;
     text-align: left;
     transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
@@ -237,14 +182,14 @@ h1 {
 
 .tab-btn:hover {
     background: var(--surface-hover);
-    color: var(--text-main);
+    color: var(--text-primary);
     transform: none;
 }
 
 .tab-btn.active {
     background: var(--surface-strong);
     border-color: transparent;
-    color: var(--text-main);
+    color: var(--text-primary);
     box-shadow: none;
 }
 
@@ -253,6 +198,8 @@ h1 {
     min-width: 0;
     overflow-y: auto;
     padding: 24px 32px 32px;
+    background: var(--bg-overlay);
+    color: var(--text-primary);
 }
 
 .web-safe-notice {
@@ -261,7 +208,7 @@ h1 {
     margin: 0 auto 18px;
     padding: 0 0 14px;
     border-bottom: 1px solid var(--border);
-    color: var(--text-main);
+    color: var(--text-primary);
 }
 
 .web-safe-notice strong,
@@ -340,11 +287,11 @@ h1 {
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.08em;
-    text-transform: uppercase;
+    text-transform: none;
 }
 
 .section-title {
-    color: var(--text-main);
+    color: var(--text-primary);
     font-size: 1rem;
     font-weight: 500;
 }
@@ -414,12 +361,12 @@ h1 {
     font-weight: 500;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="url"],
-select,
-textarea {
+:where(.settings-container) input[type="text"],
+:where(.settings-container) input[type="password"],
+:where(.settings-container) input[type="email"],
+:where(.settings-container) input[type="url"],
+:where(.settings-container) select,
+:where(.settings-container) textarea {
     width: 100%;
     min-height: 32px;
     padding: 6px 10px;
@@ -433,7 +380,7 @@ textarea {
     transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
 
-select {
+:where(.settings-container) select {
     cursor: pointer;
     background-color: var(--input-bg) !important;
     color: var(--text-main) !important;
@@ -444,25 +391,25 @@ select {
     justify-self: end;
 }
 
-select:focus {
+:where(.settings-container) select:focus {
     background-color: var(--input-focus-bg) !important;
 }
 
-select option {
+:where(.settings-container) select option {
     background-color: var(--input-bg) !important;
     color: var(--text-main) !important;
 }
 
-select option:checked {
+:where(.settings-container) select option:checked {
     background: linear-gradient(var(--accent), var(--accent)) !important;
-    color: #ffffff !important;
+    color: var(--accent-contrast, #ffffff) !important;
 }
 
-[data-theme="light"] select {
+[data-theme="light"] :where(.settings-container) select {
     color-scheme: light;
 }
 
-textarea {
+:where(.settings-container) textarea {
     min-height: 74px;
     resize: vertical;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -470,20 +417,20 @@ textarea {
     line-height: 1.45;
 }
 
-input:focus,
-select:focus,
-textarea:focus {
+:where(.settings-container) input:focus,
+:where(.settings-container) select:focus,
+:where(.settings-container) textarea:focus {
     background: var(--input-focus-bg);
     border-color: var(--accent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
-input::placeholder,
-textarea::placeholder {
+:where(.settings-container) input::placeholder,
+:where(.settings-container) textarea::placeholder {
     color: var(--placeholder);
 }
 
-input[type="color"] {
+:where(.settings-container) input[type="color"] {
     width: 44px;
     height: 34px;
     padding: 3px;
@@ -528,8 +475,8 @@ input[type="color"] {
 }
 
 .toggle-visibility:hover {
-    background: var(--accent-soft);
-    border-color: rgba(16, 185, 129, 0.36);
+    background: var(--accent-soft, var(--bg-surface-soft));
+    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
     color: var(--text-main);
 }
 
@@ -544,7 +491,7 @@ input[type="color"] {
 }
 
 .hint a {
-    color: var(--accent-hover);
+    color: var(--interactive-fg-hover);
     text-decoration: none;
 }
 
@@ -615,17 +562,19 @@ input[type="color"] {
     bottom: 3px;
     border-radius: 50%;
     background: var(--text-muted);
-    transition: transform 0.18s, background 0.18s;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease;
 }
 
-input:checked + .settings-toggle-slider {
+:where(.settings-container) input:checked + .settings-toggle-slider {
     background: var(--accent);
-    border-color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
 }
 
-input:checked + .settings-toggle-slider::before {
+:where(.settings-container) input:checked + .settings-toggle-slider::before {
     transform: translateX(20px);
-    background: #ffffff;
+    background: var(--accent-contrast, #ffffff);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
 }
 
 .slider-stack {
@@ -664,16 +613,16 @@ input:checked + .settings-toggle-slider::before {
     border: 3px solid var(--panel-bg);
     border-radius: 50%;
     background: var(--accent);
-    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.5), var(--shadow-sm);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), var(--shadow-sm);
 }
 
 .range-value {
     min-width: 68px;
     padding: 5px 9px;
-    border: 1px solid rgba(16, 185, 129, 0.3);
+    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
     border-radius: var(--radius-md);
-    background: var(--accent-soft);
-    color: var(--accent-hover);
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+    color: var(--interactive-fg-hover);
     font-size: 0.78rem;
     font-weight: 600;
     text-align: center;
@@ -714,7 +663,7 @@ input:checked + .settings-toggle-slider::before {
 .btn-primary {
     border: 1px solid transparent;
     background: var(--accent);
-    color: #ffffff;
+    color: var(--accent-contrast, var(--text-on-accent));
     box-shadow: none;
 }
 
@@ -728,26 +677,27 @@ input:checked + .settings-toggle-slider::before {
 
 .btn-secondary {
     border: 1px solid var(--border);
-    background: #252526;
-    color: var(--text-soft);
+    background: var(--surface-strong);
+    color: var(--text-primary);
 }
 
 .btn-secondary:hover {
+    background: var(--surface-hover);
     border-color: var(--border-strong);
-    color: var(--text-main);
+    color: var(--text-primary);
 }
 
 .btn-danger,
 .btn-disconnect {
-    border: 1px solid rgba(239, 68, 68, 0.36);
-    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
+    background: color-mix(in srgb, var(--danger) 10%, transparent);
     color: var(--danger);
 }
 
 .btn-danger:hover,
 .btn-disconnect:hover {
     background: var(--danger);
-    color: #ffffff;
+    color: var(--pure-white);
 }
 
 .full-width {
@@ -799,7 +749,7 @@ input:checked + .settings-toggle-slider::before {
 }
 
 .color-dot.active {
-    border-color: #ffffff;
+    border-color: var(--text-on-accent);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 44%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
 }
 
@@ -855,14 +805,14 @@ input:checked + .settings-toggle-slider::before {
     white-space: nowrap;
 }
 
-kbd {
+:where(.settings-container) kbd {
     min-width: 30px;
     padding: 4px 8px;
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-sm);
     background: var(--input-bg);
-    color: var(--accent-hover);
-    font-family: 'Outfit', sans-serif;
+    color: var(--interactive-fg-hover);
+    font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
     font-size: 0.76rem;
     font-weight: 700;
     text-align: center;
@@ -997,14 +947,14 @@ kbd {
 }
 
 .bridge-card.active {
-    background: var(--surface-strong, rgba(16, 185, 129, 0.04));
-    border-color: rgba(16, 185, 129, 0.3);
+    background: color-mix(in srgb, var(--accent) 4%, var(--surface-bg, transparent));
+    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 .bridge-status-pill.active {
-    background: rgba(16, 185, 129, 0.15);
-    color: #34d399;
-    border: 1px solid rgba(16, 185, 129, 0.3);
+    background: color-mix(in srgb, var(--accent) 15%, transparent);
+    color: var(--mint-400);
+    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 .settings-nav-search {
@@ -1026,7 +976,7 @@ kbd {
     border: 0;
     padding: 0;
     background: transparent;
-    color: var(--text-main);
+    color: var(--text-primary);
     font-size: 0.83rem;
 }
 
@@ -1045,3 +995,272 @@ kbd {
     font-weight: 600;
     letter-spacing: 0.04em;
 }
+
+/* ─── Light Mode Overrides for Settings ───────────────────────────────────── */
+
+[data-theme="light"] .settings-container {
+    background: #ffffff;
+    color: #0f172a;
+    border: 1px solid rgba(15, 23, 42, 0.12);
+    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
+}
+
+[data-theme="light"] .settings-header {
+    background: #ffffff;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+[data-theme="light"] .settings-header h1 {
+    color: #0f172a;
+}
+
+[data-theme="light"] .settings-header p {
+    color: #64748b;
+}
+
+[data-theme="light"] .settings-header .settings-icon {
+    background: rgba(16, 185, 129, 0.1);
+    color: #059669;
+    border-color: rgba(16, 185, 129, 0.25);
+}
+
+[data-theme="light"] .close-btn {
+    color: #64748b;
+}
+
+[data-theme="light"] .close-btn:hover {
+    background: #fee2e2;
+    border-color: #fca5a5;
+    color: #dc2626;
+}
+
+[data-theme="light"] .settings-sidebar {
+    background: #f8fafc;
+    border-right: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .settings-nav-search {
+    background: #ffffff;
+    border: 1px solid rgba(15, 23, 42, 0.14);
+    color: #64748b;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+[data-theme="light"] .settings-nav-search input {
+    color: #0f172a;
+}
+
+[data-theme="light"] .settings-nav-search input::placeholder {
+    color: #94a3b8;
+}
+
+[data-theme="light"] .settings-nav-group-label {
+    color: #64748b;
+    font-weight: 700;
+}
+
+[data-theme="light"] .tab-btn {
+    color: #475569;
+}
+
+[data-theme="light"] .tab-btn:hover {
+    background: #f1f5f9;
+    color: #0f172a;
+}
+
+[data-theme="light"] .tab-btn.active {
+    background: #ffffff;
+    color: #0f172a;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+    font-weight: 600;
+}
+
+[data-theme="light"] .tab-btn.active span {
+    color: #059669;
+}
+
+[data-theme="light"] .settings-content {
+    background: #ffffff;
+    color: #0f172a;
+}
+
+[data-theme="light"] .web-safe-notice {
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .web-safe-notice strong {
+    color: #0f172a;
+}
+
+[data-theme="light"] .web-safe-notice span {
+    color: #64748b;
+}
+
+[data-theme="light"] .section-kicker {
+    color: #059669;
+    font-weight: 700;
+}
+
+[data-theme="light"] .section-title {
+    color: #0f172a;
+    font-weight: 600;
+}
+
+[data-theme="light"] .section-description {
+    color: #475569;
+}
+
+[data-theme="light"] .setting-section {
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .section-heading {
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .setting-row {
+    border-top: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .setting-row label,
+[data-theme="light"] .toggle-row label {
+    color: #1e293b;
+    font-weight: 500;
+}
+
+[data-theme="light"] .hint {
+    color: #64748b;
+}
+
+/* Form inputs */
+[data-theme="light"] :where(.settings-container) input[type="text"],
+[data-theme="light"] :where(.settings-container) input[type="password"],
+[data-theme="light"] :where(.settings-container) input[type="email"],
+[data-theme="light"] :where(.settings-container) input[type="url"],
+[data-theme="light"] :where(.settings-container) textarea {
+    background: #ffffff;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+    color: #0f172a;
+}
+
+[data-theme="light"] :where(.settings-container) input[type="text"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="password"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="email"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="url"]:focus,
+[data-theme="light"] :where(.settings-container) textarea:focus {
+    background: #ffffff;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
+}
+
+[data-theme="light"] :where(.settings-container) select {
+    color-scheme: light;
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+}
+
+[data-theme="light"] :where(.settings-container) select:focus {
+    background-color: #ffffff !important;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
+}
+
+[data-theme="light"] :where(.settings-container) select option {
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+}
+
+[data-theme="light"] .toggle-visibility {
+    background: #ffffff;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+    color: #64748b;
+}
+
+[data-theme="light"] .toggle-visibility:hover {
+    background: #f1f5f9;
+    border-color: rgba(15, 23, 42, 0.28);
+    color: #0f172a;
+}
+
+/* Toggle switch */
+[data-theme="light"] .settings-toggle-slider {
+    background: #cbd5e1;
+    border: 1px solid #94a3b8;
+}
+
+[data-theme="light"] .settings-toggle-slider::before {
+    background: #ffffff;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
+}
+
+[data-theme="light"] :where(.settings-container) input:checked + .settings-toggle-slider {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+[data-theme="light"] :where(.settings-container) input:checked + .settings-toggle-slider::before {
+    background: #ffffff;
+}
+
+/* Range slider */
+[data-theme="light"] .range-slider::-webkit-slider-runnable-track {
+    background: #e2e8f0;
+}
+
+[data-theme="light"] .range-slider::-webkit-slider-thumb {
+    background: var(--accent);
+    border: 3px solid #ffffff;
+    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
+}
+
+/* Buttons */
+[data-theme="light"] .btn-secondary {
+    background: #eef2f7;
+    border: 1px solid rgba(15, 23, 42, 0.22);
+    color: #1e293b;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+[data-theme="light"] .btn-secondary:hover {
+    background: #e2e8f0;
+    border-color: rgba(15, 23, 42, 0.36);
+    color: #0f172a;
+    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
+}
+
+[data-theme="light"] .btn-primary {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border: 1px solid transparent;
+    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
+}
+
+[data-theme="light"] .btn-primary:hover {
+    background: var(--accent-hover);
+    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
+}
+
+/* Footer */
+[data-theme="light"] .settings-footer {
+    background: #f8fafc;
+    border-top: 1px solid rgba(15, 23, 42, 0.08);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+[data-theme="light"] .settings-footer-version,
+[data-theme="light"] .settings-footer-link {
+    color: #64748b;
+}
+
+[data-theme="light"] .settings-footer-link:hover {
+    color: #0f172a;
+}
+
+[data-theme="light"] .settings-footer-separator {
+    color: rgba(15, 23, 42, 0.16);
+}