dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine client accent styling with dynamic harbor colors
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 12s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 15:39:30 +03:00
parent d5a42d8b7b
commit b389664824
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/web/styles.css
View File

@@ -58,11 +58,11 @@ p {
--client-border: oklch(0.86 0.012 145); --client-border: oklch(0.86 0.012 145);
--client-text: oklch(0.24 0.014 145); --client-text: oklch(0.24 0.014 145);
--client-muted: oklch(0.53 0.014 145); --client-muted: oklch(0.53 0.014 145);
--client-accent: oklch(0.62 0.14 151);
--client-accent-soft: oklch(0.92 0.045 151);
--harbor-word: oklch(0.39 0.075 232); --harbor-word: oklch(0.39 0.075 232);
--harbor-connect: oklch(0.57 0.11 185); --harbor-connect: oklch(0.57 0.11 185);
--harbor-gateway: oklch(0.61 0.12 72); --harbor-gateway: oklch(0.61 0.12 72);
--client-accent: var(--harbor-connect);
--client-accent-soft: color-mix(in oklch, var(--client-accent) 22%, transparent);
grid-template-rows: 1fr; grid-template-rows: 1fr;
color-scheme: light; color-scheme: light;
background: var(--client-bg); background: var(--client-bg);
@@ -90,6 +90,10 @@ p {
color: var(--client-text); color: var(--client-text);
} }
.client-shell:has(.harbor-brand.is-gateway-active) {
--client-accent: var(--harbor-gateway);
}
.harbor-brand { .harbor-brand {
position: fixed; position: fixed;
top: 50%; top: 50%;
@@ -251,15 +255,16 @@ p {
.harbor-mode-tooltip { .harbor-mode-tooltip {
position: absolute; position: absolute;
top: calc(100% + 12px); bottom: calc(100% + 9px);
left: 50%; left: 50%;
width: 116px; width: 116px;
display: grid; display: grid;
gap: 2px; gap: 2px;
padding: 5px 6px; padding: 5px 6px;
border-radius: 5px; border-radius: 5px;
background: color-mix(in oklch, var(--client-panel) 94%, var(--client-bg)); background: color-mix(in oklch, var(--client-panel) 64%, transparent);
box-shadow: 0 6px 20px oklch(0.08 0.015 145 / 0.16); box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
backdrop-filter: blur(8px) saturate(0.9);
color: var(--client-muted); color: var(--client-muted);
font-size: 4px; font-size: 4px;
line-height: 1.5; line-height: 1.5;
@@ -269,7 +274,7 @@ p {
visibility: hidden; visibility: hidden;
filter: blur(2px); filter: blur(2px);
pointer-events: none; pointer-events: none;
transform: translate(-50%, -3px); transform: translate(-50%, 3px);
transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms; transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
} }
@@ -1188,7 +1193,7 @@ p {
font-weight: 600; font-weight: 600;
letter-spacing: -0.055em; letter-spacing: -0.055em;
opacity: 0.88; opacity: 0.88;
text-shadow: 0 0 20px oklch(0.62 0.05 151 / 0.24); text-shadow: 0 0 20px color-mix(in oklch, var(--client-accent) 24%, transparent);
transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -1197,7 +1202,7 @@ p {
.client-subscription-domain-button:hover strong { .client-subscription-domain-button:hover strong {
opacity: 1; opacity: 1;
transform: translateY(-2px); transform: translateY(-2px);
text-shadow: 0 0 28px oklch(0.7 0.08 151 / 0.42); text-shadow: 0 0 28px color-mix(in oklch, var(--client-accent) 42%, transparent);
} }
.client-usage { .client-usage {
@@ -1430,7 +1435,7 @@ p {
color: var(--client-text); color: var(--client-text);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
text-shadow: 0 0 12px oklch(0.62 0.05 151 / 0.12); text-shadow: 0 0 12px color-mix(in oklch, var(--client-accent) 12%, transparent);
} }
.client-access-point { .client-access-point {
@@ -1564,11 +1569,11 @@ p {
--client-border: oklch(0.34 0.015 145); --client-border: oklch(0.34 0.015 145);
--client-text: oklch(0.93 0.008 145); --client-text: oklch(0.93 0.008 145);
--client-muted: oklch(0.68 0.012 145); --client-muted: oklch(0.68 0.012 145);
--client-accent: oklch(0.76 0.13 151);
--client-accent-soft: oklch(0.32 0.055 151);
--harbor-word: oklch(0.78 0.07 232); --harbor-word: oklch(0.78 0.07 232);
--harbor-connect: oklch(0.75 0.1 185); --harbor-connect: oklch(0.75 0.1 185);
--harbor-gateway: oklch(0.79 0.11 72); --harbor-gateway: oklch(0.79 0.11 72);
--client-accent: var(--harbor-connect);
--client-accent-soft: color-mix(in oklch, var(--client-accent) 22%, transparent);
color-scheme: dark; color-scheme: dark;
} }
} }