blob: 2940897b1397dd894bc5e1b618d1716984777cbb (
plain)
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
|
// --------------------------------------------------------------
// Control buttons
// --------------------------------------------------------------
.plyr__control {
background: transparent;
border: 0;
border-radius: $plyr-control-radius;
border-radius: var(--plyr-control-radius, $plyr-control-radius);
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
// Default focus
&:focus {
outline: 0;
}
// Tab focus
&.plyr__tab-focus {
@include plyr-tab-focus();
}
}
// Remove any link styling
a.plyr__control {
text-decoration: none;
&::after,
&::before {
display: none;
}
}
// Change icons on state change
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
|
