fix: Fix #624.

3 files changed, 42 insertions, 31 deletions

diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index dfe22597..9b9956a9 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -2,33 +2,33 @@
   --tl-background-color: #f8f9fa;

 

   --tl-primary-color: rgb(0, 123, 255);

-  --tl-primary-inactive-color: hsl(211.1, 100%, 55%);

-  --tl-primary-lighter-color: hsl(211.1, 100%, 55%);

-  --tl-primary-darker-color: hsl(211.1, 100%, 45%);

-  --tl-primary-enhance-color: hsl(211.1, 100%, 65%);

-  --tl-primary-enhance-inactive-color: hsl(211.1, 100%, 58.5%);

-  --tl-primary-enhance-lighter-color: hsl(211.1, 100%, 68.5%);

-  --tl-primary-enhance-darker-color: hsl(211.1, 100%, 58.5%);

-  --tl-secondary-color: hsl(301.1, 100%, 50%);

-  --tl-secondary-inactive-color: hsl(301.1, 100%, 55%);

-  --tl-secondary-lighter-color: hsl(301.1, 100%, 55%);

-  --tl-secondary-darker-color: hsl(301.1, 100%, 45%);

+  --tl-primary-inactive-color: rgb(26, 136, 255);

+  --tl-primary-lighter-color: rgb(26, 136, 255);

+  --tl-primary-darker-color: rgb(0, 111, 230);

+  --tl-primary-enhance-color: rgb(77, 163, 255);

+  --tl-primary-enhance-inactive-color: rgb(43, 145, 255);

+  --tl-primary-enhance-lighter-color: rgb(94, 172, 255);

+  --tl-primary-enhance-darker-color: rgb(43, 145, 255);

+  --tl-secondary-color: rgb(255, 0, 250);

+  --tl-secondary-inactive-color: rgb(255, 26, 251);

+  --tl-secondary-lighter-color: rgb(255, 26, 251);

+  --tl-secondary-darker-color: rgb(230, 0, 225);

   --tl-text-primary-color: rgb(17, 17, 17);

-  --tl-text-primary-inactive-color: hsl(0, 0%, 16%);

-  --tl-text-primary-lighter-color: hsl(0, 0%, 16%);

-  --tl-text-primary-darker-color: hsl(0, 0%, 6%);

+  --tl-text-primary-inactive-color: rgb(41, 41, 41);

+  --tl-text-primary-lighter-color: rgb(41, 41, 41);

+  --tl-text-primary-darker-color: rgb(15, 15, 15);

   --tl-text-on-primary-color: rgb(255, 255, 255);

-  --tl-text-on-primary-inactive-color: hsl(0, 0%, 90%);

-  --tl-text-on-primary-lighter-color: hsl(0, 0%, 100%);

-  --tl-text-on-primary-darker-color: hsl(0, 0%, 90%);

+  --tl-text-on-primary-inactive-color: rgb(230, 230, 230);

+  --tl-text-on-primary-lighter-color: rgb(255, 255, 255);

+  --tl-text-on-primary-darker-color: rgb(230, 230, 230);

   --tl-danger-color: rgb(255, 0, 0);

-  --tl-danger-inactive-color: hsl(0, 100%, 55%);

-  --tl-danger-lighter-color: hsl(0, 100%, 55%);

-  --tl-danger-darker-color: hsl(0, 100%, 45%);

+  --tl-danger-inactive-color: rgb(255, 26, 26);

+  --tl-danger-lighter-color: rgb(255, 26, 26);

+  --tl-danger-darker-color: rgb(230, 0, 0);

   --tl-success-color: rgb(0, 128, 0);

-  --tl-success-inactive-color: hsl(120, 100%, 32.6%);

-  --tl-success-lighter-color: hsl(120, 100%, 32.6%);

-  --tl-success-darker-color: hsl(120, 100%, 22.6%);

+  --tl-success-inactive-color: rgb(0, 166, 0);

+  --tl-success-lighter-color: rgb(0, 166, 0);

+  --tl-success-darker-color: rgb(0, 115, 0);

 }

 

 body {

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index 767fe995..da1e133f 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -36,13 +36,12 @@ export type Palette = Record<PaletteColorType, PaletteColor>;
 export function generatePaletteColor(color: string): PaletteColor {
   const c = Color(color);
   return {
-    color: c.toString(),
-    inactive: (c.lightness() > 60
-      ? darkenBy(c, 0.1)
-      : lightenBy(c, 0.1)
-    ).toString(),
-    lighter: lightenBy(c, 0.1).toString(),
-    darker: darkenBy(c, 0.1).toString(),
+    color: c.rgb().toString(),
+    inactive: (c.lightness() > 60 ? darkenBy(c, 0.1) : lightenBy(c, 0.1))
+      .rgb()
+      .toString(),
+    lighter: lightenBy(c, 0.1).rgb().toString(),
+    darker: darkenBy(c, 0.1).rgb().toString(),
   };
 }
 
@@ -84,7 +83,7 @@ export function generatePaletteCSS(palette: Palette): string {
     }
   }
 
-  return `:root {${colors
+  return `html {${colors
     .map(([key, color]) => `${key} : ${color};`)
     .join("")}}`;
 }
diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css
index c9391af9..de35088c 100644
--- a/FrontEnd/src/views/timeline-common/index.css
+++ b/FrontEnd/src/views/timeline-common/index.css
@@ -11,16 +11,19 @@
     box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color);
   }
 }
+
 @keyframes timeline-line-node-current {
   to {
     box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color);
   }
 }
+
 @keyframes timeline-line-node-loading {
   to {
     box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color);
   }
 }
+
 @keyframes timeline-line-node-loading-edge {
   from {
     transform: rotate(0turn);
@@ -29,16 +32,19 @@
     transform: rotate(1turn);
   }
 }
+
 @keyframes timeline-enter {
   from {
     transform: translate(0, -100vh);
   }
 }
+
 @keyframes timeline-top-loading-enter {
   from {
     transform: translate(0, -100%);
   }
 }
+
 @keyframes timeline-post-enter {
   from {
     transform: translate(0, -100%);
@@ -48,6 +54,7 @@
     opacity: 1;
   }
 }
+
 .timeline-top-loading-enter {
   animation: 1s timeline-top-loading-enter;
 }
@@ -64,11 +71,13 @@
   bottom: 0;
   transition: left 0.5s;
 }
+
 @media (max-width: 575.98px) {
   .timeline-line {
     left: 1em;
   }
 }
+
 .timeline-line .segment {
   width: 7px;
   background: var(--tl-primary-color);
@@ -121,13 +130,16 @@
     var(--tl-primary-enhance-color)
   );
 }
+
 .timeline-line.current .segment.end {
   background: var(--tl-primary-enhance-color);
 }
+
 .timeline-line.current .node {
   background: var(--tl-primary-enhance-color);
   animation-name: timeline-line-node-current;
 }
+
 .timeline-line.loading .node {
   background: var(--tl-primary-color);
   animation-name: timeline-line-node-loading;