fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match GL capsule navbar and simplify canvas/card layering

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 09:42:43 +07:00
parent 8f54743235
commit 5597c468a2
3 changed files with 66 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/assets/css/main.css
View File

@@ -94,24 +94,19 @@ body {
}
.lk-content-canvas {
border: 1px solid rgba(255, 255, 255, 0.52);
border: 0;
border-radius: 2rem;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.36));
background: color-mix(in oklab, var(--color-base-200) 78%, white);
box-shadow:
0 22px 60px rgba(16, 73, 44, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(16px) saturate(170%);
backdrop-filter: blur(16px) saturate(170%);
0 22px 60px rgba(16, 73, 44, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
padding: clamp(1rem, 1.2vw, 1.5rem);
}
.surface-card {
border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, white);
background: rgba(255, 255, 255, 0.95);
box-shadow:
0 16px 36px rgba(24, 66, 44, 0.1),
0 1px 0 rgba(255, 255, 255, 0.62) inset;
border: 0;
background: #fff;
box-shadow: 0 14px 32px rgba(24, 66, 44, 0.08);
}
.fregat-header-glass {
@@ -134,7 +129,8 @@ body {
.fregat-header-row {
gap: 0.5rem;
--fregat-pill-shell-px: 0.5rem;
--fregat-pill-shell-py: 0.5rem;
--fregat-pill-shell-py: 0.625rem;
min-height: 3.5rem;
}
.fregat-pill-shell {
@@ -189,6 +185,12 @@ body {
.lk-nav-link {
@apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200;
color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
min-height: 2rem;
}
.lk-pill-divider {
background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
opacity: 0.45;
}
.lk-nav-link:hover {
@@ -204,8 +206,9 @@ body {
@media (min-width: 1024px) {
.fregat-header-row {
min-height: 3rem;
--fregat-pill-shell-px: 0.75rem;
min-height: 3.75rem;
--fregat-pill-shell-px: 0.875rem;
--fregat-pill-shell-py: 0.75rem;
}
.fregat-pill-brand,
@@ -222,7 +225,7 @@ body {
.fregat-pill-center {
left: 50%;
width: max-content;
max-width: min(54vw, 900px);
max-width: min(62vw, 1020px);
transform: translateX(-50%);
}
@@ -233,12 +236,12 @@ body {
@media (max-width: 1023px) {
.fregat-pill-brand {
padding-inline: 0.75rem;
padding-inline: 1rem;
}
.lk-nav-link {
padding-inline: 0.7rem;
padding-block: 0.5rem;
padding-inline: 0.8rem;
padding-block: 0.55rem;
}
}