/* ========================================================= VERZOEKPUNT.NL GLOBAL MOVING NEON UI ========================================================= */ @property --vp-neon-angle { syntax: ""; initial-value: 0deg; inherits: false; } :root { --vp-neon-cyan:#20dcff; --vp-neon-purple:#ce42ff; --vp-neon-blue:#3979ff; --vp-neon-green:#3ce8a0; --vp-neon-pink:#ff4bd8; --vp-neon-speed:6s; } /* ========================================================= ANIMATIES ========================================================= */ @keyframes vp-global-neon-spin { from { --vp-neon-angle:0deg; } to { --vp-neon-angle:360deg; } } @keyframes vp-global-neon-pulse { 0%, 100% { box-shadow: 0 0 5px #20dcff44, 0 0 12px #20dcff22; } 50% { box-shadow: 0 0 9px #ce42ff66, 0 0 22px #ce42ff33; } } @keyframes vp-global-flow { from { background-position:200% 0; } to { background-position:-200% 0; } } @keyframes vp-global-vertical-flow { from { background-position:0 200%; } to { background-position:0 -200%; } } @keyframes vp-global-button-sweep { 0% { transform:translateX(-150%); } 55% { transform:translateX(150%); } 100% { transform:translateX(150%); } } /* ========================================================= BELANGRIJK: ELEMENTEN DIE OVERAL IN VERZOEKPUNT WORDEN GEBRUIKT ========================================================= */ .panel, .stat, .card, .widget-card, .request-card, .loginbox, .modalbox, .hero-main, .player-card, .nextbox, .nowbox, .usage, .song, .box, .widget, .player { position:relative; isolation:isolate; } /* ========================================================= BEWEGENDE NEON RAND ========================================================= */ .panel::before, .stat::before, .card::before, .widget-card::before, .request-card::before, .loginbox::before, .modalbox::before, .hero-main::before, .player-card::before, .nextbox::before, .nowbox::before, .usage::before, .song::before, .box::before, .widget::before, .player::before { content:""; position:absolute; inset:-1px; z-index:-1; padding:1px; border-radius:inherit; pointer-events:none; background: conic-gradient( from var(--vp-neon-angle), var(--vp-neon-cyan), var(--vp-neon-blue), var(--vp-neon-purple), var(--vp-neon-pink), var(--vp-neon-purple), var(--vp-neon-cyan), var(--vp-neon-green), var(--vp-neon-cyan) ); animation: vp-global-neon-spin var(--vp-neon-speed) linear infinite, vp-global-neon-pulse 3s ease-in-out infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* ========================================================= EXTRA GLOW ========================================================= */ .panel, .stat, .card, .widget-card, .request-card, .loginbox, .modalbox, .hero-main, .player-card, .nextbox { box-shadow: 0 0 8px #20dcff18, 0 0 18px #ce42ff10; } /* ========================================================= SIDEBAR ========================================================= */ aside { position:relative; } aside::after { content:""; position:absolute; top:0; right:0; width:2px; height:100%; pointer-events:none; background: linear-gradient( 180deg, transparent, var(--vp-neon-cyan), var(--vp-neon-purple), var(--vp-neon-pink), var(--vp-neon-cyan), transparent ); background-size: 100% 250%; animation: vp-global-vertical-flow 4s linear infinite; box-shadow: 0 0 8px var(--vp-neon-cyan), 0 0 16px var(--vp-neon-purple); } /* ========================================================= NAVIGATIE ========================================================= */ .nav, .tab { position:relative; overflow:hidden; } .nav::before, .tab::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.35; background: linear-gradient( 110deg, transparent 0%, var(--vp-neon-cyan) 20%, var(--vp-neon-purple) 45%, var(--vp-neon-pink) 60%, var(--vp-neon-cyan) 80%, transparent 100% ); background-size: 250% 100%; animation: vp-global-flow 4s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .nav:hover::before, .nav.on::before, .tab:hover::before, .tab.on::before { opacity:1; } /* ========================================================= INPUTS ========================================================= */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { border: 1px solid transparent !important; background: linear-gradient( #020c17, #020c17 ) padding-box, linear-gradient( var(--vp-neon-angle), var(--vp-neon-cyan), var(--vp-neon-purple), var(--vp-neon-pink), var(--vp-neon-cyan) ) border-box !important; animation: vp-global-neon-spin 8s linear infinite; } input:focus, textarea:focus, select:focus { outline:none !important; box-shadow: 0 0 8px #20dcff88, 0 0 18px #ce42ff55 !important; } /* ========================================================= BUTTONS ========================================================= */ .btn, button:not(.nav):not(.tab) { position:relative; overflow:hidden; } .btn::after, button:not(.nav):not(.tab)::after { content:""; position:absolute; top:-100%; left:-60%; width:45%; height:300%; pointer-events:none; transform: rotate(22deg) translateX(-150%); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.42), transparent ); animation: vp-global-button-sweep 3.5s ease-in-out infinite; } /* ========================================================= TABELLEN ========================================================= */ table { position:relative; } th, td { border-bottom: 1px solid #20dcff35 !important; } tbody tr { transition: background .2s ease, box-shadow .2s ease; } tbody tr:hover { background: #0a365026; box-shadow: inset 0 -1px var(--vp-neon-purple), 0 0 12px #20dcff18; } /* ========================================================= STATISTIEK CIJFERS ========================================================= */ .stat b, .stat strong, .usage strong, .rank { text-shadow: 0 0 5px var(--vp-neon-cyan), 0 0 12px #20dcff88, 0 0 20px #ce42ff44; } /* ========================================================= ONLINE / LIVE BADGES ========================================================= */ .online, .realtime, .status, .live-pill, .badge { position:relative; box-shadow: 0 0 7px #20dcff44; } /* ========================================================= MODALS ========================================================= */ .modal, .request-modal { backdrop-filter: blur(10px); } /* ========================================================= CODE BLOKKEN ========================================================= */ .code { position:relative; border: 1px solid #20dcff55 !important; box-shadow: inset 0 0 12px #20dcff12, 0 0 10px #ce42ff15; } /* ========================================================= SCROLLBAR ========================================================= */ ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:#010812; } ::-webkit-scrollbar-thumb { border-radius:999px; background: linear-gradient( 180deg, var(--vp-neon-cyan), var(--vp-neon-purple) ); box-shadow: 0 0 8px var(--vp-neon-cyan); } /* ========================================================= SELECTIE ========================================================= */ ::selection { background: var(--vp-neon-purple); color:white; } /* ========================================================= MOBIEL ========================================================= */ @media(max-width:850px) { aside::after { top:auto; right:auto; left:0; bottom:0; width:100%; height:2px; background: linear-gradient( 90deg, transparent, var(--vp-neon-cyan), var(--vp-neon-purple), var(--vp-neon-pink), var(--vp-neon-cyan), transparent ); background-size: 250% 100%; animation: vp-global-flow 4s linear infinite; } } /* ========================================================= TOEGANKELIJKHEID ========================================================= */ @media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }