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

colors

Browse Source
This commit is contained in:
nils
2025-10-29 23:20:47 +01:00
parent 384483b14c
commit e3f8590ba2
2 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/folder.svg
+7 -10
View File
@@ -1,14 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient id="a" gradientTransform="matrix(0.45451 0 0 0.455522 -1210.292114 616.172607)" gradientUnits="userSpaceOnUse" x1="2689.251953" x2="2918.069824" y1="-1106.802979" y2="-1106.802979">
<stop offset="0" stop-color="#62a0ea"/>
<stop offset="0.0576991" stop-color="#afd4ff"/>
<stop offset="0.122204" stop-color="#62a0ea"/>
<stop offset="0.873306" stop-color="#62a0ea"/>
<stop offset="0.955997" stop-color="#c0d5ea"/>
<stop offset="1" stop-color="#62a0ea"/>
<linearGradient id="folderGradient" gradientTransform="matrix(0.45451 0 0 0.455522 -1210.292114 616.172607)" gradientUnits="userSpaceOnUse" x1="2689.251953" x2="2918.069824" y1="-1106.802979" y2="-1106.802979">
<stop offset="0" stop-color="var(--folder-icon-back, #62a0ea)"/>
<stop offset="0.5" stop-color="var(--folder-icon-mid, #afd4ff)"/>
<stop offset="1" stop-color="var(--folder-icon-front, #62a0ea)"/>
</linearGradient>
<path d="m 21.976562 12 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 86.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -72.085938 c 0 -6.628906 -5.359375 -12 -11.972656 -12 h -46.027344 c -2.453125 0 -4.695312 -1.386718 -5.796875 -3.582031 l -1.503906 -2.992187 c -1.65625 -3.292969 -5.019531 -5.371094 -8.699219 -5.371094 z m 0 0" fill="#438de6"/>
<path d="m 65.976562 36 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 54.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -62.03125 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="url(#a)"/>
<path d="m 65.976562 32 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 55.976562 c 0 5.539063 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.460937 9.980469 -10 v -63.976562 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="#a4caee"/>
<path d="m 21.976562 12 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 86.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -72.085938 c 0 -6.628906 -5.359375 -12 -11.972656 -12 h -46.027344 c -2.453125 0 -4.695312 -1.386718 -5.796875 -3.582031 l -1.503906 -2.992187 c -1.65625 -3.292969 -5.019531 -5.371094 -8.699219 -5.371094 z m 0 0" fill="var(--folder-icon-back, #438de6)"/>
<path d="m 65.976562 36 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 54.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -62.03125 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="url(#folderGradient)"/>
<path d="m 65.976562 32 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 55.976562 c 0 5.539063 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.460937 9.980469 -10 v -63.976562 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="var(--folder-icon-front, #a4caee)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

frontend/src/styles.css
+23 -10
View File
@@ -1,11 +1,11 @@
:root {
color-scheme: light dark;
--neutral-hue: 200deg;
--foreground-hue-offset: 70deg;
--neutral-hue: 260deg;
--foreground-hue-offset: 10deg;
--accent-hue-offset: -20deg;
--dark-hue-offset: 60deg;
--dark-foreground-hue-offset: 70deg;
--dark-hue-offset: 30deg;
--dark-foreground-hue-offset: 10deg;
/* --- Neutrals --- */
--bg: oklch(0.97 0.001 var(--neutral-hue));
@@ -21,6 +21,14 @@
--accent-hover: oklch(0.70 0.02 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
--on-accent: oklch(1 0 0);
--folder-icon-back: color-mix(in oklch, var(--accent) 78%, black 8%);
--folder-icon-mid: color-mix(in oklch, var(--accent) 60%, white 30%);
--folder-icon-front: color-mix(in oklch, var(--accent) 42%, white 58%);
--success-hue: 140deg;
--warning-hue: 85deg;
--danger-hue: 25deg;
--accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
--accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
--accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
@@ -55,9 +63,9 @@
--overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(var(--neutral-hue) + var(--foreground-hue-offset) - 5deg)) 18%, transparent);
/* --- Semantic colors --- */
--success: oklch(0.62 0.18 calc(var(--neutral-hue) + 90deg));
--warning: oklch(0.72 0.17 calc(var(--neutral-hue) - 5deg));
--danger: oklch(0.60 0.18 calc(var(--neutral-hue) - 65deg));
--success: oklch(0.68 0.16 var(--success-hue));
--warning: oklch(0.76 0.17 var(--warning-hue));
--danger: oklch(0.64 0.2 var(--danger-hue));
--success-subtle: color-mix(in oklch, var(--success) 12%, transparent);
--warning-subtle: color-mix(in oklch, var(--warning) 12%, transparent);
@@ -107,6 +115,10 @@
--accent-hover: oklch(0.82 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--on-accent: oklch(0.15 0.015 var(--dark-foreground-hue));
--folder-icon-back: color-mix(in oklch, var(--accent) 72%, black 12%);
--folder-icon-mid: color-mix(in oklch, var(--accent) 50%, white 24%);
--folder-icon-front: color-mix(in oklch, var(--accent) 30%, white 50%);
--accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
--accent-elevated: color-mix(in oklch, var(--accent) 28%, transparent);
--accent-elevated-strong: color-mix(in oklch, var(--accent) 38%, transparent);
@@ -136,9 +148,9 @@
--overlay-backdrop: color-mix(in oklch, oklch(0.1 0.015 var(--dark-neutral-hue)) 70%, transparent);
--overlay-shadow: color-mix(in oklch, oklch(0.12 0.015 var(--dark-neutral-hue)) 55%, transparent);
--success: oklch(0.72 0.16 180deg);
--warning: oklch(0.79 0.16 80deg);
--danger: oklch(0.7 0.16 25deg);
--success: oklch(0.62 0.16 var(--success-hue));
--warning: oklch(0.68 0.17 var(--warning-hue));
--danger: oklch(0.60 0.2 var(--danger-hue));
--success-subtle: color-mix(in oklch, var(--success) 20%, transparent);
--warning-subtle: color-mix(in oklch, var(--warning) 20%, transparent);
@@ -1101,6 +1113,7 @@ button.danger:hover:not([disabled]) {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.folder-node {