nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
nils
2025-11-13 13:22:10 +01:00
parent 98165f71b0
commit dfbd47f219
12 changed files with 93 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/base/theme.css
+30 -23
View File
@@ -7,22 +7,29 @@
--accent-hue-offset: 0deg;
--dark-hue-offset: 40deg;
--dark-foreground-hue-offset: 20deg;
--neutral-chroma: 0.15;
--neutral-chroma: 0.5;
--neutral-chroma-min: 0.01;
--neutral-chroma-max: 0.20;
--neutral-chroma-range: calc(var(--neutral-chroma-max) - var(--neutral-chroma-min));
--neutral-chroma-effective: calc(
var(--neutral-chroma-min)
+ clamp(0, var(--neutral-chroma), 1) * var(--neutral-chroma-range)
);
--neutral-contrast: 0.5;
--neutral-contrast-amount: calc(0.85 + var(--neutral-contrast) * 0.55);
--neutral-contrast-baseline: 1.125;
--neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));
--neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma), 1) / 0.1);
--neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma-effective), 1) / 0.1);
/* --- Neutrals --- */
--bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.985 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.995 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma-effective) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma-effective) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border));
--sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma-effective) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
/* --- Accent (primary) --- */
--accent: oklch(0.61 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
@@ -114,14 +121,14 @@
--dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
--dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
--bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
--bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue));
--sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
--accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
@@ -191,14 +198,14 @@
--dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
--dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
--bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
--bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
--muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue));
--sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
--border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
--accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
frontend/src/styles/detail/detail-panels.css
+24 -2
View File
@@ -149,10 +149,9 @@
}
.quick-add__chip {
display: inline-flex;
display: flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
border: 1px dashed var(--border);
border-radius: 999px;
padding: 0.18rem 0.6rem;
@@ -161,6 +160,10 @@
color: var(--muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
min-width: 0;
flex: 1 1 9rem;
max-width: 12rem;
overflow: hidden;
}
.quick-add__chip:hover,
@@ -180,6 +183,25 @@
display: inline-flex;
align-items: center;
gap: 0.25rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 0;
}
.quick-add__chip-label .icon-inline {
flex-shrink: 0;
}
.quick-add__chip-text {
display: inline-block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quick-add__form {
frontend/src/styles/documents/listing.css
+14 -26
View File
@@ -69,6 +69,8 @@
pointer-events: none;
z-index: 6;
height: 0;
width: calc(100% - 2rem);
margin: 0 1rem;
}
.panel-floating {
@@ -88,30 +90,29 @@
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-wrap: nowrap;
gap: 0.75rem;
z-index: 950000;
width: auto;
max-width: min(640px, calc(100% - 2rem));
margin: 0 auto;
min-width: 0;
overflow: hidden;
}
.panel-floating__buttons {
display: inline-flex;
align-items: center;
gap: 0.25rem;
order: 2;
pointer-events: auto;
}
.panel-floating__label {
order: 0;
}
.panel-floating__label {
white-space: nowrap;
pointer-events: none;
font-size: 0.95rem;
color: var(--fg);
min-width: 0;
}
.selection-summary {
@@ -150,15 +151,19 @@
gap: 0.4rem;
flex-wrap: nowrap;
pointer-events: auto;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.panel-floating-actions--assignments {
display: flex;
order: 1;
flex-wrap: nowrap;
width: auto;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
justify-content: center;
justify-content: flex-start;
overflow: hidden;
}
.panel-floating-actions .quick-add {
@@ -195,23 +200,6 @@
gap: 0.5rem;
}
.panel-floating__label {
order: 0;
flex: 1 1 auto;
text-align: left;
}
.panel-floating__buttons {
order: 1;
flex: 0 0 auto;
justify-content: flex-end;
}
.panel-floating-actions--assignments {
order: 2;
width: 100%;
justify-content: center;
}
.panel-floating-actions__button {
font-size: 1.15rem;
frontend/src/styles/documents/viewer.css
+1 -1
View File
@@ -3,7 +3,7 @@
flex-direction: column;
flex: 1;
min-height: 0;
background: var(--bg);
background: var(--surface);
}
.document-viewer-panel__body {