aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-11 14:09:23 +0100
committerChocobozzz <me@florianbigard.com>2019-02-11 14:09:23 +0100
commitb718fd22374d64534bcfe69932cf562894abed6a (patch)
tree311d3c67e2a4d1f33ebdd1dc163527de9d33d0f7 /client/src/sass
parentadb115f5522bea4d52456a9fc5eb4140bb064476 (diff)
parent501e961199578129629cf0567033d13efced9904 (diff)
downloadPeerTube-b718fd22374d64534bcfe69932cf562894abed6a.tar.gz
PeerTube-b718fd22374d64534bcfe69932cf562894abed6a.tar.zst
PeerTube-b718fd22374d64534bcfe69932cf562894abed6a.zip
Merge branch 'develop' into pr/1285
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss13
-rw-r--r--client/src/sass/include/_mixins.scss54
-rw-r--r--client/src/sass/include/_variables.scss9
-rw-r--r--client/src/sass/primeng-custom.scss76
4 files changed, 105 insertions, 47 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/_mixins.scss b/client/src/sass/include/_mixins.scss
index d6f391a45..e18e9ae9d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -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 {
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/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 58a6a0004..6e502b028 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -14,7 +14,7 @@
14p-table { 14p-table {
15 .ui-table-caption { 15 .ui-table-caption {
16 border: none !important; 16 border: none !important;
17 background-color: #fff !important; 17 background-color: var(--mainBackgroundColor) !important;
18 18
19 .caption { 19 .caption {
20 height: 40px; 20 height: 40px;
@@ -24,7 +24,7 @@ p-table {
24 } 24 }
25 25
26 th { 26 th {
27 background-color: #fff !important; 27 background-color: var(--mainBackgroundColor) !important;
28 outline: 0; 28 outline: 0;
29 } 29 }
30 30
@@ -122,10 +122,14 @@ p-table {
122 122
123 &.pi-sort-up { 123 &.pi-sort-up {
124 @extend .glyphicon-triangle-top; 124 @extend .glyphicon-triangle-top;
125
126 color: var(--mainForegroundColor) !important;
125 } 127 }
126 128
127 &.pi-sort-down { 129 &.pi-sort-down {
128 @extend .glyphicon-triangle-bottom; 130 @extend .glyphicon-triangle-bottom;
131
132 color: var(--mainForegroundColor) !important;
129 } 133 }
130 } 134 }
131 } 135 }
@@ -193,7 +197,7 @@ p-table {
193 height: auto !important; 197 height: auto !important;
194 198
195 a { 199 a {
196 color: #000 !important; 200 color: var(--mainForegroundColor) !important;
197 font-weight: $font-semibold !important; 201 font-weight: $font-semibold !important;
198 margin: 0 5px !important; 202 margin: 0 5px !important;
199 outline: 0 !important; 203 outline: 0 !important;
@@ -230,6 +234,7 @@ p-calendar .ui-datepicker {
230 @extend .glyphicon-chevron-right; 234 @extend .glyphicon-chevron-right;
231 @include glyphicon-light; 235 @include glyphicon-light;
232 236
237 color: #000 !important;
233 text-align: right; 238 text-align: right;
234 239
235 .pi.pi-chevron-right { 240 .pi.pi-chevron-right {
@@ -241,6 +246,7 @@ p-calendar .ui-datepicker {
241 @extend .glyphicon-chevron-left; 246 @extend .glyphicon-chevron-left;
242 @include glyphicon-light; 247 @include glyphicon-light;
243 248
249 color: #000 !important;
244 text-align: left; 250 text-align: left;
245 251
246 .pi.pi-chevron-left { 252 .pi.pi-chevron-left {
@@ -254,42 +260,53 @@ p-calendar .ui-datepicker {
254 .pi.pi-chevron-up { 260 .pi.pi-chevron-up {
255 @extend .glyphicon-chevron-up; 261 @extend .glyphicon-chevron-up;
256 @include glyphicon-light; 262 @include glyphicon-light;
263
264 color: #000 !important;
257 } 265 }
258 266
259 .pi.pi-chevron-down { 267 .pi.pi-chevron-down {
260 @extend .glyphicon-chevron-down; 268 @extend .glyphicon-chevron-down;
261 @include glyphicon-light; 269 @include glyphicon-light;
270
271 color: #000 !important;
262 } 272 }
263 } 273 }
264} 274}
265 275
276.ui-chkbox {
266 277
267.ui-chkbox-box { 278 &, .ui-chkbox-box {
268 &.ui-state-active { 279 width: 18px !important;
269 border-color: var(--mainColor) !important; 280 height: 18px !important;
270 background-color: var(--mainColor) !important;
271 } 281 }
272 282
273 .ui-chkbox-icon { 283 .ui-chkbox-box {
274 position: relative; 284 &.ui-state-active {
275 overflow: visible !important; 285 border-color: var(--mainColor) !important;
276 286 background-color: var(--mainColor) !important;
277 &:after {
278 content: '';
279 position: absolute;
280 top: 1px;
281 left: 7px;
282 width: 5px;
283 height: 13px;
284 opacity: 0;
285 transform: rotate(45deg) scale(0);
286 border-right: 2px solid var(--mainBackgroundColor);
287 border-bottom: 2px solid var(--mainBackgroundColor);
288 } 287 }
289 288
290 &.pi-check:after { 289 .ui-chkbox-icon {
291 opacity: 1; 290 position: relative;
292 transform: rotate(45deg) scale(1); 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 }
293 } 310 }
294 } 311 }
295} 312}
@@ -301,6 +318,11 @@ p-inputswitch {
301} 318}
302 319
303p-toast { 320p-toast {
321 .ui-toast {
322 // Modal is 10005
323 z-index: 10010 !important;
324 }
325
304 .ui-toast-message { 326 .ui-toast-message {
305 font-family: $main-fonts; 327 font-family: $main-fonts;
306 328
@@ -349,3 +371,7 @@ p-toast {
349 } 371 }
350 } 372 }
351} 373}
374
375.ui-widget {
376 font-family: $main-fonts !important;
377}