c21aa2dc73
Fix/BOOK-257 video player * fix(BOOK-257): Fixes to VideoPlayerButton and added stories * fix(BOOK-257): Hiding mute button when the user has interacted with it * fix(BOOK-257): Added support for poster image * fix(BOOK-257): add crossOrigin attr to videoplayer * fix(BOOK-257): comment Approved-by: Anton Gunnarsson
91 lines
1.8 KiB
CSS
91 lines
1.8 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;
|
|
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 {
|
|
outline: 2px solid var(--Border-Inverted);
|
|
outline-offset: 2px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border: 2px solid var(--Border-Interactive-Focus);
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&.size-sm {
|
|
height: 52px;
|
|
width: 52px;
|
|
|
|
.iconWrapper {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
&.size-md {
|
|
height: 56px;
|
|
width: 56px;
|
|
|
|
.iconWrapper {
|
|
width: 43px;
|
|
height: 43px;
|
|
}
|
|
}
|
|
&.size-lg {
|
|
height: 72px;
|
|
width: 72px;
|
|
|
|
.iconWrapper {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|