/* Play2Gether V51 – Dashboard-Bewertungen: harmonische, palettenabhängige Neon-Interaktionen. Nur Präsentation; Bewertungs-/Supabase-Logik bleibt unverändert. */ #p2gPortalShell .p2g-v17-score { --p2g-v51-a: var(--p2g-neon-a, var(--motion-a, #52d9ff)); --p2g-v51-b: var(--p2g-neon-b, var(--motion-b, #a777ff)); position: relative; isolation: isolate; overflow: hidden; transition: border-color .34s ease, box-shadow .36s ease, transform .34s cubic-bezier(.22,1,.36,1); } /* Farbiges Streiflicht liegt nur über dem vorhandenen Hintergrund – auch bei V49/V50. */ #p2gPortalShell .p2g-v17-score::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 4% 0%, color-mix(in srgb,var(--p2g-v51-a) 15%,transparent), transparent 57%), radial-gradient(ellipse at 98% 99%, color-mix(in srgb,var(--p2g-v51-b) 12%,transparent), transparent 56%); pointer-events: none; opacity: .34; transition: opacity .42s ease; z-index: 0; } #p2gPortalShell .p2g-v17-score::after { content: ''; position: absolute; inset: 0 auto 0 -30%; width: 32%; pointer-events: none; background: linear-gradient(102deg, transparent, color-mix(in srgb,var(--p2g-v51-a) 9%,transparent), color-mix(in srgb,var(--p2g-v51-b) 16%,transparent), transparent); transform: skewX(-15deg) translateX(-300%); z-index: 0; } #p2gPortalShell .p2g-v17-score > * { position: relative; z-index: 1; } #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within) { border-color: color-mix(in srgb,var(--p2g-v51-a) 65%,transparent); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,.19), 0 0 0 1px color-mix(in srgb,var(--p2g-v51-a) 25%,transparent), 0 0 29px color-mix(in srgb,var(--p2g-v51-a) 21%,transparent), 0 0 45px color-mix(in srgb,var(--p2g-v51-b) 13%,transparent); } #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within)::before { opacity: 1; } #p2gPortalShell .p2g-v17-score:hover::after { animation: p2g-v51-score-sheen 1.05s cubic-bezier(.23,.75,.3,1) 1 both; } @keyframes p2g-v51-score-sheen { from { transform: skewX(-15deg) translateX(-300%); } to { transform: skewX(-15deg) translateX(580%); } } /* Überschrift und Hinweistext reagieren auf den Kartenglanz. */ #p2gPortalShell .p2g-v17-score h2 { gap: 9px; transition: color .3s ease, text-shadow .35s ease; } #p2gPortalShell .p2g-v17-score h2::after { content:''; flex: 0 0 38px; width: 38px; height: 2px; border-radius: 3px; background: linear-gradient(90deg,var(--p2g-v51-a),var(--p2g-v51-b)); box-shadow: 0 0 11px color-mix(in srgb,var(--p2g-v51-a) 45%,transparent); opacity: .62; transition: width .4s ease, flex-basis .4s ease, opacity .3s ease; } #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within) h2 { color: color-mix(in srgb,var(--p2g-v51-a) 27%,#fff); text-shadow: 0 0 17px color-mix(in srgb,var(--p2g-v51-a) 48%,transparent); } #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within) h2::after {flex-basis: 60px;opacity:1;} #p2gPortalShell .p2g-v17-score .p2g-port-muted { transition: color .32s ease, text-shadow .32s ease; } #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within) .p2g-port-muted { color: #d0e2f4; text-shadow: 0 0 10px color-mix(in srgb,var(--p2g-v51-b) 15%,transparent); } /* Die drei Stimmenzähler bekommen einen dezenten Grundglanz und klare Hover-Rückmeldung. Sie bleiben reine Anzeigen; die Bewertung erfolgt weiterhin im Dialog. */ #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings { gap: 9px; } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 8px 12px; background: color-mix(in srgb,var(--p2g-v51-a) 7%,var(--p2g-ambient-inset,#172b4f)); border: 1px solid color-mix(in srgb,var(--p2g-v51-a) 25%,transparent); color: #e9f5ff; border-radius: 11px; box-shadow: inset 0 1px rgba(255,255,255,.035),0 0 11px color-mix(in srgb,var(--p2g-v51-a) 7%,transparent); transition: transform .26s cubic-bezier(.22,1,.36,1), border-color .29s ease, background-color .29s ease,box-shadow .29s ease,text-shadow .29s ease; } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b::before { content:''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--p2g-v51-chip); box-shadow: 0 0 9px color-mix(in srgb,var(--p2g-v51-chip) 65%,transparent); } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b:nth-child(1) { --p2g-v51-chip: #54e5af; } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b:nth-child(2) { --p2g-v51-chip: #f5ca6f; } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b:nth-child(3) { --p2g-v51-chip: #ff8696; } #p2gPortalShell #p2gDashFeedback .p2g-v17-ratings b:is(:hover,:focus-visible) { transform: translateY(-3px) scale(1.035); border-color: color-mix(in srgb,var(--p2g-v51-a) 68%,transparent); background: color-mix(in srgb,var(--p2g-v51-b) 11%,var(--p2g-ambient-inset,#172b4f)); box-shadow: 0 5px 17px #0003, 0 0 19px color-mix(in srgb,var(--p2g-v51-a) 32%,transparent); text-shadow: 0 0 13px color-mix(in srgb,var(--p2g-v51-a) 35%,transparent); } /* Beide Aktionsknöpfe: leuchtender Farbverlauf, schneller Lichtreflex, tastaturbedienbar. */ #p2gPortalShell .p2g-v17-score .p2g-port-btn:not([hidden]) { position: relative; isolation: isolate; overflow: hidden; min-height: 41px; margin: 5px 5px 5px 0; border-color: color-mix(in srgb,var(--p2g-v51-a) 45%,transparent); background: linear-gradient(115deg, color-mix(in srgb,var(--p2g-v51-a) 21%,var(--p2g-ambient-inset,#10284d)), color-mix(in srgb,var(--p2g-v51-b) 16%,var(--p2g-ambient-card,#182143))); color: #f5faff; box-shadow: 0 0 12px color-mix(in srgb,var(--p2g-v51-a) 13%,transparent); transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .28s ease, filter .28s ease, color .25s ease; } #p2gPortalShell .p2g-v17-score .p2g-port-btn:not([hidden])::after { content:''; position:absolute; inset:-15% auto -15% -55%; width:42%; z-index:-1; pointer-events:none; background:linear-gradient(95deg,transparent,color-mix(in srgb,var(--p2g-v51-b) 19%,transparent),transparent); transform:translateX(-160%) skewX(-18deg); } #p2gPortalShell .p2g-v17-score .p2g-port-btn:is(:hover,:focus-visible):not([hidden]) { transform: translateY(-2px) scale(1.025); border-color: var(--p2g-v51-a); box-shadow: 0 8px 22px #0004, 0 0 19px color-mix(in srgb,var(--p2g-v51-a) 40%,transparent), 0 0 30px color-mix(in srgb,var(--p2g-v51-b) 20%,transparent); filter: brightness(1.12); } #p2gPortalShell .p2g-v17-score .p2g-port-btn:is(:hover,:focus-visible):not([hidden])::after { animation:p2g-v51-score-button 1s ease 1 both; } @keyframes p2g-v51-score-button { from {transform:translateX(-160%) skewX(-18deg)} to {transform:translateX(430%) skewX(-18deg)} } #p2gPortalShell .p2g-v17-score .p2g-port-btn:focus-visible { outline:2px solid var(--p2g-v51-a);outline-offset:3px; } /* Der zur Bewertung geöffnete Dialog folgt dem selben Design, ohne andere Dialoge zu beeinflussen. */ #p2gPortalDialog:has(#p2gDialogFields select[name="rating"]) { --p2g-v51-a:var(--p2g-neon-a,var(--motion-a,#52d9ff)); --p2g-v51-b:var(--p2g-neon-b,var(--motion-b,#a777ff)); border-color:color-mix(in srgb,var(--p2g-v51-a) 66%,transparent)!important; box-shadow:0 25px 80px #000b,0 0 25px color-mix(in srgb,var(--p2g-v51-a) 24%,transparent),0 0 40px color-mix(in srgb,var(--p2g-v51-b) 12%,transparent)!important; } #p2gPortalDialog:has(#p2gDialogFields select[name="rating"]) #p2gDialogTitle { text-shadow:0 0 18px color-mix(in srgb,var(--p2g-v51-a) 43%,transparent); } #p2gPortalDialog:has(#p2gDialogFields select[name="rating"]) :is(select[name="rating"],textarea[name="reason"]):focus { outline:2px solid color-mix(in srgb,var(--p2g-v51-a) 70%,transparent); outline-offset:2px; border-color:var(--p2g-v51-a); box-shadow:0 0 17px color-mix(in srgb,var(--p2g-v51-a) 27%,transparent); } #p2gPortalDialog:has(#p2gDialogFields select[name="rating"]) .p2g-port-btn:is(:hover,:focus-visible) { border-color:var(--p2g-v51-a); box-shadow:0 0 19px color-mix(in srgb,var(--p2g-v51-b) 29%,transparent); } /* Animationsregler und Betriebssystemeinstellung respektieren. */ body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *::before, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *::after, body[data-p2g-motion="low"] #p2gPortalShell .p2g-v17-score::after, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score::after { animation:none!important; } body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *::before, body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score *::after, body[data-p2g-motion="low"] #p2gPortalShell .p2g-v17-score *, body[data-p2g-motion="low"] #p2gPortalShell .p2g-v17-score { transition:none!important; } body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within), body[data-p2g-motion="off"] #p2gPortalShell .p2g-v17-score :is(.p2g-v17-ratings b,.p2g-port-btn):hover, body[data-p2g-motion="low"] #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within), body[data-p2g-motion="low"] #p2gPortalShell .p2g-v17-score :is(.p2g-v17-ratings b,.p2g-port-btn):hover { transform:none!important; } @media (prefers-reduced-motion:reduce) { #p2gPortalShell .p2g-v17-score, #p2gPortalShell .p2g-v17-score *, #p2gPortalShell .p2g-v17-score *::before, #p2gPortalShell .p2g-v17-score *::after {animation:none!important;transition:none!important} #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within), #p2gPortalShell .p2g-v17-score :is(.p2g-v17-ratings b,.p2g-port-btn):hover {transform:none!important} } /* Leistungsschonende Variante blendet die grossen Leuchtschatten aus. */ body[data-p2g-performance="on"] #p2gPortalShell .p2g-v17-score:is(:hover,:focus-within), body[data-p2g-performance="on"] #p2gPortalShell .p2g-v17-score .p2g-port-btn:is(:hover,:focus-visible) {box-shadow:none!important} @media(max-width:480px){ #p2gPortalShell .p2g-v17-score .p2g-port-btn:not([hidden]) {width:100%;margin:5px 0} #p2gPortalShell .p2g-v17-score h2::after {display:none} }