Fix grey color theme

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 3f4fad7b93ca30ba51ffa5c57555eceb989ab4d2..1daa7b74183f75746438db01d26f6f91ec12dab5 100644 (file)
--- 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 @@
 
   .plugin-icon {
     margin-left: 10px;
-    
+
     my-global-icon {
-      @include apply-svg-color($grey-foreground-color);
-      
+      @include apply-svg-color(var(--greyForegroundColor));
+
       &[iconName="npm"] {
-        @include fill-svg-color($grey-foreground-color);
+        @include fill-svg-color(var(--greyForegroundColor));
       }
     }
   }

diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 59e1bcc263d3bd49859c03f37fdaca1171bd5ae9..ddd7abe8a4b67b89858cd2bd24a18f82dbe4be1b 100644 (file)
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -44,7 +44,7 @@
 
   .from-date {
     font-size: 0.85em;
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
     padding-left: 5px;
     min-width: 70px;
     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 1724449e8a5f8607c37a05da679eba606b378a30..f572dd90249c5288e15b08afb1fe6a0a64d9f08c 100644 (file)
--- 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 @@
 
     .timestamp-info {
       font-size: 0.9em;
-      color: $grey-foreground-color;
+      color: var(--greyForegroundColor);
       margin-left: 5px;
     }
   }

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 4680732bea70dadfa565529bc57e344a85cf5e6f..649272c52093754731df2271fccbc442db196400 100644 (file)
--- 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,
     .position {
       font-weight: $font-semibold;
       margin-right: 10px;
-      color: $grey-foreground-color;
+      color: var(--greyForegroundColor);
       min-width: 25px;
 
       my-global-icon {
-        @include apply-svg-color($grey-foreground-color);
+        @include apply-svg-color(var(--greyForegroundColor));
 
         width: 17px;
         position: relative;
@@ -81,7 +81,7 @@ my-video-thumbnail,
       }
 
       .video-info-account, .video-info-timestamp {
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
       }
     }
   }
@@ -109,7 +109,7 @@ my-video-thumbnail,
     }
 
     .icon-more {
-      @include apply-svg-color($grey-foreground-color);
+      @include apply-svg-color(var(--greyForegroundColor));
 
       display: flex;
 

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 8947e72d1310255c56379c1a9d3b70d1535d5ac3..5279934961f61c602720e9d690af8d54d29b2377 100644 (file)
--- 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 @@
       @include disable-default-a-behaviour;
 
       display: block;
-      color: $grey-foreground-color;
+      color: var(--greyForegroundColor);
     }
 
     .privacy-date {
@@ -72,7 +72,7 @@
 
     .video-info-description {
       margin-top: 10px;
-      color: $grey-foreground-color;
+      color: var(--greyForegroundColor);
     }
   }
 }

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 f28bc34ed9becd2ba931fbe9ebb5b5531da9725b..7e2dd7d2fab74246090ca168c6de81c72d346549 100644 (file)
--- 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 @@
     min-width: 142px;
     padding-right: 5px;
     display: inline-block;
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
     font-weight: $font-bold;
   }
 

diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index f27800a2470033533f2e50a357b539074ea86814..23d918d009ef19d02753a2e214d23340a27700c6 100644 (file)
--- 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;
 
         display: block;
         font-size: 13px;
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
 
         &:hover {
           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 2f906713200c668cb6db0ea589ec022d568aa811..0702ebf2215c05d1e812b01b36e9450e9a1f0cf7 100644 (file)
--- 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 {
     display: inline-block;
     margin-right: 25px;
 
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
     font-size: 15px;
   }
 

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 7c46569311100242b63933580807d4811c8426b9..33204de3ba2b5fae1a12d3a4d95d6b122039d1c0 100644 (file)
--- 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 @@
 
       .comment-date {
         font-size: 90%;
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         margin-left: 5px;
         text-decoration: none;
       }
@@ -108,7 +108,7 @@
       }
 
       &.comment-html-deleted {
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         margin-bottom: 1rem;
       }
     }
@@ -120,7 +120,7 @@
       ::ng-deep .dropdown-toggle,
       .comment-action-reply,
       .comment-action-delete {
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         cursor: pointer;
         margin-right: 10px;
 

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 0dd318cb09c6da78f62a39f65cabb7d0dd7e14c2..db36dcd8b4a911a54696f82cca3e458f1f2dccd2 100644 (file)
--- 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 @@
     }
 
     .playlist-by-index {
-      color: $grey-foreground-color;
+      color: var(--greyForegroundColor);
       display: flex;
 
       .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 e59e6613b2dbbcdd2a78372b3057f2c868b4f053..431a2103905f9f33a3a95f69d2410eb8d4a060c1 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
       .video-info-description-more {
         cursor: pointer;
         font-weight: $font-semibold;
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         font-size: 14px;
 
         .glyphicon {
@@ -379,7 +379,7 @@ $video-info-margin-left: 44px;
         min-width: 142px;
         padding-right: 5px;
         display: inline-block;
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         font-weight: $font-bold;
       }
 

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 22e1151c8dbfaa7e29c22766853b6c954a79399d..16e7ea5cada8317c77aabfe838b1020fa70854b1 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -31,6 +31,8 @@ body {
   --mainForegroundColor: #{$fg-color};
   --secondaryColor: #{$secondary-color};
 
+  --greyForegroundColor: #{$grey-foreground-color};
+
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
   --submenuColor: #{$sub-menu-color};

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c937a0f72c3fc7e44f559d0afcb91311efcd8518..d0ee1e2f0c27cc258767553dfde74ebf0463ee4f 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
       }
 
       .followers {
-        color: $grey-foreground-color;
+        color: var(--greyForegroundColor);
         font-weight: normal;
         font-size: 14px;
         margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
     display: inline-block;
     font-size: 16px;
     text-transform: uppercase;
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
     margin-bottom: 10px;
     font-weight: $font-semibold;
     text-decoration: none;

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 99ca25f9cfdf89ce6418a40a6fe894c19fa10bab..80a090159f19c9c545dbc66a07452f0e89932870 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -156,7 +156,7 @@
 @mixin tertiary-button {
   @include button-focus($grey-button-outline-color);
 
-  color: $grey-foreground-color;
+  color: var(--greyForegroundColor);
   background-color: transparent;
 
   &[disabled], &.disabled {
@@ -173,11 +173,11 @@
 
   &, &:active, &:focus {
     background-color: $grey-background-color;
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
   }
 
   &:hover, &:active, &:focus, &[disabled], &.disabled {
-    color: $grey-foreground-color;
+    color: var(--greyForegroundColor);
     background-color: $grey-background-hover-color;
   }
 
@@ -186,7 +186,7 @@
   }
 
   my-global-icon {
-    @include apply-svg-color($grey-foreground-color)
+    @include apply-svg-color(var(--greyForegroundColor))
   }
 }
 
@@ -769,7 +769,7 @@
         vertical-align: middle !important;
 
         path  {
-          fill: $grey-foreground-color !important;
+          fill: var(--greyForegroundColor) !important;
         }
       }
 

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 58955802c2d4a28425c6c6e9aa70a8d5c6be9a51..11561e268bdf4ee3f45030ad14cdf77d086dbe65 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -91,6 +91,8 @@ $variables: (
   --mainForegroundColor: var(--mainForegroundColor),
   --secondaryColor: var(--secondaryColor),
 
+  --greyForegroundColor: var(--greyForegroundColor),
+
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),
   --submenuColor: var(--submenuColor),