nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed top bar height issues and other styling

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-15 14:32:22 +02:00
parent 2f99126c17
commit 59108835dd
6 changed files with 99 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+86
View File
@@ -652,6 +652,13 @@ code, pre, kbd, samp {
.breakcore .plate {
background: var(--surface0);
}
.salon-noir .plate,
.gothic .plate {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
0 22px 42px -28px rgba(0, 0, 0, 0.7),
0 4px 12px -6px rgba(0, 0, 0, 0.45);
}
.breakcore .plate {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--mauve) 35%, transparent),
@@ -667,6 +674,20 @@ code, pre, kbd, samp {
0 32px 60px -28px rgba(20, 16, 12, 0.55),
0 8px 20px -8px rgba(20, 16, 12, 0.3);
}
.salon-noir .plate:hover,
.gothic .plate:hover {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent),
0 32px 60px -28px rgba(0, 0, 0, 0.8),
0 8px 20px -8px rgba(0, 0, 0, 0.55);
}
.breakcore .plate:hover {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent),
0 0 0 1px color-mix(in srgb, var(--mauve) 30%, transparent),
0 32px 60px -28px rgba(255, 46, 166, 0.45),
0 0 32px -8px color-mix(in srgb, var(--mauve) 50%, transparent);
}
.plate .plate-image {
position: relative;
overflow: hidden;
@@ -854,6 +875,11 @@ code, pre, kbd, samp {
color: var(--rosewater);
border-color: var(--mauve);
}
.chip-draft {
background: color-mix(in srgb, var(--peach) 18%, transparent);
color: var(--peach);
border-color: color-mix(in srgb, var(--peach) 50%, transparent);
}
/* Card / glass — keep the name but reinterpret as a paper card */
.glass {
@@ -869,6 +895,11 @@ code, pre, kbd, samp {
.breakcore .glass {
background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
}
.salon-noir .glass {
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
0 14px 40px -24px rgba(0, 0, 0, 0.8);
}
.gothic .glass {
border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
box-shadow:
@@ -936,6 +967,61 @@ code, pre, kbd, samp {
background: color-mix(in srgb, var(--mauve) 8%, transparent);
}
/* ───── Top-bar controls — one height, one language ───── */
.topbar-control {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 2rem;
padding: 0 0.7rem;
font-family: var(--font-display);
font-style: italic;
font-size: 0.85rem;
line-height: 1;
color: var(--subtext1);
background: color-mix(in srgb, var(--surface0) 55%, transparent);
border: 1px solid var(--surface2);
border-radius: 1px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.topbar-control:hover {
color: var(--mauve);
background: color-mix(in srgb, var(--surface0) 85%, transparent);
border-color: color-mix(in srgb, var(--mauve) 45%, var(--surface2));
}
.topbar-control:focus-visible {
outline: none;
border-color: var(--mauve);
}
.topbar-control:disabled { opacity: 0.5; cursor: default; }
.topbar-control svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-control--danger:hover {
color: var(--red);
border-color: color-mix(in srgb, var(--red) 55%, var(--surface2));
}
/* Native <select> variant — leave room for the chevron overlay */
select.topbar-control {
appearance: none;
-webkit-appearance: none;
padding-right: 1.9rem;
}
.topbar-control kbd {
display: inline-flex;
align-items: center;
gap: 0.15rem;
font-family: var(--font-mono, monospace);
font-style: normal;
font-size: 0.62rem;
padding: 0.05rem 0.3rem;
border: 1px solid var(--surface2);
border-radius: 1px;
color: var(--subtext0);
}
/* Form input look */
.field-input {
width: 100%;