SPB Git forge

spb/websensor

Public
33commits 1branches 0releases
3.4 MBsize
maindefault branch
10 days agolast push
TypeScript 55.4% Python 43.2% SQL 1.2%
6.6 KB · 255 lines css
Raw Blame History
1@import "tailwindcss";23@custom-variant dark (&:where(.dark, .dark *));45@theme {6  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;7  --font-mono: var(--font-jetbrains), ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;89  --color-bg: var(--bg);10  --color-panel: var(--panel);11  --color-panel-2: var(--panel-2);12  --color-panel-3: var(--panel-3);13  --color-fg: var(--fg);14  --color-fg-muted: var(--fg-muted);15  --color-fg-subtle: var(--fg-subtle);16  --color-line: var(--line);17  --color-line-strong: var(--line-strong);18  --color-signal: var(--signal);19  --color-signal-soft: var(--signal-soft);20  --color-hot: var(--hot);21  --color-high: var(--high);22  --color-mid: var(--mid);23  --color-low: var(--low);24  --color-silent: var(--silent);25  --color-silent-soft: var(--silent-soft);26  --color-danger: var(--danger);27  --color-warn: var(--warn);28  --color-ok: var(--ok);29  --color-info: var(--info);3031  --radius-sm: 3px;32  --radius-md: 5px;33  --radius-lg: 8px;3435  --animate-pulse-dot: pulse-dot 1.6s ease-in-out infinite;36  --animate-flash: flash 1.4s ease-out both;37  --animate-fade-in: fade-in 0.2s ease-out both;38  --animate-slide-in: slide-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;39  --animate-sheet-up: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;40  --animate-row-in: row-in 0.35s ease-out both;41  --animate-tick: tick 0.6s ease-out both;4243  @keyframes pulse-dot {44    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--signal) 55%, transparent); }45    60% { box-shadow: 0 0 0 6px transparent; }46  }47  @keyframes flash {48    0% { background-color: color-mix(in oklab, var(--signal) 22%, transparent); }49    100% { background-color: transparent; }50  }51  @keyframes fade-in {52    from { opacity: 0; transform: translateY(-2px); }53    to { opacity: 1; transform: translateY(0); }54  }55  @keyframes slide-in {56    from { opacity: 0; transform: translateX(16px); }57    to { opacity: 1; transform: translateX(0); }58  }59  @keyframes sheet-up {60    from { opacity: 0; transform: translateY(24px); }61    to { opacity: 1; transform: translateY(0); }62  }63  @keyframes row-in {64    from { opacity: 0; transform: translateY(-6px); background-color: color-mix(in oklab, var(--signal) 18%, transparent); }65    to { opacity: 1; transform: translateY(0); background-color: transparent; }66  }67  @keyframes tick {68    0% { color: var(--signal); }69    100% { color: inherit; }70  }71}7273:root {74  color-scheme: light;75  --bg: #f6f7fa;76  --panel: #ffffff;77  --panel-2: #eff1f5;78  --panel-3: #e6e9ef;79  --fg: #0d1220;80  --fg-muted: #4a5468;81  --fg-subtle: #7f889b;82  --line: #e1e5ec;83  --line-strong: #c3cad6;84  --signal: #0f9f7d;85  --signal-soft: #dcf5ee;86  --hot: #d12b2b;87  --high: #e26a12;88  --mid: #b7860b;89  --low: #7f889b;90  --silent: #6d4fd6;91  --silent-soft: #ede8fb;92  --danger: #d12b2b;93  --warn: #c57a0a;94  --ok: #0f9f7d;95  --info: #2b63d9;9697  /* density (spec §32) — overridden by [data-density] */98  --row-py: 7px;99  --row-gap: 4px;100  --fs-row: 13.5px;101  --fs-meta: 11.5px;102}103104.dark {105  color-scheme: dark;106  --bg: #0a0e15;107  --panel: #10161f;108  --panel-2: #151c28;109  --panel-3: #1b2331;110  --fg: #e6e8ee;111  --fg-muted: #a3adc2;112  --fg-subtle: #6b7591;113  --line: #1c2533;114  --line-strong: #2d394e;115  --signal: #22d3a5;116  --signal-soft: #0f2a24;117  --hot: #ff5c5c;118  --high: #ff9640;119  --mid: #e4b53b;120  --low: #6b7591;121  --silent: #a78bfa;122  --silent-soft: #241c3d;123  --danger: #ff5c5c;124  --warn: #e4b53b;125  --ok: #22d3a5;126  --info: #6ea0ff;127}128129[data-density="compact"] {130  --row-py: 3px;131  --row-gap: 2px;132  --fs-row: 12.5px;133  --fs-meta: 10.5px;134}135[data-density="comfortable"] {136  --row-py: 11px;137  --row-gap: 6px;138  --fs-row: 14.5px;139  --fs-meta: 12px;140}141142@layer base {143  * {144    border-color: var(--line);145  }146  html {147    -webkit-text-size-adjust: 100%;148    text-rendering: optimizeLegibility;149    scrollbar-gutter: stable;150  }151  body {152    @apply bg-bg text-fg font-sans antialiased;153    font-size: 14px;154    line-height: 1.5;155  }156  ::selection {157    background: color-mix(in oklab, var(--signal) 30%, transparent);158  }159  :focus-visible {160    outline: 2px solid var(--signal);161    outline-offset: 1px;162    border-radius: 3px;163  }164  h1, h2, h3 {165    letter-spacing: -0.015em;166  }167  code, kbd, pre, samp {168    @apply font-mono;169    font-size: 0.92em;170  }171  ::-webkit-scrollbar {172    width: 10px;173    height: 10px;174  }175  ::-webkit-scrollbar-thumb {176    background: var(--line-strong);177    border-radius: 6px;178    border: 2px solid var(--bg);179  }180  @media (prefers-reduced-motion: reduce) {181    *, *::before, *::after {182      animation-duration: 0.01ms !important;183      transition-duration: 0.01ms !important;184    }185  }186}187188@utility hairline {189  border-bottom: 1px solid var(--line);190}191@utility tabular {192  font-variant-numeric: tabular-nums;193}194@utility panel {195  background: var(--panel);196  border: 1px solid var(--line);197  border-radius: var(--radius-lg);198}199@utility label {200  font-size: 10.5px;201  letter-spacing: 0.08em;202  text-transform: uppercase;203  color: var(--fg-subtle);204  font-weight: 600;205}206@utility row-dense {207  padding-top: var(--row-py);208  padding-bottom: var(--row-py);209  font-size: var(--fs-row);210}211@utility meta {212  font-size: var(--fs-meta);213}214@utility offscreen-ok {215  content-visibility: auto;216  contain-intrinsic-size: auto 64px;217}218@utility no-scrollbar {219  scrollbar-width: none;220  &::-webkit-scrollbar { display: none; }221}222223.diff-line-add { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--fg); }224.diff-line-del { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--fg); }225.diff-line-meta { color: var(--fg-subtle); }226.diff-line-hunk { color: var(--info); background: color-mix(in oklab, var(--info) 8%, transparent); }227228/* skeletons (spec §113) */229.skeleton {230  position: relative;231  overflow: hidden;232  background: color-mix(in oklab, var(--panel-2) 80%, var(--panel-3));233  border-radius: 4px;234}235.skeleton::after {236  content: "";237  position: absolute;238  inset: 0;239  transform: translateX(-100%);240  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 6%, transparent), transparent);241  animation: shimmer 1.4s infinite;242}243@keyframes shimmer { 100% { transform: translateX(100%); } }244245/* heatmap cells (spec §102) */246.heat-0 { background: var(--panel-2); }247.heat-1 { background: color-mix(in oklab, var(--signal) 22%, var(--panel-2)); }248.heat-2 { background: color-mix(in oklab, var(--signal) 42%, var(--panel-2)); }249.heat-3 { background: color-mix(in oklab, var(--signal) 65%, var(--panel-2)); }250.heat-4 { background: var(--signal); }251.heat-hot { background: var(--hot); }252253/* sheet / drawer scrim */254.scrim { background: color-mix(in oklab, #000 45%, transparent); backdrop-filter: blur(2px); }255