mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
47 lines
818 B
CSS
47 lines
818 B
CSS
.button {
|
|
position: relative;
|
|
display: grid;
|
|
padding: 0.625rem;
|
|
border-radius: 0.5rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
border: none;
|
|
cursor: pointer;
|
|
color: white;
|
|
transition: background 150ms ease;
|
|
}
|
|
|
|
.button:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.button:active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Icon positioning - both occupy same grid cell */
|
|
.playIcon,
|
|
.pauseIcon {
|
|
grid-area: 1/1;
|
|
transition: opacity 200ms ease;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Show/hide icons based on paused state using data attributes */
|
|
.button[data-paused] .playIcon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.button[data-paused] .pauseIcon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.button:not([data-paused]) .playIcon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.button:not([data-paused]) .pauseIcon {
|
|
opacity: 1;
|
|
}
|