aboutsummaryrefslogtreecommitdiffhomepage
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
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
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss2
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss2
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/app.component.scss7
-rw-r--r--client/src/app/header/header.component.scss5
-rw-r--r--client/src/app/login/login.component.scss2
-rw-r--r--client/src/app/menu/menu.component.html3
-rw-r--r--client/src/app/menu/menu.component.scss16
-rw-r--r--client/src/app/menu/menu.component.ts24
-rw-r--r--client/src/app/search/search.component.scss4
-rw-r--r--client/src/app/shared/misc/help.component.scss1
-rw-r--r--client/src/app/shared/video/video-feed.component.scss3
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss2
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss9
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss10
-rw-r--r--client/src/app/videos/video-list/video-overview.component.scss2
-rw-r--r--client/src/assets/images/menu/moonsun.svg1
-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
25 files changed, 140 insertions, 55 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 39c0840e4..0c6de2efa 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -10,7 +10,7 @@ a.video-channel {
10 10
11 display: inline-block; 11 display: inline-block;
12 text-align: center; 12 text-align: center;
13 color: #000; 13 color: var(--mainForegroundColor);
14 margin: 10px 30px; 14 margin: 10px 30px;
15 15
16 img { 16 img {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 4c9167211..c90bd5141 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -28,7 +28,7 @@ input[type=submit] {
28 28
29.inner-form-title { 29.inner-form-title {
30 text-transform: uppercase; 30 text-transform: uppercase;
31 color: $orange-color; 31 color: var(--mainColor);
32 font-weight: $font-bold; 32 font-weight: $font-bold;
33 font-size: 13px; 33 font-size: 13px;
34 margin-top: 30px; 34 margin-top: 30px;
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index 8cb0b677d..700d516d5 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -19,7 +19,7 @@
19 width: fit-content; 19 width: fit-content;
20 display: flex; 20 display: flex;
21 align-items: baseline; 21 align-items: baseline;
22 color: #000; 22 color: var(--mainForegroundColor);
23 23
24 .video-channel-display-name { 24 .video-channel-display-name {
25 font-weight: $font-semibold; 25 font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 83d657f03..472cbb723 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -29,7 +29,7 @@
29 width: fit-content; 29 width: fit-content;
30 display: flex; 30 display: flex;
31 align-items: baseline; 31 align-items: baseline;
32 color: #000; 32 color: var(--mainForegroundColor);
33 33
34 .video-channel-display-name { 34 .video-channel-display-name {
35 font-weight: $font-semibold; 35 font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 8d0dec07d..2db81a3fe 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -59,7 +59,7 @@
59 .video-info-name { 59 .video-info-name {
60 @include disable-default-a-behaviour; 60 @include disable-default-a-behaviour;
61 61
62 color: #000; 62 color: var(--mainForegroundColor);
63 display: block; 63 display: block;
64 width: fit-content; 64 width: fit-content;
65 font-size: 16px; 65 font-size: 16px;
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 3eb8ef40a..0564e1a7b 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -14,7 +14,7 @@
14 </a> 14 </a>
15 </div> 15 </div>
16 16
17 <div class="header-right"> 17 <div class="header-right" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
18 <my-header></my-header> 18 <my-header></my-header>
19 </div> 19 </div>
20 </div> 20 </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e772e3a37..b51a81eb1 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -7,6 +7,7 @@
7 7
8.sub-header-container { 8.sub-header-container {
9 margin-top: $header-height; 9 margin-top: $header-height;
10 background-color: var(--mainBackgroundColor);
10} 11}
11 12
12.header { 13.header {
@@ -14,7 +15,7 @@
14 position: fixed; 15 position: fixed;
15 top: 0; 16 top: 0;
16 width: 100%; 17 width: 100%;
17 background-color: $bg-color; 18 background-color: var(--mainBackgroundColor);
18 z-index: 1000; 19 z-index: 1000;
19 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 20 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
20 display: flex; 21 display: flex;
@@ -31,7 +32,8 @@
31 @include icon(24px); 32 @include icon(24px);
32 33
33 &.icon-menu { 34 &.icon-menu {
34 background-image: url('../assets/images/header/menu.svg'); 35 background-color: var(--mainForegroundColor);
36 mask-image: url('../assets/images/header/menu.svg');
35 margin: 0 18px 0 20px; 37 margin: 0 18px 0 20px;
36 } 38 }
37 } 39 }
@@ -83,7 +85,6 @@
83} 85}
84 86
85footer { 87footer {
86 border-top: 1px solid $footer-border-color;
87 padding: 10px 0; 88 padding: 10px 0;
88 font-size: 11px; 89 font-size: 11px;
89 margin-top: $footer-margin; 90 margin-top: $footer-margin;
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 8251ec1b5..bd03c338a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -8,7 +8,7 @@
8 padding-right: 40px; // For the search icon 8 padding-right: 40px; // For the search icon
9 9
10 &::placeholder { 10 &::placeholder {
11 color: #000; 11 color: var(--inputPlaceholderColor);
12 } 12 }
13 13
14 &:focus::placeholder { 14 &:focus::placeholder {
@@ -28,7 +28,8 @@
28 @include icon(25px); 28 @include icon(25px);
29 height: 21px; 29 height: 21px;
30 30
31 background-image: url('../../assets/images/header/search.svg'); 31 background-color: var(--mainForegroundColor);
32 mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
32 33
33 // yolo 34 // yolo
34 position: absolute; 35 position: absolute;
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index 7978c5891..8541a2681 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -18,7 +18,7 @@ input[type=submit] {
18} 18}
19 19
20.create-an-account, .forgot-password-button { 20.create-an-account, .forgot-password-button {
21 color: #000; 21 color: var(--mainForegroundColor);
22 cursor: pointer; 22 cursor: pointer;
23 23
24 &:hover { 24 &:hover {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 8fe6797d6..d9e75adea 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -87,6 +87,9 @@
87 <span class="language"> 87 <span class="language">
88 <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span> 88 <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
89 </span> 89 </span>
90 <span class="color-palette">
91 <span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
92 </span>
90 </div> 93 </div>
91 </menu> 94 </menu>
92</div> 95</div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 941c208e2..4ef330b2f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,7 +9,7 @@
9} 9}
10 10
11menu { 11menu {
12 background-color: $black-background; 12 background-color: $menu-background;
13 margin: 0; 13 margin: 0;
14 padding: 0; 14 padding: 0;
15 height: 100%; 15 height: 100%;
@@ -190,10 +190,10 @@ menu {
190 } 190 }
191 191
192 .footer { 192 .footer {
193 margin-bottom: 15px; 193 padding-bottom: 15px;
194 padding-left: $menu-left-padding; 194 padding-left: $menu-left-padding;
195 195
196 .language { 196 .language, .color-palette {
197 display: inline-block; 197 display: inline-block;
198 color: $menu-bottom-color; 198 color: $menu-bottom-color;
199 cursor: pointer; 199 cursor: pointer;
@@ -213,6 +213,16 @@ menu {
213 background-image: url('../../assets/images/menu/language.png'); 213 background-image: url('../../assets/images/menu/language.png');
214 } 214 }
215 215
216 &.icon-moonsun {
217 margin-left: 10px;
218 position: relative;
219 top: -1px;
220 width: 24px;
221 height: 24px;
222
223 background-image: url('../../assets/images/menu/moonsun.svg');
224 }
225
216 &:hover { 226 &:hover {
217 opacity: 1; 227 opacity: 1;
218 } 228 }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index dded6b4d5..3de4a78af 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -22,6 +22,8 @@ export class MenuComponent implements OnInit {
22 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', 22 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
23 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' 23 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
24 } 24 }
25 private theme = document.querySelector('body')
26 private previousTheme = { }
25 27
26 constructor ( 28 constructor (
27 private authService: AuthService, 29 private authService: AuthService,
@@ -51,6 +53,13 @@ export class MenuComponent implements OnInit {
51 } 53 }
52 } 54 }
53 ) 55 )
56
57 // initialise the alternative theme with dark theme colors
58 this.previousTheme['mainBackgroundColor'] = '#111111'
59 this.previousTheme['mainForegroundColor'] = '#fff'
60 this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
61 this.previousTheme['inputColor'] = 'gray'
62 this.previousTheme['inputPlaceholderColor'] = '#fff'
54 } 63 }
55 64
56 isRegistrationAllowed () { 65 isRegistrationAllowed () {
@@ -96,6 +105,21 @@ export class MenuComponent implements OnInit {
96 this.languageChooserModal.show() 105 this.languageChooserModal.show()
97 } 106 }
98 107
108 toggleDarkTheme () {
109 // switch properties
110 this.switchProperty('mainBackgroundColor')
111 this.switchProperty('mainForegroundColor')
112 this.switchProperty('submenuColor')
113 this.switchProperty('inputColor')
114 this.switchProperty('inputPlaceholderColor')
115 }
116
117 private switchProperty (property, newValue?) {
118 const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
119 this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
120 this.previousTheme[property] = propertyOldvalue
121 }
122
99 private computeIsUserHasAdminAccess () { 123 private computeIsUserHasAdminAccess () {
100 const right = this.getFirstAdminRightAvailable() 124 const right = this.getFirstAdminRightAvailable()
101 125
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 3be8f5311..67b2094b0 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -67,7 +67,7 @@
67 .video-info-name { 67 .video-info-name {
68 @include disable-default-a-behaviour; 68 @include disable-default-a-behaviour;
69 69
70 color: #000; 70 color: var(--mainForegroundColor);
71 display: block; 71 display: block;
72 width: fit-content; 72 width: fit-content;
73 font-size: 18px; 73 font-size: 18px;
@@ -113,7 +113,7 @@
113 113
114 display: flex; 114 display: flex;
115 align-items: baseline; 115 align-items: baseline;
116 color: #000; 116 color: var(--mainForegroundColor);
117 width: fit-content; 117 width: fit-content;
118 118
119 .video-channel-display-name { 119 .video-channel-display-name {
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index fe64a270d..5c73a8031 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -7,7 +7,6 @@
7 position: relative; 7 position: relative;
8 top: -2px; 8 top: -2px;
9 background-image: url('../../../assets/images/global/help.svg'); 9 background-image: url('../../../assets/images/global/help.svg');
10 background-color: #fff;
11 border: none; 10 border: none;
12 margin: 5px; 11 margin: 5px;
13} 12}
diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss
index 9dab18ffd..385764be0 100644
--- a/client/src/app/shared/video/video-feed.component.scss
+++ b/client/src/app/shared/video/video-feed.component.scss
@@ -12,7 +12,8 @@
12 &.icon-syndication { 12 &.icon-syndication {
13 position: relative; 13 position: relative;
14 top: -2px; 14 top: -2px;
15 background-image: url('../../../assets/images/global/syndication.svg'); 15 background-color: var(--mainForegroundColor);
16 mask-image: url('../../../assets/images/global/syndication.svg');
16 } 17 }
17 } 18 }
18} \ No newline at end of file 19} \ No newline at end of file
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index cc643f9d9..895879adc 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -22,7 +22,7 @@
22 transition: color 0.2s; 22 transition: color 0.2s;
23 font-size: 16px; 23 font-size: 16px;
24 font-weight: $font-semibold; 24 font-weight: $font-semibold;
25 color: $fg-color; 25 color: var(--mainForegroundColor);
26 margin-top: 5px; 26 margin-top: 5px;
27 margin-bottom: 5px; 27 margin-bottom: 5px;
28 28
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 892520e40..2f078d46d 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -5,8 +5,6 @@ $border-width: 3px;
5$border-type: solid; 5$border-type: solid;
6$border-color: #EAEAEA; 6$border-color: #EAEAEA;
7 7
8$background-color: #F7F7F7;
9
10/deep/ .root-tabset.video-add-tabset { 8/deep/ .root-tabset.video-add-tabset {
11 &.hide-nav .nav { 9 &.hide-nav .nav {
12 display: none !important; 10 display: none !important;
@@ -24,7 +22,6 @@ $background-color: #F7F7F7;
24 a.nav-link { 22 a.nav-link {
25 @include disable-default-a-behaviour; 23 @include disable-default-a-behaviour;
26 24
27 color: #000;
28 height: 40px !important; 25 height: 40px !important;
29 padding: 0 30px !important; 26 padding: 0 30px !important;
30 font-size: 15px; 27 font-size: 15px;
@@ -32,10 +29,10 @@ $background-color: #F7F7F7;
32 &.active { 29 &.active {
33 border: $border-width $border-type $border-color; 30 border: $border-width $border-type $border-color;
34 border-bottom: none; 31 border-bottom: none;
35 background-color: $background-color !important; 32 background-color: var(--mainBackgroundColor) !important;
36 33
37 span { 34 span {
38 border-bottom: 2px solid #F1680D; 35 border-bottom: 2px solid var(--mainColor);
39 font-weight: $font-bold; 36 font-weight: $font-bold;
40 } 37 }
41 } 38 }
@@ -46,7 +43,7 @@ $background-color: #F7F7F7;
46 border: $border-width $border-type $border-color; 43 border: $border-width $border-type $border-color;
47 border-top: none; 44 border-top: none;
48 45
49 background-color: $background-color; 46 background-color: var(--mainBackgroundColor);
50 border-radius: 3px; 47 border-radius: 3px;
51 width: 100%; 48 width: 100%;
52 min-height: 440px; 49 min-height: 440px;
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 78bcfe121..285db061f 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -35,7 +35,7 @@
35 .comment-account { 35 .comment-account {
36 @include disable-default-a-behaviour; 36 @include disable-default-a-behaviour;
37 37
38 color: #000; 38 color: var(--mainForegroundColor);
39 font-weight: $font-bold; 39 font-weight: $font-bold;
40 } 40 }
41 41
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index be1388a83..edd5ae6ba 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -111,7 +111,7 @@
111 a { 111 a {
112 @include disable-default-a-behaviour; 112 @include disable-default-a-behaviour;
113 113
114 color: #000; 114 color: var(--mainForegroundColor);
115 115
116 &:hover { 116 &:hover {
117 opacity: 0.8; 117 opacity: 0.8;
@@ -137,7 +137,7 @@
137 display: inline; 137 display: inline;
138 align-items: center; 138 align-items: center;
139 font-size: 13px; 139 font-size: 13px;
140 color: #000; 140 color: var(--mainForegroundColor);
141 141
142 span:hover { 142 span:hover {
143 opacity: 0.8; 143 opacity: 0.8;
@@ -342,7 +342,7 @@
342 342
343 a.video-attribute-value { 343 a.video-attribute-value {
344 @include disable-default-a-behaviour; 344 @include disable-default-a-behaviour;
345 color: #000; 345 color: var(--mainForegroundColor);
346 346
347 &:hover { 347 &:hover {
348 opacity: 0.9; 348 opacity: 0.9;
@@ -413,7 +413,7 @@
413 a { 413 a {
414 @include disable-default-a-behaviour; 414 @include disable-default-a-behaviour;
415 415
416 color: $orange-color; 416 color: var(--mainColor);
417 transition: color 0.3s; 417 transition: color 0.3s;
418 418
419 &:hover { 419 &:hover {
@@ -422,7 +422,7 @@
422 } 422 }
423 423
424 .privacy-concerns-okay { 424 .privacy-concerns-okay {
425 background-color: $orange-color; 425 background-color: var(--mainColor);
426 padding: 5px 8px 5px 7px; 426 padding: 5px 8px 5px 7px;
427 margin-left: auto; 427 margin-left: auto;
428 border-radius: 3px; 428 border-radius: 3px;
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index e7dc60b4b..f5508cf61 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -21,7 +21,7 @@
21 a { 21 a {
22 @include disable-default-a-behaviour; 22 @include disable-default-a-behaviour;
23 23
24 color: #000; 24 color: var(--mainForegroundColor);
25 } 25 }
26} 26}
27 27
diff --git a/client/src/assets/images/menu/moonsun.svg b/client/src/assets/images/menu/moonsun.svg
new file mode 100644
index 000000000..fe2a96396
--- /dev/null
+++ b/client/src/assets/images/menu/moonsun.svg
@@ -0,0 +1 @@
<svg height="300px" width="300px" fill="#fff" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>Artboard 633</title><circle cx="50" cy="6" r="4"/><circle cx="50" cy="94" r="4"/><circle cx="6" cy="50" r="4"/><circle cx="94" cy="50" r="4"/><circle cx="18" cy="18" r="4"/><circle cx="82" cy="82" r="4"/><circle cx="18" cy="82" r="4"/><circle cx="82" cy="18" r="4"/><path d="M82,50A32,32,0,1,0,50,82,32,32,0,0,0,82,50ZM50,26a23.67,23.67,0,0,1,5.87.76c4.36,9.93.57,19-4.66,24.29s-14.4,9.24-24.45,4.83A23.75,23.75,0,0,1,26,50,24,24,0,0,1,50,26Zm0,48a23.94,23.94,0,0,1-18.26-8.47,29.38,29.38,0,0,0,3.74.26,30.07,30.07,0,0,0,21.41-9.11,29.82,29.82,0,0,0,8.61-25A24,24,0,0,1,50,74Z"/></svg> \ No newline at end of file
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 }