/** * EVAS Customizer Styles * * Styles for button and panel customization including animations. * * @package Everyone_Accessibility_Suite * @subpackage Modules/Customizer */ /* Button Position Classes: removed (evas-button-position-*) - it put its own `position: fixed !important` directly on #evas-panel-toggle with independent offsets, detaching the button from .evas-toggle-wrapper's own fixed position (the core Panel Position setting, panel.css) that the panel and its pointing arrow are actually built around. See the PHP comment in class-customizer-module.php add_button_classes() for the full explanation. */ /* Button Caption */ .evas-button-caption { margin: 0 8px; font-size: 0.9em; } /* Panel Position Classes: removed (evas-panel-position-*) - it carried !important left/right rules that unconditionally beat the core panel's real position+arrow system (panel_position setting, panel.css), silently breaking it whenever this module is enabled. See the PHP comment in class-customizer-module.php add_panel_classes() for the full explanation. */ /* Draggable Panel */ .evas-panel.evas-panel-draggable { position: fixed !important; } .evas-panel.evas-dragging { user-select: none; transition: none !important; } /* Panel Shadow */ .evas-panel.evas-panel-with-shadow { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } /* ========================================================================== Overlay ========================================================================== */ /* The overlay is a child of #evas-panel (see render_panel), so it shares the panel's stacking context: z-index 0 here is already below .evas-panel-content and above the page, with no global z-index juggling. It was previously a sibling appended to while the panel was relocated to , which is why the selector pairing them could never match. */ .evas-panel-overlay { position: fixed; inset: 0; z-index: 0; background-color: var(--evas-overlay-color, #0253ee); opacity: 0; visibility: hidden; /* #evas-panel sets pointer-events: none, so this has to opt back in to be clickable - and must stay unclickable while hidden, otherwise it swallows every click on the site. */ pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } #evas-panel.evas-open .evas-panel-overlay { opacity: 0.5; visibility: visible; pointer-events: auto; } /* Only the stacking order belongs here. The card is `position: absolute` in panel.css, which already lets z-index apply - declaring `relative` here instead (this selector is 1,1,0 and outranked it) put the card back in flow, so #evas-panel grew to 825px and sat 70px below the card it was supposed to wrap. The card is offset from the button with `bottom: 70px`; in flow that offset moves the paint but not the box, which is exactly the mismatch. */ #evas-panel .evas-panel-content { z-index: 1; } /* Only one dimming layer on mobile: the panel already paints its own backdrop through ::before there. */ @media (max-width: 768px) { #evas-panel.evas-panel-with-overlay.evas-open::before { display: none; } } /* ========================================================================== Entrance Animations ========================================================================== */ @keyframes evas-entrance-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes evas-entrance-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @keyframes evas-entrance-scale { from { transform: scale(0); } to { transform: scale(1); } } @keyframes evas-entrance-flip-x { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes evas-entrance-flip-y { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes evas-entrance-wobble { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-25px) rotate(-5deg); } 30% { transform: translateX(20px) rotate(3deg); } 45% { transform: translateX(-15px) rotate(-3deg); } 60% { transform: translateX(10px) rotate(2deg); } 75% { transform: translateX(-5px) rotate(-1deg); } } @keyframes evas-entrance-rotate { from { transform: rotate(0deg); opacity: 0; } to { transform: rotate(360deg); opacity: 1; } } /* Apply entrance animations */ .evas-panel-toggle.evas-entrance-fade { animation: evas-entrance-fade 0.5s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-bounce { animation: evas-entrance-bounce 1s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-scale { animation: evas-entrance-scale 0.5s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-flip-x { animation: evas-entrance-flip-x 0.6s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-flip-y { animation: evas-entrance-flip-y 0.6s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-wobble { animation: evas-entrance-wobble 1s ease-in-out forwards; } .evas-panel-toggle.evas-entrance-rotate { animation: evas-entrance-rotate 0.6s ease-in-out forwards; } /* ========================================================================== Hover Animations ========================================================================== */ .evas-panel-toggle.evas-hover-bounce:hover { animation: evas-hover-bounce 0.5s ease-in-out; } @keyframes evas-hover-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .evas-panel-toggle.evas-hover-scale:hover { animation: evas-hover-scale 0.3s ease-in-out; } @keyframes evas-hover-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .evas-panel-toggle.evas-hover-rotate:hover { animation: evas-hover-rotate 0.5s ease-in-out; } @keyframes evas-hover-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .evas-panel-toggle.evas-hover-wobble:hover { animation: evas-hover-wobble 0.5s ease-in-out; } @keyframes evas-hover-wobble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-2deg); } 75% { transform: translateX(5px) rotate(2deg); } } .evas-panel-toggle.evas-hover-fade:hover { animation: evas-hover-fade 0.3s ease-in-out; } @keyframes evas-hover-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .evas-panel-toggle.evas-hover-flip-x:hover { animation: evas-hover-flip-x 0.6s ease-in-out; } @keyframes evas-hover-flip-x { from { transform: perspective(400px) rotateX(0deg); } to { transform: perspective(400px) rotateX(360deg); } } .evas-panel-toggle.evas-hover-flip-y:hover { animation: evas-hover-flip-y 0.6s ease-in-out; } @keyframes evas-hover-flip-y { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } } /* ========================================================================== Responsive Adjustments ========================================================================== */ @media (max-width: 768px) { .evas-panel-toggle { font-size: calc(var(--evas-button-size, 24px) * 0.8); padding: calc(var(--evas-button-padding, 20px) * 0.8); } .evas-panel.evas-panel-draggable { position: fixed !important; max-width: 90% !important; } } /* ========================================================================== Utility Classes ========================================================================== */ .evas-customizer-loading { pointer-events: none; opacity: 0.6; } .evas-customizer-hidden { display: none !important; }