@pheem49/mint 1.14.0 → 1.15.0

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

@@ -1,67 +1,7 @@
 /* desktop: settings/base.css — split from settings.css, rules kept in original order */
 
 :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;
+    --sidebar-bg: var(--bg-surface-soft);
 }
 
 * {
@@ -74,7 +14,7 @@ body {
     height: 100vh;
     overflow: hidden;
     background: transparent;
-    color: var(--text-main);
+    color: var(--text-primary);
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     user-select: none;
 }
@@ -95,36 +35,14 @@ 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);
     opacity: 1;
 }
 
-/* Settings rendered as an in-app modal over the main window, instead of a
-   separate OS window. */
-.settings-modal-overlay {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.45);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-    z-index: 80;
-    padding: 24px;
-}
-
-.settings-modal {
-    width: min(1180px, 95vw);
-    height: min(780px, 88vh);
-    overflow: hidden;
-    border-radius: var(--radius-xl);
-    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
-}
-
 @keyframes appEntrance {
     from {
         opacity: 0;
@@ -140,7 +58,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);
 }
@@ -168,12 +86,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);
+    color: var(--text-primary);
     font-size: 1.02rem;
     font-weight: 600;
     letter-spacing: 0;
@@ -204,8 +122,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);
 }
@@ -223,6 +141,7 @@ h1 {
     padding: 24px 8px 12px;
     overflow-y: auto;
     background: var(--sidebar-bg);
+    color: var(--text-primary);
     border-right: 1px solid var(--border);
 }
 
@@ -236,7 +155,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;
@@ -260,14 +179,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;
 }
 
@@ -276,6 +195,34 @@ h1 {
     min-width: 0;
     overflow-y: auto;
     padding: 24px 32px 32px;
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+}
+
+.web-safe-notice {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto 18px;
+    padding: 0 0 14px;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-primary);
+}
+
+.web-safe-notice strong,
+.web-safe-notice span {
+    display: block;
+}
+
+.web-safe-notice strong {
+    font-size: 0.82rem;
+    font-weight: 750;
+}
+
+.web-safe-notice span {
+    margin-top: 3px;
+    color: var(--text-muted);
+    font-size: 0.76rem;
+    line-height: 1.45;
 }
 
 .settings-content::-webkit-scrollbar,
@@ -337,11 +284,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;
 }
@@ -452,7 +399,7 @@ select option {
 
 select option:checked {
     background: linear-gradient(var(--accent), var(--accent)) !important;
-    color: #ffffff !important;
+    color: var(--accent-contrast, #ffffff) !important;
 }
 
 [data-theme="light"] select {
@@ -525,8 +472,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);
 }
 
@@ -541,7 +488,7 @@ input[type="color"] {
 }
 
 .hint a {
-    color: var(--accent-hover);
+    color: var(--interactive-fg-hover);
     text-decoration: none;
 }
 
@@ -612,17 +559,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 {
     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 {
     transform: translateX(20px);
-    background: #ffffff;
+    background: var(--accent-contrast, #ffffff);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
 }
 
 .slider-stack {
@@ -661,16 +610,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;
@@ -698,10 +647,20 @@ input:checked + .settings-toggle-slider::before {
     transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
 }
 
+.btn-primary:disabled,
+.btn-secondary:disabled,
+.btn-danger:disabled,
+.btn-connect:disabled,
+.btn-disconnect:disabled {
+    opacity: 0.46;
+    cursor: not-allowed;
+    transform: none;
+}
+
 .btn-primary {
     border: 1px solid transparent;
     background: var(--accent);
-    color: #ffffff;
+    color: var(--accent-contrast, var(--text-on-accent));
     box-shadow: none;
 }
 
@@ -715,32 +674,38 @@ 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 {
     width: 100%;
 }
 
+.web-safe-footer-note {
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
 .theme-card.active {
     border-color: var(--accent);
     color: var(--text-main);
@@ -781,7 +746,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);
 }
 
@@ -843,7 +808,7 @@ kbd {
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-sm);
     background: var(--input-bg);
-    color: var(--accent-hover);
+    color: var(--interactive-fg-hover);
     font-family: 'Outfit', sans-serif;
     font-size: 0.76rem;
     font-weight: 700;
@@ -979,8 +944,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: 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 {
@@ -1002,7 +973,7 @@ kbd {
     border: 0;
     padding: 0;
     background: transparent;
-    color: var(--text-main);
+    color: var(--text-primary);
     font-size: 0.83rem;
 }
 
@@ -1022,8 +993,271 @@ kbd {
     letter-spacing: 0.04em;
 }
 
-.bridge-status-pill.active {
-    background: rgba(16, 185, 129, 0.15);
-    color: #34d399;
-    border: 1px solid rgba(16, 185, 129, 0.3);
+/* ─── 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"] input[type="text"],
+[data-theme="light"] input[type="password"],
+[data-theme="light"] input[type="email"],
+[data-theme="light"] input[type="url"],
+[data-theme="light"] textarea {
+    background: #ffffff;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+    color: #0f172a;
+}
+
+[data-theme="light"] input[type="text"]:focus,
+[data-theme="light"] input[type="password"]:focus,
+[data-theme="light"] input[type="email"]:focus,
+[data-theme="light"] input[type="url"]:focus,
+[data-theme="light"] textarea:focus {
+    background: #ffffff;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
+}
+
+[data-theme="light"] select {
+    color-scheme: light;
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+}
+
+[data-theme="light"] 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"] 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"] input:checked + .settings-toggle-slider {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+[data-theme="light"] 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);
 }