sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-10-29 20:19:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add v3 compositions for pages, settings, tables and identity

Browse Source
This commit is contained in:
Elias Schneider
2026-10-27 23:32:53 +01:00
parent 82df10f80b
commit 42c81c4687
71 changed files with 2066 additions and 1403 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+16 -44
View File
@@ -567,21 +567,6 @@ html.theme-switching *::after {
animation: shake 0.5s ease-in-out;
}
/* The bar shares its surface token with the cards it floats over, so it needs an elevation of its own */
.shadow-raised {
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.5),
0 1px 2px rgb(0 0 0 / 0.08),
0 12px 32px -10px rgb(0 0 0 / 0.25);
}
.dark .shadow-raised {
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.07),
0 1px 2px rgb(0 0 0 / 0.6),
0 16px 40px -12px rgb(0 0 0 / 0.9);
}
/* Marks a moment: the bar arriving, a save settling, a blocked navigation */
@keyframes bloom {
0% {
@@ -601,43 +586,30 @@ html.theme-switching *::after {
animation: bloom 1.5s ease-out forwards;
}
/* Dark mode has glow headroom: a luminous colour over a near-black pill reads as light spilling out of it */
/* Light mode has none, so the same gradient washes out to almost nothing there */
/* The light values keep the same origin below the pill, so the bloom rises the same way in both, but spread wider and carry more colour to register against white */
.bloom-pending {
background: radial-gradient(150% 260% at 50% 140%, rgb(217 119 6 / 0.26), transparent 72%);
/* The bar's inverse surface is dark in both themes, so one glow rising from under it reads as light in light and dark mode */
.bloom-pending,
.bloom-success,
.bloom-error {
background: radial-gradient(
130% 150% at 50% 130%,
color-mix(in srgb, var(--bloom-tint) 30%, transparent),
transparent 70%
);
}
/* Waits out the bar's 380ms motion so it blooms after the pill settles */
/* `both` keeps it hidden during that wait */
.bloom-pending {
--bloom-tint: var(--warning-solid);
}
/* Waits out the bar's 380ms motion so it blooms after the width settles, and `both` keeps it hidden during that wait */
.bloom-success {
background: radial-gradient(150% 260% at 50% 140%, rgb(22 163 74 / 0.3), transparent 72%);
--bloom-tint: var(--success-solid);
animation-delay: 380ms;
animation-fill-mode: both;
}
.bloom-error {
background: radial-gradient(
150% 260% at 50% 140%,
color-mix(in oklab, var(--destructive) 28%, transparent),
transparent 72%
);
}
.dark .bloom-pending {
background: radial-gradient(130% 150% at 50% 130%, rgb(251 191 36 / 0.24), transparent 70%);
}
.dark .bloom-success {
background: radial-gradient(130% 150% at 50% 130%, rgb(34 197 94 / 0.24), transparent 70%);
}
.dark .bloom-error {
background: radial-gradient(
130% 150% at 50% 130%,
color-mix(in oklab, var(--destructive) 26%, transparent),
transparent 70%
);
--bloom-tint: var(--danger-solid);
}
@media (prefers-reduced-motion: reduce) {