/
ad_controls.less
107 lines (88 loc) · 2.43 KB
/
ad_controls.less
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/** @license
* Shaka Player
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/* Ad controls. */
.ad-text-shadow() {
/* Give white text a black shadow, so it's visible against a
* white background. */
text-shadow: 1px 1px 4px black;
}
.shaka-controls-container[ad-active="true"] {
/* While showing an ad, pass pointer events through to the ad container. */
pointer-events: none;
/* Except in the bottom controls, which should still be clickable. */
.shaka-bottom-controls {
pointer-events: auto;
}
}
.shaka-client-side-ad-container, .shaka-server-side-ad-container {
.absolute-position();
/* IMA SDK adds their own ad UI into an iframe element.
* Adjust its position to fit in with our UI, when
* Shaka UI is enabled. */
iframe {
.shaka-video-container[shaka-controls="true"] & {
/* This moves the iframe up a little bit, so it
* doesn't operlap with our controls. */
height: 90%;
}
}
}
.shaka-server-side-ad-container {
.fill-container();
.shrinkable();
&:not([ad-active="true"]) {
pointer-events: none;
}
}
.shaka-ad-controls {
.hide-when-shaka-controls-disabled();
display: flex;
flex-direction: row;
z-index: 1;
/* Add some room between the ad controls and the controls
button panel. */
padding-bottom: 1%;
button, div {
color: white;
font-size: initial;
}
div:not(.shaka-skip-ad-counter) {
.bottom-panels-elements-margin();
}
}
.shaka-ad-counter, .shaka-ad-position {
.bottom-align-children();
.ad-text-shadow();
}
.shaka-skip-ad-container {
/* Skip button is positioned at the very right edge of the
* video container unlike the rest of the bottom controls. */
position: relative;
/* This math is determining how far the button is from the right edge.
* Ad panel's parent is centered and @bottom-controls-width wide, so
* 100% - @bottom-controls-width = margins from both sides of the container.
* That divided by 2 is margin on one side, so we take that, and move the
* button from its normal position to the right by that percentage.
*/
right: calc((100% - @bottom-controls-width) / 2 * -1);
display: flex;
flex-direction: row;
margin: 0;
}
.shaka-skip-ad-button {
padding: 5px 15px;
background: rgba(0 0 0 / 70%);
border: none;
&:disabled {
background: rgba(0 0 0 / 30%);
}
cursor: pointer;
}
.shaka-skip-ad-counter {
padding: 5px;
background: rgba(0 0 0 / 70%);
margin: 0;
}