/* ════════════════════════════════════════════════════════════════ dt-steampunk.css v1.0 — Generic Steampunk Background Shared CSS для всіх Dev Tools сторінок. Застосовується до будь-якої сторінки з класами: НЕ містить page-specific стилів. SSOT: alerts-style-adc.css (STEAMPUNK MINIMAL v4.0 + BACKGROUND v5.0) ════════════════════════════════════════════════════════════════ */ /* ── Скасувати ::before градієнт devtools-body (фіолетовий) ── */ .devtools-body.al-page::before { display: none !important; } /* ── Pipe Kit: CSS змінні ── */ .dev-tools-scope.al-page { /* Copper */ --sp-copper-light: #9a7350; --sp-copper: #7a5a35; --sp-copper-mid: #6a4a2a; --sp-copper-dark: #4a3518; --sp-copper-shadow: #3a2510; /* Brass */ --sp-brass-light: #c8a855; --sp-brass: #a08535; --sp-brass-mid: #806828; --sp-brass-dark: #5a4a1a; --sp-brass-shadow: #4a3a12; --sp-pipe-width: 22px; --sp-pipe-outer: 26px; --sp-band-width: 6px; --sp-rivet-size: 5px; /* Steel */ --sp-steel-light: #8A8A8A; --sp-steel: #6A6A6A; --sp-steel-mid: #555; --sp-steel-dark: #3A3A3A; /* Glow */ --sp-glow-amber: #c58b3a; --sp-glow-teal: #7c8f88; --sp-glow-red: #c14418; } /* ════════════════════════════════════════════════════════════════ STEAMPUNK MINIMAL v4.0 — декоративні елементи ════════════════════════════════════════════════════════════════ */ /* Приховати v2.0-v3.2 декоративні елементи */ .dev-tools-scope.al-page .al-bg-machinery, .dev-tools-scope.al-page .al-bg-steam, .dev-tools-scope.al-page .al-sp-pipes, .dev-tools-scope.al-page .al-sp-vent, .dev-tools-scope.al-page .al-sp-divider, .dev-tools-scope.al-page .al-sp-wire, .dev-tools-scope.al-page .al-sp-dial-wrap, .dev-tools-scope.al-page .al-sp-nameplate, .dev-tools-scope.al-page .al-sp-strap, .dev-tools-scope.al-page .al-header-gear-decor { display: none !important; } /* Скасувати ::before / ::after залишки v3.x */ .dev-tools-scope.al-page::before, .dev-tools-scope.al-page::after { display: none !important; } /* Заклепки dt-bolt — brass стиль */ .dev-tools-scope.al-page .dt-bolt { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--border-bright, #8c6b46), var(--border-metal, #5c4430) 60%, var(--bg-elevated, #2a2018)); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.4); border: none; } .dev-tools-scope.al-page .dt-bolt::after { display: none; } /* Металевий шов — прихований */ .dev-tools-scope.al-page .al-metal-seam { display: none !important; } /* Кутові накладки header */ .dev-tools-scope.al-page .al-header-text { position: relative; padding: 4px 12px; } .dev-tools-scope.al-page .al-header-text::before { content: ''; position: absolute; top: -4px; left: -4px; width: 20px; height: 20px; border-top: 2px solid var(--accent-brass, #c58b3a); border-left: 2px solid var(--accent-brass, #c58b3a); pointer-events: none; opacity: 0.75; } .dev-tools-scope.al-page .al-header-text::after { content: ''; position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-bottom: 2px solid var(--accent-brass, #c58b3a); border-right: 2px solid var(--accent-brass, #c58b3a); pointer-events: none; opacity: 0.75; } /* HUD Status dot — brass/steel індикатори */ .dev-tools-scope.al-page .al-hud-status-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border-metal, #5c4430); flex-shrink: 0; } .dev-tools-scope.al-page .al-hud-status-dot.dot-ok { background: radial-gradient(circle at 40% 35%, #fff 0%, var(--success, #56a3a6) 40%, #2a4a4c 100%); box-shadow: 0 0 6px var(--success, #56a3a6), inset 0 -1px 2px rgba(0,0,0,0.3); } .dev-tools-scope.al-page .al-hud-status-dot.dot-warn { background: radial-gradient(circle at 40% 35%, #fff 0%, var(--warning, #e0c489) 40%, #4a3a20 100%); box-shadow: 0 0 6px var(--warning, #e0c489), inset 0 -1px 2px rgba(0,0,0,0.3); } .dev-tools-scope.al-page .al-hud-status-dot.dot-critical { background: radial-gradient(circle at 40% 35%, #fff 0%, var(--danger, #a3471b) 40%, #5a2010 100%); box-shadow: 0 0 6px var(--danger, #a3471b), inset 0 -1px 2px rgba(0,0,0,0.3); } /* ════════════════════════════════════════════════════════════════ STEAMPUNK BACKGROUND v5.0 Шар 1: CSS multi-layer (dot-grid + structural lines) Шар 2: SVG scene (.al-bg-scene) — шестерні, труба, компас ════════════════════════════════════════════════════════════════ */ .dev-tools-scope.al-page { background: radial-gradient(ellipse 130% 90% at 50% 40%, transparent 0%, rgba(13, 9, 7, 0.65) 100%), repeating-linear-gradient( 180deg, transparent 0px, transparent 188px, rgba(58, 46, 34, 0.16) 188px, rgba(58, 46, 34, 0.20) 196px, rgba(42, 32, 24, 0.12) 198px, transparent 198px, transparent 400px ), repeating-linear-gradient( 90deg, transparent 0px, transparent 286px, rgba(58, 46, 34, 0.10) 286px, rgba(58, 46, 34, 0.14) 292px, rgba(42, 32, 24, 0.08) 294px, transparent 294px, transparent 600px ), radial-gradient(circle at 50% 50%, rgba(92, 68, 48, 0.10) 1px, transparent 1.5px), var(--bg-void, #0d0907); background-size: 100% 100%, 100% 400px, 600px 100%, 40px 40px, 100% 100%; background-attachment: fixed, fixed, fixed, fixed, fixed; color: var(--text-bright, #f3efdc); } /* SVG сцена — фіксований шар під контентом */ .dev-tools-scope.al-page .al-bg-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.25; contain: layout paint; } /* Scanning line — прихована */ .al-scan-line { display: none !important; } /* ════════════════════════════════════════════════════════════════ MODULE PANEL — подвійна metaleva рамка ════════════════════════════════════════════════════════════════ */ .dev-tools-scope.al-page .al-module-panel { position: relative; max-width: var(--max-width, 1400px); margin: 0 auto; padding: 10px 16px; background: var(--bg-base, #14100c) !important; border: 2px solid var(--border-metal, #5c4430); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.85), 0 0 0 3px var(--border-dim, #3a2e22), 0 0 0 4px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.75), inset 0 0 0 3px var(--border-dim, #3a2e22), inset 0 0 0 4px rgba(197,139,58,0.08), inset 0 2px 0 rgba(232,219,178,0.05), inset 0 -2px 0 rgba(0,0,0,0.8); } /* Pipe section */ .dev-tools-scope.al-page .al-pipe-section { position: relative; max-width: var(--max-width, 1400px); margin: 0 auto; pointer-events: none; z-index: 2; } /* Gear keyframes */ @keyframes al-sp-gear-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes al-sp-gear-slow-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }