forked from lubiana/futtern
booty
This commit is contained in:
parent
c99032044d
commit
5cb66c5012
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
34 changed files with 1236 additions and 132 deletions
565
assets/styles/modes.css
Normal file
565
assets/styles/modes.css
Normal file
|
|
@ -0,0 +1,565 @@
|
|||
/* 🌈✨ BONKERS MODE ANIMATIONS ✨🌈 */
|
||||
@keyframes rainbowGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes discoFlash {
|
||||
0%, 100% {
|
||||
background-color: var(--bs-pink);
|
||||
box-shadow: 0 0 20px var(--bs-pink), 0 0 40px var(--bs-pink);
|
||||
}
|
||||
16.66% {
|
||||
background-color: var(--bs-purple);
|
||||
box-shadow: 0 0 20px var(--bs-purple), 0 0 40px var(--bs-purple);
|
||||
}
|
||||
33.33% {
|
||||
background-color: var(--bs-cyan);
|
||||
box-shadow: 0 0 20px var(--bs-cyan), 0 0 40px var(--bs-cyan);
|
||||
}
|
||||
50% {
|
||||
background-color: var(--bs-yellow);
|
||||
box-shadow: 0 0 20px var(--bs-yellow), 0 0 40px var(--bs-yellow);
|
||||
}
|
||||
66.66% {
|
||||
background-color: var(--bs-green);
|
||||
box-shadow: 0 0 20px var(--bs-green), 0 0 40px var(--bs-green);
|
||||
}
|
||||
83.33% {
|
||||
background-color: var(--bs-orange);
|
||||
box-shadow: 0 0 20px var(--bs-orange), 0 0 40px var(--bs-orange);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-2deg); }
|
||||
75% { transform: rotate(2deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rainbowText {
|
||||
0% { color: var(--bs-red); }
|
||||
14.28% { color: var(--bs-orange); }
|
||||
28.57% { color: var(--bs-yellow); }
|
||||
42.85% { color: var(--bs-green); }
|
||||
57.14% { color: var(--bs-cyan); }
|
||||
71.42% { color: var(--bs-purple); }
|
||||
85.71% { color: var(--bs-pink); }
|
||||
100% { color: var(--bs-red); }
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { left: -100%; }
|
||||
50% { left: 100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
@keyframes slayFloat {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-20px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-60px) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 🎭 BONKERS MODE CLASSES 🎭 */
|
||||
.bonkers-mode {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bonkers-mode .btn {
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 400% 400%;
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite, rainbowGradient 1s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bonkers-mode .btn:hover {
|
||||
animation: discoFlash 0.2s infinite, wiggle 0.1s infinite, rainbowGradient 0.5s ease infinite;
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
|
||||
}
|
||||
|
||||
.bonkers-mode .btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar {
|
||||
background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 200% 200%;
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
|
||||
height: auto !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-brand {
|
||||
animation: rainbowText 0.8s infinite, wiggle 0.4s infinite;
|
||||
font-size: 1.8em;
|
||||
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-brand::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link {
|
||||
animation: rainbowText 1.2s infinite, wiggle 0.3s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||||
animation: shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link:hover {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
animation: discoFlash 0.5s infinite, wiggle 0.2s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-nav .nav-link.active {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 25px var(--bs-yellow);
|
||||
animation: discoFlash 0.8s infinite, wiggle 0.3s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-text {
|
||||
animation: rainbowText 1.5s infinite, wiggle 0.5s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid var(--bs-white);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
|
||||
box-shadow: 0 0 15px var(--bs-cyan);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler {
|
||||
border: 3px solid var(--bs-white);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
animation: discoFlash 0.6s infinite, wiggle 0.4s infinite;
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler:focus {
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-menu {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 3px solid var(--bs-white);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-item {
|
||||
animation: rainbowText 1.8s infinite, wiggle 0.6s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bonkers-mode .dropdown-item:hover {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
color: var(--bs-white);
|
||||
box-shadow: 0 0 15px var(--bs-yellow);
|
||||
animation: discoFlash 0.5s infinite, wiggle 0.3s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .navbar-collapse {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
border: 2px solid var(--bs-pink);
|
||||
}
|
||||
|
||||
.bonkers-mode h1, .bonkers-mode h2, .bonkers-mode h3 {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.bonkers-mode .table {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
|
||||
animation: rainbowGradient 3s ease infinite;
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.5);
|
||||
}
|
||||
|
||||
.bonkers-mode .table th {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
color: var(--bs-white);
|
||||
animation: discoFlash 0.8s infinite;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.bonkers-mode .form-control {
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 15px var(--bs-pink);
|
||||
animation: pulse 0.6s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .alert {
|
||||
animation: discoFlash 0.6s infinite, wiggle 0.3s infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.bonkers-mode .card {
|
||||
background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
|
||||
border: 3px solid var(--bs-purple);
|
||||
box-shadow: 0 0 35px rgba(138,43,226,0.6);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .modal-content {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 4px solid var(--bs-white);
|
||||
box-shadow: 0 0 50px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .modal-header {
|
||||
background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
|
||||
animation: discoFlash 0.8s infinite;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.bonkers-mode .number-input-wrapper {
|
||||
animation: wiggle 0.4s infinite;
|
||||
}
|
||||
|
||||
.bonkers-mode .number-input-wrapper .btn {
|
||||
animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
|
||||
}
|
||||
|
||||
/* Enhanced mode styles (for future use) */
|
||||
[data-website-mode="enhanced"] .btn {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 400% 400%;
|
||||
animation: rainbowGradient 1s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .btn:hover {
|
||||
animation: rainbowGradient 0.5s ease infinite;
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar {
|
||||
background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
|
||||
background-size: 200% 200%;
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
|
||||
height: auto !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-brand {
|
||||
animation: rainbowText 0.8s infinite;
|
||||
font-size: 1.8em;
|
||||
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-brand::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link {
|
||||
animation: rainbowText 1.2s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||||
animation: shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link:hover {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-nav .nav-link.active {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
border-color: var(--bs-white);
|
||||
box-shadow: 0 0 25px var(--bs-yellow);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-text {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
border: 2px solid var(--bs-white);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
|
||||
box-shadow: 0 0 15px var(--bs-cyan);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler {
|
||||
border: 3px solid var(--bs-white);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
animation: rainbowGradient 0.6s ease infinite;
|
||||
box-shadow: 0 0 20px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler:focus {
|
||||
box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-menu {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 3px solid var(--bs-white);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-item {
|
||||
animation: rainbowText 1.8s infinite;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .dropdown-item:hover {
|
||||
background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
|
||||
color: var(--bs-white);
|
||||
box-shadow: 0 0 15px var(--bs-yellow);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .navbar-collapse {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
border: 2px solid var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] h1, [data-website-mode="enhanced"] h2, [data-website-mode="enhanced"] h3 {
|
||||
animation: rainbowText 1.5s infinite;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .table {
|
||||
background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
|
||||
animation: rainbowGradient 3s ease infinite;
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 30px rgba(255,105,180,0.5);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .table th {
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
|
||||
color: var(--bs-white);
|
||||
animation: rainbowGradient 0.8s ease infinite;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .form-control {
|
||||
border: 3px solid var(--bs-pink);
|
||||
box-shadow: 0 0 15px var(--bs-pink);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .alert {
|
||||
animation: rainbowGradient 0.6s ease infinite;
|
||||
border: 4px solid var(--bs-white);
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .card {
|
||||
background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
|
||||
border: 3px solid var(--bs-purple);
|
||||
box-shadow: 0 0 35px rgba(138,43,226,0.6);
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .modal-content {
|
||||
background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
|
||||
border: 4px solid var(--bs-white);
|
||||
box-shadow: 0 0 50px rgba(255,105,180,0.8);
|
||||
animation: rainbowGradient 2s ease infinite;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .modal-header {
|
||||
background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
|
||||
animation: rainbowGradient 0.8s ease infinite;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .number-input-wrapper {
|
||||
}
|
||||
|
||||
[data-website-mode="enhanced"] .number-input-wrapper .btn {
|
||||
animation: rainbowGradient 0.3s ease infinite;
|
||||
}
|
||||
|
||||
/* Emoji Footprint Animation */
|
||||
.emoji-footprint {
|
||||
position: absolute;
|
||||
font-size: 1.6rem;
|
||||
pointer-events: none;
|
||||
animation: emojiFade 1s ease-out forwards;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
z-index: 9999;
|
||||
text-shadow:
|
||||
0 0 4px #ff00bf,
|
||||
0 0 8px #ff80df,
|
||||
0 0 12px #ffccff;
|
||||
}
|
||||
|
||||
@keyframes emojiFade {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 💅 SLAY TEXT EFFECTS 💅 */
|
||||
.slay-text {
|
||||
position: fixed;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
animation: slayFloat 3s ease-out forwards;
|
||||
text-shadow:
|
||||
0 0 10px #ff00bf,
|
||||
0 0 20px #ff80df,
|
||||
0 0 30px #ffccff,
|
||||
2px 2px 4px rgba(0,0,0,0.5);
|
||||
background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow));
|
||||
background-size: 400% 400%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: slayFloat 3s ease-out forwards, rainbowGradient 1s ease infinite;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue