mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-10-04 02:33:47 +10:00
Amruth Pillai
28eea458d9
Loaded content now settles in: library cards and rows, checker issue rows, assistant suggestions and past conversations rise in with a short stagger on first appearance only; new assistant messages and "Thinking…" rise in while history stays put; a newly made document fades up from 96% with its accent ring fading in. Resume thumbnails keep the last drawn page of the same resume up while a new one renders, so edits and return visits no longer drop to a placeholder. The builder's first preview render paints hidden under the placeholder pages and fades in; the PDF viewer reserves an A4 slot and holds its overlay until a page has painted. The ATS checker ring fills on first reveal, ring colour blends across the threshold, and report and insights bars grow from their baseline. Hand-rolled pulsing placeholders become the static Skeleton, shaped like the view that is loading (documents grid or list, applications views, insights, API keys). ENTER_CLASS and stagger() live in libs/motion.ts.
94 lines
2.6 KiB
CSS
94 lines
2.6 KiB
CSS
@import "@reactive-resume/ui/globals.css";
|
|
|
|
/* Check's score ring: the arc eases to a new score, so a fix visibly counts. */
|
|
@property --ring-value {
|
|
syntax: "<percentage>";
|
|
inherits: false;
|
|
initial-value: 0%;
|
|
}
|
|
|
|
/* Registered so crossing 80 blends accent and warn instead of snapping. */
|
|
@property --ring-color {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: transparent;
|
|
}
|
|
|
|
@utility score-ring {
|
|
background: conic-gradient(var(--ring-color) 0 var(--ring-value), var(--sunken) 0);
|
|
transition:
|
|
--ring-value var(--d3) var(--ease),
|
|
--ring-color var(--d3) var(--ease);
|
|
}
|
|
|
|
/*
|
|
* The free ATS checker's first reveal: the arc fills from 0 once per checked file. 480ms is over the UI budget on
|
|
* purpose: it happens once per file and the fill is what explains the number. A keyframe (not @starting-style)
|
|
* because it must run on the element's first style; the reduced-motion rule in globals.css makes it instant.
|
|
*/
|
|
@utility score-ring-reveal {
|
|
animation: score-ring-reveal 480ms var(--ease) backwards;
|
|
}
|
|
|
|
@keyframes score-ring-reveal {
|
|
from {
|
|
--ring-value: 0%;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
/* A document made on this device lands on the grid: a fade up from 96%, once per mount. */
|
|
--animate-arrive: arrive var(--d2) var(--ease) backwards;
|
|
|
|
@keyframes arrive {
|
|
from {
|
|
opacity: 0;
|
|
scale: 0.96;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* A wavy warn underline under a line of the page that has a Check issue. */
|
|
@utility wavy-underline {
|
|
background-color: var(--warn);
|
|
mask:
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Cpath d='M0 3 Q1.5 0 3 3 T6 3' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E")
|
|
repeat-x left center / 6px 4px;
|
|
}
|
|
|
|
/*
|
|
* Page transitions: the router starts a view transition of type `page` when the pathname changes. The page fades
|
|
* out quickly and the new one fades up 6px; named navigation (app-nav, settings-nav, auth-brand) stays in place.
|
|
*/
|
|
@keyframes vt-page-out {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes vt-page-in {
|
|
from {
|
|
opacity: 0;
|
|
translate: 0 6px;
|
|
}
|
|
}
|
|
|
|
html:active-view-transition-type(page)::view-transition {
|
|
background-color: var(--bg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
html:active-view-transition-type(page)::view-transition-group(*) {
|
|
animation-duration: var(--d2);
|
|
animation-timing-function: var(--ease);
|
|
}
|
|
|
|
html:active-view-transition-type(page)::view-transition-old(root),
|
|
html:active-view-transition-type(page)::view-transition-old(*):only-child {
|
|
animation: calc(var(--d2) * 0.7) var(--ease) both vt-page-out;
|
|
}
|
|
|
|
html:active-view-transition-type(page)::view-transition-new(root) {
|
|
animation: var(--d2) var(--ease) both vt-page-in;
|
|
}
|