Template:Party/style.css: Difference between revisions

/* 
==================================================
Template:Party/style.css
Controls the layout, thumping speakers, and the 
animated flashing/glowing main box.
==================================================
*/

.party-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    margin: 1em auto;
    padding: 20px; 
}

/* Speaker bouncing animation */
.party-speaker {
    flex-shrink: 0;
    animation: speaker-pump 0.8s infinite;
    transform-origin: center center;
}

@keyframes speaker-pump {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.35); }
    25%  { transform: scale(0.95); }
    38%  { transform: scale(1.2); }
    50%  { transform: scale(1); }
    65%  { transform: scale(1.45); }
    75%  { transform: scale(0.9); }
    88%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Main Box Styling */
.party-main-box {
    padding: 0.5em;
    margin: 0;
    font-size: 95%;
    text-align: center;
    color: #fff;
    border: 7px solid red; 
    animation: smooth-border 3s linear infinite, flashy-glow 0.5s step-end infinite;
}

/* Smoothly transitions through the rainbow */
@keyframes smooth-border {
    0%   { border-color: red; }
    17%  { border-color: orange; }
    33%  { border-color: yellow; }
    50%  { border-color: lime; }
    67%  { border-color: cyan; }
    83%  { border-color: magenta; }
    100% { border-color: red; }
}

/* Snaps instantly between neon colors */
@keyframes flashy-glow {
    0%  { box-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; }
    20% { box-shadow: 0px 0px 40px #ff00ff, 0px 0px 2px #ff00ff; }
    40% { box-shadow: 0px 0px 40px #00ffff, 0px 0px 2px #00ffff; }
    60% { box-shadow: 0px 0px 40px #ff0000, 0px 0px 2px #ff0000; }
    80% { box-shadow: 0px 0px 40px #ffff00, 0px 0px 2px #ffff00; }
    100%{ box-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; }
}