Compare commits

...

2 Commits

Author SHA1 Message Date
nvrl 632f2977b1 no spin sigil, redraw continiously 2026-05-16 18:35:24 +02:00
nvrl a9ccd5d92b fixed buttons on mobile 2026-05-16 18:33:42 +02:00
+51 -25
View File
@@ -1984,23 +1984,31 @@ html.cybersigil body::after {
background-size: 7px 7px; background-size: 7px 7px;
} }
/* Slow background growth — one generated sigil (DOM injected by CyberFx), /* Background growth — one generated sigil (DOM injected by CyberFx),
* spreading from its central spine out to both sides, rotating almost * spreading from its central spine out to both sides. Its strokes carve
* imperceptibly. Sits behind the imagery (see image-lift rules below). */ * in and wipe out forever (staggered per --i) so the whole figure is
* perpetually redrawing itself. Sits behind the imagery. */
.cybersigil .cs-fx-wire { .cybersigil .cs-fx-wire {
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 92vmin; width: 92vmin;
height: 92vmin; height: 92vmin;
opacity: 0.14; opacity: 0.14;
animation: cs-wire-spin 120s linear infinite; transform: translate(-50%, -50%);
} }
.cybersigil .cs-fx-wire .cs-sigil { .cybersigil .cs-fx-wire .cs-sigil {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent));
} }
.cybersigil .cs-fx-wire .cs-sigil path { .cybersigil .cs-fx-wire .cs-sigil path {
animation: cs-carve 2400ms ease-out forwards; animation: cs-redraw 5.5s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * 70ms); /* negative, per-stroke offset: the field is always mid-carve, never blank */
animation-delay: calc(var(--i, 0) * -0.34s);
}
@keyframes cs-redraw {
0% { stroke-dashoffset: 1; }
35% { stroke-dashoffset: 0; }
60% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1; }
} }
/* Random horizontal databend tears — bright displaced bars, mostly absent. */ /* Random horizontal databend tears — bright displaced bars, mostly absent. */
@@ -2563,6 +2571,19 @@ html.cybersigil body::after {
opacity: 0.85; opacity: 0.85;
animation: cs-blink 1.05s steps(1, jump-none) infinite; animation: cs-blink 1.05s steps(1, jump-none) infinite;
} }
/* Icon-only / collapsed controls have no room for the `>` prompt + blink
* caret — they overflow the 2rem square on phones. Drop the pseudo when
* the label is hidden (matches each collapse class's own breakpoint). */
.cybersigil .topbar-control--icon::before,
.cybersigil .topbar-control--icon::after { content: none; }
@media (max-width: 767px) {
.cybersigil .topbar-control.tc-collapse-md::before,
.cybersigil .topbar-control.tc-collapse-md::after { content: none; }
}
@media (max-width: 639px) {
.cybersigil .topbar-control.tc-collapse-sm::before,
.cybersigil .topbar-control.tc-collapse-sm::after { content: none; }
}
.cybersigil .topbar-control:hover { .cybersigil .topbar-control:hover {
color: var(--crust); color: var(--crust);
background: var(--mauve); background: var(--mauve);
@@ -2719,14 +2740,15 @@ html.cybersigil body::after {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
} }
/* Sketch marker reads as an unstable/draft signal — amber glyph, split /* Sketch marker reads as an unstable/draft signal — magenta glyph on a
* chromatic shadow, hard offset, matching the corrupted-terminal language. */ * dashed (unfinished) border, sky chromatic split, matching the theme. */
.cybersigil .plate-tag-mini--draft { .cybersigil .plate-tag-mini--draft {
color: var(--peach); color: var(--mauve);
border-color: var(--peach); border-style: dashed;
box-shadow: 2px 2px 0 color-mix(in srgb, var(--peach) 70%, transparent); border-color: var(--mauve);
box-shadow: 2px 2px 0 color-mix(in srgb, var(--sky) 55%, transparent);
text-shadow: text-shadow:
-1px 0 0 color-mix(in srgb, var(--peach) 65%, transparent), -1px 0 0 color-mix(in srgb, var(--mauve) 65%, transparent),
1px 0 0 color-mix(in srgb, var(--sky) 55%, transparent); 1px 0 0 color-mix(in srgb, var(--sky) 55%, transparent);
} }
.cybersigil .kbd-tip { .cybersigil .kbd-tip {
@@ -2914,19 +2936,21 @@ html.cybersigil body::after {
0 0 0 1px color-mix(in srgb, var(--sky) 10%, transparent) !important; 0 0 0 1px color-mix(in srgb, var(--sky) 10%, transparent) !important;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
} }
/* Thin engraved corner bracket (same language as the post plates) — the
* old organic leaf mask is dropped; no sigils pinned to asset thumbnails. */
.cybersigil .asset-tile::after { .cybersigil .asset-tile::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 3px; top: 4px;
left: 3px; left: 4px;
width: 26px; width: 13px;
height: 26px; height: 13px;
z-index: 2; z-index: 2;
background-color: color-mix(in srgb, var(--sky) 70%, transparent); border: 0 solid color-mix(in srgb, var(--sky) 55%, transparent);
-webkit-mask: var(--cs-corner) center / contain no-repeat; border-top-width: 2px;
mask: var(--cs-corner) center / contain no-repeat; border-left-width: 2px;
pointer-events: none; pointer-events: none;
transition: background-color 0.16s ease; transition: border-color 0.16s ease;
} }
.cybersigil .asset-tile:hover { .cybersigil .asset-tile:hover {
border-color: var(--mauve) !important; border-color: var(--mauve) !important;
@@ -2936,7 +2960,7 @@ html.cybersigil body::after {
4px 4px 0 0 var(--mauve) !important; 4px 4px 0 0 var(--mauve) !important;
} }
.cybersigil .asset-tile:hover::after { .cybersigil .asset-tile:hover::after {
background-color: var(--mauve); border-color: var(--mauve);
} }
.cybersigil .asset-thumb { .cybersigil .asset-thumb {
background: background:
@@ -3005,10 +3029,6 @@ html.cybersigil body::after {
0%, 49% { opacity: 1; } 0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; } 50%, 100% { opacity: 0; }
} }
@keyframes cs-wire-spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cs-flicker { @keyframes cs-flicker {
0%, 8% { opacity: 0.26; } 0%, 8% { opacity: 0.26; }
9% { opacity: 0.46; } 9% { opacity: 0.46; }
@@ -3041,4 +3061,10 @@ html.cybersigil body::after {
transition-duration: 0.001ms !important; transition-duration: 0.001ms !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
} }
/* The looping background sigil would otherwise collapse to its hidden
* end-state — pin it fully drawn instead so it stays visible, just still. */
.cybersigil .cs-fx-wire .cs-sigil path {
animation: none !important;
stroke-dashoffset: 0 !important;
}
} }