aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss47
-rw-r--r--client/src/sass/bootstrap.scss24
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss5
-rw-r--r--client/src/sass/include/_miniature.scss2
-rw-r--r--client/src/sass/include/_mixins.scss31
-rw-r--r--client/src/sass/include/_variables.scss24
-rw-r--r--client/src/sass/loading-bar.scss5
-rw-r--r--client/src/sass/player/_player-variables.scss2
-rw-r--r--client/src/sass/player/bezels.scss8
-rw-r--r--client/src/sass/player/peertube-skin.scss9
-rw-r--r--client/src/sass/primeng-custom.scss31
11 files changed, 112 insertions, 76 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5dacdd73b..560414e90 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,5 +1,6 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2 2
3@import '_bootstrap-variables';
3@import '_variables'; 4@import '_variables';
4@import '_mixins'; 5@import '_mixins';
5 6
@@ -32,7 +33,7 @@ body {
32 --menuForegroundColor: #{$menu-color}; 33 --menuForegroundColor: #{$menu-color};
33 --submenuColor: #{$sub-menu-color}; 34 --submenuColor: #{$sub-menu-color};
34 35
35 --inputColor: #{$input-background-color}; 36 --inputBackgroundColor: #{$input-background-color};
36 --inputPlaceholderColor: #{$input-placeholder-color}; 37 --inputPlaceholderColor: #{$input-placeholder-color};
37 38
38 --actionButtonColor: #{$grey-foreground-color}; 39 --actionButtonColor: #{$grey-foreground-color};
@@ -47,6 +48,11 @@ body {
47 font-size: 14px; 48 font-size: 14px;
48} 49}
49 50
51::selection {
52 color: var(--mainBackgroundColor);
53 background-color: var(--mainHoverColor);
54}
55
50#incompatible-browser { 56#incompatible-browser {
51 display: none; 57 display: none;
52 text-align: center; 58 text-align: center;
@@ -61,7 +67,7 @@ strong {
61 67
62input.readonly { 68input.readonly {
63 /* Force blank on readonly inputs */ 69 /* Force blank on readonly inputs */
64 background-color: var(--inputColor) !important; 70 background-color: var(--inputBackgroundColor) !important;
65} 71}
66 72
67input, textarea { 73input, textarea {
@@ -162,7 +168,7 @@ label {
162 color: var(--mainForegroundColor); 168 color: var(--mainForegroundColor);
163 } 169 }
164 170
165 @media screen and (max-width: 500px) { 171 @media screen and (max-width: $mobile-view) {
166 margin-right: 15px; 172 margin-right: 15px;
167 } 173 }
168} 174}
@@ -202,26 +208,6 @@ label {
202 to { transform: scale(1) rotate(360deg);} 208 to { transform: scale(1) rotate(360deg);}
203} 209}
204 210
205.orange-button {
206 @include peertube-button;
207 @include orange-button;
208}
209
210.orange-button-link {
211 @include peertube-button-link;
212 @include orange-button;
213}
214
215.grey-button {
216 @include peertube-button;
217 @include grey-button;
218}
219
220.grey-button-link {
221 @include peertube-button-link;
222 @include grey-button;
223}
224
225// In tables, don't have a hover different background 211// In tables, don't have a hover different background
226table { 212table {
227 .action-button-edit, .action-button-delete { 213 .action-button-edit, .action-button-delete {
@@ -240,7 +226,16 @@ table {
240 font-weight: $font-semibold; 226 font-weight: $font-semibold;
241} 227}
242 228
243@media screen and (max-width: 1600px) { 229.dropdown-item {
230 @include dropdown-with-icon-item;
231
232 my-global-icon {
233 width: 22px;
234 height: 22px;
235 }
236}
237
238@media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) {
244 .main-col { 239 .main-col {
245 &.expanded { 240 &.expanded {
246 .margin-content { 241 .margin-content {
@@ -251,7 +246,7 @@ table {
251 } 246 }
252} 247}
253 248
254@media screen and (max-width: 900px) { 249@media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
255 .main-col { 250 .main-col {
256 &.expanded { 251 &.expanded {
257 .margin-content { 252 .margin-content {
@@ -263,7 +258,7 @@ table {
263 padding-left: 50px; 258 padding-left: 50px;
264 259
265 .title-page { 260 .title-page {
266 font-size: 15px; 261 font-size: 17px;
267 } 262 }
268 } 263 }
269 } 264 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 330882fe4..e10b84596 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -9,6 +9,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
9 animation: spin .7s infinite linear; 9 animation: spin .7s infinite linear;
10} 10}
11 11
12.flex-auto {
13 flex: auto;
14}
15
12@keyframes spin { 16@keyframes spin {
13 from { 17 from {
14 transform: scale(1) rotate(0deg); 18 transform: scale(1) rotate(0deg);
@@ -18,6 +22,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
18 } 22 }
19} 23}
20 24
25.dropdown {
26 z-index: z(dropdown) !important;
27}
28
21.dropdown-menu { 29.dropdown-menu {
22 border-radius: 3px; 30 border-radius: 3px;
23 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 31 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
@@ -26,8 +34,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
26 .dropdown-item { 34 .dropdown-item {
27 padding: 3px 15px; 35 padding: 3px 15px;
28 36
29 &:active { 37 &.active {
30 color: #000 !important; 38 color: var(--mainBackgroundColor) !important;
39 background-color: var(--mainHoverColor);
40 opacity: .9;
31 } 41 }
32 } 42 }
33 43
@@ -42,16 +52,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
42} 52}
43 53
44 54
45@media screen and (min-width: 768px) { 55@media screen and (min-width: #{map-get($grid-breakpoints, md)}) {
46 .modal:before { 56 .modal:before {
47 display: inline-block;
48 vertical-align: middle; 57 vertical-align: middle;
49 content: " "; 58 content: " ";
50 height: 100%; 59 height: 100%;
51 } 60 }
52 61
53 .modal-dialog { 62 .modal-dialog {
54 display: inline-block;
55 text-align: left; 63 text-align: left;
56 vertical-align: middle; 64 vertical-align: middle;
57 min-width: 500px; 65 min-width: 500px;
@@ -172,7 +180,11 @@ ngb-tabset.bootstrap {
172} 180}
173 181
174ngb-modal-backdrop { 182ngb-modal-backdrop {
175 z-index: 10000 !important; 183 z-index: z(modal) - 1 !important;
184}
185
186ngb-modal-window {
187 z-index: z(modal) !important;
176} 188}
177 189
178.btn-outline-tertiary { 190.btn-outline-tertiary {
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 7f413836b..b3ab0eb2b 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -13,8 +13,9 @@ $grid-breakpoints: (
13 md: 768px, 13 md: 768px,
14 // Large screen / desktop 14 // Large screen / desktop
15 lg: 900px, 15 lg: 900px,
16 // Extra large screen / wide desktop 16 // Extra large screens / wide desktops
17 xl: 1200px 17 xl: 1200px,
18 xxl: 1600px
18); 19);
19 20
20$container-max-widths: ( 21$container-max-widths: (
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b0e07d61a..c1d1b3c59 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -240,7 +240,7 @@ $play-overlay-width: 18px;
240 width: $video-miniature-width * 2; 240 width: $video-miniature-width * 2;
241 } 241 }
242 242
243 @media screen and (max-width: 500px) { 243 @media screen and (max-width: $mobile-view) {
244 width: auto; 244 width: auto;
245 margin: 0 !important; 245 margin: 0 !important;
246 246
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 136eddd3a..4766e4490 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -11,11 +11,6 @@
11 &:focus:not(.focus-visible) { 11 &:focus:not(.focus-visible) {
12 outline: none; 12 outline: none;
13 } 13 }
14
15 &::-moz-focus-inner {
16 border: 0;
17 padding: 0
18 }
19} 14}
20 15
21 16
@@ -77,11 +72,17 @@
77 } 72 }
78} 73}
79 74
75@mixin button-focus-visible-shadow($color) {
76 &.focus-visible {
77 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
78 }
79}
80
80@mixin peertube-input-text($width) { 81@mixin peertube-input-text($width) {
81 display: inline-block; 82 display: inline-block;
82 height: $button-height; 83 height: $button-height;
83 width: $width; 84 width: $width;
84 background: var(--inputColor); 85 background: var(--inputBackgroundColor);
85 border: 1px solid #C6C6C6; 86 border: 1px solid #C6C6C6;
86 border-radius: 3px; 87 border-radius: 3px;
87 padding-left: 15px; 88 padding-left: 15px;
@@ -118,6 +119,8 @@
118} 119}
119 120
120@mixin orange-button { 121@mixin orange-button {
122 @include button-focus-visible-shadow(var(--mainHoverColor));
123
121 &, &:active, &:focus { 124 &, &:active, &:focus {
122 color: #fff; 125 color: #fff;
123 background-color: var(--mainColor); 126 background-color: var(--mainColor);
@@ -169,7 +172,6 @@
169 text-align: center; 172 text-align: center;
170 padding: 0 17px 0 13px; 173 padding: 0 17px 0 13px;
171 cursor: pointer; 174 cursor: pointer;
172 outline: 0;
173} 175}
174 176
175@mixin peertube-button-link { 177@mixin peertube-button-link {
@@ -254,7 +256,7 @@
254 width: $width; 256 width: $width;
255 border-radius: 3px; 257 border-radius: 3px;
256 overflow: hidden; 258 overflow: hidden;
257 background: var(--inputColor); 259 background: var(--inputBackgroundColor);
258 position: relative; 260 position: relative;
259 font-size: 15px; 261 font-size: 15px;
260 262
@@ -443,7 +445,6 @@
443@mixin actor-owner { 445@mixin actor-owner {
444 @include disable-default-a-behaviour; 446 @include disable-default-a-behaviour;
445 447
446 display: inline-table;
447 font-size: 13px; 448 font-size: 13px;
448 margin-top: 4px; 449 margin-top: 4px;
449 color: var(--mainForegroundColor); 450 color: var(--mainForegroundColor);
@@ -486,14 +487,15 @@
486 .actor-names { 487 .actor-names {
487 display: flex; 488 display: flex;
488 align-items: center; 489 align-items: center;
490 flex-wrap: wrap;
489 491
490 .actor-display-name { 492 .actor-display-name {
491 font-size: 23px; 493 font-size: 23px;
492 font-weight: $font-bold; 494 font-weight: $font-bold;
495 margin-right: 7px;
493 } 496 }
494 497
495 .actor-name { 498 .actor-name {
496 margin-left: 7px;
497 position: relative; 499 position: relative;
498 top: 3px; 500 top: 3px;
499 font-size: 14px; 501 font-size: 14px;
@@ -501,6 +503,10 @@
501 } 503 }
502 } 504 }
503 505
506 .actor-lower {
507 grid-area: lower;
508 }
509
504 .actor-followers { 510 .actor-followers {
505 font-size: 15px; 511 font-size: 15px;
506 } 512 }
@@ -520,6 +526,11 @@
520 margin-bottom: 0; 526 margin-bottom: 0;
521 text-transform: uppercase; 527 text-transform: uppercase;
522 font-weight: 600; 528 font-weight: 600;
529 font-size: 110%;
530
531 @media screen and (max-width: $mobile-view) {
532 font-size: 130%;
533 }
523 } 534 }
524 } 535 }
525} 536}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 5b5ac9adc..3fb8bb625 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,5 @@
1@import '_bootstrap-variables';
2
1$small-view: 800px; 3$small-view: 800px;
2$mobile-view: 500px; 4$mobile-view: 500px;
3 5
@@ -81,7 +83,7 @@ $variables: (
81 --menuForegroundColor: var(--menuForegroundColor), 83 --menuForegroundColor: var(--menuForegroundColor),
82 --submenuColor: var(--submenuColor), 84 --submenuColor: var(--submenuColor),
83 85
84 --inputColor: var(--inputColor), 86 --inputBackgroundColor: var(--inputBackgroundColor),
85 --inputPlaceholderColor: var(--inputPlaceholderColor), 87 --inputPlaceholderColor: var(--inputPlaceholderColor),
86 88
87 --actionButtonColor: var(--actionButtonColor), 89 --actionButtonColor: var(--actionButtonColor),
@@ -93,8 +95,24 @@ $variables: (
93 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 95 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
94); 96);
95 97
96/*** theme helper ***/
97
98@function var($variable) { 98@function var($variable) {
99 @return map-get($variables, $variable); 99 @return map-get($variables, $variable);
100} 100}
101
102/*** z-index groups ***/
103
104$zindex: (
105 header : 1000,
106 /* header context */
107 headerLeft : 10,
108 menu : 11000,
109 dropdown : 12000,
110 loadbar : 13000,
111 modal : 14000,
112 notification : 15000,
113 hotkeys : 16000
114);
115
116@function z($label) {
117 @return map-get($zindex, $label);
118}
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index 7d687d479..d584b7c67 100644
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -1,3 +1,4 @@
1@import '_mixins';
1// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css 2// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
2 3
3/* Make clicks pass-through */ 4/* Make clicks pass-through */
@@ -20,7 +21,7 @@
20 21
21 background: var(--mainColor); 22 background: var(--mainColor);
22 position: fixed; 23 position: fixed;
23 z-index: 10002; 24 z-index: z(loadbar);
24 top: 0; 25 top: 0;
25 left: 0; 26 left: 0;
26 width: 100%; 27 width: 100%;
@@ -50,7 +51,7 @@
50#loading-bar-spinner { 51#loading-bar-spinner {
51 display: block; 52 display: block;
52 position: fixed; 53 position: fixed;
53 z-index: 10002; 54 z-index: z(loadbar);
54 top: 10px; 55 top: 10px;
55 left: 10px; 56 left: 10px;
56} 57}
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 0c2359ac7..935a60b49 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,7 +1,7 @@
1$primary-foreground-color: #fff; 1$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9; 2$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1; 3$primary-foreground-opacity-hover: 1;
4$primary-background-color: #000; 4$primary-background-color: rgba(0, 0, 0, 0.8);
5 5
6$font-size: 13px; 6$font-size: 13px;
7$control-bar-height: 34px; 7$control-bar-height: 34px;
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index ff3448511..853a030a3 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -32,11 +32,3 @@
32 fill: #fff; 32 fill: #fff;
33 } 33 }
34} 34}
35
36.video-js {
37
38 .vjs-bezel-content {
39
40 }
41
42}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 41e2a535c..f80106428 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -21,6 +21,12 @@ body {
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 padding-right: 10px; 23 padding-right: 10px;
24 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
25 }
26
27 .vjs-dock-title,
28 .vjs-dock-description {
29 text-shadow: 0 0 2px rgba(0, 0, 0, .5);
24 } 30 }
25 31
26 .vjs-dock-description { 32 .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
55 $big-play-width: 1.2em; 61 $big-play-width: 1.2em;
56 $big-play-height: 1.2em; 62 $big-play-height: 1.2em;
57 63
58 border: 4px solid #fff; 64 border: 2px solid #fff;
59 border-radius: 100%; 65 border-radius: 100%;
60 66
61 left: 50%; 67 left: 50%;
@@ -185,7 +191,6 @@ body {
185 191
186 .vjs-play-progress { 192 .vjs-play-progress {
187 background: var(--embedForegroundColor); 193 background: var(--embedForegroundColor);
188 transition: all .2s ease 0s;
189 194
190 // Not display the circle if the progress is not hovered 195 // Not display the circle if the progress is not hovered
191 &::before { 196 &::before {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 0d51818c3..4d2d6cb67 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -383,31 +383,32 @@ p-inputswitch {
383 383
384p-toast { 384p-toast {
385 .ui-toast { 385 .ui-toast {
386 // Modal is 10005 386 z-index: z(notification) !important;
387 z-index: 10010 !important;
388 } 387 }
389 388
390 .ui-toast-message { 389 .ui-toast-message {
391 font-family: $main-fonts; 390 font-family: $main-fonts;
392 391 background-color: var(--mainBackgroundColor) !important;
393 &.ui-toast-message-success { 392 border-radius: 5px;
394 color: #fff !important; 393 box-sizing: border-box;
395 background-color: #8BC34A !important; 394 border: 1px solid #EBEEF5 !important;
395 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
396 overflow: hidden;
397
398 &.ui-toast-message-success .glyphicon {
399 color: #8BC34A !important;
396 } 400 }
397 401
398 &.ui-toast-message-error { 402 &.ui-toast-message-error .glyphicon {
399 color: #fff !important; 403 color: #F44336 !important;
400 background-color: #F44336 !important;
401 } 404 }
402 405
403 &.ui-toast-message-info { 406 &.ui-toast-message-warn .glyphicon {
404 color: #fff !important; 407 color: #F1680D !important;
405 background-color: #03A9F4 !important;
406 } 408 }
407 409
408 &.ui-toast-message-info { 410 &.ui-toast-message-info .glyphicon {
409 color: #fff !important; 411 color: #03A9F4 !important;
410 background-color: #03A9F4 !important;
411 } 412 }
412 413
413 .notification-block { 414 .notification-block {