42 lines
783 B
CSS
42 lines
783 B
CSS
/* Vinyl button styling */
|
|
#vinyl-button {
|
|
padding: 0px 8px;
|
|
transition: padding 0.05s steps(8);
|
|
background-color: rgba(180, 180, 180, 0.2);
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Active state styling */
|
|
.active #vinyl-button {
|
|
background-color: rgba(108, 158, 175, 0.7);
|
|
padding: 0px 32px;
|
|
}
|
|
|
|
/* Icon styling */
|
|
#vinyl-icon {
|
|
color: #555555;
|
|
min-width: 36px;
|
|
}
|
|
|
|
/* Label styling */
|
|
#vinyl-label {
|
|
color: #333333;
|
|
}
|
|
|
|
/* Active state changes for icon and label */
|
|
.active #vinyl-icon,
|
|
.active #vinyl-label {
|
|
color: var(--pink);
|
|
padding: 0px 32px;
|
|
}
|
|
|
|
/* Hover effect */
|
|
#vinyl-button:hover {
|
|
background-color: rgba(180, 180, 180, 0.4);
|
|
}
|
|
|
|
.active #vinyl-button:hover {
|
|
background-color: rgba(108, 158, 175, 0.9);
|
|
}
|