/* controls-force.css — hiper-specyficzny, ostatni arkusz (linkuj NA KOŃCU ) */ /* Celujemy w dowolny element z tymi ID (niezależnie czy to button/a/div/span) */ #audioToggle, #starsToggle, #bgToggle, #shareToggle, *[id="audioToggle"], *[id="starsToggle"], *[id="bgToggle"], *[id="shareToggle"], html body #audioToggle#audioToggle, html body #starsToggle#starsToggle, html body #bgToggle#bgToggle, html body #shareToggle#shareToggle { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; line-height: 1 !important; border-radius: 14px !important; /* NIE okrągłe */ background: rgba(17,17,29,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; cursor: pointer !important; /* kursor-palcem */ user-select: none !important; -webkit-tap-highlight-color: transparent !important; font-size: 20px !important; font-weight: 600 !important; text-rendering: optimizeLegibility !important; box-shadow: 0 0 0 2px #7c3aed inset !important; transition: box-shadow .2s ease, background .2s ease, transform .08s ease !important; } /* Hover/Active/Focus — stała fioletowa obwódka */ #audioToggle:hover, #starsToggle:hover, #bgToggle:hover, #shareToggle:hover, *[id="audioToggle"]:hover, *[id="starsToggle"]:hover, *[id="bgToggle"]:hover, *[id="shareToggle"]:hover { background: rgba(17,17,29,.75) !important; box-shadow: 0 0 0 2px #a855f7 inset, 0 0 14px #a855f7, 0 0 28px rgba(168,85,247,.6) !important; } #audioToggle:active, #starsToggle:active, #bgToggle:active, #shareToggle:active, *[id="audioToggle"].is-active, *[id="starsToggle"].is-active, *[id="bgToggle"].is-active, *[id="shareToggle"].is-active { background: rgba(17,17,29,.7) !important; transform: translateY(1px) scale(.98) !important; outline: none !important; box-shadow: 0 0 0 2px #7c3aed inset !important; } #audioToggle:focus-visible, #starsToggle:focus-visible, #bgToggle:focus-visible, #shareToggle:focus-visible, *[id="audioToggle"]:focus-visible, *[id="starsToggle"]:focus-visible, *[id="bgToggle"]:focus-visible, *[id="shareToggle"]:focus-visible { outline: 2px solid #e9d5ff !important; outline-offset: 2px !important; } #audioToggle:focus:not(:focus-visible), #starsToggle:focus:not(:focus-visible), #bgToggle:focus:not(:focus-visible), #shareToggle:focus:not(:focus-visible), *[id="audioToggle"]:focus:not(:focus-visible), *[id="starsToggle"]:focus:not(:focus-visible), *[id="bgToggle"]:focus:not(:focus-visible), *[id="shareToggle"]:focus:not(:focus-visible) { outline: none !important; box-shadow: 0 0 0 2px #7c3aed inset !important; } /* Drobna responsywność */ @media (max-width: 360px) { #audioToggle, #starsToggle, #bgToggle, #shareToggle, *[id="audioToggle"], *[id="starsToggle"], *[id="bgToggle"], *[id="shareToggle"] { width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 18px !important; } } /* --- Enforced hover bounce for bottom buttons (desktop) --- */ @media (hover: hover) and (pointer: fine) { /* High-specificity selector to beat any theme overrides */ #bgToggle#bgToggle:hover, #shareToggle#shareToggle:hover { transform: translateY(-1px) !important; } /* Ensure transform is animated */ #bgToggle#bgToggle, #shareToggle#shareToggle { transition: transform .08s ease, box-shadow .2s ease, background .2s ease !important; transform: translateY(0) !important; } } /* v5: super-specyficzny hover wszystkich czterech, z animacją transform */ @media (hover: hover) and (pointer: fine) { #audioToggle#audioToggle:hover, #starsToggle#starsToggle:hover, #bgToggle#bgToggle:hover, #shareToggle#shareToggle:hover { transform: translateY(-1px) !important; } #audioToggle#audioToggle, #starsToggle#starsToggle, #bgToggle#bgToggle, #shareToggle#shareToggle { transform: translateY(0) !important; transition: transform .08s ease, box-shadow .2s ease, background .2s ease !important; } }