@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/src-web/css/model.css

@@ -3,7 +3,7 @@
 .toggle-model-btn:hover {
   background: color-mix(in srgb, var(--accent) 15%, transparent);
   border-color: color-mix(in srgb, var(--accent) 20%, transparent);
-  color: var(--accent);
+  color: var(--interactive-fg);
 }
 
 .model-stage {
@@ -28,9 +28,9 @@
   display: grid;
   place-items: center;
   position: relative;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-surface-soft);
   border-radius: var(--radius-3xl);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border-subtle);
   box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
   overflow: hidden;
 }
@@ -69,14 +69,14 @@
   pointer-events: none;
   padding: 7px 12px;
   border-radius: var(--radius-full);
-  background: rgba(15, 23, 42, 0.72);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: #f8fafc;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-main);
   font-size: 0.76rem;
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
+  box-shadow: var(--shadow-md);
   backdrop-filter: blur(10px);
   transition: opacity 0.18s ease, transform 0.18s ease;
 }
@@ -121,14 +121,14 @@
   transform: translate(-50%, -50%);
   padding: 4px 8px;
   border-radius: var(--radius-full);
-  background: rgba(3, 7, 18, 0.72);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: #e0f2fe;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-main);
   font-size: 0.68rem;
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
-  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
+  text-shadow: none;
 }
 
 .zone-head {
@@ -202,13 +202,13 @@
   align-items: center;
   gap: 7px;
   padding: 0 10px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
-  background: rgba(18, 18, 22, 0.72);
+  background: var(--bg-surface);
   color: var(--text-main);
   font-size: 0.72rem;
   line-height: 1;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
+  box-shadow: var(--shadow-sm);
   backdrop-filter: blur(12px);
   pointer-events: none;
 }
@@ -222,10 +222,10 @@
   align-items: center;
   gap: 6px;
   padding: 5px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
-  background: rgba(18, 18, 22, 0.68);
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
   backdrop-filter: blur(12px);
 }
 
@@ -261,7 +261,7 @@
 }
 
 .model-scale-control:hover {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--bg-surface-soft);
   color: var(--text-main);
 }
 
@@ -303,7 +303,7 @@
   gap: 2px;
   margin-left: 2px;
   padding-left: 6px;
-  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 1px solid var(--border-subtle);
 }
 
 .layout-preset-btn {
@@ -346,7 +346,7 @@
 }
 
 .model-status.is-error {
-  color: #fca5a5;
+  color: var(--status-error);
   display: block;
 }
 
@@ -385,9 +385,9 @@
   gap: 14px;
   padding: 40px 28px 28px;
   border-radius: var(--radius-3xl);
-  background: var(--surface-bg, #1e293b);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  box-shadow: var(--shadow-lg);
 }
 
 .gemini-live-badge {
@@ -398,7 +398,7 @@
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.04em;
-  text-transform: uppercase;
+  text-transform: none;
   color: var(--text-muted);
   padding: 3px 10px;
   border-radius: var(--radius-full);
@@ -437,7 +437,7 @@
 .gemini-live-status {
   font-size: 0.95rem;
   font-weight: 600;
-  color: var(--system-text-color, #f8fafc);
+  color: var(--text-main);
 }
 
 .gemini-live-transcript {
@@ -462,7 +462,7 @@
 
 .gemini-live-transcript-speaker {
   font-weight: 600;
-  color: var(--system-text-color, #f8fafc);
+  color: var(--text-main);
 }
 
 .gemini-live-voice-picker {
@@ -485,8 +485,8 @@
 }
 
 .gemini-live-voice-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--system-text-color, #f8fafc);
+  background: var(--bg-surface-hover);
+  color: var(--text-main);
 }
 
 .gemini-live-voice-menu {
@@ -500,9 +500,9 @@
   min-width: 140px;
   padding: 6px;
   border-radius: var(--radius-2xl);
-  background: var(--surface-bg, #1e293b);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
-  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.55);
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  box-shadow: var(--shadow-md);
   z-index: 1;
 }
 
@@ -519,13 +519,13 @@
 }
 
 .gemini-live-voice-option:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--system-text-color, #f8fafc);
+  background: var(--bg-surface-hover);
+  color: var(--text-main);
 }
 
 .gemini-live-voice-option.active {
-  background: rgba(99, 102, 241, 0.18);
-  color: var(--system-text-color, #f8fafc);
+  background: color-mix(in srgb, var(--flavor-indigo) 18%, transparent);
+  color: var(--text-main);
 }
 
 .gemini-live-controls {
@@ -548,13 +548,13 @@
   border-radius: var(--radius-full);
   border: none;
   cursor: pointer;
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--system-text-color, #f8fafc);
+  background: var(--bg-surface-soft);
+  color: var(--text-main);
   transition: background 0.15s ease, transform 0.1s ease;
 }
 
 .gemini-live-btn:hover {
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--bg-surface-hover);
 }
 
 .gemini-live-btn:active {
@@ -562,12 +562,12 @@
 }
 
 .gemini-live-btn.gemini-live-end {
-  background: #ef4444;
-  color: #ffffff;
+  background: var(--danger);
+  color: var(--pure-white);
 }
 
 .gemini-live-btn.gemini-live-end:hover {
-  background: #dc2626;
+  background: color-mix(in srgb, var(--danger) 85%, black);
 }
 
 .model-stage {
@@ -589,9 +589,9 @@
   width: 100%;
   height: 100%;
   background: var(--panel-soft);
-  border: 1px solid rgba(255, 255, 255, 0.09);
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 52px rgba(0, 0, 0, 0.16);
+  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-sm);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
 }
@@ -602,8 +602,8 @@
 
 .model-shell.model-bg-grid {
   background:
-    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(var(--border-subtle) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px),
     var(--panel-soft);
   background-size: 28px 28px;
 }
@@ -611,7 +611,7 @@
 .model-shell.model-bg-stage {
   background:
     radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.08)),
+    linear-gradient(180deg, var(--border-subtle), transparent),
     var(--panel-soft);
 }
 

package/src/renderer/src-web/css/pictures.css

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   color: var(--text-soft);
   border: 1px solid var(--border);
   cursor: pointer;
@@ -16,8 +16,8 @@
 }
 
 .picture-refresh-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.15);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
   color: var(--text-main);
 }
 
@@ -62,11 +62,11 @@
 }
 
 .pictures-kicker {
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.08em;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .pictures-header h2 {
@@ -90,7 +90,7 @@
   padding: 0 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   color: var(--text-main);
   font-size: 0.82rem;
   font-weight: 500;
@@ -102,8 +102,8 @@
 }
 
 .pictures-close-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.15);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
 }
 
 .pictures-grid {
@@ -160,7 +160,7 @@
   padding: 0 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   color: var(--text-main);
   font-size: 0.82rem;
   font-weight: 500;
@@ -172,8 +172,8 @@
 }
 
 .picture-folder-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.15);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
 }
 
 .picture-folder-btn:disabled {
@@ -197,7 +197,7 @@
   gap: 6px;
   padding: 6px 14px;
   border-radius: var(--radius-3xl);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   border: 1px solid var(--border);
   color: var(--text-soft);
   font-size: 0.8rem;
@@ -208,7 +208,7 @@
 }
 
 .filter-tab-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--bg-surface-hover);
   color: var(--text-main);
   border-color: var(--accent);
 }
@@ -216,7 +216,7 @@
 .filter-tab-btn.active {
   background: color-mix(in srgb, var(--accent) 15%, transparent);
   border-color: var(--accent);
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-weight: 600;
 }
 
@@ -250,7 +250,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   background: var(--surface-bg);
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-size: 1.2rem;
 }
 
@@ -276,9 +276,9 @@
   width: 26px;
   height: 26px;
   border-radius: var(--radius-sm);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(15, 23, 42, 0.75);
-  color: #ef4444;
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--danger);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -295,9 +295,9 @@
 }
 
 .picture-card-delete-btn:hover {
-  background: #ef4444;
-  color: #ffffff;
-  border-color: #ef4444;
+  background: var(--danger);
+  color: var(--pure-white);
+  border-color: var(--danger);
 }
 
 .picture-delete-modal-overlay {
@@ -316,8 +316,8 @@
 .picture-delete-modal {
   width: 100%;
   max-width: 400px;
-  background: var(--surface-bg, #1e293b);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-2xl);
   padding: 20px;
   box-shadow: var(--shadow-lg);
@@ -332,12 +332,12 @@
   gap: 10px;
   font-size: 1.1rem;
   font-weight: 600;
-  color: var(--system-text-color, #f8fafc);
+  color: var(--text-main);
 }
 
 .picture-delete-modal-body {
   font-size: 0.9rem;
-  color: var(--text-soft, #94a3b8);
+  color: var(--text-soft);
   line-height: 1.5;
   margin: 0;
 }
@@ -360,22 +360,22 @@
 
 .picture-modal-btn.cancel {
   background: transparent;
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
-  color: var(--system-text-color, #f8fafc);
+  border: 1px solid var(--border-default);
+  color: var(--text-main);
 }
 
 .picture-modal-btn.cancel:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-surface-soft);
 }
 
 .picture-modal-btn.delete {
-  background: #ef4444;
-  border: 1px solid #ef4444;
-  color: #ffffff;
+  background: var(--danger);
+  border: 1px solid var(--danger);
+  color: var(--pure-white);
 }
 
 .picture-modal-btn.delete:hover {
-  background: #dc2626;
+  background: color-mix(in srgb, var(--danger) 85%, black);
 }
 
 /* Saved Pictures Gallery Load More styles */
@@ -392,7 +392,7 @@
   padding: 0 24px;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  background: var(--card-bg, rgba(255, 255, 255, 0.04));
+  background: var(--bg-surface-soft);
   color: var(--text-main);
   font-size: 0.88rem;
   font-weight: 500;
@@ -406,10 +406,57 @@
 .pictures-load-more-btn:hover {
   background: var(--border);
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--interactive-fg);
   box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 .pictures-load-more-btn:active {
   transform: scale(0.98);
 }
+
+@media (max-width: 760px) {
+  .pictures-library {
+    padding: calc(64px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pictures-header {
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+  }
+
+  .pictures-header h2 {
+    font-size: 1.3rem;
+  }
+
+  .pictures-header-actions {
+    margin-left: auto;
+  }
+
+  .picture-refresh-btn,
+  .pictures-close-btn,
+  .filter-tab-btn {
+    min-height: 44px;
+  }
+
+  .picture-refresh-btn {
+    width: 44px;
+  }
+
+  .pictures-type-filter {
+    overflow-x: auto;
+    padding: 0 0 8px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .filter-tab-btn {
+    flex: 0 0 auto;
+  }
+
+  .pictures-grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
+    gap: 10px;
+  }
+}

package/src/renderer/src-web/css/pull-to-refresh.css

@@ -0,0 +1,54 @@
+.mint-pull-refresh {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .mint-pull-refresh {
+    position: fixed;
+    top: calc(64px + env(safe-area-inset-top));
+    left: 50%;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    max-width: calc(100vw - 32px);
+    padding: 9px 14px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface-strong);
+    color: var(--text-main);
+    box-shadow: var(--shadow-sm);
+    font-size: 13px;
+    font-weight: 600;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 140ms ease;
+  }
+
+  .mint-pull-refresh.is-visible {
+    opacity: 1;
+  }
+
+  .mint-pull-refresh-icon {
+    color: var(--accent);
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .mint-pull-refresh.is-refreshing .mint-pull-refresh-icon {
+    animation: mint-pull-refresh-spin 700ms linear infinite;
+  }
+
+  .chat-container,
+  .pictures-library,
+  .img-studio-content,
+  .veo-studio-content,
+  .web-view-scroll {
+    overscroll-behavior-y: contain;
+  }
+}
+
+@keyframes mint-pull-refresh-spin {
+  to { transform: rotate(360deg); }
+}