|
|
.control-panel { |
|
|
background-color: #121212; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); |
|
|
border: 1px solid rgba(255, 122, 0, 0.1); |
|
|
} |
|
|
|
|
|
.control-panel ul { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background-color: #141414; |
|
|
border: 2px solid #000; |
|
|
border-radius: 12px; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
.icon i { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
color: #333; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
input:checked ~ .icon { |
|
|
background-color: #000; |
|
|
border-color: #ff7a00; |
|
|
box-shadow: |
|
|
0 0 6px rgba(255, 122, 0, 1), |
|
|
0 0 14px rgba(255, 122, 0, 0.9), |
|
|
0 0 24px rgba(255, 122, 0, 0.8); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
input:checked ~ .icon i { |
|
|
color: #ffffff; |
|
|
text-shadow: |
|
|
0 0 6px rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 640px) { |
|
|
.control-panel ul { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
.icon { |
|
|
width: 70px; |
|
|
height: 70px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes ping { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
75%, 100% { |
|
|
transform: scale(1.2); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
.animate-ping { |
|
|
animation: ping 0.5s cubic-bezier(0, 0, 0.2, 1); |
|
|
} |
