aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/application.scss
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/application.scss
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/application.scss')
-rw-r--r--client/src/sass/application.scss21
1 files changed, 13 insertions, 8 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}