@pheem49/mint 1.5.5 → 1.6.1

package/src/{UI → renderer/src/css}/settings.css

@@ -90,7 +90,7 @@ button {
 
 .settings-container {
     display: grid;
-    grid-template-rows: 0 minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr) auto;
     height: 100vh;
     overflow: hidden;
     background: var(--panel-bg);
@@ -124,13 +124,15 @@ button {
     -webkit-app-region: drag;
     position: relative;
     z-index: 3;
-    min-height: 0;
-    padding: 0;
-    border-bottom: 0;
+    min-height: 64px;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border);
 }
 
 .header-left {
-    display: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .settings-icon {
@@ -160,7 +162,8 @@ h1 {
 
 .close-btn {
     position: absolute;
-    top: 24px;
+    top: 50%;
+    transform: translateY(-50%);
     right: 24px;
     z-index: 5;
     display: grid;
@@ -172,13 +175,14 @@ h1 {
     background: transparent;
     color: var(--text-muted);
     cursor: pointer;
-    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
 }
 
 .close-btn:hover {
     background: rgba(239, 68, 68, 0.12);
     border-color: rgba(239, 68, 68, 0.28);
     color: var(--danger);
+    transform: translateY(-50%) scale(1.05);
 }
 
 .settings-body {
@@ -191,7 +195,7 @@ h1 {
 .settings-sidebar {
     width: 194px;
     min-width: 194px;
-    padding: 96px 8px 12px;
+    padding: 24px 8px 12px;
     overflow-y: auto;
     background: var(--sidebar-bg);
     border-right: 1px solid var(--border);
@@ -218,7 +222,9 @@ h1 {
 }
 
 .tab-btn span {
-    display: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .tab-btn strong {
@@ -244,7 +250,7 @@ h1 {
     flex: 1;
     min-width: 0;
     overflow-y: auto;
-    padding: 84px 92px 42px;
+    padding: 24px 32px 32px;
 }
 
 .settings-content::-webkit-scrollbar,
@@ -262,7 +268,9 @@ h1 {
     display: none;
     flex-direction: column;
     gap: 18px;
+    width: 100%;
     max-width: 624px;
+    margin: 0 auto;
     animation: fadeTab 0.18s ease;
 }
 
@@ -339,11 +347,11 @@ h1 {
 .setting-row {
     min-width: 0;
     display: grid;
-    grid-template-columns: minmax(180px, 1fr) minmax(180px, 220px);
+    grid-template-columns: 220px 1fr;
     align-items: center;
     gap: 18px;
     min-height: 48px;
-    padding: 10px 12px;
+    padding: 12px 16px;
     border-top: 1px solid var(--border);
 }
 
@@ -388,6 +396,27 @@ textarea {
 
 select {
     cursor: pointer;
+    background-color: var(--input-bg) !important;
+    color: var(--text-main) !important;
+    color-scheme: dark;
+}
+
+select:focus {
+    background-color: var(--input-focus-bg) !important;
+}
+
+select option {
+    background-color: var(--input-bg) !important;
+    color: var(--text-main) !important;
+}
+
+select option:checked {
+    background: linear-gradient(var(--accent), var(--accent)) !important;
+    color: #ffffff !important;
+}
+
+[data-theme="light"] select {
+    color-scheme: light;
 }
 
 textarea {
@@ -403,7 +432,7 @@ select:focus,
 textarea:focus {
     background: var(--input-focus-bg);
     border-color: var(--accent);
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
 input::placeholder,
@@ -457,7 +486,7 @@ input[type="color"] {
 
 .toggle-visibility:hover {
     background: var(--accent-soft);
-    border-color: rgba(139, 92, 246, 0.36);
+    border-color: rgba(16, 185, 129, 0.36);
     color: var(--text-main);
 }
 
@@ -493,6 +522,25 @@ input[type="color"] {
     background: transparent;
 }
 
+.setting-section .toggle-row {
+    border: 0;
+    border-radius: 0;
+    border-top: 1px solid var(--border);
+    padding: 12px 16px;
+}
+
+.setting-section .section-heading + .toggle-row,
+.setting-section .form-grid:first-child .toggle-row:first-child {
+    border-top: 0;
+}
+
+.setting-actions {
+    display: flex;
+    gap: 12px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border);
+}
+
 .toggle-row label {
     margin-bottom: 4px;
     color: var(--text-main);
@@ -580,13 +628,13 @@ input:checked + .toggle-slider::before {
     border: 3px solid var(--panel-bg);
     border-radius: 50%;
     background: var(--accent);
-    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 6px 16px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.5), 0 6px 16px rgba(0, 0, 0, 0.25);
 }
 
 .range-value {
     min-width: 68px;
     padding: 5px 9px;
-    border: 1px solid rgba(139, 92, 246, 0.3);
+    border: 1px solid rgba(16, 185, 129, 0.3);
     border-radius: 8px;
     background: var(--accent-soft);
     color: var(--accent-hover);
@@ -977,6 +1025,11 @@ kbd {
         padding: 10px;
     }
 
+    .tab-btn span {
+        display: inline-block;
+        font-size: 1.15rem;
+    }
+
     .tab-btn strong {
         display: none;
     }

package/src/renderer/src/css/spotlight.css

@@ -0,0 +1,113 @@
+:root {
+    --bg-color: rgba(15, 23, 42, 0.85);
+    --accent: #10b981;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --border: rgba(255, 255, 255, 0.1);
+    --glass-blur: blur(20px);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Outfit', sans-serif;
+    background: transparent;
+    overflow: hidden;
+    user-select: none;
+}
+
+.spotlight-container {
+    width: 100vw;
+    height: auto;
+    background: var(--bg-color);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    gap: 15px;
+}
+
+.spotlight-icon {
+    font-size: 1.5rem;
+}
+
+#spotlight-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-main);
+    font-size: 1.2rem;
+    font-family: inherit;
+}
+
+#spotlight-input::placeholder {
+    color: var(--text-muted);
+}
+
+.shortcut-tip {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    background: rgba(255, 255, 255, 0.05);
+    padding: 4px 8px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.results-container {
+    border-top: 1px solid var(--border);
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.result-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 14px;
+    border-radius: 12px;
+    gap: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.result-item:hover, .result-item.selected {
+    background: rgba(16, 185, 129, 0.2);
+}
+
+.result-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    font-size: 1.1rem;
+}
+
+.result-content {
+    flex: 1;
+}
+
+.result-title {
+    font-weight: 500;
+    color: var(--text-main);
+    font-size: 0.95rem;
+}
+
+.result-desc {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 2px;
+}