aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
commitfada8d75550dc7365f7e18ee1569b9406251d660 (patch)
treedb9dc01c18693824f83fce5020f4c1f3ae7c0865 /client/src/sass
parent492fd28167f770d79a430fc57451b5a9e075d8e7 (diff)
parentc2830fa8f84f61462098bf36add824f89436dfa9 (diff)
downloadPeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.gz
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.zst
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.zip
Merge branch 'feature/design' into develop
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/_mixins.scss95
-rw-r--r--client/src/sass/_variables.scss32
-rw-r--r--client/src/sass/application.scss298
-rw-r--r--client/src/sass/pre-customizations.scss1
-rw-r--r--client/src/sass/video-js-custom.scss573
5 files changed, 659 insertions, 340 deletions
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
new file mode 100644
index 000000000..2a7192fb2
--- /dev/null
+++ b/client/src/sass/_mixins.scss
@@ -0,0 +1,95 @@
1@mixin disable-default-a-behaviour {
2 &:hover, &:focus, &:active {
3 text-decoration: none !important;
4 outline: none !important;
5 }
6}
7
8@mixin peertube-input-text($width) {
9 display: inline-block;
10 height: $button-height;
11 width: $width;
12 background: #fff;
13 border: 1px solid #C6C6C6;
14 border-radius: 3px;
15 padding-left: 15px;
16
17 &::placeholder {
18 color: #585858;
19 }
20}
21
22@mixin orange-button {
23 color: #fff;
24 background-color: $orange-color;
25
26 &:hover, &:active, &:focus {
27 color: #fff;
28 background-color: $orange-hoover-color;
29 }
30
31 &[disabled], &.disabled {
32 cursor: default;
33 color: #fff;
34 background-color: #C6C6C6;
35 }
36}
37
38@mixin grey-button {
39 background-color: $grey-color;
40 color: #585858;
41
42 &:hover, &:active, &:focus, &[disabled], &.disabled {
43 color: #585858;
44 background-color: $grey-hoover-color;
45 }
46
47 &[disabled], &.disabled {
48 cursor: default;
49 }
50}
51
52@mixin peertube-button {
53 border: none;
54 font-weight: $font-semibold;
55 font-size: 15px;
56 height: $button-height;
57 line-height: $button-height;
58 border-radius: 3px;
59 text-align: center;
60 padding: 0 17px 0 13px;
61 cursor: pointer;
62 outline: 0;
63}
64
65@mixin peertube-button-link {
66 display: inline-block;
67
68 @include disable-default-a-behaviour;
69 @include peertube-button;
70}
71
72@mixin avatar ($size) {
73 width: $size;
74 height: $size;
75}
76
77@mixin icon ($size) {
78 display: inline-block;
79 background-repeat: no-repeat;
80 background-size: contain;
81 width: $size;
82 height: $size;
83 vertical-align: middle;
84 cursor: pointer;
85}
86
87
88@mixin peertube-select ($width) {
89 background-color: #fff;
90 border: 1px solid #C6C6C6;
91 height: $button-height;
92 width: $width;
93 border-radius: 3px;
94 padding-left: 15px;
95}
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index f0ffb43ba..0d310409b 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -1,23 +1,29 @@
1$grey-color: #555; 1$font-regular: 400;
2$font-semibold: 600;
3$font-bold: 700;
2 4
3$black-background: #1d2125; 5$grey-color: #E5E5E5;
6$grey-hoover-color: #EFEFEF;;
7$orange-color: #F1680D;
8$orange-hoover-color: #F97D46;
9
10$black-background: #000;
4$grey-background: #f6f2f2; 11$grey-background: #f6f2f2;
12$red-error: #FF0000;
13
14$expanded-horizontal-margins: 150px;
15$not-expanded-horizontal-margins: 30px;
5 16
6$menu-color-link: #9cabb8; 17$button-height: 30px;
7$menu-color-block: #686f77;
8 18
9$header-height: 65px; 19$header-height: 50px;
10$header-border-color: #e9eff6; 20$header-border-color: #e9eff6;
21$search-input-width: 375px;
22
23$menu-color: #fff;
24$menu-width: 240px;
11 25
12$footer-height: 30px; 26$footer-height: 30px;
13$footer-margin: 30px; 27$footer-margin: 30px;
14 28
15$footer-border-color: $header-border-color; 29$footer-border-color: $header-border-color;
16
17$video-miniature-other-infos: #686767;
18
19$video-watch-border-color: #eceef4;
20$video-watch-title-height: 90px;
21$video-watch-info-color: #9da0ae;
22$video-watch-info-height: 120px;
23$video-watch-info-padding-left: 40px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 47e1b6df0..9d347d566 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,3 +1,5 @@
1$FontPathSourceSansPro: "../fonts/source-sans-pro";
2@import '~source-sans-pro/source-sans-pro';
1@import '~primeng/resources/themes/bootstrap/theme.css'; 3@import '~primeng/resources/themes/bootstrap/theme.css';
2@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
3@import '~video.js/dist/video-js.css'; 5@import '~video.js/dist/video-js.css';
@@ -7,17 +9,30 @@
7 display: none !important; 9 display: none !important;
8} 10}
9 11
12body {
13 font-family: 'Source Sans Pro';
14 font-weight: $font-regular;
15 color: #000;
16}
17
10input.readonly { 18input.readonly {
11 /* Force blank on readonly inputs */ 19 /* Force blank on readonly inputs */
12 background-color: #fff !important; 20 background-color: #fff !important;
13} 21}
14 22
15.form-control, .btn { 23label {
16 border-radius: 0; 24 font-weight: $font-bold;
25 font-size: 15px;
17} 26}
18 27
19.dropdown-menu { 28.form-error {
20 border-radius: 0; 29 display: block;
30 color: $red-error;
31 margin-top: 5px;
32}
33
34.input-error {
35 border-color: $red-error !important;
21} 36}
22 37
23.glyphicon-black { 38.glyphicon-black {
@@ -25,44 +40,73 @@ input.readonly {
25} 40}
26 41
27.main-col { 42.main-col {
28 .content-padding { 43 margin-left: $menu-width;
29 padding: 15px 30px;
30 44
31 @media screen and (max-width: 800px) { 45 .margin-content {
32 padding: 15px 10px; 46 margin-left: $not-expanded-horizontal-margins;
33 } 47 margin-right: $not-expanded-horizontal-margins;
48 }
34 49
35 @media screen and (min-width: 1400px) { 50 .sub-menu {
36 padding: 15px 40px; 51 background-color: #F7F7F7;
37 } 52 width: 100%;
53 height: 81px;
54 margin-bottom: 30px;
55 display: flex;
56 align-items: center;
57 padding-left: $not-expanded-horizontal-margins;
58 }
38 59
39 @media screen and (min-width: 1600px) { 60 // Override some properties if the main content is expanded (no menu on the left)
40 padding: 15px 50px; 61 &.expanded {
62 margin-left: 0;
63
64 .margin-content {
65 margin-left: $expanded-horizontal-margins;
66 margin-right: $expanded-horizontal-margins;
41 } 67 }
42 68
43 @media screen and (min-width: 1800px) { 69 .sub-menu {
44 padding: 15px 60px; 70 padding-left: $expanded-horizontal-margins;
45 } 71 }
46 } 72 }
47} 73}
48 74
49// On small screen, menu is absolute and displayed over the page 75.title-page {
50@media screen and (max-width: 500px) { 76 color: #000;
51 .title-menu-left { 77 font-size: 16px;
52 width: 120px; 78 display: inline-block;
53 position: absolute !important; 79 margin-right: 55px;
54 z-index: 10000; 80 font-weight: $font-semibold;
81 @include disable-default-a-behaviour;
82
83 &.active, &.title-page-single {
84 border-bottom: 2px solid $orange-color;
85 font-weight: $font-bold;
86 margin-top: 30px;
87 margin-bottom: 25px;
55 } 88 }
56 89
57 .main-col { 90 &:hover, &:active, &:focus {
58 width: 100% !important; 91 color: #000;
59 } 92 }
93}
94
95.admin-sub-header {
96 display: flex;
97 align-items: center;
98 margin-bottom: 30px;
60 99
61 .fake-menu { 100 .admin-sub-title {
62 display: none; 101 flex-grow: 1;
63 } 102 }
64} 103}
65 104
105.admin-sub-title {
106 font-size: 20px;
107 font-weight: bold;
108}
109
66// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 110// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
67.glyphicon-refresh-animate { 111.glyphicon-refresh-animate {
68 -animation: spin .7s infinite linear; 112 -animation: spin .7s infinite linear;
@@ -86,13 +130,209 @@ input.readonly {
86 to { -moz-transform: rotate(360deg);} 130 to { -moz-transform: rotate(360deg);}
87} 131}
88 132
89/* ngprime data table customizations */ 133// ngprime data table customizations
90p-datatable { 134p-datatable {
135 font-size: 15px !important;
136
137 .ui-datatable-scrollable-header {
138 background-color: #fff !important;
139 }
140
141 .ui-widget-content {
142 border: none !important;
143 }
144
145 .ui-datatable-virtual-table {
146 border-top: none !important;
147 }
148
149 td {
150 border: 1px solid #E5E5E5 !important;
151 padding-left: 15px !important;
152 }
153
154 tr {
155 background-color: #fff !important;
156 height: 46px;
157
158 &:hover {
159 background-color: #f0f0f0 !important;
160 }
161
162 &:not(:hover) {
163 .action-cell * {
164 display: none !important;
165 }
166 }
167
168 &:first-child td {
169 border-top: none !important;
170 }
171
172 &:last-child td {
173 border-bottom: none !important;
174 }
175 }
176
177 th {
178 border: none !important;
179 border-bottom: 1px solid #f0f0f0 !important;
180 text-align: left !important;
181 padding: 5px 0 5px 15px !important;
182 font-weight: $font-semibold !important;
183 color: #000 !important;
184
185 &.ui-sortable-column:hover:not(.ui-state-active) {
186 background-color: #f0f0f0 !important;
187 border: 1px solid #f0f0f0 !important;
188 border-width: 0 1px !important;
189 }
190
191 &.ui-state-active {
192 color: #fff !important;
193 background-color: $orange-color !important;
194 border: 1px solid $orange-color !important;
195 border-width: 0 1px !important;
196 }
197 }
198
91 .action-cell { 199 .action-cell {
200 width: 250px !important;
201 padding: 0 !important;
92 text-align: center; 202 text-align: center;
203 }
204
205 p-paginator {
206 .ui-paginator-bottom {
207 position: relative;
208 border: none !important;
209 border: 1px solid #f0f0f0 !important;
210 height: 40px;
211 display: flex;
212 justify-content: center;
213 align-items: center;
214
215 a {
216 color: #000 !important;
217 font-weight: $font-semibold !important;
218 margin-right: 20px !important;
219 outline: 0 !important;
220 border-radius: 3px !important;
221 padding: 5px 2px !important;
222
223 &.ui-state-active {
224 &, &:hover, &:active, &:focus {
225 color: #fff !important;
226 background-color: $orange-color !important;
227 }
228 }
229 }
230 }
231 }
232}
233
234// Bootstrap customizations
235.dropdown-menu {
236 border-radius: 3px;
237 box-shadow: 0 3px 6px;
238 font-size: 15px;
239
240 .dropdown-item {
241 padding: 3px 15px;
242 }
243
244 a {
245 color: #000 !important;
246 }
247}
248
249.modal {
250 .modal-header {
251 border-bottom: none;
252
253 .title-page-single {
254 margin: 0;
255 }
256 }
257}
258
259.nav {
260 font-size: 16px !important;
261 border: none !important;
262
263 .nav-item .nav-link {
264 margin-right: 30px;
265 padding: 0;
266 border-radius: 3px;
267 border: none !important;
268
269 .tab-link {
270 display: flex !important;
271 align-items: center;
272 height: 30px !important;
273 padding: 0 15px;
274 }
275
276 &, & a {
277 color: #000 !important;
278 @include disable-default-a-behaviour;
279 }
280
281 &.active, &:hover {
282 background-color: #F0F0F0;
283 }
284
285 &.active {
286 font-weight: $font-semibold !important;
287 }
288 }
289}
290
291.orange-button {
292 @include peertube-button;
293 @include orange-button;
294}
295
296.orange-button-link {
297 @include peertube-button-link;
298 @include orange-button;
299}
300
301.grey-button {
302 @include peertube-button;
303 @include grey-button;
304}
305
306.grey-button-link {
307 @include peertube-button-link;
308 @include grey-button;
309}
310
311// On small screen, menu is absolute
312@media screen and (max-width: 800px) {
313 .title-menu-left {
314 width: 150px !important;
315 position: absolute !important;
316 z-index: 10000;
317 }
318
319 .main-col {
320 margin-left: 0;
321
322 &, &.expanded {
323 .margin-content {
324 margin-left: 10px;
325 margin-right: 10px;
326 }
327
328 .sub-menu {
329 padding-left: 10px;
330 margin-bottom: 10px;
331 }
93 332
94 .glyphicon { 333 input[type=text], input[type=password] {
95 cursor: pointer; 334 width: 100% !important;
335 }
96 } 336 }
97 } 337 }
98} 338}
diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss
index 693489828..52eef50f2 100644
--- a/client/src/sass/pre-customizations.scss
+++ b/client/src/sass/pre-customizations.scss
@@ -1,4 +1,5 @@
1@import '_variables.scss'; 1@import '_variables.scss';
2@import '_mixins.scss';
2 3
3$bootstrap-sass-asset-helper: false !default; 4$bootstrap-sass-asset-helper: false !default;
4// 5//
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 34a958764..1c5701bea 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,346 +1,322 @@
1// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files 1// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
2.vjs-resolution-button-label { 2$primary-foreground-color: #fff;
3 font-size: 1em; 3$primary-background-color: #000;
4 line-height: 3em; 4$font-size: 13px;
5 position: absolute; 5$control-bar-height: 34px;
6 top: 0;
7 left: -1px;
8 width: 100%;
9 height: 100%;
10 text-align: center;
11 box-sizing: inherit;
12}
13
14.vjs-resolution-button {
15 outline: 0 !important;
16 6
17 .vjs-menu { 7.video-js.vjs-peertube-skin {
18 .vjs-menu-content { 8 font-size: $font-size;
19 width: 4em; 9 color: $primary-foreground-color;
20 left: 50%; /* Center the menu, in it's parent */
21 margin-left: -2em; /* half of width, to center */
22 }
23 10
24 li { 11 .vjs-button > .vjs-icon-placeholder::before {
25 text-transform: none; 12 line-height: $control-bar-height;
26 font-size: 1em;
27 }
28 } 13 }
29}
30 14
31// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin 15 .vjs-mouse-display:before,
32 16 .vjs-play-progress:before,
33// Video JS Sublime Skin 17 .vjs-volume-level:before {
34// The following are SCSS variables to automate some of the values. 18 content: ''; /* Remove Circle From Progress Bar */
35// But don't feel limited by them. Change/replace whatever you want. 19 }
36
37// The color of icons, text, and the big play button border.
38// Try changing to #0f0
39$primary-foreground-color: #fff; // #fff default
40 20
41// The default color of control backgrounds is mostly black but with a little 21 .vjs-audio-button {
42// bit of blue so it can still be seen on all-black video frames, which are common. 22 display: none;
43// Try changing to #900 23 }
44$primary-background-color: #2B333F; // #2B333F default
45 24
46// Try changing to true 25 .vjs-big-play-button {
47$center-big-play-button: true; // true default 26 outline: 0;
27 font-size: 8em;
48 28
49.video-js { 29 $big-play-width: 3em;
50 /* The base font size controls the size of everything, not just text. 30 $big-play-height: 1.5em;
51 All dimensions use em-based sizes so that the scale along with the font size.
52 Try increasing it to 15px and see what happens. */
53 font-size: 10px;
54 31
55 /* The main font color changes the ICON COLORS as well as the text */ 32 border: 0;
56 color: $primary-foreground-color; 33 border-radius: 0.3em;
57}
58 34
59/* The "Big Play Button" is the play button that shows before the video plays.
60 To center it set the align values to center and middle. The typical location
61 of the button is the center, but there is trend towards moving it to a corner
62 where it gets out of the way of valuable content in the poster image.*/
63.vjs-sublime-skin .vjs-big-play-button {
64 /* The font size is what makes the big play button...big.
65 All width/height values use ems, which are a multiple of the font size.
66 If the .video-js font-size is 10px, then 3em equals 30px.*/
67 font-size: 8em;
68
69 /* We're using SCSS vars here because the values are used in multiple places.
70 Now that font size is set, the following em values will be a multiple of the
71 new font size. If the font-size is 3em (30px), then setting any of
72 the following values to 3em would equal 30px. 3 * font-size. */
73 $big-play-width: 3em;
74 /* 1.5em = 45px default */
75 $big-play-height: 1.5em;
76
77 line-height: $big-play-height;
78 height: $big-play-height;
79 width: $big-play-width;
80
81 /* 0.06666em = 2px default */
82 border: 0;
83 /* 0.3em = 9px default */
84 border-radius: 0.3em;
85
86 @if $center-big-play-button {
87 /* Align center */
88 left: 50%; 35 left: 50%;
89 top: 50%; 36 top: 50%;
90 margin-left: -($big-play-width / 2); 37 margin-left: -($big-play-width / 2);
91 margin-top: -($big-play-height / 2); 38 margin-top: -($big-play-height / 2);
92 } @else { 39 background-color: transparent !important;
93 /* Align top left. 0.5em = 15px default */
94 left: 0.5em;
95 top: 0.5em;
96 } 40 }
97}
98 41
99/* The default color of control backgrounds is mostly black but with a little 42 .vjs-control-bar,
100 bit of blue so it can still be seen on all-black video frames, which are common. */ 43 .vjs-big-play-button,
101.video-js .vjs-control-bar, 44 .vjs-menu-button .vjs-menu-content {
102.video-js .vjs-big-play-button, 45 background-color: rgba($primary-background-color, 0.5);
103.video-js .vjs-menu-button .vjs-menu-content { 46 }
104 /* IE8 - has no alpha support */
105 background-color: $primary-background-color;
106 /* Opacity: 1.0 = 100%, 0.0 = 0% */
107 background-color: rgba($primary-background-color, 0.7);
108 background-color: transparent;
109}
110 47
111// Make a slightly lighter version of the main background 48 $slider-bg-color: lighten($primary-background-color, 33%);
112// for the slider background.
113$slider-bg-color: lighten($primary-background-color, 33%);
114
115/* Slider - used for Volume bar and Progress bar */
116.video-js .vjs-slider {
117 background-color: $slider-bg-color;
118 background-color: rgba($slider-bg-color, 0.5);
119 background-color: rgba(255,255,255,.3);
120 border-radius: 2px;
121 height: 6.5px;
122}
123 49
124/* The slider bar color is used for the progress bar and the volume bar 50 .vjs-slider {
125 (the first two can be removed after a fix that's coming) */ 51 background-color: rgba(255, 255, 255, .3);
126.video-js .vjs-volume-level, 52 border-radius: 2px;
127.video-js .vjs-play-progress, 53 height: 5px;
128.video-js .vjs-slider-bar { 54 }
129 background: $primary-foreground-color;
130}
131 55
132/* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */ 56 /* The slider bar color is used for the progress bar and the volume bar
133.video-js .vjs-progress-holder .vjs-load-progress, 57 (the first two can be removed after a fix that's coming) */
134.video-js .vjs-progress-holder .vjs-load-progress div, 58 .vjs-volume-level,
135.video-js .vjs-progress-holder .vjs-play-progress, 59 .vjs-play-progress,
136.video-js .vjs-progress-holder .vjs-tooltip-progress-bar { 60 .vjs-slider-bar {
137 height: 6.5px; 61 background: $primary-foreground-color;
138} 62 }
139 63
140/* The main progress bar also has a bar that shows how much has been loaded. */ 64 .vjs-load-progress {
141.video-js .vjs-load-progress { 65 background: rgba($slider-bg-color, 0.5);
142 /* For IE8 we'll lighten the color */ 66 }
143 background: ligthen($slider-bg-color, 25%);
144 /* Otherwise we'll rely on stacked opacities */
145 background: rgba($slider-bg-color, 0.5);
146}
147 67
148/* The load progress bar also has internal divs that represent 68 .vjs-load-progress div {
149 smaller disconnected loaded time ranges */ 69 background: rgba($slider-bg-color, 0.75);
150.video-js .vjs-load-progress div { 70 }
151 /* For IE8 we'll lighten the color */
152 background: ligthen($slider-bg-color, 50%);
153 /* Otherwise we'll rely on stacked opacities */
154 background: rgba($slider-bg-color, 0.75);
155}
156 71
157//Skin Style Starts 72 .vjs-poster {
158.vjs-sublime-skin .vjs-poster {
159 outline: none; /* Remove Blue Outline on Click*/ 73 outline: none; /* Remove Blue Outline on Click*/
160 outline: 0; 74 outline: 0;
161} 75 }
162
163.vjs-sublime-skin:hover .vjs-big-play-button {
164 background-color: transparent;
165}
166
167.vjs-sublime-skin .vjs-fullscreen-control:before,
168.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
169 content: ''; /* Remove Fullscreen Exit Icon */
170}
171
172.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
173 background: #fff;
174}
175
176.vjs-sublime-skin .vjs-fullscreen-control {
177 border: 3px solid #fff;
178 box-sizing: border-box;
179 cursor: pointer;
180 margin-top: -7px;
181 top: 50%;
182 height: 14px;
183 width: 22px;
184 margin-right: 10px;
185}
186
187.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
188 background: #000;
189 content: "";
190 display: block;
191 position: absolute;
192 bottom: 0;
193 left: 0;
194 height: 5px;
195 width: 5px;
196}
197
198.vjs-sublime-skin .vjs-progress-holder {
199 margin: 0;
200}
201
202.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
203 border-radius: 2px;
204 display: block;
205 height: 6.5px;
206}
207
208.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
209.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
210 border-radius: 2px;
211 height: 6.5px;
212}
213
214.vjs-sublime-skin .vjs-playback-rate {
215 display: none; /* Remove Playback Rate */
216}
217
218.vjs-sublime-skin .vjs-progress-control {
219 margin-right: 50px;
220}
221
222.vjs-sublime-skin .vjs-time-control {
223 right: 55px;
224}
225 76
226.vjs-sublime-skin .vjs-volume-menu-button:before { 77 .vjs-control-bar {
227 width: 1.2em; 78 height: $control-bar-height;
228 z-index: 1;
229}
230 79
231.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu, 80 .vjs-progress-control {
232.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu, 81 bottom: 34px;
233.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu { 82 width: 100%;
234 display: block; 83 position: absolute;
235 opacity: 1; 84 height: 5px;
236}
237 85
238.vjs-sublime-skin .vjs-volume-menu-button, 86 .vjs-progress-holder {
239.vjs-sublime-skin .vjs-volume-panel { 87 margin: 0;
240 width: 6em; 88 border-radius: 0;
241 position: absolute; 89 }
242 right: 0; 90 }
243 margin-right: 65px;
244}
245 91
246.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content, 92 .vjs-play-control {
247.vjs-sublime-skin .vjs-volume-menu-button:hover, 93 font-size: $font-size;
248.vjs-sublime-skin .vjs-volume-menu-button:focus, 94 padding: 0 17px;
249.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active, 95 margin-right: 5px;
250.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control, 96 }
251.vjs-sublime-skin .vjs-volume-panel:hover,
252.vjs-sublime-skin .vjs-volume-panel:focus,
253.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
254 width: 6em;
255}
256 97
257.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu { 98 .vjs-time-control {
258 left: 23px; 99 &.vjs-current-time {
259} 100 font-size: $font-size;
101 display: inline-block;
102 padding: 0;
103
104 .vjs-current-time-display {
105 line-height: $control-bar-height;
106
107 &::after {
108 content: "/";
109 margin: 0 1px 0 2px;
110 }
111 }
112 }
113
114 &.vjs-duration {
115 font-size: $font-size;
116 display: inline-block;
117 padding: 0;
118
119 .vjs-duration-display {
120 line-height: $control-bar-height;
121 }
122 }
123
124 &.vjs-remaining-time {
125 display: none;
126 }
127 }
260 128
261.vjs-sublime-skin .vjs-mouse-display:before, 129 .vjs-webtorrent {
262.vjs-sublime-skin .vjs-play-progress:before, 130 width: 100%;
263.vjs-sublime-skin .vjs-volume-level:before { 131 line-height: $control-bar-height;
264 content: ''; /* Remove Circle From Progress Bar */ 132 text-align: right;
265} 133 padding-right: 60px;
134
135 .vjs-webtorrent-displayed {
136 display: block;
137 }
138
139 .vjs-webtorrent-hidden {
140 display: none;
141 }
142
143 .download-speed-number, .upload-speed-number, .peers-number {
144 font-weight: $font-semibold;
145 }
146
147 .download-speed-text, .upload-speed-text, .peers-text {
148 margin-right: 15px;
149 }
150
151 .icon {
152 display: inline-block;
153 width: 15px;
154 height: 15px;
155 background-size: contain;
156 vertical-align: middle;
157 background-repeat: no-repeat;
158 margin-right: 6px;
159 position: relative;
160 top: -1px;
161
162 &.icon-download {
163 background-image: url('../assets/player/images/arrow-down.svg');
164 }
165
166 &.icon-upload {
167 background-image: url('../assets/player/images/arrow-up.svg');
168 }
169 }
170 }
266 171
267.vjs-sublime-skin .vjs-mouse-display:after, 172 .vjs-mute-control {
268.vjs-sublime-skin .vjs-play-progress:after, 173 .vjs-icon-placeholder {
269.vjs-sublime-skin .vjs-time-tooltip { 174 display: inline-block;
270 width: 5.5em; 175 width: 22px;
271} 176 height: 22px;
177 vertical-align: middle;
178 background: url('../assets/player/images/volume.svg') no-repeat;
179 background-size: contain;
180
181 &::before {
182 content: '';
183 }
184 }
185
186 &.vjs-vol-0 .vjs-icon-placeholder {
187 background: url('../assets/player/images/volume-mute.svg') no-repeat;
188 background-size: contain;
189 }
190 }
272 191
273.vjs-sublime-skin .vjs-audio-button { 192 .vjs-volume-menu-button,
274 display: none; 193 .vjs-volume-panel {
275} 194 width: 6em;
195 position: absolute;
196 right: 0;
197 margin-right: 65px;
198 }
276 199
277.vjs-sublime-skin .vjs-volume-bar { 200 .vjs-volume-bar {
278 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC); 201 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
279 background-size: 22px 14px; 202 background-size: 22px 14px;
280 background-repeat: no-repeat; 203 height: 100%;
281 height: 100%; 204 width: 100%;
282 width: 100%; 205 max-width: 22px;
283 max-width: 22px; 206 max-height: 14px;
284 max-height: 14px; 207 margin: 7px 4px;
285 margin: 7px 4px; 208 border-radius: 0;
286 border-radius: 0; 209 top: 3px;
287} 210
211 .vjs-volume-level {
212 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
213 background-size: 22px 14px;
214 max-width: 22px;
215 max-height: 14px;
216 height: 100%;
217 }
218 }
288 219
289.vjs-sublime-skin .vjs-volume-level { 220 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
290 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC); 221 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
291 background-size: 22px 14px; 222 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
292 background-repeat: no-repeat; 223 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
293 max-width: 22px; 224 width: 6em;
294 max-height: 14px; 225 transition-property: none;
295 height: 100%; 226 }
296}
297 227
298/* New for VideoJS v6 */ 228 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
299.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 229 width: 3em;
300.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active, 230 height: auto;
301.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus, 231 }
302.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
303 width: 6em;
304 transition-property: none;
305}
306 232
307.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { 233 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
308 width: 3em; 234 transition-property: none;
309 height: auto; 235 }
310}
311 236
312.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { 237 .vjs-volume-panel {
313 transition-property: none; 238 .vjs-mute-control {
314} 239 width: 2em;
240 z-index: 1;
241 padding: 0;
242 }
243
244 .vjs-volume-control {
245 display: inline-block;
246 position: relative;
247 left: 5px;
248 opacity: 1;
249 width: 3em;
250 height: auto;
251 }
252 }
315 253
316.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder { 254 .vjs-fullscreen-control {
317 display: none; /* Remove Duplicate Fullscreen Icon */ 255 width: 37px;
318} 256
257 .vjs-icon-placeholder {
258 display: inline-block;
259 width: 22px;
260 height: 22px;
261 vertical-align: middle;
262 background: url('../assets/player/images/fullscreen.svg') no-repeat;
263 background-size: contain;
264
265 &::before {
266 content: '';
267 }
268 }
269 }
319 270
320.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control { 271 .vjs-menu-button-popup {
321 width: 2em; 272 font-size: 13px;
322 z-index: 1; 273 font-weight: $font-semibold;
323 padding: 0; 274 width: 42px;
324} 275
276 // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
277 .vjs-resolution-button-label {
278 line-height: $control-bar-height;
279 position: absolute;
280 top: 0;
281 left: -1px;
282 width: 100%;
283 height: 100%;
284 text-align: center;
285 box-sizing: inherit;
286 }
287
288 .vjs-resolution-button {
289 outline: 0 !important;
290 }
291
292 .vjs-menu {
293 top: 20px;
294
295 .vjs-menu-content {
296 width: 4em;
297 left: 50%; /* Center the menu, in it's parent */
298 margin-left: -2em; /* half of width, to center */
299 }
300
301 li {
302 text-transform: none;
303 font-size: 13px;
304 }
305 }
306 }
307 }
325 308
326.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control { 309 @media screen and (max-width: 450px) {
327 display: inline-block; 310 .vjs-webtorrent-displayed {
328 position: relative; 311 display: none !important;
329 left: 5px; 312 }
330 opacity: 1; 313 }
331 width: 3em;
332 height: auto;
333} 314}
334 315
335// Thanks: https://projects.lukehaas.me/css-loaders/ 316// Thanks: https://projects.lukehaas.me/css-loaders/
336.vjs-loading-spinner { 317.vjs-loading-spinner {
337 margin: 0 !important;
338 position: absolute;
339 // 15px is the nav bar height
340 top: calc(50% - 15px);
341 left: 50%; 318 left: 50%;
342 font-size: 10px; 319 font-size: 10px;
343 position: relative;
344 text-indent: -9999em; 320 text-indent: -9999em;
345 border: 0.7em solid rgba(255, 255, 255, 0.2); 321 border: 0.7em solid rgba(255, 255, 255, 0.2);
346 border-left-color: #ffffff; 322 border-left-color: #ffffff;
@@ -367,3 +343,4 @@ $slider-bg-color: lighten($primary-background-color, 33%);
367 } 343 }
368 } 344 }
369} 345}
346
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-03 21:45:06 +0000