alexei.dolgolyov
b27ac8783b
Lint & Test / test (push) Failing after 29s
Add 5 WebGL shader background effects (Aurora, Plasma, Digital Rain, Starfield, Warp Tunnel) via a new bg-shaders.ts engine that shares a dedicated canvas. Add 5 style presets (Sakura, Ocean, Copper, Vapor, Monolith) with distinctive font pairings. Remove CSS particles effect in favor of shader-based alternatives. Fix dot grid visibility and tune all shader intensities for subtle ambient appearance.
356 lines
11 KiB
CSS
356 lines
11 KiB
CSS
/* ── Appearance tab: preset cards & background effects ── */
|
|
|
|
/* Use --font-body / --font-heading CSS variables for preset font switching */
|
|
body {
|
|
font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--font-heading, 'Orbitron', sans-serif);
|
|
}
|
|
|
|
/* ─── Preset grid ─── */
|
|
|
|
.ap-hint {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ap-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ─── Preset card (shared) ─── */
|
|
|
|
.ap-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card-bg);
|
|
cursor: pointer;
|
|
transition: border-color var(--duration-normal) var(--ease-out),
|
|
box-shadow var(--duration-normal) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.ap-card:hover {
|
|
border-color: var(--text-muted);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ap-card.active {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 1px var(--primary-color),
|
|
0 0 12px -2px color-mix(in srgb, var(--primary-color) 40%, transparent);
|
|
}
|
|
|
|
.ap-card.active::after {
|
|
content: '\2713';
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 6px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.ap-card-label {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.ap-card.active .ap-card-label {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* ─── Style preset preview ─── */
|
|
|
|
.ap-card-preview {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid;
|
|
padding: 8px 7px 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ap-card-accent {
|
|
width: 24px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.ap-card-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.ap-card-lines span {
|
|
display: block;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ─── Background effect preview ─── */
|
|
|
|
.ap-bg-preview {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: var(--bg-color);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.ap-bg-preview-inner {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
/* Mini previews for each effect type */
|
|
[data-effect="none"] .ap-bg-preview-inner {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
[data-effect="noise"] .ap-bg-preview-inner {
|
|
background: radial-gradient(ellipse at 30% 50%,
|
|
color-mix(in srgb, var(--primary-color) 20%, var(--bg-color)) 0%,
|
|
var(--bg-color) 70%);
|
|
animation: ap-noise-shimmer 4s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes ap-noise-shimmer {
|
|
from { opacity: 0.7; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* ── Aurora preview: horizontal gradient bands ── */
|
|
[data-effect="aurora"] .ap-bg-preview-inner {
|
|
background:
|
|
linear-gradient(180deg,
|
|
transparent 0%,
|
|
color-mix(in srgb, var(--primary-color) 18%, transparent) 25%,
|
|
transparent 50%,
|
|
color-mix(in srgb, var(--primary-color) 12%, transparent) 70%,
|
|
transparent 100%);
|
|
animation: ap-aurora-sway 6s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes ap-aurora-sway {
|
|
from { transform: translateX(-5%) scaleY(1); opacity: 0.8; }
|
|
to { transform: translateX(5%) scaleY(1.15); opacity: 1; }
|
|
}
|
|
|
|
/* ── Plasma preview: color blobs ── */
|
|
[data-effect="plasma"] .ap-bg-preview-inner {
|
|
background:
|
|
radial-gradient(circle at 30% 40%,
|
|
color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 60%,
|
|
color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, transparent 50%),
|
|
radial-gradient(circle at 50% 20%,
|
|
color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 40%);
|
|
animation: ap-plasma-cycle 5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes ap-plasma-cycle {
|
|
from { transform: scale(1) rotate(0deg); }
|
|
to { transform: scale(1.1) rotate(3deg); }
|
|
}
|
|
|
|
/* ── Digital Rain preview: vertical lines ── */
|
|
[data-effect="rain"] .ap-bg-preview-inner {
|
|
background:
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 10% 0 / 1px 70% no-repeat,
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 25% 20% / 1px 50% no-repeat,
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 40% 10% / 1px 60% no-repeat,
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 40%) 55% 30% / 1px 40% no-repeat,
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 55%) 70% 5% / 1px 55% no-repeat,
|
|
linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 85% 15% / 1px 50% no-repeat;
|
|
opacity: 0.4;
|
|
animation: ap-rain-fall 3s linear infinite;
|
|
}
|
|
|
|
@keyframes ap-rain-fall {
|
|
from { transform: translateY(-20%); }
|
|
to { transform: translateY(20%); }
|
|
}
|
|
|
|
/* ── Stars preview: scattered dots ── */
|
|
[data-effect="stars"] .ap-bg-preview-inner {
|
|
background:
|
|
radial-gradient(circle 1px at 15% 20%, #fff 0%, transparent 100%),
|
|
radial-gradient(circle 1.5px at 40% 60%, var(--primary-color) 0%, transparent 100%),
|
|
radial-gradient(circle 1px at 65% 30%, #fff 0%, transparent 100%),
|
|
radial-gradient(circle 0.8px at 80% 70%, #fff 0%, transparent 100%),
|
|
radial-gradient(circle 1.2px at 30% 85%, var(--primary-color) 0%, transparent 100%),
|
|
radial-gradient(circle 0.7px at 55% 15%, #fff 0%, transparent 100%),
|
|
radial-gradient(circle 1px at 90% 45%, #fff 0%, transparent 100%),
|
|
radial-gradient(circle 0.9px at 10% 55%, #fff 0%, transparent 100%);
|
|
opacity: 0.7;
|
|
animation: ap-stars-twinkle 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes ap-stars-twinkle {
|
|
from { opacity: 0.5; }
|
|
to { opacity: 0.8; }
|
|
}
|
|
|
|
/* ── Warp preview: radial tunnel ── */
|
|
[data-effect="warp"] .ap-bg-preview-inner {
|
|
background: radial-gradient(circle at 50% 50%,
|
|
color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
|
|
transparent 30%,
|
|
color-mix(in srgb, var(--primary-color) 10%, transparent) 50%,
|
|
transparent 70%,
|
|
color-mix(in srgb, var(--primary-color) 6%, transparent) 90%);
|
|
animation: ap-warp-pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ap-warp-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 0.7; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
}
|
|
|
|
[data-effect="grid"] .ap-bg-preview-inner {
|
|
background-image:
|
|
radial-gradient(circle, var(--text-muted) 0.5px, transparent 0.5px);
|
|
background-size: 8px 8px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
[data-effect="mesh"] .ap-bg-preview-inner {
|
|
background:
|
|
radial-gradient(ellipse at 20% 30%,
|
|
color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 80% 70%,
|
|
color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 60%);
|
|
}
|
|
|
|
[data-effect="scanlines"] .ap-bg-preview-inner {
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent 0px,
|
|
transparent 2px,
|
|
color-mix(in srgb, var(--text-muted) 10%, transparent) 2px,
|
|
color-mix(in srgb, var(--text-muted) 10%, transparent) 3px
|
|
);
|
|
}
|
|
|
|
/* ═══ Full-page background effects ═══
|
|
Uses a dedicated <div id="bg-effect-layer"> (same pattern as the WebGL canvas).
|
|
The active effect class (e.g. .bg-effect-grid) is set directly on the div.
|
|
Shader effects use <canvas id="bg-effect-canvas"> instead. */
|
|
|
|
/* When a CSS/shader bg effect is active, make body transparent so the layer shows
|
|
(mirrors [data-bg-anim="on"] body { background: transparent } in base.css) */
|
|
[data-bg-effect] body {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-bg-effect] header {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-bg-effect] header::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background: color-mix(in srgb, var(--bg-color) 60%, transparent);
|
|
}
|
|
|
|
/* Card translucency for bg effects (match existing bg-anim behaviour) */
|
|
[data-bg-effect][data-theme="dark"] .card,
|
|
[data-bg-effect][data-theme="dark"] .template-card,
|
|
[data-bg-effect][data-theme="dark"] .add-device-card,
|
|
[data-bg-effect][data-theme="dark"] .dashboard-target {
|
|
background: rgba(45, 45, 45, 0.92);
|
|
}
|
|
|
|
[data-bg-effect][data-theme="light"] .card,
|
|
[data-bg-effect][data-theme="light"] .template-card,
|
|
[data-bg-effect][data-theme="light"] .add-device-card,
|
|
[data-bg-effect][data-theme="light"] .dashboard-target {
|
|
background: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
#bg-effect-layer {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#bg-effect-layer.bg-effect-grid,
|
|
#bg-effect-layer.bg-effect-mesh,
|
|
#bg-effect-layer.bg-effect-scanlines {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Grid: dot matrix ── */
|
|
#bg-effect-layer.bg-effect-grid {
|
|
background-image:
|
|
radial-gradient(circle 1.5px, var(--text-color) 0%, transparent 100%);
|
|
background-size: 24px 24px;
|
|
opacity: 0.18;
|
|
}
|
|
|
|
/* ── Gradient mesh: ambient blobs ── */
|
|
#bg-effect-layer.bg-effect-mesh {
|
|
background:
|
|
radial-gradient(ellipse 600px 400px at 15% 20%,
|
|
color-mix(in srgb, var(--primary-color) 25%, transparent) 0%, transparent 100%),
|
|
radial-gradient(ellipse 500px 500px at 85% 80%,
|
|
color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 100%),
|
|
radial-gradient(ellipse 400px 300px at 60% 40%,
|
|
color-mix(in srgb, var(--primary-color) 14%, transparent) 0%, transparent 100%);
|
|
animation: bg-mesh-drift 20s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes bg-mesh-drift {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(-20px, 15px) scale(1.05); }
|
|
100% { transform: translate(10px, -10px) scale(0.98); }
|
|
}
|
|
|
|
/* ── Scanlines: retro CRT ── */
|
|
#bg-effect-layer.bg-effect-scanlines {
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent 0px,
|
|
transparent 3px,
|
|
color-mix(in srgb, var(--text-muted) 8%, transparent) 3px,
|
|
color-mix(in srgb, var(--text-muted) 8%, transparent) 4px
|
|
);
|
|
}
|
|
|
|
/* ─── Mobile: 2-column grid ─── */
|
|
@media (max-width: 480px) {
|
|
.ap-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|