跳至內容

/* ☢️ NUCLEAR OPTION: FORCE SLIDESHOW DOTS ☢️ */ /* 1. Move the container to Bottom Right */ slideshow-component .slider-buttons, slideshow-component .slider-counter, slideshow-component .slideshow__controls, .slideshow__controls { justify-content: flex-end !important; right: 40px !important; bottom: 40px !important; left: auto !important; position: absolute !important; width: auto !important; z-index: 999 !important; background: transparent !important; border: none !important; } /* 2. Transform the Dots into Black Rings */ .slider-counter__link--dots .dot, .slider-counter__link, .slideshow__control-wrapper .dot { width: 18px !important; height: 18px !important; border: 2px solid #000000 !important; /* Black Ring */ background: transparent !important; /* Clear Center */ border-radius: 50% !important; margin: 0 6px !important; padding: 0 !important; opacity: 1 !important; color: transparent !important; /* Hide any numbers */ box-shadow: 0 0 0 1px rgba(255,255,255,0.4) !important; /* White outline */ transition: none !important; } /* 3. The Clock Timer Animation (Active Dot) */ .slider-counter__link--active .dot, .slider-counter__link--active { background: conic-gradient(#000000 0% 100%) !important; /* Black Fill */ clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); animation: timerSweep 5s linear infinite !important; } /* 4. Animation Keyframes */ @keyframes timerSweep { 0% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); } 25% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); } 100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); } }