Compare commits
2 Commits
a9a16b0887
...
632f2977b1
| Author | SHA1 | Date | |
|---|---|---|---|
| 632f2977b1 | |||
| a9ccd5d92b |
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user