pullwatch/src/app.css at main · dragosdev-code/pullwatch

750 lines (689 loc) · 20.3 KB
@import 'tailwindcss';
@plugin "daisyui" {
    light --default,
    dark --prefersdark,
    cupcake,
    bumblebee,
    emerald,
    corporate,
    synthwave,
    cyberpunk,
    valentine,
    halloween,
    garden,
    forest,
    pastel,
    fantasy,
    wireframe,
    luxury,
    dracula,
    autumn,
    business,
    lemonade,
    coffee,
    winter,
    sunset,
    caramellatte,
  root: ':root';
  include:;
  exclude:;
  logs: false;
  background-color: #5b616b;
  --pw-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --pw-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pw-popup-width: 380px;
  --pw-popup-height: 400px;
  --pw-popup-resize-duration: 380ms;
  --pw-popup-resize-easing: var(--pw-ease-out-expo);
/* Chrome extension popups often give `html`/`body` an indefinite width; `%` and
   `fit-content` on `#root` then collapse. Pin the shell to the CSS vars set by
   public/popup-size-init.js (pre-React) and src/hooks/use-popup-size.ts (runtime);
   OnboardingGate reads the same vars inline so both sides stay in sync. Transitions
   let the whole shell (and Chrome's auto-sized popup window) animate between presets. */
  margin: 0;
  width: 100%;
  min-width: var(--pw-popup-width);
  min-height: var(--pw-popup-height);
  box-sizing: border-box;
  transition:
    min-width var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    min-height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing);
/* Chromium (extension popup): opacity/width animations on one control can retarget subpixel
   smoothing for unrelated text; grayscale AA on the whole UI stays visually stable. */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--pw-popup-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: min-height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing);
/* Applied to OnboardingGate's outer box so its width/height ease alongside html/body/#root. */
.pw-popup-shell {
  transition:
    width var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing);
@media (prefers-reduced-motion: reduce) {
  .pw-popup-shell {
    transition: none;
/* During the initial boot window the stylesheet applies min-width/min-height for the first time;
   without this, the transition animates from the pre-CSS size to the preset size, which reads as
   a pop-in flicker. Main.tsx removes the class after React's first commit so user-driven preset
   changes still animate smoothly. */
html.pw-booting,
html.pw-booting body,
html.pw-booting #root,
html.pw-booting .pw-popup-shell {
  transition: none !important;
#pw-app-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
/* Dev-only: simulate Chrome's extension popup chrome on a desktop browser tab so the
   minigame's popup-resize transitions are observable. Toggled by DevExtensionSimulator
   under `import.meta.env.DEV && !isExtensionContext()`; never present in prod builds. */
html.pw-dev-popup-sim {
  width: 100%;
  height: 100vh;
  background: #1a1a1a;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
html.pw-dev-popup-sim body {
  width: var(--pw-popup-width);
  min-width: var(--pw-popup-width);
  max-width: var(--pw-popup-width);
  height: var(--pw-popup-height);
  min-height: var(--pw-popup-height);
  max-height: var(--pw-popup-height);
  margin-top: 32px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  /* Make body the containing block for `position: fixed` descendants (e.g. the minigame
     overlay portal) so fixed-inset-0 resolves to the simulated popup box, not the viewport. */
  contain: paint;
  transition:
    width var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    min-width var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    min-height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    max-width var(--pw-popup-resize-duration) var(--pw-popup-resize-easing),
    max-height var(--pw-popup-resize-duration) var(--pw-popup-resize-easing);
@media (prefers-reduced-motion: reduce) {
  html.pw-dev-popup-sim body {
    transition: none;
  :root:has(
    .modal-open,
    .modal[open],
    .modal:target,
    .modal-toggle:checked,
    .drawer:not(.drawer-open) > .drawer-toggle:checked
  overflow: hidden;
  scrollbar-gutter: unset;
:where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) {
  scrollbar-gutter: unset;
.custom-scrollbar {
  scrollbar-width: none;
.custom-scrollbar::-webkit-scrollbar {
  display: none;
@keyframes settings-spin {
    transform: rotate(0deg);
    transform: rotate(360deg);
/* —— Theme ripple ——
   A cloned, pointer-events:none mirror of #pw-app-root tagged with the pre-swap
   data-theme sits on top; its clip-path shrinks from a full-coverage circle at
   the click origin to 0, unveiling the live (new-theme, interactive) tree
   underneath. No View Transitions, no top layer, no hit-testing compromise.
   Orchestrated from src/lib/theme-ripple.ts. */
@property --pw-ripple-x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
@property --pw-ripple-y {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
/* Animated by pw-ripple-reveal; drives the radius of the transparent disc
   growing in the mirror's radial-gradient mask. @property registration is
   required — without it, CSS interpolates `<length>` as a raw string and the
   mask doesn't re-rasterize per frame. */
@property --pw-ripple-r {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
@keyframes pw-ripple-reveal {
    --pw-ripple-r: 0px;
    --pw-ripple-r: var(--pw-ripple-max, 0px);
.pw-theme-mirror {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--color-base-100);
  contain: layout paint;
  /* The mask is opaque everywhere (showing the old-theme clone) except inside
     a transparent disc at the click origin; the disc's radius animates 0 →
     --pw-ripple-max so the live, new-theme tree underneath is revealed outward
     from the clicked element. 1px feather keeps the edge anti-aliased. */
  -webkit-mask: radial-gradient(
    circle at var(--pw-ripple-x) var(--pw-ripple-y),
    transparent calc(var(--pw-ripple-r) - 1px),
    black var(--pw-ripple-r)
  mask: radial-gradient(
    circle at var(--pw-ripple-x) var(--pw-ripple-y),
    transparent calc(var(--pw-ripple-r) - 1px),
    black var(--pw-ripple-r)
  animation: 620ms cubic-bezier(0.16, 1.11, 0.3, 1) both pw-ripple-reveal;
/* The clone drops its `#pw-app-root` id; this class restores the layout rules
   it depended on so the mirror paints identically to the live tree. */
.pw-theme-mirror-clone {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
@media (prefers-reduced-motion: reduce) {
  .pw-theme-mirror {
    display: none;
/* —— Settings: Founders’ lounge / sponsor section (scoped) —— */
/* WHY [@property]: Registering --pw-border-angle lets CSS natively interpolate the angle as a typed <angle>
   value. This enables smooth conic-gradient rotation driven by a custom property instead of the previous
   oversized-element-transform hack. The repaint cost is negligible for one small card in a settings panel. */
@property --pw-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
@keyframes pw-sponsor-border-travel {
    --pw-border-angle: 360deg;
@keyframes pw-sponsor-float {
    transform: translate(0, 0) scale(1);
    transform: translate(6px, -10px) scale(1.06);
    transform: translate(-8px, 8px) scale(0.94);
/* Sheen moves fully off-card at 0% and 100% so linear infinite loops without a visible snap. */
@keyframes pw-sponsor-shimmer {
    transform: translateX(-130%) skewX(-14deg);
    transform: translateX(420%) skewX(-14deg);
.pw-sponsor-frame {
  position: relative;
  /* Ring stroke (::before mask padding) and layout gutter must match: with p-px the inner panel sat on
     ~1.5px of each ring, so “chunkier” reads only where subpixels left a wider slot (often the bottom). */
  --pw-sponsor-ring-gutter: 1.9px;
  padding: var(--pw-sponsor-ring-gutter);
  /* WHY [no overflow:hidden]: The mask-composite technique on ::before shapes the border ring
     intrinsically; ::after’s blur extends slightly past the edge for corner glow and must not be clipped. */
  /* box-shadow:
    0 0 28px -10px color-mix(in oklch, var(--color-primary) 22%, transparent),
    0 12px 40px -20px color-mix(in oklch, var(--color-neutral) 25%, transparent); */
/* WHY [mask-composite: exclude]: A tight conic-gradient beam rotates around the full element, but
   two stacked linear-gradient masks with XOR compositing carve out the center, leaving only the
   border ring visible — pixel-perfect thickness without overflow clipping. */
.pw-sponsor-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  /* Stroke thickness; keep in sync with --pw-sponsor-ring-gutter so the full ring sits in the gutter. */
  padding: var(--pw-sponsor-ring-gutter);
  background: conic-gradient(
    from var(--pw-border-angle) at 50% 50%,
    transparent 0%,
    transparent 32%,
    color-mix(in oklch, var(--color-primary) 8%, transparent) 36%,
    color-mix(in oklch, var(--color-primary) 45%, transparent) 40%,
    color-mix(in oklch, var(--color-primary) 85%, transparent) 44%,
    var(--color-primary) 48%,
    var(--color-primary) 52%,
    color-mix(in oklch, var(--color-primary) 85%, transparent) 56%,
    color-mix(in oklch, var(--color-primary) 45%, transparent) 60%,
    color-mix(in oklch, var(--color-primary) 8%, transparent) 64%,
    transparent 68%,
    transparent 100%
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: pw-sponsor-border-travel 4s linear infinite;
/* WHY [corner glow]: Four radial-gradient hotspots sit at each corner; a rotating conic mask
   (same animation) reveals them only as the beam passes through, creating a diffuse ambient
   light-bleed that dissipates into the background — shadow-like, not border-like. */
.pw-sponsor-frame::after {
  content: '';
  position: absolute;
  z-index: 0;
  /* Tighter than ::before blur extent so the glow reads as soft bleed, not a second rim. */
  inset: -8px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklch, var(--color-primary) 34%, transparent) 0%,
      transparent 22%
    radial-gradient(
      circle at 100% 0%,
      color-mix(in oklch, var(--color-primary) 34%, transparent) 0%,
      transparent 22%
    radial-gradient(
      circle at 100% 100%,
      color-mix(in oklch, var(--color-primary) 34%, transparent) 0%,
      transparent 22%
    radial-gradient(
      circle at 0% 100%,
      color-mix(in oklch, var(--color-primary) 34%, transparent) 0%,
      transparent 22%
  /* Soft window tracks ::before’s wider arc; edges stay gradual to avoid banding. */
  -webkit-mask: conic-gradient(
    from var(--pw-border-angle),
    transparent 0%,
    transparent 32%,
    rgba(255, 255, 255, 0.35) 38%,
    rgba(255, 255, 255, 0.85) 46%,
    rgba(255, 255, 255, 0.85) 54%,
    rgba(255, 255, 255, 0.35) 62%,
    transparent 68%,
    transparent 100%
  mask: conic-gradient(
    from var(--pw-border-angle),
    transparent 0%,
    transparent 32%,
    rgba(255, 255, 255, 0.35) 38%,
    rgba(255, 255, 255, 0.85) 46%,
    rgba(255, 255, 255, 0.85) 54%,
    rgba(255, 255, 255, 0.35) 62%,
    transparent 68%,
    transparent 100%
  animation: pw-sponsor-border-travel 4s linear infinite;
  filter: blur(10px);
  opacity: 0.26;
.pw-sponsor-inner {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--radius-2xl, 1rem) - var(--pw-sponsor-ring-gutter, 3px));
  /* Opaque fill so the rotating frame gradient is not visible through the panel (blur was smearing it). */
  background: var(--color-base-100);
  border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
  border-top-color: color-mix(in oklch, var(--color-base-content) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-base-content) 6%, transparent),
    inset 0 -1px 0 color-mix(in oklch, var(--color-base-content) 5%, transparent),
    0 4px 24px -8px color-mix(in oklch, var(--color-neutral) 20%, transparent);
.pw-sponsor-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(36px);
  opacity: 0.38;
  animation: pw-sponsor-float 11s ease-in-out infinite;
.pw-sponsor-orb--a {
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--color-primary) 55%, transparent) 0%,
    transparent 70%
  top: -24px;
  right: -16px;
  animation-delay: 0s;
.pw-sponsor-orb--b {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--color-secondary) 45%, transparent) 0%,
    transparent 68%
  bottom: -20px;
  left: -12px;
  animation-delay: -3.5s;
  animation-duration: 13s;
.pw-sponsor-orb--c {
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--color-accent) 40%, transparent) 0%,
    transparent 65%
  top: 40%;
  left: 35%;
  animation-delay: -6s;
  animation-duration: 9s;
  opacity: 0.22;
.pw-sponsor-reveal-item {
  opacity: 0;
  /* WHY [no scale]: scaling text mid-transition rasterizes glyphs at fractional sizes — produces a
     visible blur/jump on small dense copy and on the CTA gradient. translateY-only keeps glyphs on
     their pixel grid for a crisp reveal. */
  transform: translateY(14px);
  /* Hint to compositor so the entrance lives on its own layer, avoiding repaints of sibling text. */
  will-change: transform, opacity;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
.pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item:nth-child(1) {
  transition-delay: 0.04s;
.pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item:nth-child(2) {
  transition-delay: 0.1s;
.pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item:nth-child(3) {
  transition-delay: 0.16s;
.pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item:nth-child(4) {
  transition-delay: 0.22s;
.pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item {
  opacity: 1;
  transform: translateY(0);
  /* Drop layer hint once settled so static text doesn't pay the compositor tax forever. */
  will-change: auto;
.pw-sponsor-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary-content);
  overflow: hidden;
  background: linear-gradient(
    110deg,
    var(--color-primary) 0%,
    color-mix(in oklch, var(--color-primary) 72%, #fff 28%) 50%,
    var(--color-primary) 100%
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-primary-content) 18%, transparent),
    0 4px 20px -4px color-mix(in oklch, var(--color-primary) 55%, transparent);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
.pw-sponsor-cta::after {
  content: '';
  position: absolute;
  top: -15%;
  width: 38%;
  height: 130%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    transparent 0%,
    color-mix(in oklch, var(--color-primary-content) 42%, transparent) 48%,
    transparent 100%
  transform: translateX(-130%) skewX(-14deg);
.pw-sponsor-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-primary-content) 24%, transparent),
    0 8px 28px -4px color-mix(in oklch, var(--color-primary) 65%, transparent);
.pw-sponsor-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
.pw-sponsor-cta:hover:not(:disabled)::after,
.pw-sponsor-cta:focus-visible:not(:disabled)::after {
  opacity: 0.38;
  animation: pw-sponsor-shimmer 1.55s linear infinite;
@media (prefers-reduced-motion: reduce) {
  .pw-sponsor-frame::before {
    animation: none;
    --pw-border-angle: 42deg;
  .pw-sponsor-frame::after {
    animation: none;
    opacity: 0;
  .pw-sponsor-orb {
    animation: none;
  .pw-sponsor-reveal-item {
    transition: none;
  .pw-sponsor-reveal-group--visible .pw-sponsor-reveal-item {
    opacity: 1;
    transform: none;
  .pw-sponsor-cta:hover::after,
  .pw-sponsor-cta:focus-visible:not(:disabled)::after {
    animation: none;
    opacity: 0;
/* —— Ko-fi-branded sponsor CTA ——
   Variant overrides the theme-primary palette so the button reads as Ko-fi (red coral) across every
   theme. Keeps the base `.pw-sponsor-cta` shimmer/lift transitions; only the surface colors change. */
.pw-sponsor-cta--kofi {
  --pw-kofi-base: #ff5e5b;
  --pw-kofi-hi: #ff8a87;
  color: #fff;
  background: linear-gradient(
    110deg,
    var(--pw-kofi-base) 0%,
    var(--pw-kofi-hi) 50%,
    var(--pw-kofi-base) 100%
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 4px 20px -4px color-mix(in oklch, var(--pw-kofi-base) 55%, transparent);
.pw-sponsor-cta--kofi:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 8px 28px -4px color-mix(in oklch, var(--pw-kofi-base) 65%, transparent);
.pw-sponsor-cta--kofi:focus-visible {
  outline-color: var(--pw-kofi-base);
/* WHY [theme-independent shimmer]: base shimmer derives from `--color-primary-content` so it shifts
   per theme. Ko-fi CTA is brand-locked, so the traversing highlight is always white. */
.pw-sponsor-cta--kofi::after {
  background: linear-gradient(
    transparent 0%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 100%
/* —— Preview-button bell wiggle ——
   Applied on hover only when the button is idle (see `data-idle` gate in the component). */
@keyframes pw-bell-ring {
    transform: rotate(0);
    transform: rotate(-12deg);
    transform: rotate(10deg);
    transform: rotate(-6deg);
    transform: rotate(4deg);
    transform: rotate(-2deg);
.pw-bell-icon {
  transform-origin: top center;
.pw-preview-button[data-idle]:hover .pw-bell-icon {
  animation: pw-bell-ring 700ms ease-in-out;
/* —— Info-tip icon (first-open breathe + hover tilt) —— */
@keyframes pw-tip-breathe {
    transform: scale(1);
    transform: scale(1.06);
.pw-tip-icon {
  transition:
    transform 180ms var(--pw-ease-out-back),
    color 140ms ease;
.pw-tip-icon--breathe {
  animation: pw-tip-breathe 1400ms ease-in-out 1;
/* —— Squash minigame screen shake (Phase 4) ——
   Triggered on feature break and miss outcomes for 300ms per spec.
   The element receives `.pw-squash-shake` while `now < shakeUntil`. */
@keyframes pw-squash-shake {
    transform: translate(0, 0);
    transform: translate(-4px, 2px);
    transform: translate(3px, -3px);
    transform: translate(-2px, 4px);
    transform: translate(4px, -1px);
    transform: translate(0, 0);
.pw-squash-shake {
  animation: pw-squash-shake 300ms ease-in-out;
.pw-tip-trigger:hover .pw-tip-icon {
  transform: scale(1.1);
@media (prefers-reduced-motion: reduce) {
  .pw-preview-button[data-idle]:hover .pw-bell-icon {
    animation: none;
  .pw-tip-icon,
  .pw-tip-icon--breathe,
  .pw-tip-trigger:hover .pw-tip-icon {
    transition: none;
    animation: none;
    transform: none;
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

FilesExpand file tree

app.css

Latest commit

History

app.css

File metadata and controls
