aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss8
-rw-r--r--client/src/app/shared/users/user-notifications.component.scss2
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.scss2
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss8
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-miniature.component.scss4
-rw-r--r--client/src/app/shared/video/modals/video-download.component.scss2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss2
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss14
-rw-r--r--client/src/sass/application.scss4
-rw-r--r--client/src/sass/include/_miniature.scss4
-rw-r--r--client/src/sass/include/_mixins.scss10
-rw-r--r--client/src/sass/include/_variables.scss4
-rw-r--r--client/src/sass/primeng-custom.scss1
16 files changed, 42 insertions, 33 deletions
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index 3f4fad7b9..1daa7b741 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -23,12 +23,12 @@
23 23
24 .plugin-icon { 24 .plugin-icon {
25 margin-left: 10px; 25 margin-left: 10px;
26 26
27 my-global-icon { 27 my-global-icon {
28 @include apply-svg-color($grey-foreground-color); 28 @include apply-svg-color(var(--greyForegroundColor));
29 29
30 &[iconName="npm"] { 30 &[iconName="npm"] {
31 @include fill-svg-color($grey-foreground-color); 31 @include fill-svg-color(var(--greyForegroundColor));
32 } 32 }
33 } 33 }
34 } 34 }
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 59e1bcc26..ddd7abe8a 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -44,7 +44,7 @@
44 44
45 .from-date { 45 .from-date {
46 font-size: 0.85em; 46 font-size: 0.85em;
47 color: $grey-foreground-color; 47 color: var(--greyForegroundColor);
48 padding-left: 5px; 48 padding-left: 5px;
49 min-width: 70px; 49 min-width: 70px;
50 text-align: right; 50 text-align: right;
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index 1724449e8..f572dd902 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -68,7 +68,7 @@
68 68
69 .timestamp-info { 69 .timestamp-info {
70 font-size: 0.9em; 70 font-size: 0.9em;
71 color: $grey-foreground-color; 71 color: var(--greyForegroundColor);
72 margin-left: 5px; 72 margin-left: 5px;
73 } 73 }
74 } 74 }
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 4680732be..649272c52 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -58,11 +58,11 @@ my-video-thumbnail,
58 .position { 58 .position {
59 font-weight: $font-semibold; 59 font-weight: $font-semibold;
60 margin-right: 10px; 60 margin-right: 10px;
61 color: $grey-foreground-color; 61 color: var(--greyForegroundColor);
62 min-width: 25px; 62 min-width: 25px;
63 63
64 my-global-icon { 64 my-global-icon {
65 @include apply-svg-color($grey-foreground-color); 65 @include apply-svg-color(var(--greyForegroundColor));
66 66
67 width: 17px; 67 width: 17px;
68 position: relative; 68 position: relative;
@@ -81,7 +81,7 @@ my-video-thumbnail,
81 } 81 }
82 82
83 .video-info-account, .video-info-timestamp { 83 .video-info-account, .video-info-timestamp {
84 color: $grey-foreground-color; 84 color: var(--greyForegroundColor);
85 } 85 }
86 } 86 }
87 } 87 }
@@ -109,7 +109,7 @@ my-video-thumbnail,
109 } 109 }
110 110
111 .icon-more { 111 .icon-more {
112 @include apply-svg-color($grey-foreground-color); 112 @include apply-svg-color(var(--greyForegroundColor));
113 113
114 display: flex; 114 display: flex;
115 115
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 8947e72d1..527993496 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
53 @include disable-default-a-behaviour; 53 @include disable-default-a-behaviour;
54 54
55 display: block; 55 display: block;
56 color: $grey-foreground-color; 56 color: var(--greyForegroundColor);
57 } 57 }
58 58
59 .privacy-date { 59 .privacy-date {
@@ -72,7 +72,7 @@
72 72
73 .video-info-description { 73 .video-info-description {
74 margin-top: 10px; 74 margin-top: 10px;
75 color: $grey-foreground-color; 75 color: var(--greyForegroundColor);
76 } 76 }
77 } 77 }
78} 78}
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index f28bc34ed..7e2dd7d2f 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -41,7 +41,7 @@
41 min-width: 142px; 41 min-width: 142px;
42 padding-right: 5px; 42 padding-right: 5px;
43 display: inline-block; 43 display: inline-block;
44 color: $grey-foreground-color; 44 color: var(--greyForegroundColor);
45 font-weight: $font-bold; 45 font-weight: $font-bold;
46 } 46 }
47 47
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index f27800a24..23d918d00 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -36,7 +36,7 @@ $more-margin-right: 15px;
36 36
37 display: block; 37 display: block;
38 font-size: 13px; 38 font-size: 13px;
39 color: $grey-foreground-color; 39 color: var(--greyForegroundColor);
40 40
41 &:hover { 41 &:hover {
42 color: $grey-foreground-hover-color; 42 color: $grey-foreground-hover-color;
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 2f9067132..0702ebf22 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -122,7 +122,7 @@ my-peertube-checkbox {
122 display: inline-block; 122 display: inline-block;
123 margin-right: 25px; 123 margin-right: 25px;
124 124
125 color: $grey-foreground-color; 125 color: var(--greyForegroundColor);
126 font-size: 15px; 126 font-size: 15px;
127 } 127 }
128 128
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 7c4656931..33204de3b 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
@@ -80,7 +80,7 @@
80 80
81 .comment-date { 81 .comment-date {
82 font-size: 90%; 82 font-size: 90%;
83 color: $grey-foreground-color; 83 color: var(--greyForegroundColor);
84 margin-left: 5px; 84 margin-left: 5px;
85 text-decoration: none; 85 text-decoration: none;
86 } 86 }
@@ -108,7 +108,7 @@
108 } 108 }
109 109
110 &.comment-html-deleted { 110 &.comment-html-deleted {
111 color: $grey-foreground-color; 111 color: var(--greyForegroundColor);
112 margin-bottom: 1rem; 112 margin-bottom: 1rem;
113 } 113 }
114 } 114 }
@@ -120,7 +120,7 @@
120 ::ng-deep .dropdown-toggle, 120 ::ng-deep .dropdown-toggle,
121 .comment-action-reply, 121 .comment-action-reply,
122 .comment-action-delete { 122 .comment-action-delete {
123 color: $grey-foreground-color; 123 color: var(--greyForegroundColor);
124 cursor: pointer; 124 cursor: pointer;
125 margin-right: 10px; 125 margin-right: 10px;
126 126
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
index 0dd318cb0..db36dcd8b 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
@@ -22,7 +22,7 @@
22 } 22 }
23 23
24 .playlist-by-index { 24 .playlist-by-index {
25 color: $grey-foreground-color; 25 color: var(--greyForegroundColor);
26 display: flex; 26 display: flex;
27 27
28 .playlist-by { 28 .playlist-by {
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 977312a83..431a21039 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -255,21 +255,21 @@ $video-info-margin-left: 44px;
255 255
256 &.action-button-like.activated { 256 &.action-button-like.activated {
257 .count { 257 .count {
258 color: $activated-action-button-color; 258 color: var(--activatedActionButtonColor);
259 } 259 }
260 260
261 my-global-icon { 261 my-global-icon {
262 @include apply-svg-color($activated-action-button-color); 262 @include apply-svg-color(var(--activatedActionButtonColor));
263 } 263 }
264 } 264 }
265 265
266 &.action-button-dislike.activated { 266 &.action-button-dislike.activated {
267 .count { 267 .count {
268 color: $activated-action-button-color; 268 color: var(--activatedActionButtonColor);
269 } 269 }
270 270
271 my-global-icon { 271 my-global-icon {
272 @include apply-svg-color($activated-action-button-color); 272 @include apply-svg-color(var(--activatedActionButtonColor));
273 } 273 }
274 } 274 }
275 275
@@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
325 background-color: #909090; 325 background-color: #909090;
326 326
327 &.liked { 327 &.liked {
328 background-color: $activated-action-button-color; 328 background-color: var(--activatedActionButtonColor);
329 } 329 }
330 } 330 }
331 } 331 }
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
356 .video-info-description-more { 356 .video-info-description-more {
357 cursor: pointer; 357 cursor: pointer;
358 font-weight: $font-semibold; 358 font-weight: $font-semibold;
359 color: $grey-foreground-color; 359 color: var(--greyForegroundColor);
360 font-size: 14px; 360 font-size: 14px;
361 361
362 .glyphicon { 362 .glyphicon {
@@ -379,7 +379,7 @@ $video-info-margin-left: 44px;
379 min-width: 142px; 379 min-width: 142px;
380 padding-right: 5px; 380 padding-right: 5px;
381 display: inline-block; 381 display: inline-block;
382 color: $grey-foreground-color; 382 color: var(--greyForegroundColor);
383 font-weight: $font-bold; 383 font-weight: $font-bold;
384 } 384 }
385 385
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 17ed5c8f8..16e7ea5ca 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -31,6 +31,8 @@ body {
31 --mainForegroundColor: #{$fg-color}; 31 --mainForegroundColor: #{$fg-color};
32 --secondaryColor: #{$secondary-color}; 32 --secondaryColor: #{$secondary-color};
33 33
34 --greyForegroundColor: #{$grey-foreground-color};
35
34 --menuBackgroundColor: #{$menu-background}; 36 --menuBackgroundColor: #{$menu-background};
35 --menuForegroundColor: #{$menu-color}; 37 --menuForegroundColor: #{$menu-color};
36 --submenuColor: #{$sub-menu-color}; 38 --submenuColor: #{$sub-menu-color};
@@ -48,6 +50,8 @@ body {
48 --supportButtonColor: #{var(--actionButtonColor)}; 50 --supportButtonColor: #{var(--actionButtonColor)};
49 --supportButtonHeartColor: #{$support-button-heart}; 51 --supportButtonHeartColor: #{$support-button-heart};
50 52
53 --activatedActionButtonColor: #{$activated-action-button-color};
54
51 font-family: $main-fonts; 55 font-family: $main-fonts;
52 font-weight: $font-regular; 56 font-weight: $font-regular;
53 color: var(--mainForegroundColor); 57 color: var(--mainForegroundColor);
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c937a0f72..d0ee1e2f0 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
187 } 187 }
188 188
189 .followers { 189 .followers {
190 color: $grey-foreground-color; 190 color: var(--greyForegroundColor);
191 font-weight: normal; 191 font-weight: normal;
192 font-size: 14px; 192 font-size: 14px;
193 margin-left: 10px; 193 margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
203 display: inline-block; 203 display: inline-block;
204 font-size: 16px; 204 font-size: 16px;
205 text-transform: uppercase; 205 text-transform: uppercase;
206 color: $grey-foreground-color; 206 color: var(--greyForegroundColor);
207 margin-bottom: 10px; 207 margin-bottom: 10px;
208 font-weight: $font-semibold; 208 font-weight: $font-semibold;
209 text-decoration: none; 209 text-decoration: none;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 99ca25f9c..80a090159 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -156,7 +156,7 @@
156@mixin tertiary-button { 156@mixin tertiary-button {
157 @include button-focus($grey-button-outline-color); 157 @include button-focus($grey-button-outline-color);
158 158
159 color: $grey-foreground-color; 159 color: var(--greyForegroundColor);
160 background-color: transparent; 160 background-color: transparent;
161 161
162 &[disabled], &.disabled { 162 &[disabled], &.disabled {
@@ -173,11 +173,11 @@
173 173
174 &, &:active, &:focus { 174 &, &:active, &:focus {
175 background-color: $grey-background-color; 175 background-color: $grey-background-color;
176 color: $grey-foreground-color; 176 color: var(--greyForegroundColor);
177 } 177 }
178 178
179 &:hover, &:active, &:focus, &[disabled], &.disabled { 179 &:hover, &:active, &:focus, &[disabled], &.disabled {
180 color: $grey-foreground-color; 180 color: var(--greyForegroundColor);
181 background-color: $grey-background-hover-color; 181 background-color: $grey-background-hover-color;
182 } 182 }
183 183
@@ -186,7 +186,7 @@
186 } 186 }
187 187
188 my-global-icon { 188 my-global-icon {
189 @include apply-svg-color($grey-foreground-color) 189 @include apply-svg-color(var(--greyForegroundColor))
190 } 190 }
191} 191}
192 192
@@ -769,7 +769,7 @@
769 vertical-align: middle !important; 769 vertical-align: middle !important;
770 770
771 path { 771 path {
772 fill: $grey-foreground-color !important; 772 fill: var(--greyForegroundColor) !important;
773 } 773 }
774 } 774 }
775 775
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index cdac8ae6f..11561e268 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -91,6 +91,8 @@ $variables: (
91 --mainForegroundColor: var(--mainForegroundColor), 91 --mainForegroundColor: var(--mainForegroundColor),
92 --secondaryColor: var(--secondaryColor), 92 --secondaryColor: var(--secondaryColor),
93 93
94 --greyForegroundColor: var(--greyForegroundColor),
95
94 --menuBackgroundColor: var(--menuBackgroundColor), 96 --menuBackgroundColor: var(--menuBackgroundColor),
95 --menuForegroundColor: var(--menuForegroundColor), 97 --menuForegroundColor: var(--menuForegroundColor),
96 --submenuColor: var(--submenuColor), 98 --submenuColor: var(--submenuColor),
@@ -104,6 +106,8 @@ $variables: (
104 --markdownTextareaBackgroundColor: var(--markdownTextareaBackgroundColor), 106 --markdownTextareaBackgroundColor: var(--markdownTextareaBackgroundColor),
105 107
106 --actionButtonColor: var(--actionButtonColor), 108 --actionButtonColor: var(--actionButtonColor),
109 --activatedActionButtonColor: var(--activatedActionButtonColor),
110
107 --supportButtonColor: var(--supportButtonColor), 111 --supportButtonColor: var(--supportButtonColor),
108 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor), 112 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
109 --supportButtonHeartColor: var(--supportButtonHeartColor), 113 --supportButtonHeartColor: var(--supportButtonHeartColor),
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 33483533e..056b88fc1 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -521,6 +521,7 @@ p-toast {
521 .ui-toast-message { 521 .ui-toast-message {
522 font-family: $main-fonts; 522 font-family: $main-fonts;
523 background-color: var(--mainBackgroundColor) !important; 523 background-color: var(--mainBackgroundColor) !important;
524 color: var(--mainForegroundColor) !important;
524 border-radius: 5px; 525 border-radius: 5px;
525 box-sizing: border-box; 526 box-sizing: border-box;
526 border: 1px solid #EBEEF5 !important; 527 border: 1px solid #EBEEF5 !important;