aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss13
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss5
-rw-r--r--client/src/sass/include/_mixins.scss58
-rw-r--r--client/src/sass/include/_variables.scss9
-rw-r--r--client/src/sass/player/settings-menu.scss4
-rw-r--r--client/src/sass/primeng-custom.scss178
6 files changed, 230 insertions, 37 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2356f9837..478737a43 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -23,7 +23,7 @@ body {
23 // now beware node-sass requires interpolation 23 // now beware node-sass requires interpolation
24 // for css custom properties #{$var} 24 // for css custom properties #{$var}
25 --mainColor: #{$orange-color}; 25 --mainColor: #{$orange-color};
26 --mainHoverColor: #{$orange-hoover-color}; 26 --mainHoverColor: #{$orange-hover-color};
27 --mainBackgroundColor: #{$bg-color}; 27 --mainBackgroundColor: #{$bg-color};
28 --mainForegroundColor: #{$fg-color}; 28 --mainForegroundColor: #{$fg-color};
29 --menuBackgroundColor: #{$menu-background}; 29 --menuBackgroundColor: #{$menu-background};
@@ -229,13 +229,12 @@ label {
229 font-weight: $font-semibold; 229 font-weight: $font-semibold;
230 } 230 }
231 231
232 .close { 232 my-global-icon {
233 @include icon(24px); 233 @include icon(24px);
234 234
235 position: relative; 235 position: relative;
236 top: 3px; 236 top: 3px;
237 float: right; 237 float: right;
238 background-image: url('../assets/images/global/cross.svg');
239 238
240 margin: 0; 239 margin: 0;
241 padding: 0; 240 padding: 0;
@@ -293,6 +292,10 @@ ngb-tabset.bootstrap {
293 color: var(--mainForegroundColor) !important; 292 color: var(--mainForegroundColor) !important;
294 } 293 }
295 } 294 }
295
296 .nav-pills .nav-link.active {
297 color: #000 !important;
298 }
296} 299}
297 300
298.nav-tabs .nav-link.active { 301.nav-tabs .nav-link.active {
@@ -324,7 +327,7 @@ ngb-tabset.bootstrap {
324table { 327table {
325 .action-button-edit, .action-button-delete { 328 .action-button-edit, .action-button-delete {
326 &:hover, &:active, &:focus, &[disabled], &.disabled { 329 &:hover, &:active, &:focus, &[disabled], &.disabled {
327 background-color: $grey-color !important; 330 background-color: $grey-background-color !important;
328 } 331 }
329 } 332 }
330} 333}
@@ -389,4 +392,4 @@ table {
389 } 392 }
390 } 393 }
391 } 394 }
392} \ No newline at end of file 395}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index ce2532af5..7f413836b 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -29,4 +29,7 @@ $input-btn-focus-color: inherit;
29$input-focus-border-color: #ced4da; 29$input-focus-border-color: #ced4da;
30 30
31$nav-pills-link-active-bg: #F0F0F0; 31$nav-pills-link-active-bg: #F0F0F0;
32$nav-pills-link-active-color: #000; \ No newline at end of file 32$nav-pills-link-active-color: #000;
33
34$zindex-dropdown: 10000;
35$zindex-popover: 10000;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2efd6a1d3..e18e9ae9d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -29,7 +29,7 @@
29 display: block; 29 display: block;
30 /* Fallback for non-webkit */ 30 /* Fallback for non-webkit */
31 display: -webkit-box; 31 display: -webkit-box;
32 max-height: $font-size*$line-height*$lines-to-show; 32 max-height: $font-size * $line-height * $lines-to-show;
33 /* Fallback for non-webkit */ 33 /* Fallback for non-webkit */
34 font-size: $font-size; 34 font-size: $font-size;
35 line-height: $line-height; 35 line-height: $line-height;
@@ -55,6 +55,18 @@
55 hyphens: auto; 55 hyphens: auto;
56} 56}
57 57
58@mixin apply-svg-color ($color) {
59 /deep/ svg {
60 path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"], circle[fill="#000000"] {
61 fill: $color;
62 }
63
64 path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"], circle[stroke="#000000"] {
65 stroke: $color;
66 }
67 }
68}
69
58@mixin peertube-input-text($width) { 70@mixin peertube-input-text($width) {
59 display: inline-block; 71 display: inline-block;
60 height: $button-height; 72 height: $button-height;
@@ -64,6 +76,7 @@
64 border-radius: 3px; 76 border-radius: 3px;
65 padding-left: 15px; 77 padding-left: 15px;
66 padding-right: 15px; 78 padding-right: 15px;
79 font-size: 15px;
67 80
68 &::placeholder { 81 &::placeholder {
69 color: var(--inputPlaceholderColor); 82 color: var(--inputPlaceholderColor);
@@ -110,22 +123,30 @@
110 color: #fff; 123 color: #fff;
111 background-color: #C6C6C6; 124 background-color: #C6C6C6;
112 } 125 }
126
127 my-global-icon {
128 @include apply-svg-color(#fff)
129 }
113} 130}
114 131
115@mixin grey-button { 132@mixin grey-button {
116 &, &:active, &:focus { 133 &, &:active, &:focus {
117 background-color: $grey-color; 134 background-color: $grey-background-color;
118 color: #585858; 135 color: $grey-foreground-color;
119 } 136 }
120 137
121 &:hover, &:active, &:focus, &[disabled], &.disabled { 138 &:hover, &:active, &:focus, &[disabled], &.disabled {
122 color: #585858; 139 color: $grey-foreground-color;
123 background-color: $grey-hoover-color; 140 background-color: $grey-background-hover-color;
124 } 141 }
125 142
126 &[disabled], &.disabled { 143 &[disabled], &.disabled {
127 cursor: default; 144 cursor: default;
128 } 145 }
146
147 my-global-icon {
148 @include apply-svg-color($grey-foreground-color)
149 }
129} 150}
130 151
131@mixin peertube-button { 152@mixin peertube-button {
@@ -148,6 +169,15 @@
148 @include peertube-button; 169 @include peertube-button;
149} 170}
150 171
172@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
173 my-global-icon {
174 position: relative;
175 width: $width;
176 margin-right: $margin-right;
177 top: $top;
178 }
179}
180
151@mixin peertube-button-file ($width) { 181@mixin peertube-button-file ($width) {
152 position: relative; 182 position: relative;
153 overflow: hidden; 183 overflow: hidden;
@@ -231,6 +261,10 @@
231 color: transparent; 261 color: transparent;
232 text-shadow: 0 0 0 #000; 262 text-shadow: 0 0 0 #000;
233 } 263 }
264
265 option {
266 color: #000;
267 }
234 } 268 }
235} 269}
236 270
@@ -455,18 +489,10 @@
455 } 489 }
456} 490}
457 491
458@mixin create-button ($imageUrl) { 492@mixin create-button {
459 @include peertube-button-link; 493 @include peertube-button-link;
460 @include orange-button; 494 @include orange-button;
461 495 @include button-with-icon(20px, 5px, -1px);
462 .icon.icon-add {
463 @include icon(20px);
464
465 position: relative;
466 top: -1px;
467 margin-right: 5px;
468 background-image: url($imageUrl);
469 }
470} 496}
471 497
472@mixin row-blocks { 498@mixin row-blocks {
@@ -511,4 +537,4 @@
511 } 537 }
512 } 538 }
513 } 539 }
514} \ No newline at end of file 540}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fdf33b12a..3780b7501 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -6,10 +6,13 @@ $font-regular: 400;
6$font-semibold: 600; 6$font-semibold: 600;
7$font-bold: 700; 7$font-bold: 700;
8 8
9$grey-color: #E5E5E5; 9$grey-background-color: #E5E5E5;
10$grey-hoover-color: #EFEFEF;; 10$grey-background-hover-color: #EFEFEF;
11$grey-foreground-color: #585858;
12$grey-foreground-hover-color: #303030;
13
11$orange-color: #F1680D; 14$orange-color: #F1680D;
12$orange-hoover-color: #F97D46; 15$orange-hover-color: #F97D46;
13 16
14$bg-color: #fff; 17$bg-color: #fff;
15$fg-color: #000; 18$fg-color: #000;
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index d065e72fb..61965c85e 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -171,7 +171,7 @@ $setting-transition-easing: ease-out;
171 left: 8px; 171 left: 8px;
172 content: ' '; 172 content: ' ';
173 margin-top: 1px; 173 margin-top: 1px;
174 background-image: url('#{$assets-path}/player/images/tick.svg'); 174 background-image: url('#{$assets-path}/player/images/tick-white.svg');
175 } 175 }
176 } 176 }
177 } 177 }
@@ -197,4 +197,4 @@ $setting-transition-easing: ease-out;
197 } 197 }
198 } 198 }
199 } 199 }
200} \ No newline at end of file 200}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 5a03ac9c5..6e502b028 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -2,7 +2,7 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
5@import '~primeng/resources/themes/bootstrap/theme.css'; 5@import '~primeng/resources/themes/nova-light/theme.css';
6 6
7@mixin glyphicon-light { 7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings'; 8 font-family: 'Glyphicons Halflings';
@@ -12,10 +12,29 @@
12 12
13// data table customizations 13// data table customizations
14p-table { 14p-table {
15 font-size: 15px !important; 15 .ui-table-caption {
16 border: none !important;
17 background-color: var(--mainBackgroundColor) !important;
18
19 .caption {
20 height: 40px;
21 display: flex;
22 align-items: center;
23 }
24 }
25
26 th {
27 background-color: var(--mainBackgroundColor) !important;
28 outline: 0;
29 }
30
31 td, th {
32 font-family: $main-fonts;
33 font-size: 15px !important;
34 color: var(--mainForegroundColor) !important;
35 }
16 36
17 td { 37 td {
18 // border: 1px solid #E5E5E5 !important;
19 padding-left: 15px !important; 38 padding-left: 15px !important;
20 39
21 &:not(.action-cell) { 40 &:not(.action-cell) {
@@ -26,8 +45,17 @@ p-table {
26 } 45 }
27 46
28 tr { 47 tr {
48 outline: 0;
29 background-color: var(--mainBackgroundColor) !important; 49 background-color: var(--mainBackgroundColor) !important;
30 height: 46px; 50 height: 46px;
51
52 &.ui-state-highlight {
53 background-color: var(--submenuColor) !important;
54
55 td, td > a {
56 color: var(--mainForegroundColor) !important;
57 }
58 }
31 } 59 }
32 60
33 .ui-table-tbody { 61 .ui-table-tbody {
@@ -42,6 +70,10 @@ p-table {
42 } 70 }
43 } 71 }
44 72
73 td {
74 border: none !important;
75 }
76
45 &:first-child td { 77 &:first-child td {
46 border-top: none !important; 78 border-top: none !important;
47 } 79 }
@@ -79,21 +111,25 @@ p-table {
79 } 111 }
80 112
81 &.ui-state-highlight { 113 &.ui-state-highlight {
82 background-color:var(--submenuColor) !important; 114 background-color: var(--submenuColor) !important;
83 115
84 .pi { 116 .pi {
85 @extend .glyphicon; 117 @extend .glyphicon;
86 118
87 color: #000; 119 color: #000 !important;
88 font-size: 11px; 120 font-size: 11px !important;
89 top: 0; 121 top: 0 !important;
90 122
91 &.pi-sort-up { 123 &.pi-sort-up {
92 @extend .glyphicon-triangle-top; 124 @extend .glyphicon-triangle-top;
125
126 color: var(--mainForegroundColor) !important;
93 } 127 }
94 128
95 &.pi-sort-down { 129 &.pi-sort-down {
96 @extend .glyphicon-triangle-bottom; 130 @extend .glyphicon-triangle-bottom;
131
132 color: var(--mainForegroundColor) !important;
97 } 133 }
98 } 134 }
99 } 135 }
@@ -161,13 +197,14 @@ p-table {
161 height: auto !important; 197 height: auto !important;
162 198
163 a { 199 a {
164 color: #000 !important; 200 color: var(--mainForegroundColor) !important;
165 font-weight: $font-semibold !important; 201 font-weight: $font-semibold !important;
166 margin: 0 10px !important; 202 margin: 0 5px !important;
167 outline: 0 !important; 203 outline: 0 !important;
168 border-radius: 3px !important; 204 border-radius: 3px !important;
169 padding: 5px 2px !important; 205 padding: 5px 2px !important;
170 height: auto !important; 206 height: auto !important;
207 line-height: initial !important;
171 208
172 &.ui-state-active { 209 &.ui-state-active {
173 &, &:hover, &:active, &:focus { 210 &, &:hover, &:active, &:focus {
@@ -196,11 +233,25 @@ p-calendar .ui-datepicker {
196 .ui-datepicker-next { 233 .ui-datepicker-next {
197 @extend .glyphicon-chevron-right; 234 @extend .glyphicon-chevron-right;
198 @include glyphicon-light; 235 @include glyphicon-light;
236
237 color: #000 !important;
238 text-align: right;
239
240 .pi.pi-chevron-right {
241 display: none !important;
242 }
199 } 243 }
200 244
201 .ui-datepicker-prev { 245 .ui-datepicker-prev {
202 @extend .glyphicon-chevron-left; 246 @extend .glyphicon-chevron-left;
203 @include glyphicon-light; 247 @include glyphicon-light;
248
249 color: #000 !important;
250 text-align: left;
251
252 .pi.pi-chevron-left {
253 display: none !important;
254 }
204 } 255 }
205 } 256 }
206 257
@@ -209,11 +260,118 @@ p-calendar .ui-datepicker {
209 .pi.pi-chevron-up { 260 .pi.pi-chevron-up {
210 @extend .glyphicon-chevron-up; 261 @extend .glyphicon-chevron-up;
211 @include glyphicon-light; 262 @include glyphicon-light;
263
264 color: #000 !important;
212 } 265 }
213 266
214 .pi.pi-chevron-down { 267 .pi.pi-chevron-down {
215 @extend .glyphicon-chevron-down; 268 @extend .glyphicon-chevron-down;
216 @include glyphicon-light; 269 @include glyphicon-light;
270
271 color: #000 !important;
272 }
273 }
274}
275
276.ui-chkbox {
277
278 &, .ui-chkbox-box {
279 width: 18px !important;
280 height: 18px !important;
281 }
282
283 .ui-chkbox-box {
284 &.ui-state-active {
285 border-color: var(--mainColor) !important;
286 background-color: var(--mainColor) !important;
287 }
288
289 .ui-chkbox-icon {
290 position: relative;
291 overflow: visible !important;
292
293 &:after {
294 content: '';
295 position: absolute;
296 top: 1px;
297 left: 6px;
298 width: 5px;
299 height: 12px;
300 opacity: 0;
301 transform: rotate(45deg) scale(0);
302 border-right: 2px solid var(--mainBackgroundColor);
303 border-bottom: 2px solid var(--mainBackgroundColor);
304 }
305
306 &.pi-check:after {
307 opacity: 1;
308 transform: rotate(45deg) scale(1);
309 }
217 } 310 }
218 } 311 }
219} \ No newline at end of file 312}
313
314p-inputswitch {
315 .ui-inputswitch-checked .ui-inputswitch-slider {
316 background-color: var(--mainColor) !important;
317 }
318}
319
320p-toast {
321 .ui-toast {
322 // Modal is 10005
323 z-index: 10010 !important;
324 }
325
326 .ui-toast-message {
327 font-family: $main-fonts;
328
329 &.ui-toast-message-success {
330 color: #fff !important;
331 background-color: #8BC34A !important;
332 }
333
334 &.ui-toast-message-error {
335 color: #fff !important;
336 background-color: #F44336 !important;
337 }
338
339 &.ui-toast-message-info {
340 color: #fff !important;
341 background-color: #03A9F4 !important;
342 }
343
344 &.ui-toast-message-info {
345 color: #fff !important;
346 background-color: #03A9F4 !important;
347 }
348
349 .notification-block {
350 display: flex;
351 align-items: center;
352 padding: 5px;
353
354 .message {
355 flex-grow: 1;
356
357 h3 {
358 font-size: 21px;
359 }
360
361 p {
362 font-size: 15px;
363 margin-bottom: 0;
364 }
365 }
366
367 .glyphicon {
368 font-size: 32px;
369 margin-right: 5px;
370 }
371 }
372 }
373}
374
375.ui-widget {
376 font-family: $main-fonts !important;
377}