Fixing a few css problems linekd to dark mods reported. (#16908)

* Fix all darkmode display bug * Fix SCSS Lint * Change background color of connections legend --------- Co-authored-by: Samuel <slaunay@teclib.com>
glpi-project · Apr 10, 2024 · 052780f · 052780f
1 parent 545762c
commit 052780f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/css/includes/components/_networkport.scss b/css/includes/components/_networkport.scss
@@ -56,15 +56,42 @@
     }
 
     &.trunk {
-        background-color: mediumaquamarine;
+        @if $is-dark {
+            background-color: rgb(56, 110, 92);
+            color: white;
+
+            a {
+                color: white;
+            }
+        } @else {
+            background-color: mediumaquamarine;
+        }
     }
 
     &.hub {
-        background-color: lightsalmon;
+        @if $is-dark {
+            background-color: rgb(185, 112, 88);
+            color: white;
+
+            a {
+                color: white;
+            }
+        } @else {
+            background-color: lightsalmon;
+        }
     }
 
     &.cotrunk {
-        background-color: silver;
+        @if $is-dark {
+            background-color: rgb(77, 77, 77);
+            color: white;
+
+            a {
+                color: white;
+            }
+        } @else {
+            background-color: silver;
+        }
     }
 
     &.aggregated,
@@ -100,4 +127,8 @@
         text-align: center;
         width: 25%;
     }
+
+    @if $is-dark {
+        color: white;
+    }
 }
diff --git a/css/includes/components/_richtext.scss b/css/includes/components/_richtext.scss
@@ -88,7 +88,11 @@ body.mce-content-body {
         overflow: hidden;
 
         .read_more {
-            background: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 0%, #f1f4e3 100%);
+            @if not $is_dark {
+                background: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 0%, #f1f4e3 100%);
+            } @else {
+                background: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 0%, $dark 100%);
+            }
         }
     }
 }

diff --git a/css/legacy/includes/_styles.scss b/css/legacy/includes/_styles.scss
@@ -368,11 +368,17 @@
 
    .tab_bg_1_2 {
       background-color: #cf9b9b;
+      @if $is_dark {
+         color: $dark;
+      }
    }
 
 
    .tab_bg_2_2 {
       background-color: #cf9b9b;
+      @if $is_dark {
+        color: $dark;
+     }
    }
 
    .tab_date {

diff --git a/css/palettes/darker.scss b/css/palettes/darker.scss
@@ -45,7 +45,7 @@ $secondary-fg: #f3f3f3;
 
 $dark: #242323;
 $light: #aaa;
-$link-color: #888;
+$link-color: #9c9c9c;
 $text-muted: #757d91;
 $mainmenu_bg: #414141;
 $mainmenu_fg: #f4f6fa;
@@ -74,5 +74,6 @@ $border-color: rgba(101, 109, 119, 16%);
 $table-head-bg: #2c3b4f;
 $table-head-color: $light;
 $itil-secondary-bg: #222121 !default;
+$code-color: rgb(180, 180, 180);
 
 @import "../includes/palette_dark";
diff --git a/css/palettes/midnight.scss b/css/palettes/midnight.scss
@@ -48,7 +48,7 @@ $dark-mode-darken: #000;
 $color-contrast-dark: #1a1a1a;
 $light: #e6e6e6;
 $link-color: #b6c3e0;
-$text-muted: #c6cad2;
+$text-muted: $dark;
 $mainmenu_bg: #2f3f64;
 $mainmenu_fg: #f4f6fa;
 $logo: "../pics/logos/logo-GLPI-100-white.png";
@@ -82,5 +82,6 @@ $itil-secondary-bg: #1d2531 !default;
 $timeline-fup-bg: #1c2430 !default;
 $timeline-fup-fg: #8892a8 !default;
 $timeline-fup-border: #2f3d50 !default;
+$code-color: rgb(180, 180, 180);
 
 @import "../includes/palette_dark";