diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2018-09-04 01:28:04 +0200 |
---|---|---|
committer | Rigel Kent <par@rigelk.eu> | 2018-09-04 23:24:34 +0200 |
commit | 9a0fc8409c7a783348ec212fa9f38d0a98413467 (patch) | |
tree | 8b17264ef915e339d067abe6717c1574f1a2f36b /client/src/sass/include/_mixins.scss | |
parent | 3b766e181c59ce148fde73e507276c9fbaf37eb1 (diff) | |
download | PeerTube-9a0fc8409c7a783348ec212fa9f38d0a98413467.tar.gz PeerTube-9a0fc8409c7a783348ec212fa9f38d0a98413467.tar.zst PeerTube-9a0fc8409c7a783348ec212fa9f38d0a98413467.zip |
add theming via css custom properties
and a bonus dark color theme toggle
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 765297c87..6e2feb748 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -58,11 +58,15 @@ | |||
58 | display: inline-block; | 58 | display: inline-block; |
59 | height: $button-height; | 59 | height: $button-height; |
60 | width: $width; | 60 | width: $width; |
61 | background: #fff; | 61 | background: var(--inputColor); |
62 | border: 1px solid #C6C6C6; | 62 | border: 1px solid #C6C6C6; |
63 | border-radius: 3px; | 63 | border-radius: 3px; |
64 | padding-left: 15px; | 64 | padding-left: 15px; |
65 | padding-right: 15px; | 65 | padding-right: 15px; |
66 | |||
67 | &::placeholder { | ||
68 | color: var(--inputPlaceholderColor); | ||
69 | } | ||
66 | } | 70 | } |
67 | 71 | ||
68 | @mixin peertube-input-group($width) { | 72 | @mixin peertube-input-group($width) { |
@@ -73,6 +77,7 @@ | |||
73 | 77 | ||
74 | .input-group-text{ | 78 | .input-group-text{ |
75 | font-size: 14px; | 79 | font-size: 14px; |
80 | color: gray; | ||
76 | } | 81 | } |
77 | } | 82 | } |
78 | 83 | ||
@@ -87,12 +92,12 @@ | |||
87 | @mixin orange-button { | 92 | @mixin orange-button { |
88 | &, &:active, &:focus { | 93 | &, &:active, &:focus { |
89 | color: #fff; | 94 | color: #fff; |
90 | background-color: $orange-color; | 95 | background-color: var(--mainColor); |
91 | } | 96 | } |
92 | 97 | ||
93 | &:hover { | 98 | &:hover { |
94 | color: #fff; | 99 | color: #fff; |
95 | background-color: $orange-hoover-color; | 100 | background-color: var(--mainHoverColor); |
96 | } | 101 | } |
97 | 102 | ||
98 | &[disabled], &.disabled { | 103 | &[disabled], &.disabled { |
@@ -181,7 +186,7 @@ | |||
181 | width: $width; | 186 | width: $width; |
182 | border-radius: 3px; | 187 | border-radius: 3px; |
183 | overflow: hidden; | 188 | overflow: hidden; |
184 | background: #fff; | 189 | background: var(--inputColor); |
185 | position: relative; | 190 | position: relative; |
186 | font-size: 15px; | 191 | font-size: 15px; |
187 | 192 | ||
@@ -278,7 +283,7 @@ | |||
278 | position: relative; | 283 | position: relative; |
279 | width: 18px; | 284 | width: 18px; |
280 | height: 18px; | 285 | height: 18px; |
281 | border: $border-width solid #000; | 286 | border: $border-width solid var(--mainForegroundColor); |
282 | border-radius: 3px; | 287 | border-radius: 3px; |
283 | vertical-align: middle; | 288 | vertical-align: middle; |
284 | cursor: pointer; | 289 | cursor: pointer; |
@@ -292,14 +297,14 @@ | |||
292 | height: 12px; | 297 | height: 12px; |
293 | opacity: 0; | 298 | opacity: 0; |
294 | transform: rotate(45deg) scale(0); | 299 | transform: rotate(45deg) scale(0); |
295 | border-right: 2px solid #fff; | 300 | border-right: 2px solid var(--mainForegroundColor); |
296 | border-bottom: 2px solid #fff; | 301 | border-bottom: 2px solid var(--mainForegroundColor); |
297 | } | 302 | } |
298 | } | 303 | } |
299 | 304 | ||
300 | &:checked + span { | 305 | &:checked + span { |
301 | border-color: transparent; | 306 | border-color: transparent; |
302 | background: $orange-color; | 307 | background: var(--mainColor); |
303 | animation: jelly 0.6s ease; | 308 | animation: jelly 0.6s ease; |
304 | 309 | ||
305 | &:after { | 310 | &:after { |
@@ -357,7 +362,7 @@ | |||
357 | 362 | ||
358 | @mixin in-content-small-title { | 363 | @mixin in-content-small-title { |
359 | text-transform: uppercase; | 364 | text-transform: uppercase; |
360 | color: $orange-color; | 365 | color: var(--mainColor); |
361 | font-weight: $font-bold; | 366 | font-weight: $font-bold; |
362 | font-size: 13px; | 367 | font-size: 13px; |
363 | } | 368 | } |
@@ -365,10 +370,10 @@ | |||
365 | @mixin actor-owner { | 370 | @mixin actor-owner { |
366 | @include disable-default-a-behaviour; | 371 | @include disable-default-a-behaviour; |
367 | 372 | ||
368 | display: block; | 373 | display: inline-table; |
369 | font-size: 13px; | 374 | font-size: 13px; |
370 | margin-top: 4px; | 375 | margin-top: 4px; |
371 | color: #000; | 376 | color: var(--mainForegroundColor); |
372 | 377 | ||
373 | span:hover { | 378 | span:hover { |
374 | opacity: 0.8; | 379 | opacity: 0.8; |