/* * Home effects: a fixed layer behind the page content (inc/scene_layer.php). The sky is a gradient here, * blended into the dark theme by --scene-sky (Settings > Home effects > Sky strength); scene.js draws the * stars, rain, snow, fog, leaves and wind on the canvas. Sky colours carried over from v1. */ /* The page colour moves from to so the layer (z-index -1) can sit between them. */ html.has-scene { background-color: #111; } html.has-scene body { background-color: transparent; } .home-scene { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; /* above the page background, below all content */ overflow: hidden; pointer-events: none; } .home-scene canvas, .home-scene-sky, .home-scene-flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .home-scene canvas { display: block; } .home-scene-sky { opacity: var(--scene-sky, 0.35); transition: opacity 1s ease; } .home-scene-flash { z-index: 1; /* lightning over everything in the layer */ background: #fff; opacity: 0; } /* Clear skies */ .scene-time-night .home-scene-sky { background: linear-gradient(to bottom, #0f3242 0%, #000 100%); } .scene-time-dawn .home-scene-sky { background: linear-gradient(to bottom, #0b1d3a 0%, #3a4e80 40%, #fbc2a9 80%, #fde3a7 100%); } .scene-time-day .home-scene-sky { background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); } .scene-time-dusk .home-scene-sky { background: linear-gradient(to bottom, #ff7e5f 0%, #feb47b 40%, #6a3093 100%); } /* Overcast (cloudy, rain, storms, snow, fog) */ .scene-overcast.scene-time-night .home-scene-sky { background: linear-gradient(to bottom, #1f2a33 0%, #07090b 100%); } .scene-overcast.scene-time-dawn .home-scene-sky { background: linear-gradient(to bottom, #2c3e50 0%, #556c82 40%, #d8b7a0 80%, #e6d5c3 100%); } .scene-overcast.scene-time-day .home-scene-sky { background: linear-gradient(to bottom, #7a8fa3 0%, #9db0bd 50%, #cfd8dc 100%); } .scene-overcast.scene-time-dusk .home-scene-sky { background: linear-gradient(to bottom, #5a4b5c 0%, #8b6f6f 40%, #d6b89c 80%, #e0d1c3 100%); } /* Admin preview badge (only for a logged-in admin previewing a scene) */ .scene-preview-badge { position: fixed; bottom: 16px; left: 50%; z-index: 1000; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 7px 16px; border-radius: 30px; background: rgba(0, 0, 0, 0.8); color: #fff; font: 13px/1.4 "Open Sans", sans-serif; text-align: center; } .scene-preview-badge a { margin-left: 10px; color: #fa5b0f; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .home-scene-sky { transition: none; } }