aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-04 01:28:04 +0200
committerRigel Kent <par@rigelk.eu>2018-09-04 23:24:34 +0200
commit9a0fc8409c7a783348ec212fa9f38d0a98413467 (patch)
tree8b17264ef915e339d067abe6717c1574f1a2f36b /client/src/sass
parent3b766e181c59ce148fde73e507276c9fbaf37eb1 (diff)
downloadPeerTube-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')
-rw-r--r--client/src/sass/application.scss21
-rw-r--r--client/src/sass/include/_mixins.scss27
-rw-r--r--client/src/sass/include/_variables.scss42
-rw-r--r--client/src/sass/primeng-custom.scss2
4 files changed, 70 insertions, 22 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a4fea13c2..b92036de7 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -21,7 +21,7 @@ $assets-path: '../assets/';
21body { 21body {
22 font-family: $main-fonts; 22 font-family: $main-fonts;
23 font-weight: $font-regular; 23 font-weight: $font-regular;
24 color: #000; 24 color: var(--mainForegroundColor);
25 font-size: 14px; 25 font-size: 14px;
26} 26}
27 27
@@ -83,7 +83,7 @@ label {
83 } 83 }
84 84
85 .sub-menu { 85 .sub-menu {
86 background-color: #F7F7F7; 86 background-color: var(--submenuColor);
87 width: 100%; 87 width: 100%;
88 height: 81px; 88 height: 81px;
89 margin-bottom: 30px; 89 margin-bottom: 30px;
@@ -110,7 +110,7 @@ label {
110} 110}
111 111
112.title-page { 112.title-page {
113 color: #000; 113 color: var(--mainForegroundColor);
114 font-size: 16px; 114 font-size: 16px;
115 display: inline-block; 115 display: inline-block;
116 margin-right: 55px; 116 margin-right: 55px;
@@ -118,14 +118,14 @@ label {
118 @include disable-default-a-behaviour; 118 @include disable-default-a-behaviour;
119 119
120 &.active, &.title-page-single { 120 &.active, &.title-page-single {
121 border-bottom: 2px solid $orange-color; 121 border-bottom: 2px solid var(--mainColor);
122 font-weight: $font-bold; 122 font-weight: $font-bold;
123 margin-top: 30px; 123 margin-top: 30px;
124 margin-bottom: 25px; 124 margin-bottom: 25px;
125 } 125 }
126 126
127 &:hover, &:active, &:focus { 127 &:hover, &:active, &:focus {
128 color: #000; 128 color: var(--mainForegroundColor);
129 } 129 }
130 130
131 @media screen and (max-width: 500px) { 131 @media screen and (max-width: 500px) {
@@ -146,13 +146,14 @@ label {
146 @include disable-default-a-behaviour; 146 @include disable-default-a-behaviour;
147 147
148 font-size: 16px; 148 font-size: 16px;
149 color: #000; 149 color: var(--mainForegroundColor);
150 padding: 5px 15px; 150 padding: 5px 15px;
151 border-radius: 0.25rem; 151 border-radius: 0.25rem;
152 152
153 &.active { 153 &.active {
154 font-weight: $font-semibold; 154 font-weight: $font-semibold;
155 background-color: #f0f0f0; 155 background-color: #f0f0f0;
156 color: #000;
156 } 157 }
157 } 158 }
158} 159}
@@ -188,6 +189,10 @@ label {
188} 189}
189 190
190.modal { 191.modal {
192 .modal-content {
193 background-color: var(--mainBackgroundColor);
194 }
195
191 .modal-header { 196 .modal-header {
192 border-bottom: none; 197 border-bottom: none;
193 margin-bottom: 5px; 198 margin-bottom: 5px;
@@ -249,7 +254,7 @@ label {
249 a { 254 a {
250 @include disable-default-a-behaviour; 255 @include disable-default-a-behaviour;
251 256
252 color: #000; 257 color: var(--mainForegroundColor);
253 } 258 }
254} 259}
255 260
@@ -259,7 +264,7 @@ ngb-tabset.bootstrap {
259 &, & a { 264 &, & a {
260 @include disable-default-a-behaviour; 265 @include disable-default-a-behaviour;
261 266
262 color: #000 !important; 267 color: var(--mainForegroundColor) !important;
263 } 268 }
264 } 269 }
265} 270}
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;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 7fd178c3b..792a3f9c2 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -8,8 +8,6 @@ $grey-hoover-color: #EFEFEF;;
8$orange-color: #F1680D; 8$orange-color: #F1680D;
9$orange-hoover-color: #F97D46; 9$orange-hoover-color: #F97D46;
10 10
11$black-background: #000;
12$grey-background: #f6f2f2;
13$bg-color: #fff; 11$bg-color: #fff;
14$fg-color: #000; 12$fg-color: #000;
15 13
@@ -27,11 +25,14 @@ $header-height: 50px;
27$header-border-color: #e9eff6; 25$header-border-color: #e9eff6;
28$search-input-width: 375px; 26$search-input-width: 375px;
29 27
28$menu-background: #000;
30$menu-color: #fff; 29$menu-color: #fff;
31$menu-bottom-color: #C6C6C6; 30$menu-bottom-color: #C6C6C6;
32$menu-width: 240px; 31$menu-width: 240px;
33$menu-left-padding: 26px; 32$menu-left-padding: 26px;
34 33
34$sub-menu-color: #F7F7F7;
35
35$footer-height: 30px; 36$footer-height: 30px;
36$footer-margin: 30px; 37$footer-margin: 30px;
37 38
@@ -41,3 +42,40 @@ $video-thumbnail-height: 110px;
41$video-thumbnail-width: 200px; 42$video-thumbnail-width: 200px;
42 43
43$theater-bottom-space: 85px; 44$theater-bottom-space: 85px;
45
46$input-color: $bg-color;
47$input-placeholder-color: #898989;
48
49/*** theme ***/
50
51body {
52 // now beware node-sass requires interpolation
53 // for css custom properties #{$var}
54 --mainColor: #{$orange-color};
55 --mainHoverColor: #{$orange-hoover-color};
56 --mainBackgroundColor: #{$bg-color};
57 --mainForegroundColor: #{$fg-color};
58 --submenuColor: #{$sub-menu-color};
59 --inputColor: #{$input-color};
60 --inputPlaceholderColor: #{$input-placeholder-color};
61}
62
63/*** map theme ***/
64
65// pass variables into a sass map,
66// to be warned of non-existing variables
67$variables: (
68 --mainColor: var(--mainColor),
69 --mainHoverColor: var(--mainHoverColor),
70 --mainBackgroundColor: var(--mainBackgroundColor),
71 --mainForegroundColor: var(--mainForegroundColor),
72 --submenuColor: var(--submenuColor),
73 --inputColor: var(--inputColor),
74 --inputPlaceholderColor: var(--inputPlaceholderColor)
75);
76
77/*** theme helper ***/
78
79@function var($variable) {
80 @return map-get($variables, $variable);
81}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 1ec5c7da2..a998652d5 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -167,7 +167,7 @@ p-table {
167 &.ui-state-active { 167 &.ui-state-active {
168 &, &:hover, &:active, &:focus { 168 &, &:hover, &:active, &:focus {
169 color: #fff !important; 169 color: #fff !important;
170 background-color: $orange-color !important; 170 background-color: var(--mainColor) !important;
171 } 171 }
172 } 172 }
173 } 173 }