CERBERUS/cobalt
2
1
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2026-10-25 11:36:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: redesign Cobalt UI with Glassmorphism and orange/gold theme

Browse source 
Update general CSS with Glassmorphism effects and orange/gold colors

Co-authored-by: Abkdarrk <122768967+Abdullakala@users.noreply.github.com>
This commit is contained in:
v0 2026-04-17 14:15:27 +00:00
parent 97294b6d0d
commit 0def4f558d
19 changed files with 405 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

248
web/src/app.css
View file

@ -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;
}

14
web/src/components/buttons/Switcher.svelte
View file

@ -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) {

14
web/src/components/buttons/VerticalActionButton.svelte
View file

@ -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 {

43
web/src/components/dialog/DialogButton.svelte
View file

@ -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;
}
</style>

25
web/src/components/dialog/DialogHolder.svelte
View file

@ -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);
}
}

11
web/src/components/dialog/PickerItem.svelte
View file

@ -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;
}

11
web/src/components/misc/PopoverContainer.svelte
View file

@ -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;

21
web/src/components/queue/ProcessingQueueItem.svelte
View file

@ -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) {

25
web/src/components/queue/ProcessingStatus.svelte
View file

@ -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;
}

8
web/src/components/queue/ProgressBar.svelte
View file

@ -34,14 +34,15 @@
<style>
.file-progress {
width: 100%;
background-color: var(--button-elevated);
background: var(--glass-bg);
border: 1px solid var(--glass-border-light);
}
.file-progress,
.file-progress .progress {
height: 6px;
border-radius: 10px;
transition: width 0.1s;
transition: width 0.15s ease;
}
.file-progress :global(.indeterminate-progress) {
@ -49,6 +50,7 @@
}
.file-progress .progress {
background-color: var(--blue);
background: var(--gradient-orange);
box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}
</style>

39
web/src/components/save/Omnibox.svelte
View file

@ -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) {

6
web/src/components/save/OmniboxIcon.svelte
View file

@ -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 {

15
web/src/components/save/buttons/ClearButton.svelte
View file

@ -16,8 +16,16 @@
<style>
#clear-button {
padding: 3px;
padding: 4px;
border-radius: 100%;
background: var(--glass-bg-light);
border: 1px solid var(--glass-border-light);
transition: all 0.2s ease;
}
#clear-button:hover {
background: rgba(249, 115, 22, 0.15);
border-color: rgba(249, 115, 22, 0.3);
}
#clear-button :global(svg) {
@ -26,5 +34,10 @@
stroke-width: 2px;
stroke: var(--secondary);
will-change: transform;
transition: stroke 0.2s ease;
}
#clear-button:hover :global(svg) {
stroke: var(--orange);
}
</style>

35
web/src/components/save/buttons/DownloadButton.svelte
View file

@ -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%);
}
</style>

6
web/src/components/settings/SettingsCategory.svelte
View file

@ -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;

8
web/src/components/sidebar/CobaltLogo.svelte
View file

@ -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) {

9
web/src/components/sidebar/Sidebar.svelte
View file

@ -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 {

39
web/src/components/sidebar/SidebarTab.svelte
View file

@ -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);
}

7
web/src/components/subnav/PageNav.svelte
View file

@ -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) {