/** * MineJobs night interaction layer. * * Inspired by restrained dark developer interfaces: a thin orbiting light, * subtle focus halo and low-cost hover lift. This file owns presentation only. * Dashboard geometry remains owned by minejobs-dashboard-shell-lock.css. */ @property --mj-night-orbit-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes minejobs-night-orbit { to { --mj-night-orbit-angle: 360deg; } } /* A quiet blue ambient field adds depth without creating a bright gradient wall. */ html.minejobs-frontend-theme-dark body:not(.minejobs-dashboard-pro) :is(#page,.site,.site-wrapper,.noo-site,.noo-wrapper), html.minejobs-dashboard-theme-dark body.minejobs-dashboard-pro :is(#main,.main-content,.container-wrap>.main-content) { background-image: radial-gradient(900px 480px at 84% -8%, rgba(33, 104, 226, .095), transparent 68%), radial-gradient(680px 400px at 5% 18%, rgba(13, 167, 196, .045), transparent 72%) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } .mj-night-motion-target { --mj-night-orbit-a: rgba(89, 155, 255, .96); --mj-night-orbit-b: rgba(82, 221, 255, .92); --mj-night-orbit-c: rgba(137, 112, 255, .76); --mj-night-orbit-glow: rgba(63, 139, 255, .28); position: relative !important; transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease, background-color .22s ease !important; } .mj-night-motion-target[data-mj-night-tone="gold"] { --mj-night-orbit-a: rgba(255, 211, 104, .98); --mj-night-orbit-b: rgba(255, 169, 59, .94); --mj-night-orbit-c: rgba(255, 239, 166, .78); --mj-night-orbit-glow: rgba(255, 189, 71, .27); } .mj-night-orbit { position: absolute; z-index: 1; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient( from var(--mj-night-orbit-angle), transparent 0deg 244deg, var(--mj-night-orbit-c) 268deg, var(--mj-night-orbit-a) 292deg, var(--mj-night-orbit-b) 312deg, transparent 338deg 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 7px var(--mj-night-orbit-glow)); transition: opacity .24s ease, filter .24s ease; } /* Search surfaces keep a calm orbit, then become clearer while in use. */ :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="search"][data-mj-night-visible="1"] > .mj-night-orbit { opacity: .34; animation: minejobs-night-orbit 9s linear infinite; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="search"]:is(:hover,:focus-within) { border-color: rgba(103, 168, 255, .48) !important; box-shadow: 0 0 0 1px rgba(82, 154, 255, .12), 0 12px 34px rgba(0, 0, 0, .19), 0 0 30px rgba(52, 129, 255, .09) !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="search"]:is(:hover,:focus-within) > .mj-night-orbit { opacity: .93; animation-duration: 3.6s; filter: drop-shadow(0 0 10px var(--mj-night-orbit-glow)); } /* Cards animate only while they are intentionally hovered or keyboard-focused. */ :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:is(:hover,:focus-within) { transform: translateY(-2px); border-color: rgba(91, 151, 233, .5) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .25), 0 0 30px rgba(48, 119, 224, .075) !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"][data-mj-night-tone="gold"]:is(:hover,:focus-within) { border-color: rgba(255, 199, 83, .57) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, .27), 0 0 34px rgba(255, 178, 54, .105) !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:is(:hover,:focus-within) > .mj-night-orbit { opacity: .86; animation: minejobs-night-orbit 2.9s linear infinite; } /* Primary actions get the same restrained luminous edge without a permanent loop. */ :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="action"]:is(:hover,:focus-visible) > .mj-night-orbit { opacity: .78; animation: minejobs-night-orbit 2.4s linear infinite; } /* Pausing hidden tabs prevents decorative animation from consuming background work. */ html.mj-night-motion-paused .mj-night-orbit { animation-play-state: paused !important; } /* Save-data / low-power devices retain the static highlight, not a continuous loop. */ html.mj-night-motion-conserve .mj-night-motion-target[data-mj-night-motion="search"][data-mj-night-visible="1"] > .mj-night-orbit { animation: none; opacity: .24; } html.mj-night-motion-conserve .mj-night-motion-target[data-mj-night-motion="search"]:focus-within > .mj-night-orbit, html.mj-night-motion-conserve .mj-night-motion-target[data-mj-night-motion="card"]:focus-within > .mj-night-orbit, html.mj-night-motion-conserve .mj-night-motion-target[data-mj-night-motion="card"]:hover > .mj-night-orbit { animation: none; opacity: .7; } /* Mask-composite fallback: retain a clean halo when the orbit cannot be cut out. */ @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .mj-night-orbit { display: none !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="search"]:is(:hover,:focus-within), :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:is(:hover,:focus-within) { box-shadow: 0 0 0 1px rgba(94, 160, 255, .36), 0 18px 42px rgba(0,0,0,.24) !important; } } @media (hover:none), (pointer:coarse) { html.minejobs-frontend-theme-dark body:not(.minejobs-dashboard-pro) :is(#page,.site,.site-wrapper,.noo-site,.noo-wrapper), html.minejobs-dashboard-theme-dark body.minejobs-dashboard-pro :is(#main,.main-content,.container-wrap>.main-content) { background-attachment: scroll !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:hover { transform: none; box-shadow: inherit; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:hover > .mj-night-orbit { opacity: 0; animation: none; } } @media (prefers-reduced-motion:reduce) { .mj-night-motion-target { transition: border-color .01ms linear, box-shadow .01ms linear !important; } .mj-night-orbit { animation: none !important; transition: none !important; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="search"][data-mj-night-visible="1"] > .mj-night-orbit { opacity: .22; } :is(html.minejobs-frontend-theme-dark,html.minejobs-dashboard-theme-dark) .mj-night-motion-target[data-mj-night-motion="card"]:is(:hover,:focus-within) { transform: none; } }