aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
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/app
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/app')
-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
20 files changed, 69 insertions, 33 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