diff options
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/player/context-menu.scss | 4 | ||||
-rw-r--r-- | client/src/sass/player/index.scss | 1 | ||||
-rw-r--r-- | client/src/sass/player/stats.scss | 42 |
3 files changed, 45 insertions, 2 deletions
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index df78916c6..6bc66af0c 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss | |||
@@ -8,7 +8,7 @@ $context-menu-width: 350px; | |||
8 | 8 | ||
9 | .video-js .vjs-contextmenu-ui-menu { | 9 | .video-js .vjs-contextmenu-ui-menu { |
10 | position: absolute; | 10 | position: absolute; |
11 | background-color: rgba(0, 0, 0, 0.5); | 11 | background-color: $primary-background-color; |
12 | padding: 8px 0; | 12 | padding: 8px 0; |
13 | border-radius: 4px; | 13 | border-radius: 4px; |
14 | width: $context-menu-width; | 14 | width: $context-menu-width; |
@@ -42,7 +42,7 @@ $context-menu-width: 350px; | |||
42 | mask-size: cover; | 42 | mask-size: cover; |
43 | margin-right: 0.8rem !important; | 43 | margin-right: 0.8rem !important; |
44 | 44 | ||
45 | $icons: 'link-2', 'repeat', 'code', 'tick-white'; | 45 | $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; |
46 | 46 | ||
47 | @each $icon in $icons { | 47 | @each $icon in $icons { |
48 | &[class$="-#{$icon}"] { | 48 | &[class$="-#{$icon}"] { |
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss index fe92ce5e0..502ee33ff 100644 --- a/client/src/sass/player/index.scss +++ b/client/src/sass/player/index.scss | |||
@@ -6,3 +6,4 @@ | |||
6 | @import './upnext'; | 6 | @import './upnext'; |
7 | @import './bezels.scss'; | 7 | @import './bezels.scss'; |
8 | @import './playlist.scss'; | 8 | @import './playlist.scss'; |
9 | @import './stats.scss'; | ||
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss new file mode 100644 index 000000000..953f6032a --- /dev/null +++ b/client/src/sass/player/stats.scss | |||
@@ -0,0 +1,42 @@ | |||
1 | @import './_player-variables'; | ||
2 | |||
3 | $stats-width: 420px; | ||
4 | $contextmenu-background-color: rgba(0, 0, 0, 0.6); | ||
5 | |||
6 | .video-js { | ||
7 | |||
8 | .vjs-stats-content { | ||
9 | position: absolute; | ||
10 | background-color: $contextmenu-background-color; | ||
11 | padding: 5px 0; | ||
12 | border-radius: 4px; | ||
13 | width: $stats-width; | ||
14 | min-width: 27em; | ||
15 | max-width: calc(100vw - 20px); | ||
16 | left: 10px; | ||
17 | top: 10px; | ||
18 | z-index: 64; | ||
19 | font-size: 12px; | ||
20 | line-height: 1.2; | ||
21 | |||
22 | @include transition(opacity 0.1s); | ||
23 | } | ||
24 | |||
25 | .vjs-stats-close { | ||
26 | cursor: pointer; | ||
27 | position: absolute; | ||
28 | right: 3px; | ||
29 | top: 3px; | ||
30 | padding: 0; | ||
31 | } | ||
32 | |||
33 | .vjs-stats-list > div > div { | ||
34 | display: inline-block; | ||
35 | font-weight: 600; | ||
36 | padding: 0 .5em; | ||
37 | text-align: right; | ||
38 | width: 11.5em; | ||
39 | white-space: nowrap; | ||
40 | } | ||
41 | |||
42 | } | ||