59 lines
1.4 KiB
CSS
59 lines
1.4 KiB
CSS
.videoPlayerButton {
|
|
border-radius: var(--Corner-radius-Rounded);
|
|
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
|
|
height: 56px;
|
|
width: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
z-index: 0;
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: var(--Base-Border-Subtle);
|
|
background-color: transparent;
|
|
color: var(--Component-Button-Inverted-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:hover .iconWrapper {
|
|
background:
|
|
linear-gradient(
|
|
0deg,
|
|
var(--Component-Button-Inverted-Fill-Hover) 0%,
|
|
var(--Component-Button-Inverted-Fill-Hover) 100%
|
|
),
|
|
var(--Component-Button-Inverted-Fill-Default);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
border-width: 2px;
|
|
outline: 2px solid var(--Border-Inverted);
|
|
|
|
.transparentBackground {
|
|
background-color: var(--Base-Border-Subtle);
|
|
}
|
|
}
|
|
}
|
|
|
|
.transparentBackground {
|
|
background-color: var(--Base-Surface-Primary-light-Normal);
|
|
border-radius: var(--Corner-radius-Rounded);
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.iconWrapper {
|
|
background: var(--Base-Surface-Primary-light-Normal);
|
|
border: 1px solid var(--Base-Border-Subtle);
|
|
border-radius: var(--Corner-radius-Rounded);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--Space-x05);
|
|
}
|