File size: 1,365 Bytes
758010d b1feefd 758010d b1feefd 758010d b1feefd 758010d b1feefd 758010d b1feefd 758010d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
.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);
}
/* Responsive adjustments */
@media (max-width: 640px) {
.control-panel ul {
grid-template-columns: repeat(2, 1fr);
}
.icon {
width: 70px;
height: 70px;
}
}
/* Animation for click effect */
@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);
} |