From 09278141d001d77c8e0d3d3141986213fc4139ac Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 17 Apr 2026 13:18:52 +0000 Subject: [PATCH 1/4] feat: update branding and redesign UI with cyan/turquoise theme Co-authored-by: Abkdarrk <122768967+Abdullakala@users.noreply.github.com> --- web/i18n/en/general.json | 4 +- web/src/app.css | 146 +++++++-------- web/src/components/buttons/Switcher.svelte | 5 +- web/src/components/misc/Toggle.svelte | 1 + web/src/components/save/Omnibox.svelte | 10 +- .../save/buttons/DownloadButton.svelte | 10 +- web/src/components/sidebar/CobaltLogo.svelte | 19 +- web/src/components/sidebar/SidebarTab.svelte | 3 +- web/src/components/subnav/PageNavTab.svelte | 5 +- web/src/lib/settings/defaults.ts | 2 +- web/src/lib/state/theme.ts | 8 +- web/src/routes/+page.svelte | 170 +++++++++++++++++- web/src/routes/about/+layout.svelte | 10 +- web/src/routes/donate/+page.svelte | 6 +- web/static/abkdarrk-logo.png | Bin 0 -> 112114 bytes 15 files changed, 287 insertions(+), 112 deletions(-) create mode 100644 web/static/abkdarrk-logo.png diff --git a/web/i18n/en/general.json b/web/i18n/en/general.json index a50db46b..d5ace806 100644 --- a/web/i18n/en/general.json +++ b/web/i18n/en/general.json @@ -1,7 +1,7 @@ { - "cobalt": "cobalt", + "cobalt": "Abkdarrk-URL", "meowbalt": "meowbalt", "beta": "beta", - "embed.description": "cobalt lets you save what you love without ads, tracking, paywalls or other nonsense. just paste the link and you're ready to rock!" + "embed.description": "Abkdarrk-URL lets you save what you love without ads, tracking, paywalls or other nonsense. just paste the link and you're ready to rock!" } diff --git a/web/src/app.css b/web/src/app.css index 55d94e39..a07fbe76 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -1,56 +1,58 @@ :root { - --primary: #ffffff; - --secondary: #000000; + --primary: #0a0a0f; + --secondary: #e1e1e1; --white: #ffffff; - --gray: #75757e; + --gray: #6b7280; - --red: #ed2236; - --medium-red: #ce3030; - --dark-red: #d61c2e; - --green: #30bd1b; - --blue: #2f8af9; - --magenta: #eb445a; - --purple: #5857d4; - --orange: #f19a38; + --red: #ef4444; + --medium-red: #dc2626; + --dark-red: #b91c1c; + --green: #10b981; + --blue: #22d3ee; + --cyan: #22d3ee; + --cyan-glow: rgba(34, 211, 238, 0.3); + --magenta: #ec4899; + --purple: #8b5cf6; + --orange: #f59e0b; - --focus-ring: solid 2px var(--blue); + --focus-ring: solid 2px var(--cyan); --focus-ring-offset: -2px; - --button: #f4f4f4; - --button-hover: #ededed; - --button-press: #e8e8e8; - --button-active-hover: #2a2a2a; + --button: #111118; + --button-hover: #1a1a24; + --button-press: #222230; + --button-active-hover: #22d3ee; - --button-hover-transparent: rgba(0, 0, 0, 0.06); - --button-press-transparent: rgba(0, 0, 0, 0.09); - --button-stroke: rgba(0, 0, 0, 0.06); - --button-text: #282828; + --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-elevated: #e3e3e3; - --button-elevated-hover: #dadada; - --button-elevated-press: #d3d3d3; - --button-elevated-shimmer: #ededed; + --button-elevated: #181820; + --button-elevated-hover: #1f1f2a; + --button-elevated-press: #282835; + --button-elevated-shimmer: #2a2a38; - --popover-glow: var(--button-stroke); + --popover-glow: rgba(34, 211, 238, 0.15); - --popup-bg: #f1f1f1; - --popup-stroke: rgba(0, 0, 0, 0.08); + --popup-bg: #0f0f16; + --popup-stroke: rgba(34, 211, 238, 0.12); - --dialog-backdrop: rgba(255, 255, 255, 0.3); + --dialog-backdrop: rgba(0, 0, 0, 0.6); - --sidebar-bg: var(--button); - --sidebar-highlight: var(--secondary); - --sidebar-stroke: rgba(0, 0, 0, 0.04); + --sidebar-bg: #08080c; + --sidebar-highlight: #22d3ee; + --sidebar-stroke: rgba(34, 211, 238, 0.08); - --content-border: rgba(0, 0, 0, 0.03); + --content-border: rgba(34, 211, 238, 0.06); --content-border-thickness: 1px; - --input-border: #adadb7; + --input-border: #22d3ee; - --toggle-bg: var(--input-border); - --toggle-bg-enabled: var(--secondary); + --toggle-bg: #2a2a35; + --toggle-bg-enabled: #22d3ee; --padding: 12px; --border-radius: 11px; @@ -77,11 +79,11 @@ /* used for fading the tab bar on scroll */ --sidebar-mobile-gradient: linear-gradient( 90deg, - rgba(0, 0, 0, 0.9) 0%, - rgba(0, 0, 0, 0) 5%, - rgba(0, 0, 0, 0) 50%, - rgba(0, 0, 0, 0) 95%, - rgba(0, 0, 0, 0.9) 100% + rgba(8, 8, 12, 0.95) 0%, + rgba(8, 8, 12, 0) 5%, + rgba(8, 8, 12, 0) 50%, + rgba(8, 8, 12, 0) 95%, + rgba(8, 8, 12, 0.95) 100% ); --skeleton-gradient: linear-gradient( @@ -100,55 +102,57 @@ } [data-theme="dark"] { - --primary: #000000; + --primary: #0a0a0f; --secondary: #e1e1e1; - --gray: #818181; + --gray: #6b7280; - --blue: #2a7ce1; - --green: #37aa42; + --blue: #22d3ee; + --cyan: #22d3ee; + --cyan-glow: rgba(34, 211, 238, 0.3); + --green: #10b981; - --button: #191919; - --button-hover: #242424; - --button-press: #2a2a2a; + --button: #111118; + --button-hover: #1a1a24; + --button-press: #222230; - --button-active-hover: #f9f9f9; + --button-active-hover: #22d3ee; - --button-hover-transparent: rgba(225, 225, 225, 0.1); - --button-press-transparent: rgba(225, 225, 225, 0.15); - --button-stroke: rgba(255, 255, 255, 0.05); + --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-elevated: #282828; - --button-elevated-hover: #2f2f2f; - --button-elevated-press: #343434; + --button-elevated: #181820; + --button-elevated-hover: #1f1f2a; + --button-elevated-press: #282835; - --popover-glow: rgba(135, 135, 135, 0.12); + --popover-glow: rgba(34, 211, 238, 0.15); - --popup-bg: #191919; - --popup-stroke: rgba(255, 255, 255, 0.08); + --popup-bg: #0f0f16; + --popup-stroke: rgba(34, 211, 238, 0.12); - --dialog-backdrop: rgba(0, 0, 0, 0.3); + --dialog-backdrop: rgba(0, 0, 0, 0.6); - --sidebar-bg: #131313; - --sidebar-highlight: var(--secondary); - --sidebar-stroke: rgba(255, 255, 255, 0.04); + --sidebar-bg: #08080c; + --sidebar-highlight: #22d3ee; + --sidebar-stroke: rgba(34, 211, 238, 0.08); - --content-border: rgba(255, 255, 255, 0.045); + --content-border: rgba(34, 211, 238, 0.06); - --input-border: #383838; + --input-border: #22d3ee; - --toggle-bg: var(--input-border); - --toggle-bg-enabled: #8a8a8a; + --toggle-bg: #2a2a35; + --toggle-bg-enabled: #22d3ee; --sidebar-mobile-gradient: linear-gradient( 90deg, - rgba(19, 19, 19, 0.9) 0%, - rgba(19, 19, 19, 0) 5%, - rgba(19, 19, 19, 0) 50%, - rgba(19, 19, 19, 0) 95%, - rgba(19, 19, 19, 0.9) 100% + rgba(8, 8, 12, 0.95) 0%, + rgba(8, 8, 12, 0) 5%, + rgba(8, 8, 12, 0) 50%, + rgba(8, 8, 12, 0) 95%, + rgba(8, 8, 12, 0.95) 100% ); --skeleton-gradient: linear-gradient( @@ -202,7 +206,7 @@ body { ::selection { color: var(--primary); - background: var(--secondary); + background: #22d3ee; } a { diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte index 57ad9882..07f635fc 100644 --- a/web/src/components/buttons/Switcher.svelte +++ b/web/src/components/buttons/Switcher.svelte @@ -66,10 +66,13 @@ .switcher :global(.button.active) { pointer-events: none; + background: #22d3ee; + color: var(--primary); + box-shadow: 0 0 15px rgba(34, 211, 238, 0.4); } .switcher :global(.button.active:hover) { - background: var(--secondary); + background: #22d3ee; } .switcher.big :global(.button) { diff --git a/web/src/components/misc/Toggle.svelte b/web/src/components/misc/Toggle.svelte index 08750413..360018a7 100644 --- a/web/src/components/misc/Toggle.svelte +++ b/web/src/components/misc/Toggle.svelte @@ -39,6 +39,7 @@ .toggle.enabled { background: var(--toggle-bg-enabled); + box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); } .toggle.enabled .toggle-switcher { diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte index f45f54a7..8f38c489 100644 --- a/web/src/components/save/Omnibox.svelte +++ b/web/src/components/save/Omnibox.svelte @@ -246,16 +246,18 @@ #input-container { --input-padding: 10px; display: flex; - box-shadow: 0 0 0 1.5px var(--input-border) inset; + 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 var(--input-border); + outline: 1.5px solid rgba(34, 211, 238, 0.3); outline-offset: -1.5px; 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; } #input-container:not(.clear-visible) :global(#clear-button) { @@ -284,8 +286,8 @@ } #input-container.focused { - box-shadow: none; - outline: var(--secondary) 2px solid; + box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); + outline: #22d3ee 2px solid; outline-offset: -1px; } diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte index 94e8bbd2..8c70d582 100644 --- a/web/src/components/save/buttons/DownloadButton.svelte +++ b/web/src/components/save/buttons/DownloadButton.svelte @@ -82,9 +82,10 @@ box-shadow: none; transform: none; - border-left: 1.5px var(--input-border) solid; + border-left: 1.5px rgba(34, 211, 238, 0.3) solid; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); + color: #22d3ee; } #download-button:dir(rtl) { @@ -92,7 +93,7 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: 1.5px var(--input-border) solid; + border-right: 1.5px rgba(34, 211, 238, 0.3) solid; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); @@ -118,12 +119,13 @@ } :global(#input-container.focused) #download-button { - border-left: 2px var(--secondary) solid; + border-left: 2px #22d3ee solid; + color: #22d3ee; } :global(#input-container.focused) #download-button:dir(rtl) { border-left: 0; - border-right: 2px var(--secondary) solid; + border-right: 2px #22d3ee solid; } @media (hover: hover) { diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte index aafc81d3..6c88ab20 100644 --- a/web/src/components/sidebar/CobaltLogo.svelte +++ b/web/src/components/sidebar/CobaltLogo.svelte @@ -1,9 +1,5 @@ - -