Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
2.0 kB · 86 lines
CSS
at dev
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687/* ============================================================ Vaporwave decorative layer — framework-agnostic Uses design-system CSS custom properties for light/dark mode. Consumer apps map their framework selectors to these effects. ============================================================ */
/* --- Neon Active State --- Apply .vw-active to sidebar items, tab items, etc. */
.vw-active { border-left: 2px solid rgb(var(--color-aqua)); background: rgb(var(--color-aqua) / 0.08); box-shadow: inset 0 0 16px rgb(var(--color-aqua) / 0.04);}
/* --- Links --- */
a { color: rgb(var(--color-aqua)); transition: color 0.2s, text-shadow 0.2s;}
a:hover { text-shadow: 0 0 8px rgb(var(--color-aqua) / 0.4);}
/* --- Headings --- */
h2 { color: rgb(var(--color-magenta));}
/* --- Inline Code --- */
:not(pre) > code { background: rgb(var(--color-magenta) / 0.1); color: rgb(var(--color-magenta)); padding: 0.15em 0.35em; border-radius: 0.25em;}
/* --- Horizontal Rules --- */
hr { border: none; height: 1px; background: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)), transparent);}
/* --- Code Block Ambiance --- */
pre { box-shadow: 0 0 20px rgb(var(--color-aqua) / 0.04);}
/* --- Gradient Logo --- Apply .vw-logo to text elements for aqua→magenta gradient. */
.vw-logo { background: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgb(var(--color-aqua) / 0.3));}
/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px;}
::-webkit-scrollbar-track { background: rgb(var(--color-bg-subtle));}
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgb(var(--color-aqua)), rgb(var(--color-magenta))); border-radius: 4px;}
* { scrollbar-color: rgb(var(--color-aqua)) rgb(var(--color-bg-subtle)); scrollbar-width: thin;}