diff options
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/application.scss | 13 | ||||
-rw-r--r-- | client/src/sass/include/_bootstrap-variables.scss | 5 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 58 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 9 | ||||
-rw-r--r-- | client/src/sass/player/settings-menu.scss | 4 | ||||
-rw-r--r-- | client/src/sass/primeng-custom.scss | 178 |
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 { | |||
324 | table { | 327 | table { |
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 |
14 | p-table { | 14 | p-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 | |||
314 | p-inputswitch { | ||
315 | .ui-inputswitch-checked .ui-inputswitch-slider { | ||
316 | background-color: var(--mainColor) !important; | ||
317 | } | ||
318 | } | ||
319 | |||
320 | p-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 | } | ||