From 0def4f558d389aacdd31c8f2dde269fd3323b484 Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 17 Apr 2026 14:15:27 +0000 Subject: [PATCH] refactor: redesign Cobalt UI with Glassmorphism and orange/gold theme Update general CSS with Glassmorphism effects and orange/gold colors Co-authored-by: Abkdarrk <122768967+Abdullakala@users.noreply.github.com> --- web/src/app.css | 248 ++++++++++++------ web/src/components/buttons/Switcher.svelte | 14 +- .../buttons/VerticalActionButton.svelte | 14 + web/src/components/dialog/DialogButton.svelte | 43 ++- web/src/components/dialog/DialogHolder.svelte | 25 +- web/src/components/dialog/PickerItem.svelte | 11 +- .../components/misc/PopoverContainer.svelte | 11 +- .../queue/ProcessingQueueItem.svelte | 21 +- .../components/queue/ProcessingStatus.svelte | 25 +- web/src/components/queue/ProgressBar.svelte | 8 +- web/src/components/save/Omnibox.svelte | 39 +-- web/src/components/save/OmniboxIcon.svelte | 6 + .../save/buttons/ClearButton.svelte | 15 +- .../save/buttons/DownloadButton.svelte | 35 +-- .../settings/SettingsCategory.svelte | 6 +- web/src/components/sidebar/CobaltLogo.svelte | 8 +- web/src/components/sidebar/Sidebar.svelte | 9 +- web/src/components/sidebar/SidebarTab.svelte | 39 ++- web/src/components/subnav/PageNav.svelte | 7 +- 19 files changed, 405 insertions(+), 179 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index a07fbe76..ace54fb3 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -1,61 +1,73 @@ :root { --primary: #0a0a0f; - --secondary: #e1e1e1; + --secondary: #f5f5f5; --white: #ffffff; - --gray: #6b7280; + --gray: #9ca3af; --red: #ef4444; --medium-red: #dc2626; --dark-red: #b91c1c; --green: #10b981; - --blue: #22d3ee; - --cyan: #22d3ee; - --cyan-glow: rgba(34, 211, 238, 0.3); + --blue: #3b82f6; + --cyan: #f97316; + --cyan-glow: rgba(249, 115, 22, 0.35); --magenta: #ec4899; --purple: #8b5cf6; - --orange: #f59e0b; + --orange: #f97316; + --amber: #f59e0b; - --focus-ring: solid 2px var(--cyan); + /* Glassmorphism Variables */ + --glass-bg: rgba(255, 255, 255, 0.05); + --glass-bg-light: rgba(255, 255, 255, 0.08); + --glass-bg-medium: rgba(255, 255, 255, 0.12); + --glass-border: rgba(255, 255, 255, 0.15); + --glass-border-light: rgba(255, 255, 255, 0.1); + --glass-blur: blur(16px); + --glass-blur-heavy: blur(24px); + --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.2); + + --focus-ring: solid 2px var(--orange); --focus-ring-offset: -2px; - --button: #111118; - --button-hover: #1a1a24; - --button-press: #222230; - --button-active-hover: #22d3ee; + --button: rgba(255, 255, 255, 0.06); + --button-hover: rgba(249, 115, 22, 0.15); + --button-press: rgba(249, 115, 22, 0.25); + --button-active-hover: #f97316; - --button-hover-transparent: rgba(34, 211, 238, 0.08); - --button-press-transparent: rgba(34, 211, 238, 0.12); - --button-stroke: rgba(34, 211, 238, 0.1); - --button-text: #e1e1e1; - --button-box-shadow: 0 0 0 1px var(--button-stroke) inset; + --button-hover-transparent: rgba(249, 115, 22, 0.1); + --button-press-transparent: rgba(249, 115, 22, 0.18); + --button-stroke: rgba(249, 115, 22, 0.2); + --button-text: #f5f5f5; + --button-box-shadow: 0 0 0 1px var(--glass-border-light) inset; - --button-elevated: #181820; - --button-elevated-hover: #1f1f2a; - --button-elevated-press: #282835; - --button-elevated-shimmer: #2a2a38; + --button-elevated: rgba(255, 255, 255, 0.08); + --button-elevated-hover: rgba(249, 115, 22, 0.12); + --button-elevated-press: rgba(249, 115, 22, 0.2); + --button-elevated-shimmer: rgba(249, 115, 22, 0.15); - --popover-glow: rgba(34, 211, 238, 0.15); + --popover-glow: rgba(249, 115, 22, 0.2); - --popup-bg: #0f0f16; - --popup-stroke: rgba(34, 211, 238, 0.12); + --popup-bg: rgba(15, 15, 22, 0.85); + --popup-stroke: rgba(249, 115, 22, 0.15); - --dialog-backdrop: rgba(0, 0, 0, 0.6); + --dialog-backdrop: rgba(0, 0, 0, 0.7); - --sidebar-bg: #08080c; - --sidebar-highlight: #22d3ee; - --sidebar-stroke: rgba(34, 211, 238, 0.08); + --sidebar-bg: rgba(8, 8, 12, 0.9); + --sidebar-highlight: #f97316; + --sidebar-stroke: rgba(249, 115, 22, 0.12); - --content-border: rgba(34, 211, 238, 0.06); + --content-border: rgba(249, 115, 22, 0.08); --content-border-thickness: 1px; - --input-border: #22d3ee; + --input-border: #f97316; - --toggle-bg: #2a2a35; - --toggle-bg-enabled: #22d3ee; + --toggle-bg: rgba(255, 255, 255, 0.1); + --toggle-bg-enabled: #f97316; --padding: 12px; - --border-radius: 11px; + --border-radius: 14px; --sidebar-width: 80px; --sidebar-font-size: 11px; @@ -99,52 +111,62 @@ var(--button-elevated-shimmer), var(--button-elevated) ); + + /* Gradient accents */ + --gradient-orange: linear-gradient(135deg, #f97316 0%, #f59e0b 100%); + --gradient-glow: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%); } [data-theme="dark"] { --primary: #0a0a0f; - --secondary: #e1e1e1; + --secondary: #f5f5f5; - --gray: #6b7280; + --gray: #9ca3af; - --blue: #22d3ee; - --cyan: #22d3ee; - --cyan-glow: rgba(34, 211, 238, 0.3); + --blue: #3b82f6; + --cyan: #f97316; + --cyan-glow: rgba(249, 115, 22, 0.35); --green: #10b981; - --button: #111118; - --button-hover: #1a1a24; - --button-press: #222230; + --glass-bg: rgba(255, 255, 255, 0.05); + --glass-bg-light: rgba(255, 255, 255, 0.08); + --glass-bg-medium: rgba(255, 255, 255, 0.12); + --glass-border: rgba(255, 255, 255, 0.15); + --glass-border-light: rgba(255, 255, 255, 0.1); - --button-active-hover: #22d3ee; + --button: rgba(255, 255, 255, 0.06); + --button-hover: rgba(249, 115, 22, 0.15); + --button-press: rgba(249, 115, 22, 0.25); - --button-hover-transparent: rgba(34, 211, 238, 0.08); - --button-press-transparent: rgba(34, 211, 238, 0.12); - --button-stroke: rgba(34, 211, 238, 0.1); - --button-text: #e1e1e1; - --button-box-shadow: 0 0 0 1px var(--button-stroke) inset; + --button-active-hover: #f97316; - --button-elevated: #181820; - --button-elevated-hover: #1f1f2a; - --button-elevated-press: #282835; + --button-hover-transparent: rgba(249, 115, 22, 0.1); + --button-press-transparent: rgba(249, 115, 22, 0.18); + --button-stroke: rgba(249, 115, 22, 0.2); + --button-text: #f5f5f5; + --button-box-shadow: 0 0 0 1px var(--glass-border-light) inset; - --popover-glow: rgba(34, 211, 238, 0.15); + --button-elevated: rgba(255, 255, 255, 0.08); + --button-elevated-hover: rgba(249, 115, 22, 0.12); + --button-elevated-press: rgba(249, 115, 22, 0.2); - --popup-bg: #0f0f16; - --popup-stroke: rgba(34, 211, 238, 0.12); + --popover-glow: rgba(249, 115, 22, 0.2); - --dialog-backdrop: rgba(0, 0, 0, 0.6); + --popup-bg: rgba(15, 15, 22, 0.85); + --popup-stroke: rgba(249, 115, 22, 0.15); - --sidebar-bg: #08080c; - --sidebar-highlight: #22d3ee; - --sidebar-stroke: rgba(34, 211, 238, 0.08); + --dialog-backdrop: rgba(0, 0, 0, 0.7); - --content-border: rgba(34, 211, 238, 0.06); + --sidebar-bg: rgba(8, 8, 12, 0.9); + --sidebar-highlight: #f97316; + --sidebar-stroke: rgba(249, 115, 22, 0.12); - --input-border: #22d3ee; + --content-border: rgba(249, 115, 22, 0.08); - --toggle-bg: #2a2a35; - --toggle-bg-enabled: #22d3ee; + --input-border: #f97316; + + --toggle-bg: rgba(255, 255, 255, 0.1); + --toggle-bg-enabled: #f97316; --sidebar-mobile-gradient: linear-gradient( 90deg, @@ -189,6 +211,8 @@ body { height: 100vh; overflow: hidden; overscroll-behavior-y: none; + background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%); + background-attachment: fixed; } * { @@ -206,19 +230,24 @@ body { ::selection { color: var(--primary); - background: #22d3ee; + background: #f97316; } a { color: inherit; text-underline-offset: 3px; -webkit-touch-callout: none; + transition: color 0.2s ease; } a:visited { color: inherit; } +a:hover { + color: var(--orange); +} + svg, img { pointer-events: none; @@ -228,15 +257,19 @@ button, .button { display: flex; align-items: center; justify-content: center; - padding: 6px 13px; - gap: 6px; + padding: 8px 16px; + gap: 8px; border: none; border-radius: var(--border-radius); - font-size: 14.5px; + font-size: 14px; cursor: pointer; - background-color: var(--button); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); color: var(--button-text); - box-shadow: var(--button-box-shadow); + box-shadow: var(--button-box-shadow), var(--glass-shadow-light); + border: 1px solid var(--glass-border-light); + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } :focus-visible { @@ -248,6 +281,7 @@ a:focus-visible, select:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.3); } a:not(.sidebar-tab):not(.subnav-tab):focus-visible { @@ -256,12 +290,15 @@ a:not(.sidebar-tab):not(.subnav-tab):focus-visible { } .button.elevated { - background-color: var(--button-elevated); + background: var(--glass-bg-light); + border: 1px solid var(--glass-border); } .button.active { color: var(--primary); - background-color: var(--secondary); + background: var(--gradient-orange); + border-color: transparent; + box-shadow: 0 0 24px rgba(249, 115, 22, 0.4); } /* important is used because active class is toggled by state */ @@ -269,41 +306,47 @@ a:not(.sidebar-tab):not(.subnav-tab):focus-visible { .button.active:focus-visible, a.active:focus-visible { color: var(--white) !important; - background-color: var(--blue) !important; + background: var(--orange) !important; } @media (hover: hover) { .button:hover { - background-color: var(--button-hover); + background: var(--button-hover); + border-color: rgba(249, 115, 22, 0.3); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.15); + transform: translateY(-1px); } .button.elevated:not(.color):hover { - background-color: var(--button-elevated-hover); + background: var(--button-elevated-hover); } .button.active:not(.color):hover { - background-color: var(--button-active-hover); + background: linear-gradient(135deg, #fb923c 0%, #fbbf24 100%); + box-shadow: 0 0 28px rgba(249, 115, 22, 0.5); } } .button:active { - background-color: var(--button-press); + background: var(--button-press); + transform: translateY(0); } .button.elevated:not(.color):active { - background-color: var(--button-elevated-press); + background: var(--button-elevated-press); } .button.elevated { - box-shadow: none; + box-shadow: var(--glass-shadow-light); } .button.active:not(.color):active { - background-color: var(--button-active-hover); + background: var(--button-active-hover); } button[disabled] { cursor: default; + opacity: 0.5; } /* workaround for typing into inputs being ignored on iPadOS 15 */ @@ -414,11 +457,11 @@ h6 { line-height: 1.3; margin-block-end: -0.3rem; padding: 6px 0; - border-bottom: 1.5px solid var(--button-elevated-hover); + border-bottom: 1.5px solid var(--glass-border); } .long-text img { - border-radius: 6px; + border-radius: 8px; } table, @@ -430,12 +473,14 @@ th { border-collapse: collapse; text-align: center; padding: 3px 8px; + border-color: var(--glass-border); } code { - background: var(--button-elevated); - padding: 1px 4px; - border-radius: 4px; + background: var(--glass-bg-medium); + padding: 2px 6px; + border-radius: 6px; + border: 1px solid var(--glass-border-light); } tr td:first-child, @@ -476,3 +521,44 @@ tr th:first-child { transform: rotate(360deg); } } + +/* Glassmorphism utility classes */ +.glass { + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); +} + +.glass-light { + background: var(--glass-bg-light); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border-light); + border-radius: var(--border-radius); +} + +.glass-heavy { + background: var(--glass-bg-medium); + backdrop-filter: var(--glass-blur-heavy); + -webkit-backdrop-filter: var(--glass-blur-heavy); + border: 1px solid var(--glass-border); + border-radius: var(--border-radius); + box-shadow: var(--glass-shadow); +} + +.glow-orange { + box-shadow: 0 0 30px rgba(249, 115, 22, 0.3); +} + +.accent-text { + color: var(--orange); +} + +.accent-gradient { + background: var(--gradient-orange); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte index 07f635fc..7ce70d2b 100644 --- a/web/src/components/buttons/Switcher.svelte +++ b/web/src/components/buttons/Switcher.svelte @@ -58,21 +58,25 @@ } .switcher.big { - background: var(--button); - box-shadow: var(--button-box-shadow); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border-light); + box-shadow: var(--glass-shadow-light); padding: var(--switcher-padding); gap: calc(var(--switcher-padding) - 1.5px); } .switcher :global(.button.active) { pointer-events: none; - background: #22d3ee; + background: var(--gradient-orange); color: var(--primary); - box-shadow: 0 0 15px rgba(34, 211, 238, 0.4); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); + border-color: transparent; } .switcher :global(.button.active:hover) { - background: #22d3ee; + background: var(--gradient-orange); } .switcher.big :global(.button) { diff --git a/web/src/components/buttons/VerticalActionButton.svelte b/web/src/components/buttons/VerticalActionButton.svelte index 14602500..3e679269 100644 --- a/web/src/components/buttons/VerticalActionButton.svelte +++ b/web/src/components/buttons/VerticalActionButton.svelte @@ -25,11 +25,25 @@ line-height: 1; padding: var(--padding); gap: calc(var(--padding) / 2); + background: var(--glass-bg-light); + border: 1px solid var(--glass-border-light); + transition: all 0.25s ease; + } + + .button.vertical:hover { + background: var(--button-hover); + border-color: rgba(249, 115, 22, 0.3); + box-shadow: 0 0 16px rgba(249, 115, 22, 0.15); } .button.vertical :global(svg) { width: 24px; height: 24px; + transition: color 0.2s ease; + } + + .button.vertical:hover :global(svg) { + color: var(--orange); } .button.vertical.fill { diff --git a/web/src/components/dialog/DialogButton.svelte b/web/src/components/dialog/DialogButton.svelte index 69aaf722..11d7b109 100644 --- a/web/src/components/dialog/DialogButton.svelte +++ b/web/src/components/dialog/DialogButton.svelte @@ -51,20 +51,55 @@ text-decoration: none; font-weight: 500; width: 100%; + background: var(--glass-bg-light); + border: 1px solid var(--glass-border-light); + transition: all 0.25s ease; + } + + .link-button:hover { + background: var(--button-hover); + border-color: rgba(249, 115, 22, 0.3); } .popup-button { width: 100%; - height: 40px; - transition: 0.2s opacity; + height: 42px; + transition: all 0.25s ease; + background: var(--glass-bg-light); + border: 1px solid var(--glass-border-light); + } + + .popup-button:hover { + background: var(--button-hover); + border-color: rgba(249, 115, 22, 0.3); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.15); + } + + .popup-button.active, + .link-button.active { + background: var(--gradient-orange); + border-color: transparent; + box-shadow: 0 0 24px rgba(249, 115, 22, 0.4); + } + + .popup-button.active:hover, + .link-button.active:hover { + box-shadow: 0 0 32px rgba(249, 115, 22, 0.5); } .popup-button.red { - background-color: var(--red); + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: var(--white); + border-color: transparent; + box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); + } + + .popup-button.red:hover { + box-shadow: 0 0 28px rgba(239, 68, 68, 0.4); } .popup-button[disabled] { - opacity: 0.6; + opacity: 0.5; + cursor: not-allowed; } diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte index b519340d..f8b0438e 100644 --- a/web/src/components/dialog/DialogHolder.svelte +++ b/web/src/components/dialog/DialogHolder.svelte @@ -81,13 +81,13 @@ background-color: var(--dialog-backdrop); - backdrop-filter: blur(7px); - -webkit-backdrop-filter: blur(7px); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); opacity: 0; will-change: opacity; - transition: opacity 0.2s; + transition: opacity 0.25s ease; } #dialog-backdrop.visible { @@ -100,17 +100,22 @@ } :global(.dialog-body) { - --dialog-padding: 18px; + --dialog-padding: 20px; display: flex; flex-direction: column; align-items: center; - background: var(--popup-bg); - box-shadow: 0 0 0 2px var(--popup-stroke) inset; - border-radius: 29px; + background: var(--glass-bg-medium); + backdrop-filter: var(--glass-blur-heavy); + -webkit-backdrop-filter: var(--glass-blur-heavy); + border: 1px solid var(--glass-border); + border-radius: 24px; - filter: drop-shadow(0 0 40px var(--button)); + box-shadow: + 0 0 0 1px rgba(249, 115, 22, 0.1) inset, + 0 8px 40px rgba(0, 0, 0, 0.4), + 0 0 60px rgba(249, 115, 22, 0.1); padding: var(--dialog-padding); @@ -146,7 +151,9 @@ ) ) ) !important; - box-shadow: 0 0 0 2px var(--popup-stroke) inset; + box-shadow: + 0 0 0 1px rgba(249, 115, 22, 0.15) inset, + 0 8px 40px rgba(0, 0, 0, 0.4); } } diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte index 9b3eaaca..5ea3f9cc 100644 --- a/web/src/components/dialog/PickerItem.svelte +++ b/web/src/components/dialog/PickerItem.svelte @@ -137,9 +137,11 @@ .picker-type { position: absolute; color: var(--white); - background: rgba(0, 0, 0, 0.5); - width: 24px; - height: 24px; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + width: 26px; + height: 26px; z-index: 3; display: flex; @@ -150,7 +152,8 @@ top: 6px; left: 6px; - border-radius: 6px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.15); pointer-events: none; } diff --git a/web/src/components/misc/PopoverContainer.svelte b/web/src/components/misc/PopoverContainer.svelte index 5a14ddd3..28e5d4a8 100644 --- a/web/src/components/misc/PopoverContainer.svelte +++ b/web/src/components/misc/PopoverContainer.svelte @@ -23,11 +23,14 @@ display: flex; flex-direction: column; border-radius: 18px; - background: var(--button); - box-shadow: var(--button-box-shadow); + background: var(--glass-bg-medium); + backdrop-filter: var(--glass-blur-heavy); + -webkit-backdrop-filter: var(--glass-blur-heavy); + border: 1px solid var(--glass-border); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 0 40px rgba(249, 115, 22, 0.1); - filter: drop-shadow(0 0 8px var(--popover-glow)) - drop-shadow(0 0 10px var(--popover-glow)); position: relative; padding: var(--padding); gap: 6px; diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte index c8c2e79c..315d67aa 100644 --- a/web/src/components/queue/ProcessingQueueItem.svelte +++ b/web/src/components/queue/ProcessingQueueItem.svelte @@ -268,9 +268,9 @@ .processing-item { width: 100%; - padding: 8px 0; - gap: 8px; - border-bottom: 1.5px var(--button-elevated) solid; + padding: 10px 0; + gap: 10px; + border-bottom: 1px var(--glass-border-light) solid; } .processing-type { @@ -360,14 +360,16 @@ .file-actions { position: absolute; right: 0; - background-color: var(--button); + background: linear-gradient(90deg, transparent, var(--glass-bg-medium) 20%); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); height: 90%; padding-left: 18px; transform: translateX(5px); opacity: 0; - transition: opacity 0.15s, transform 0.15s; + transition: opacity 0.2s ease, transform 0.2s ease; mask-image: linear-gradient( 90deg, @@ -412,8 +414,15 @@ .action-button { padding: 8px; height: auto; + background: var(--glass-bg-light); + border: 1px solid var(--glass-border-light); box-shadow: none; - transition: opacity 0.2s; + transition: all 0.2s ease; + } + + .action-button:hover { + background: var(--button-hover); + border-color: rgba(249, 115, 22, 0.3); } .action-button :global(svg) { diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte index bd0a7223..407f5ca0 100644 --- a/web/src/components/queue/ProcessingStatus.svelte +++ b/web/src/components/queue/ProcessingStatus.svelte @@ -59,18 +59,24 @@ padding: 7px; border-radius: 30px; - filter: drop-shadow(0 0 3px var(--button-elevated-hover)); + background: var(--glass-bg-light); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border-light); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transition: background-color 0.2s, - transform 0.2s; + transform 0.2s, + box-shadow 0.2s; will-change: transform, background-color; } #processing-status:focus-visible { - outline: 2px solid var(--secondary); + outline: 2px solid var(--orange); outline-offset: 2px; + box-shadow: 0 0 20px rgba(249, 115, 22, 0.3); } #processing-status:active { @@ -78,20 +84,21 @@ } #processing-status.completed { - box-shadow: 0 0 0 2px var(--blue) inset; + border-color: var(--orange); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.3); } :global([data-theme="light"]) #processing-status.completed { - background-color: #e0eeff; + background-color: rgba(249, 115, 22, 0.1); } :global([data-theme="dark"]) #processing-status.completed { - background-color: #1f3249; + background-color: rgba(249, 115, 22, 0.15); } .icon-holder { display: flex; - background-color: var(--button-elevated-hover); + background: var(--glass-bg-medium); padding: 2px; border-radius: 20px; transition: background-color 0.2s; @@ -106,7 +113,7 @@ } .completed .icon-holder { - background-color: var(--blue); + background: var(--gradient-orange); } .completed .icon-holder :global(svg) { @@ -123,7 +130,7 @@ } #progress-ring circle { - stroke: var(--blue); + stroke: var(--orange); stroke-width: 4; stroke-dashoffset: 0; } diff --git a/web/src/components/queue/ProgressBar.svelte b/web/src/components/queue/ProgressBar.svelte index f5db2dc5..4b5f364b 100644 --- a/web/src/components/queue/ProgressBar.svelte +++ b/web/src/components/queue/ProgressBar.svelte @@ -34,14 +34,15 @@ diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte index 8f38c489..034e87fb 100644 --- a/web/src/components/save/Omnibox.svelte +++ b/web/src/components/save/Omnibox.svelte @@ -239,25 +239,26 @@ flex-direction: column; max-width: 640px; width: 100%; - gap: 6px; + gap: 8px; position: relative; } #input-container { - --input-padding: 10px; + --input-padding: 12px; display: flex; - box-shadow: 0 0 0 1.5px rgba(34, 211, 238, 0.3) inset; - /* webkit can't render the 1.5px box shadow properly, - so we duplicate the border as outline to fix it visually */ - outline: 1.5px solid rgba(34, 211, 238, 0.3); - outline-offset: -1.5px; + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border); + box-shadow: + 0 0 0 1px rgba(249, 115, 22, 0.15) inset, + 0 4px 24px rgba(0, 0, 0, 0.2); border-radius: var(--border-radius); align-items: center; gap: var(--input-padding); font-size: 14px; flex: 1; - background: var(--button); - transition: all 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #input-container:not(.clear-visible) :global(#clear-button) { @@ -286,13 +287,15 @@ } #input-container.focused { - box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); - outline: #22d3ee 2px solid; - outline-offset: -1px; + border-color: var(--orange); + box-shadow: + 0 0 0 1px rgba(249, 115, 22, 0.3) inset, + 0 0 30px rgba(249, 115, 22, 0.2), + 0 4px 24px rgba(0, 0, 0, 0.2); } #input-container.focused :global(#input-icons svg) { - stroke: var(--secondary); + stroke: var(--orange); } #input-container.downloadable :global(#input-icons svg) { @@ -305,7 +308,7 @@ margin: 0; padding: var(--input-padding) 0; padding-left: calc(var(--input-padding) + 28px); - height: 18px; + height: 20px; align-items: center; @@ -345,9 +348,6 @@ #action-container { display: flex; flex-direction: row; - } - - #action-container { justify-content: space-between; } @@ -357,14 +357,15 @@ #instance-label { font-size: 13px; - color: var(--gray); + color: var(--orange); font-weight: 500; + opacity: 0.8; } @media screen and (max-width: 440px) { #action-container { flex-direction: column; - gap: 5px; + gap: 6px; } #action-container :global(.button) { diff --git a/web/src/components/save/OmniboxIcon.svelte b/web/src/components/save/OmniboxIcon.svelte index dbaa0aa1..cba44cdf 100644 --- a/web/src/components/save/OmniboxIcon.svelte +++ b/web/src/components/save/OmniboxIcon.svelte @@ -72,6 +72,12 @@ stroke: var(--gray); stroke-width: 2px; will-change: transform; + transition: stroke 0.25s ease; + } + + .loading #input-icons :global(svg), + #input-icons.loading :global(svg) { + stroke: var(--orange); } .input-icon { diff --git a/web/src/components/save/buttons/ClearButton.svelte b/web/src/components/save/buttons/ClearButton.svelte index a5f6d2cc..9bda3879 100644 --- a/web/src/components/save/buttons/ClearButton.svelte +++ b/web/src/components/save/buttons/ClearButton.svelte @@ -16,8 +16,16 @@ diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte index 8c70d582..1e262c22 100644 --- a/web/src/components/save/buttons/DownloadButton.svelte +++ b/web/src/components/save/buttons/DownloadButton.svelte @@ -70,22 +70,24 @@ justify-content: center; height: 100%; - min-width: 48px; - width: 48px; + min-width: 52px; + width: 52px; border-radius: 0; - /* visually align the button, +1.5px because of inset box-shadow on parent */ - padding: 0 13.5px 0 12px; + /* visually align the button */ + padding: 0 14px 0 12px; - background: none; + background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%); box-shadow: none; transform: none; + border: none; - border-left: 1.5px rgba(34, 211, 238, 0.3) solid; + border-left: 1px rgba(249, 115, 22, 0.3) solid; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); - color: #22d3ee; + color: var(--orange); + transition: all 0.25s ease; } #download-button:dir(rtl) { @@ -93,18 +95,18 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: 1.5px rgba(34, 211, 238, 0.3) solid; + border-right: 1px rgba(249, 115, 22, 0.3) solid; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); direction: ltr; - padding: 0 12px 0 15px; + padding: 0 12px 0 14px; } #download-state { font-size: 24px; font-family: "Noto Sans Mono", "IBM Plex Mono", monospace; - font-weight: 400; + font-weight: 500; text-align: center; text-indent: -5px; @@ -116,25 +118,28 @@ #download-button:disabled { cursor: unset; color: var(--gray); + opacity: 0.6; } :global(#input-container.focused) #download-button { - border-left: 2px #22d3ee solid; - color: #22d3ee; + border-left: 1px var(--orange) solid; + color: var(--orange); + background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%); } :global(#input-container.focused) #download-button:dir(rtl) { border-left: 0; - border-right: 2px #22d3ee solid; + border-right: 1px var(--orange) solid; } @media (hover: hover) { #download-button:hover:not(:disabled) { - background: var(--button-hover-transparent); + background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%); + box-shadow: 0 0 20px rgba(249, 115, 22, 0.2); } } #download-button:active:not(:disabled) { - background: var(--button-press-transparent); + background: linear-gradient(135deg, rgba(249, 115, 22, 0.35) 0%, rgba(245, 158, 11, 0.25) 100%); } diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte index 6ea00f37..54097637 100644 --- a/web/src/components/settings/SettingsCategory.svelte +++ b/web/src/components/settings/SettingsCategory.svelte @@ -71,10 +71,10 @@ box-shadow: none; } 10% { - box-shadow: 0 0 0 3.5px var(--blue) inset; + box-shadow: 0 0 0 3.5px var(--orange) inset; } 20%, 50% { - box-shadow: 0 0 0 3px var(--blue) inset; + box-shadow: 0 0 0 3px var(--orange) inset, 0 0 20px rgba(249, 115, 22, 0.2); } 100% { box-shadow: none; @@ -86,7 +86,7 @@ box-shadow: none; } 10%, 50% { - box-shadow: 0 0 0 3px var(--blue) inset; + box-shadow: 0 0 0 3px var(--orange) inset; } 100% { box-shadow: none; diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte index 6c88ab20..59730ca4 100644 --- a/web/src/components/sidebar/CobaltLogo.svelte +++ b/web/src/components/sidebar/CobaltLogo.svelte @@ -14,8 +14,14 @@ #cobalt-logo img { width: 60px; height: auto; - filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4)); + filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.5)); pointer-events: none; + transition: filter 0.3s ease, transform 0.3s ease; + } + + #cobalt-logo:hover img { + filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.7)); + transform: scale(1.05); } @media screen and (max-width: 535px) { diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte index 0c692731..117552a1 100644 --- a/web/src/components/sidebar/Sidebar.svelte +++ b/web/src/components/sidebar/Sidebar.svelte @@ -54,10 +54,14 @@ } #sidebar { - background: var(--sidebar-bg); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur-heavy); + -webkit-backdrop-filter: var(--glass-blur-heavy); + border-right: 1px solid var(--glass-border-light); height: 100vh; width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2); position: sticky; + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2); } #sidebar-tabs { @@ -84,6 +88,9 @@ align-items: flex-start; z-index: 3; padding: var(--sidebar-inner-padding) 0; + border-right: none; + border-top: 1px solid var(--glass-border-light); + box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3); } #sidebar::before { diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte index fb06d28e..11742235 100644 --- a/web/src/components/sidebar/SidebarTab.svelte +++ b/web/src/components/sidebar/SidebarTab.svelte @@ -57,14 +57,14 @@ flex-direction: column; align-items: center; text-align: center; - gap: 3px; - padding: var(--sidebar-tab-padding) 3px; + gap: 4px; + padding: var(--sidebar-tab-padding) 4px; color: var(--sidebar-highlight); font-size: var(--sidebar-font-size); - opacity: 0.75; + opacity: 0.7; height: fit-content; border-radius: var(--border-radius); - transition: transform 0.2s; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; text-decoration-line: none; @@ -72,12 +72,15 @@ scroll-behavior: smooth; cursor: pointer; + background: transparent; + border: 1px solid transparent; } .sidebar-tab :global(svg) { - stroke-width: 1.2px; + stroke-width: 1.3px; height: 22px; width: 22px; + transition: transform 0.2s ease; } :global([data-iphone="true"] .sidebar-tab svg) { @@ -86,13 +89,14 @@ .sidebar-tab.active { color: var(--primary); - background: var(--sidebar-highlight); + background: var(--gradient-orange); opacity: 1; transform: none; transition: none; animation: pressButton 0.3s; cursor: default; - box-shadow: 0 0 15px rgba(34, 211, 238, 0.4); + box-shadow: 0 0 24px rgba(249, 115, 22, 0.5), 0 4px 12px rgba(249, 115, 22, 0.3); + border-color: transparent; } .sidebar-tab:not(.active):active { @@ -106,7 +110,9 @@ .beta-sign { position: absolute; transform: translateX(16px) translateY(-6px); - opacity: 0.7; + opacity: 0.8; + color: var(--orange); + font-weight: 600; } .tab-title { @@ -122,7 +128,7 @@ transform: scale(0.9); } 50% { - transform: scale(1.015); + transform: scale(1.02); } 100% { transform: scale(1); @@ -131,12 +137,19 @@ @media (hover: hover) { .sidebar-tab:hover:not(.active) { - background-color: var(--button-hover-transparent); + background: var(--glass-bg-light); + border-color: var(--glass-border-light); + box-shadow: 0 0 16px rgba(249, 115, 22, 0.15); + } + + .sidebar-tab:hover:not(.active) :global(svg) { + transform: scale(1.1); } .sidebar-tab:active:not(.active), .sidebar-tab:focus:hover:not(.active) { - background-color: var(--button-press-transparent); + background: var(--button-press-transparent); + border-color: rgba(249, 115, 22, 0.3); } .sidebar-tab:hover:not(.active) { @@ -146,13 +159,13 @@ .sidebar-tab:active:not(.active), .sidebar-tab:focus:hover:not(.active) { opacity: 1; - box-shadow: 0 0 0 1px var(--sidebar-stroke) inset; + box-shadow: 0 0 20px rgba(249, 115, 22, 0.2); } } @media screen and (max-width: 535px) { .sidebar-tab { - padding: 5px var(--padding); + padding: 6px var(--padding); min-width: calc(var(--sidebar-width) / 2); } diff --git a/web/src/components/subnav/PageNav.svelte b/web/src/components/subnav/PageNav.svelte index a4e4c7b2..6a0ef4a3 100644 --- a/web/src/components/subnav/PageNav.svelte +++ b/web/src/components/subnav/PageNav.svelte @@ -200,11 +200,16 @@ position: absolute; left: var(--back-padding); + border-radius: var(--border-radius); + transition: all 0.2s ease; + } + + .back-button:hover { + color: var(--orange); } .back-button:active { background: var(--button-hover-transparent); - border-radius: var(--border-radius); } .back-button :global(svg) {