feat: Enhance CRT theme with photorealistic effects
- Add RGB phosphor subpixel pattern with color-dodge blend mode - Add phosphor bloom glow layer for authentic CRT warmth - Implement per-character RGB fringe with shimmer animation - Fringe colors adapt to phosphor theme (cyan/green/amber) - Photorealistic bezel with multi-layer plastic texture - Deep recessed screen cavity with dust accumulation effect - Integrated bottom panel (no visual separation from bezel) - Ultra-realistic brand badge with RGB triad logo - Chrome embossed "TRINITRON" branding with model number - Enhanced LED with recessed housing and lens highlight - Realistic speaker grille with individual slot depth Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
96ad9cf782
commit
2bf2e760e4
@ -43,6 +43,9 @@ Copyright:
|
||||
CSS_PROPERTY("--shadow-lg", "0 0 40px rgba(34,211,238,0.2)") \
|
||||
CSS_PROPERTY("--glow", "0 0 10px rgba(34,211,238,0.5)") \
|
||||
CSS_PROPERTY("--glow-strong", "0 0 20px rgba(34,211,238,0.8)") \
|
||||
CSS_COMMENT("Default cyan phosphor fringe: red left, cyan right") \
|
||||
CSS_PROPERTY("--fringe-left", "rgba(255,50,50,0.5)") \
|
||||
CSS_PROPERTY("--fringe-right", "rgba(0,255,255,0.4)") \
|
||||
CSS_PROPERTY("--table-header", "#0f0f0f") \
|
||||
CSS_PROPERTY("--table-row-alt", "#0a0a0a") \
|
||||
CSS_PROPERTY("--table-hover", "#164e63") \
|
||||
@ -67,7 +70,7 @@ Copyright:
|
||||
CSS_PROPERTY("--syn-char", "#4ade80") \
|
||||
CSS_PROPERTY("--syn-special", "#fb923c") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Phosphor theme: Green (classic)") \
|
||||
CSS_COMMENT("Phosphor theme: Green (classic P1)") \
|
||||
CSS_SELECTOR("html.phosphor-green") \
|
||||
CSS_PROPERTY("--text", "#4ade80") \
|
||||
CSS_PROPERTY("--text-muted", "#166534") \
|
||||
@ -78,8 +81,11 @@ Copyright:
|
||||
CSS_PROPERTY("--shadow-lg", "0 0 40px rgba(74,222,128,0.2)") \
|
||||
CSS_PROPERTY("--glow", "0 0 10px rgba(74,222,128,0.5)") \
|
||||
CSS_PROPERTY("--glow-strong", "0 0 20px rgba(74,222,128,0.8)") \
|
||||
CSS_COMMENT("Green phosphor fringe: magenta left, green-cyan right") \
|
||||
CSS_PROPERTY("--fringe-left", "rgba(255,0,128,0.5)") \
|
||||
CSS_PROPERTY("--fringe-right", "rgba(0,255,200,0.4)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Phosphor theme: Amber (warm)") \
|
||||
CSS_COMMENT("Phosphor theme: Amber (warm P3)") \
|
||||
CSS_SELECTOR("html.phosphor-amber") \
|
||||
CSS_PROPERTY("--text", "#fbbf24") \
|
||||
CSS_PROPERTY("--text-muted", "#92400e") \
|
||||
@ -92,6 +98,9 @@ Copyright:
|
||||
CSS_PROPERTY("--shadow-lg", "0 0 40px rgba(251,191,36,0.2)") \
|
||||
CSS_PROPERTY("--glow", "0 0 10px rgba(251,191,36,0.5)") \
|
||||
CSS_PROPERTY("--glow-strong", "0 0 20px rgba(251,191,36,0.8)") \
|
||||
CSS_COMMENT("Amber phosphor fringe: blue-violet left, orange-yellow right") \
|
||||
CSS_PROPERTY("--fringe-left", "rgba(100,50,255,0.5)") \
|
||||
CSS_PROPERTY("--fringe-right", "rgba(255,180,0,0.4)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Scanline Animation") \
|
||||
CSS_KEYFRAMES("scanlines") \
|
||||
@ -128,7 +137,157 @@ Copyright:
|
||||
CSS_KEYFRAME("51%, 100%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Phosphor Fringe Shimmer - Electron beam instability") \
|
||||
CSS_KEYFRAMES("phosphor-shimmer") \
|
||||
CSS_KEYFRAME("0%, 100%") \
|
||||
CSS_KEYFRAME_PROPERTY("text-shadow", "0.04em 0 0 var(--fringe-left), -0.04em 0 0 var(--fringe-right)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("25%") \
|
||||
CSS_KEYFRAME_PROPERTY("text-shadow", "0.035em 0.005em 0 var(--fringe-left), -0.045em -0.005em 0 var(--fringe-right)")\
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("text-shadow", "0.045em 0 0 var(--fringe-left), -0.035em 0 0 var(--fringe-right)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("75%") \
|
||||
CSS_KEYFRAME_PROPERTY("text-shadow", "0.038em -0.005em 0 var(--fringe-left), -0.042em 0.005em 0 var(--fringe-right)")\
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("CRT Boot-up Animation - Screen turns on with rounded clip") \
|
||||
CSS_KEYFRAMES("crt-boot") \
|
||||
CSS_KEYFRAME("0%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "inset(50% 50% 50% 50% round 30px)") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(2) saturate(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("15%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "inset(49% 20% 49% 20% round 30px)") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(3) saturate(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("30%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "inset(48% 5% 48% 5% round 30px)") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(2) saturate(0.3)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "inset(20% 0% 20% 0% round 30px)") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1.5) saturate(0.6)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("70%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "inset(5% 0% 5% 0% round 30px)") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1.2) saturate(0.8)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("100%") \
|
||||
CSS_KEYFRAME_PROPERTY("clip-path", "none") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1) saturate(1)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Screen Breathing - Subtle phosphor glow pulse") \
|
||||
CSS_KEYFRAMES("screen-breathe") \
|
||||
CSS_KEYFRAME("0%, 100%") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1) contrast(1)") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "inset 0 0 80px 20px rgba(0,0,0,0.6), inset 0 0 150px 60px rgba(0,0,0,0.25), 0 0 1px 1px rgba(0,0,0,0.9), 0 0 8px rgba(34,211,238,0.15)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1.02) contrast(1.01)") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "inset 0 0 80px 20px rgba(0,0,0,0.55), inset 0 0 150px 60px rgba(0,0,0,0.2), 0 0 1px 1px rgba(0,0,0,0.9), 0 0 15px rgba(34,211,238,0.25)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("LED Power-on Animation") \
|
||||
CSS_KEYFRAMES("led-on") \
|
||||
CSS_KEYFRAME("0%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "none") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.3") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "0 0 2px #4ade80") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("100%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "0 0 4px 1px #4ade80, 0 0 12px 2px rgba(74,222,128,0.6)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("LED Subtle Pulse") \
|
||||
CSS_KEYFRAMES("led-pulse") \
|
||||
CSS_KEYFRAME("0%, 100%") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "0 0 4px 1px #4ade80, 0 0 12px 2px rgba(74,222,128,0.6)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("box-shadow", "0 0 6px 2px #4ade80, 0 0 18px 4px rgba(74,222,128,0.7)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Content Appear after boot") \
|
||||
CSS_KEYFRAMES("crt-content-appear") \
|
||||
CSS_KEYFRAME("0%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(2) blur(2px)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.8") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1.3) blur(0)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("100%") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_PROPERTY("filter", "brightness(1) blur(0)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Micro-Glitch Animation - Subtle, non-disruptive flicker") \
|
||||
CSS_KEYFRAMES("micro-glitch") \
|
||||
CSS_COMMENT("Atmospheric glitch - brief opacity blink, minimal movement") \
|
||||
CSS_KEYFRAME("0%, 47%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_COMMENT("First glitch - quick dim blink") \
|
||||
CSS_KEYFRAME("47.3%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(-1px)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.88") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("47.6%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.95") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("47.9%, 91%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_COMMENT("Second glitch - slightly longer") \
|
||||
CSS_KEYFRAME("91.2%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.92") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("91.5%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(-1px)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "0.85") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("91.8%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("92%, 100%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translateX(0)") \
|
||||
CSS_KEYFRAME_PROPERTY("opacity", "1") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Static Noise Animation - Rapid position shifts for snow effect") \
|
||||
CSS_KEYFRAMES("static-noise") \
|
||||
CSS_KEYFRAME("0%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translate(0, 0)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("25%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translate(-5%, -5%)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("50%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translate(5%, 5%)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("75%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translate(-2%, 3%)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAME("100%") \
|
||||
CSS_KEYFRAME_PROPERTY("transform", "translate(3%, -2%)") \
|
||||
CSS_KEYFRAME_END() \
|
||||
CSS_KEYFRAMES_END() \
|
||||
CSS_COMMENT("Base styles") \
|
||||
CSS_SELECTOR("*, *::before, *::after") \
|
||||
CSS_PROPERTY("box-sizing", "border-box") \
|
||||
@ -158,41 +317,84 @@ Copyright:
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("display", "flex") \
|
||||
CSS_PROPERTY("flex-direction", "column") \
|
||||
CSS_PROPERTY("padding", "clamp(12px, 2vmin, 28px)") \
|
||||
CSS_COMMENT("Realistic bezel - layered plastic/metal look") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 5%, #0f0f0f 50%, #1a1a1a 95%, #252525 100%)") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.5), inset 2px 0 4px rgba(0,0,0,0.3), inset -2px 0 4px rgba(0,0,0,0.3)") \
|
||||
CSS_PROPERTY("padding", "clamp(14px, 2.5vmin, 32px)") \
|
||||
CSS_COMMENT("Photorealistic bezel - multi-layer plastic with depth and wear") \
|
||||
CSS_PROPERTY("background", "linear-gradient(175deg, #2d2d2d 0%, #252525 2%, #1e1e1e 8%, #171717 20%, #131313 50%, #151515 80%, #1a1a1a 92%, #222222 98%, #2a2a2a 100%)") \
|
||||
CSS_COMMENT("Complex shadow for 3D plastic depth - light from top-left") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 2px 0 rgba(255,255,255,0.04), inset 0 4px 8px rgba(255,255,255,0.02), inset 0 -2px 0 rgba(0,0,0,0.8), inset 0 -6px 12px rgba(0,0,0,0.4), inset 3px 0 6px rgba(0,0,0,0.3), inset -3px 0 6px rgba(0,0,0,0.3), inset 0 0 60px rgba(0,0,0,0.3)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Bezel top edge highlight") \
|
||||
CSS_COMMENT("Bezel top chamfer - light catching on beveled edge") \
|
||||
CSS_SELECTOR(".crt-monitor::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("top", "0") \
|
||||
CSS_PROPERTY("left", "0") \
|
||||
CSS_PROPERTY("right", "0") \
|
||||
CSS_PROPERTY("height", "3px") \
|
||||
CSS_PROPERTY("background", "linear-gradient(90deg, transparent 5%, rgba(60,60,60,0.8) 20%, rgba(80,80,80,0.6) 50%, rgba(60,60,60,0.8) 80%, transparent 95%)") \
|
||||
CSS_PROPERTY("height", "clamp(4px, 0.6vmin, 8px)") \
|
||||
CSS_COMMENT("Chamfered edge with light reflection - brighter center fading to edges") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, rgba(70,70,70,0.9) 0%, rgba(50,50,50,0.7) 40%, rgba(30,30,30,0.4) 100%), linear-gradient(90deg, rgba(40,40,40,0.3) 0%, rgba(80,80,80,0.5) 15%, rgba(100,100,100,0.4) 30%, rgba(90,90,90,0.5) 50%, rgba(100,100,100,0.4) 70%, rgba(80,80,80,0.5) 85%, rgba(40,40,40,0.3) 100%)") \
|
||||
CSS_PROPERTY("z-index", "10") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Screen Bezel Frame - Recessed effect") \
|
||||
CSS_COMMENT("Bezel plastic texture overlay - micro grain and dust") \
|
||||
CSS_SELECTOR(".crt-monitor::after") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_COMMENT("SVG noise for plastic grain texture") \
|
||||
CSS_PROPERTY("background-image", "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")") \
|
||||
CSS_PROPERTY("background-size", "128px 128px") \
|
||||
CSS_PROPERTY("opacity", "0.03") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "1") \
|
||||
CSS_PROPERTY("mix-blend-mode", "overlay") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Screen Bezel Frame - Deep recessed cavity for screen") \
|
||||
CSS_SELECTOR(".crt-bezel") \
|
||||
CSS_PROPERTY("position", "relative") \
|
||||
CSS_PROPERTY("flex", "1") \
|
||||
CSS_PROPERTY("border-radius", "8px") \
|
||||
CSS_PROPERTY("padding", "clamp(6px, 1vmin, 14px)") \
|
||||
CSS_COMMENT("Inner bezel - recessed frame around screen") \
|
||||
CSS_PROPERTY("background", "linear-gradient(145deg, #0a0a0a 0%, #151515 50%, #0a0a0a 100%)") \
|
||||
CSS_PROPERTY("box-shadow", "inset 3px 3px 8px rgba(0,0,0,0.9), inset -2px -2px 6px rgba(40,40,40,0.3), 0 0 0 1px rgba(0,0,0,0.8)") \
|
||||
CSS_COMMENT("Bezel radius must be larger than screen radius + padding") \
|
||||
CSS_PROPERTY("border-radius", "clamp(22px, 4vmin, 54px)") \
|
||||
CSS_PROPERTY("padding", "clamp(8px, 1.2vmin, 16px)") \
|
||||
CSS_COMMENT("Deep recessed cavity - screen sits inside this well") \
|
||||
CSS_PROPERTY("background", "linear-gradient(160deg, #050505 0%, #0a0a0a 20%, #0d0d0d 40%, #0a0a0a 60%, #080808 80%, #050505 100%)") \
|
||||
CSS_COMMENT("Multi-layer shadows for deep recessed 3D effect") \
|
||||
CSS_PROPERTY("box-shadow", "inset 4px 4px 12px rgba(0,0,0,1), inset -3px -3px 10px rgba(0,0,0,0.8), inset 8px 8px 20px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.9), inset 0 2px 4px rgba(0,0,0,1), 0 0 0 1px rgba(0,0,0,0.95), 0 -1px 0 rgba(40,40,40,0.15)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Screen Container - Curved glass effect") \
|
||||
CSS_COMMENT("Inner bezel lip - the raised edge where plastic meets recessed area") \
|
||||
CSS_SELECTOR(".crt-bezel::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "-1px") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("border", "1px solid transparent") \
|
||||
CSS_COMMENT("Top and left edges catch light, bottom and right in shadow") \
|
||||
CSS_PROPERTY("border-top-color", "rgba(60,60,60,0.4)") \
|
||||
CSS_PROPERTY("border-left-color", "rgba(50,50,50,0.3)") \
|
||||
CSS_PROPERTY("border-bottom-color", "rgba(0,0,0,0.8)") \
|
||||
CSS_PROPERTY("border-right-color", "rgba(0,0,0,0.6)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Inner bezel dust accumulation - darker in the crevice") \
|
||||
CSS_SELECTOR(".crt-bezel::after") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("Vignette simulating dust and shadow in corners of recess") \
|
||||
CSS_PROPERTY("background", "radial-gradient(ellipse 90% 85% at center, transparent 60%, rgba(0,0,0,0.4) 100%)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Screen Container - Glass tube with rubber gasket and boot animation") \
|
||||
CSS_SELECTOR(".crt-screen") \
|
||||
CSS_PROPERTY("position", "relative") \
|
||||
CSS_PROPERTY("height", "100%") \
|
||||
CSS_PROPERTY("background", "var(--bg)") \
|
||||
CSS_PROPERTY("border-radius", "clamp(16px, 3vmin, 40px) / clamp(12px, 2.5vmin, 32px)") \
|
||||
CSS_PROPERTY("overflow", "hidden") \
|
||||
CSS_COMMENT("Barrel distortion simulation - curved shadow edges") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 0 80px 20px rgba(0,0,0,0.6), inset 0 0 150px 60px rgba(0,0,0,0.25), 0 0 1px 1px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.5)") \
|
||||
CSS_COMMENT("Boot-up animation + screen breathing") \
|
||||
CSS_PROPERTY("animation", "crt-boot 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, screen-breathe 4s ease-in-out 1.2s infinite") \
|
||||
CSS_COMMENT("Rubber gasket ring + barrel distortion + phosphor glow bleed") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 0 100px 30px rgba(0,0,0,0.7), inset 0 0 200px 80px rgba(0,0,0,0.35), 0 0 0 2px #050505, 0 0 0 3px #0a0a0a, 0 0 0 4px rgba(20,20,20,0.8), 0 1px 0 4px rgba(40,40,40,0.2), 0 -1px 0 4px rgba(0,0,0,0.9), 0 0 20px rgba(34,211,238,0.15), 0 0 40px rgba(34,211,238,0.08)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Glass Surface - Reflection and curvature") \
|
||||
CSS_SELECTOR(".crt-screen::before") \
|
||||
@ -205,51 +407,125 @@ Copyright:
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "1001") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Scanlines Overlay") \
|
||||
CSS_COMMENT("CRT Scanlines Overlay - Dual-tone for visibility on all backgrounds") \
|
||||
CSS_SELECTOR(".crt-screen::after") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("background", "repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px)") \
|
||||
CSS_COMMENT("Alternating light/dark bands visible on any background") \
|
||||
CSS_PROPERTY("background", "repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.1) 1px, rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 4px)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "1000") \
|
||||
CSS_PROPERTY("animation", "scanlines 0.08s linear infinite") \
|
||||
CSS_PROPERTY("animation", "scanlines 0.1s linear infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Curvature Vignette - Barrel distortion edges") \
|
||||
CSS_COMMENT("CRT Curvature Vignette - Enhanced barrel distortion") \
|
||||
CSS_SELECTOR(".crt-vignette") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("Strong edge darkening simulates barrel curvature") \
|
||||
CSS_PROPERTY("background", "radial-gradient(ellipse 85% 80% at center, transparent 0%, transparent 55%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0.8) 100%)") \
|
||||
CSS_COMMENT("Multi-layer vignette for pronounced barrel curvature") \
|
||||
CSS_PROPERTY("background", "radial-gradient(ellipse 80% 75% at center, transparent 0%, transparent 45%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.95) 100%), radial-gradient(ellipse 150% 100% at center, transparent 50%, rgba(0,0,0,0.3) 100%)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "999") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Chromatic Aberration Layer") \
|
||||
CSS_COMMENT("Corner shadows for extra barrel depth") \
|
||||
CSS_SELECTOR(".crt-vignette::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 0 120px 40px rgba(0,0,0,0.4)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Chromatic Aberration Layer - Enhanced RGB fringing") \
|
||||
CSS_SELECTOR(".crt-aberration") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("RGB split at edges only") \
|
||||
CSS_PROPERTY("box-shadow", "inset 3px 0 12px -4px rgba(255,0,0,0.12), inset -3px 0 12px -4px rgba(0,255,255,0.12), inset 0 3px 12px -4px rgba(255,0,255,0.08), inset 0 -3px 12px -4px rgba(0,255,0,0.08)") \
|
||||
CSS_COMMENT("Strong RGB split at edges - visible color fringing") \
|
||||
CSS_PROPERTY("box-shadow", "inset 6px 0 25px -6px rgba(255,0,50,0.25), inset -6px 0 25px -6px rgba(0,200,255,0.25), inset 0 5px 20px -5px rgba(255,0,200,0.15), inset 0 -5px 20px -5px rgba(0,255,100,0.15)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "997") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Aberration corner enhancement") \
|
||||
CSS_SELECTOR(".crt-aberration::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("background", "radial-gradient(ellipse at top left, rgba(255,0,100,0.08) 0%, transparent 30%), radial-gradient(ellipse at top right, rgba(0,150,255,0.08) 0%, transparent 30%), radial-gradient(ellipse at bottom left, rgba(0,255,150,0.06) 0%, transparent 30%), radial-gradient(ellipse at bottom right, rgba(255,100,0,0.06) 0%, transparent 30%)") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("RGB Phosphor Mask - Authentic shadow mask triads with glow") \
|
||||
CSS_SELECTOR(".crt-subpixels") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("Distinct RGB phosphor stripes - visible on close inspection") \
|
||||
CSS_PROPERTY("background", "repeating-linear-gradient(90deg, rgba(255,30,30,0.06) 0px, rgba(255,30,30,0.03) 1px, rgba(30,255,30,0.06) 1px, rgba(30,255,30,0.03) 2px, rgba(60,60,255,0.06) 2px, rgba(60,60,255,0.03) 3px)") \
|
||||
CSS_PROPERTY("background-size", "3px 100%") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "996") \
|
||||
CSS_COMMENT("Color blend for phosphor interaction with content") \
|
||||
CSS_PROPERTY("mix-blend-mode", "color-dodge") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Phosphor glow layer - bloom effect behind subpixels") \
|
||||
CSS_SELECTOR(".crt-subpixels::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("Soft phosphor bloom - gives that warm CRT glow") \
|
||||
CSS_PROPERTY("background", "repeating-linear-gradient(90deg, rgba(255,0,0,0.015) 0px 1px, rgba(0,255,0,0.01) 1px 2px, rgba(0,100,255,0.015) 2px 3px)") \
|
||||
CSS_PROPERTY("background-size", "3px 100%") \
|
||||
CSS_PROPERTY("filter", "blur(1px)") \
|
||||
CSS_PROPERTY("opacity", "0.8") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Static Noise Overlay - Appears on scroll") \
|
||||
CSS_SELECTOR(".crt-static") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_COMMENT("SVG noise texture for TV static effect") \
|
||||
CSS_PROPERTY("background-image", "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")") \
|
||||
CSS_PROPERTY("background-size", "150px 150px") \
|
||||
CSS_PROPERTY("opacity", "0") \
|
||||
CSS_PROPERTY("pointer-events", "none") \
|
||||
CSS_PROPERTY("z-index", "1002") \
|
||||
CSS_PROPERTY("mix-blend-mode", "overlay") \
|
||||
CSS_PROPERTY("transition", "opacity 0.1s ease") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Static visible when scrolling") \
|
||||
CSS_SELECTOR(".crt-static.is-scrolling") \
|
||||
CSS_PROPERTY("opacity", "0.15") \
|
||||
CSS_PROPERTY("animation", "static-noise 0.05s steps(3) infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Content Scroll Container") \
|
||||
CSS_SELECTOR(".crt-content") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("overflow-y", "auto") \
|
||||
CSS_PROPERTY("overflow-x", "hidden") \
|
||||
CSS_PROPERTY("scroll-behavior", "smooth") \
|
||||
CSS_PROPERTY("animation", "flicker 5s infinite") \
|
||||
CSS_COMMENT("Content appears after boot, then subtle flicker") \
|
||||
CSS_PROPERTY("opacity", "0") \
|
||||
CSS_PROPERTY("animation", "crt-content-appear 0.5s ease-out 0.8s forwards, flicker 5s 1.3s infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Content Inner") \
|
||||
CSS_COMMENT("CRT Content Inner - With micro-glitch animation") \
|
||||
CSS_SELECTOR(".crt-content-inner") \
|
||||
CSS_PROPERTY("max-width", "clamp(50rem, 85%, 72rem)") \
|
||||
CSS_PROPERTY("margin", "0 auto") \
|
||||
CSS_PROPERTY("padding", "2rem 2.5rem") \
|
||||
CSS_COMMENT("Random glitch every ~10s - feels organic") \
|
||||
CSS_PROPERTY("animation", "micro-glitch 10s linear 2s infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Phosphor fringe on text - RGB subpixel color separation visible up close") \
|
||||
CSS_SELECTOR(".crt-content-inner p, .crt-content-inner li, .crt-content-inner h1, .crt-content-inner h2, .crt-content-inner h3, .crt-content-inner h4, .crt-content-inner span, .crt-content-inner a, .crt-content-inner strong, .crt-content-inner em, .crt-content-inner td, .crt-content-inner th, .crt-content-inner blockquote") \
|
||||
CSS_COMMENT("Subtle shimmer simulates electron beam instability") \
|
||||
CSS_PROPERTY("animation", "phosphor-shimmer 0.12s steps(4) infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Custom scrollbar for CRT content") \
|
||||
CSS_SELECTOR(".crt-content::-webkit-scrollbar") \
|
||||
@ -265,44 +541,140 @@ Copyright:
|
||||
CSS_PROPERTY("background", "var(--text)") \
|
||||
CSS_PROPERTY("box-shadow", "0 0 8px var(--text)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Bottom Panel - Brand area") \
|
||||
CSS_COMMENT("CRT Bottom Panel - Integrated control strip, same plastic shell as monitor") \
|
||||
CSS_SELECTOR(".crt-bottom") \
|
||||
CSS_PROPERTY("position", "relative") \
|
||||
CSS_PROPERTY("display", "flex") \
|
||||
CSS_PROPERTY("align-items", "center") \
|
||||
CSS_PROPERTY("justify-content", "space-between") \
|
||||
CSS_PROPERTY("padding", "clamp(8px, 1.2vmin, 16px) clamp(16px, 2vmin, 32px)") \
|
||||
CSS_PROPERTY("margin-top", "clamp(6px, 1vmin, 12px)") \
|
||||
CSS_PROPERTY("padding", "clamp(12px, 1.8vmin, 22px) clamp(24px, 3.5vmin, 48px)") \
|
||||
CSS_COMMENT("No margin - continuous with bezel") \
|
||||
CSS_PROPERTY("margin-top", "0") \
|
||||
CSS_PROPERTY("border-radius", "0") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Power LED with realistic glow") \
|
||||
CSS_COMMENT("Panel seam line - the hairline crack between molded plastic sections") \
|
||||
CSS_SELECTOR(".crt-bottom::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("top", "0") \
|
||||
CSS_PROPERTY("left", "clamp(12px, 2vmin, 24px)") \
|
||||
CSS_PROPERTY("right", "clamp(12px, 2vmin, 24px)") \
|
||||
CSS_PROPERTY("height", "1px") \
|
||||
CSS_COMMENT("Subtle seam - dark line with light edge below simulating groove") \
|
||||
CSS_PROPERTY("background", "linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 90%, transparent 100%)") \
|
||||
CSS_PROPERTY("box-shadow", "0 1px 0 rgba(40,40,40,0.25)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Power LED - Recessed in plastic housing") \
|
||||
CSS_SELECTOR(".crt-led") \
|
||||
CSS_PROPERTY("position", "relative") \
|
||||
CSS_PROPERTY("width", "12px") \
|
||||
CSS_PROPERTY("height", "12px") \
|
||||
CSS_COMMENT("LED sits inside recessed circular housing") \
|
||||
CSS_PROPERTY("background", "radial-gradient(circle at 35% 35%, #90ff90 0%, #5cef5c 30%, #3cdf3c 50%, #22c55e 70%, #188f18 100%)") \
|
||||
CSS_PROPERTY("border-radius", "50%") \
|
||||
CSS_COMMENT("Inset shadow creates recessed housing effect") \
|
||||
CSS_PROPERTY("box-shadow", "0 0 0 2px #0a0a0a, 0 0 0 3px #1a1a1a, inset 0 0 2px rgba(255,255,255,0.4), 0 0 8px rgba(74,222,128,0.4), 0 0 16px rgba(74,222,128,0.2)") \
|
||||
CSS_COMMENT("LED turns on with screen, then pulses gently") \
|
||||
CSS_PROPERTY("animation", "led-on 0.8s ease-out forwards, led-pulse 3s ease-in-out 1.2s infinite") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("LED plastic lens highlight") \
|
||||
CSS_SELECTOR(".crt-led::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("top", "2px") \
|
||||
CSS_PROPERTY("left", "2px") \
|
||||
CSS_PROPERTY("width", "4px") \
|
||||
CSS_PROPERTY("height", "4px") \
|
||||
CSS_PROPERTY("background", "radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 50%, transparent 100%)") \
|
||||
CSS_PROPERTY("border-radius", "50%") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Brand Badge Container - Realistic monitor branding") \
|
||||
CSS_SELECTOR(".crt-brand") \
|
||||
CSS_PROPERTY("display", "flex") \
|
||||
CSS_PROPERTY("align-items", "center") \
|
||||
CSS_PROPERTY("gap", "clamp(8px, 1.2vmin, 14px)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Brand Logo - Metallic embossed phosphor icon") \
|
||||
CSS_SELECTOR(".crt-brand__logo") \
|
||||
CSS_PROPERTY("position", "relative") \
|
||||
CSS_PROPERTY("width", "clamp(18px, 2.5vmin, 28px)") \
|
||||
CSS_PROPERTY("height", "clamp(18px, 2.5vmin, 28px)") \
|
||||
CSS_COMMENT("Metallic badge plate background") \
|
||||
CSS_PROPERTY("background", "linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 30%, #1f1f1f 70%, #2a2a2a 100%)") \
|
||||
CSS_PROPERTY("border-radius", "3px") \
|
||||
CSS_COMMENT("Embossed metal plate effect") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.3)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Logo icon - Three phosphor dots (RGB) forming triangle") \
|
||||
CSS_SELECTOR(".crt-brand__logo::before") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("top", "50%") \
|
||||
CSS_PROPERTY("left", "50%") \
|
||||
CSS_PROPERTY("transform", "translate(-50%, -50%)") \
|
||||
CSS_PROPERTY("width", "10px") \
|
||||
CSS_PROPERTY("height", "10px") \
|
||||
CSS_PROPERTY("background", "radial-gradient(circle at 30% 30%, #6fff6f 0%, #4ade80 40%, #22c55e 100%)") \
|
||||
CSS_PROPERTY("border-radius", "50%") \
|
||||
CSS_PROPERTY("box-shadow", "0 0 4px 1px #4ade80, 0 0 12px 2px rgba(74,222,128,0.6), inset 0 -2px 4px rgba(0,0,0,0.3)") \
|
||||
CSS_PROPERTY("border", "1px solid rgba(0,0,0,0.5)") \
|
||||
CSS_COMMENT("RGB phosphor triad - the heart of CRT technology") \
|
||||
CSS_PROPERTY("background", "radial-gradient(circle at 30% 70%, #ff4444 0%, #ff4444 18%, transparent 20%), radial-gradient(circle at 70% 70%, #4444ff 0%, #4444ff 18%, transparent 20%), radial-gradient(circle at 50% 25%, #44ff44 0%, #44ff44 18%, transparent 20%)") \
|
||||
CSS_PROPERTY("filter", "blur(0.3px)") \
|
||||
CSS_PROPERTY("opacity", "0.9") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Brand Label with embossed look") \
|
||||
CSS_SELECTOR(".crt-brand") \
|
||||
CSS_PROPERTY("font-family", "var(--font-mono)") \
|
||||
CSS_PROPERTY("font-size", "clamp(0.55rem, 1.2vmin, 0.75rem)") \
|
||||
CSS_PROPERTY("font-weight", "500") \
|
||||
CSS_PROPERTY("color", "#3a3a3a") \
|
||||
CSS_PROPERTY("letter-spacing", "0.25em") \
|
||||
CSS_COMMENT("Logo metallic shine overlay") \
|
||||
CSS_SELECTOR(".crt-brand__logo::after") \
|
||||
CSS_PROPERTY("content", "\"\"") \
|
||||
CSS_PROPERTY("position", "absolute") \
|
||||
CSS_PROPERTY("inset", "0") \
|
||||
CSS_PROPERTY("border-radius", "inherit") \
|
||||
CSS_PROPERTY("background", "linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.15) 100%)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Brand Text Container") \
|
||||
CSS_SELECTOR(".crt-brand__text") \
|
||||
CSS_PROPERTY("display", "flex") \
|
||||
CSS_PROPERTY("flex-direction", "column") \
|
||||
CSS_PROPERTY("gap", "1px") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Main brand name - Chrome embossed lettering") \
|
||||
CSS_SELECTOR(".crt-brand__name") \
|
||||
CSS_PROPERTY("font-family", "'Arial Black', 'Helvetica Neue', sans-serif") \
|
||||
CSS_PROPERTY("font-size", "clamp(0.65rem, 1.4vmin, 0.85rem)") \
|
||||
CSS_PROPERTY("font-weight", "900") \
|
||||
CSS_PROPERTY("letter-spacing", "0.15em") \
|
||||
CSS_PROPERTY("text-transform", "uppercase") \
|
||||
CSS_PROPERTY("text-shadow", "0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.5)") \
|
||||
CSS_COMMENT("Chrome metallic text effect") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 25%, #3a3a3a 50%, #4a4a4a 75%, #5a5a5a 100%)") \
|
||||
CSS_PROPERTY("-webkit-background-clip", "text") \
|
||||
CSS_PROPERTY("-webkit-text-fill-color", "transparent") \
|
||||
CSS_PROPERTY("background-clip", "text") \
|
||||
CSS_COMMENT("Embossed shadow for 3D depth") \
|
||||
CSS_PROPERTY("filter", "drop-shadow(0 1px 0 rgba(255,255,255,0.1)) drop-shadow(0 -1px 0 rgba(0,0,0,0.8))") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Speaker Grille") \
|
||||
CSS_COMMENT("Model number - Smaller debossed text") \
|
||||
CSS_SELECTOR(".crt-brand__model") \
|
||||
CSS_PROPERTY("font-family", "var(--font-mono)") \
|
||||
CSS_PROPERTY("font-size", "clamp(0.45rem, 0.9vmin, 0.55rem)") \
|
||||
CSS_PROPERTY("font-weight", "500") \
|
||||
CSS_PROPERTY("letter-spacing", "0.2em") \
|
||||
CSS_PROPERTY("color", "#2a2a2a") \
|
||||
CSS_COMMENT("Debossed into plastic effect") \
|
||||
CSS_PROPERTY("text-shadow", "0 1px 0 rgba(255,255,255,0.05), 0 -0.5px 0 rgba(0,0,0,0.4)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("CRT Speaker Grille - Realistic perforated metal") \
|
||||
CSS_SELECTOR(".crt-speaker") \
|
||||
CSS_PROPERTY("display", "flex") \
|
||||
CSS_PROPERTY("gap", "3px") \
|
||||
CSS_PROPERTY("gap", "2px") \
|
||||
CSS_PROPERTY("padding", "4px 8px") \
|
||||
CSS_COMMENT("Recessed grille area") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, #080808 0%, #0d0d0d 50%, #080808 100%)") \
|
||||
CSS_PROPERTY("border-radius", "3px") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 2px 4px rgba(0,0,0,0.8), inset 0 -1px 0 rgba(40,40,40,0.2), 0 1px 0 rgba(40,40,40,0.1)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_SELECTOR(".crt-speaker span") \
|
||||
CSS_PROPERTY("width", "3px") \
|
||||
CSS_PROPERTY("height", "clamp(12px, 2vmin, 20px)") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%)") \
|
||||
CSS_PROPERTY("height", "clamp(14px, 2.2vmin, 24px)") \
|
||||
CSS_COMMENT("Individual speaker slot with depth") \
|
||||
CSS_PROPERTY("background", "linear-gradient(180deg, #020202 0%, #080808 30%, #0a0a0a 50%, #080808 70%, #020202 100%)") \
|
||||
CSS_PROPERTY("border-radius", "1px") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 1px 2px rgba(0,0,0,0.8)") \
|
||||
CSS_PROPERTY("box-shadow", "inset 0 1px 3px rgba(0,0,0,1), 0 0 0 0.5px rgba(30,30,30,0.5)") \
|
||||
CSS_END_SELECTOR() \
|
||||
CSS_COMMENT("Top control bar - Terminal style") \
|
||||
CSS_SELECTOR(".control-bar") \
|
||||
@ -869,7 +1241,7 @@ Copyright:
|
||||
" .crt-monitor { padding: clamp(8px, 1.5vmin, 20px); }\\n" \
|
||||
" .crt-bezel { padding: clamp(4px, 0.8vmin, 10px); }\\n" \
|
||||
" .crt-content-inner { padding: 1.5rem 1.75rem; }\\n" \
|
||||
" .crt-bottom { padding: 6px 12px; margin-top: 6px; }\\n" \
|
||||
" .crt-bottom { padding: 8px 16px; }\\n" \
|
||||
" h1.title { font-size: 1.75rem; }\\n" \
|
||||
" img { max-height: 12rem; }\\n" \
|
||||
" .zoomable { max-height: 18rem; }\\n" \
|
||||
@ -881,7 +1253,7 @@ Copyright:
|
||||
" .crt-bezel { padding: 4px; border-radius: 4px; }\\n" \
|
||||
" .crt-screen { border-radius: 12px / 10px; }\\n" \
|
||||
" .crt-content-inner { padding: 1rem 1.25rem; }\\n" \
|
||||
" .crt-bottom { padding: 4px 8px; margin-top: 4px; }\\n" \
|
||||
" .crt-bottom { padding: 6px 12px; }\\n" \
|
||||
" .crt-led { width: 6px; height: 6px; }\\n" \
|
||||
" .crt-brand { font-size: 0.5rem; letter-spacing: 0.15em; }\\n" \
|
||||
" .crt-speaker span { width: 2px; height: 10px; }\\n" \
|
||||
@ -1051,6 +1423,14 @@ Copyright:
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" aberration.className = 'crt-aberration';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var subpixels = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" subpixels.className = 'crt-subpixels';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var staticNoise = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" staticNoise.className = 'crt-static';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var content = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" content.className = 'crt-content';") \
|
||||
@ -1073,6 +1453,10 @@ Copyright:
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" screen.appendChild(aberration);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" screen.appendChild(subpixels);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" screen.appendChild(staticNoise);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" bezel.appendChild(screen);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var bottom = document.createElement('div');") \
|
||||
@ -1089,7 +1473,33 @@ Copyright:
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brand.className = 'crt-brand';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brand.textContent = 'DZONERZY';") \
|
||||
HTML_RAWTEXT(" var brandLogo = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandLogo.className = 'crt-brand__logo';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var brandText = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandText.className = 'crt-brand__text';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var brandName = document.createElement('span');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandName.className = 'crt-brand__name';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandName.textContent = 'TRINITRON';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var brandModel = document.createElement('span');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandModel.className = 'crt-brand__model';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandModel.textContent = 'PVM-2024Q';") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandText.appendChild(brandName);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brandText.appendChild(brandModel);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brand.appendChild(brandLogo);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" brand.appendChild(brandText);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var led = document.createElement('div');") \
|
||||
HTML_NEWLINE() \
|
||||
@ -1213,6 +1623,32 @@ Copyright:
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" }") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" function setupScrollStatic() {") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var content = document.querySelector('.crt-content');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var staticEl = document.querySelector('.crt-static');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" if (!content || !staticEl) return;") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" var scrollTimeout;") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" content.addEventListener('scroll', function() {") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" staticEl.classList.add('is-scrolling');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" clearTimeout(scrollTimeout);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" scrollTimeout = setTimeout(function() {") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" staticEl.classList.remove('is-scrolling');") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" }, 150);") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" });") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" }") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" document.addEventListener('keydown', function(e) {") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" if (e.altKey && e.key === 'p') cyclePhosphor();") \
|
||||
@ -1229,6 +1665,8 @@ Copyright:
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" zoomImages();") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" setupScrollStatic();") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT(" });") \
|
||||
HTML_NEWLINE() \
|
||||
HTML_RAWTEXT("})();") \
|
||||
|
||||
Loading…
Reference in New Issue
Block a user