From 6328d3eddd50f467921f8eb029937523be203b74 Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 16 Jun 2021 20:05:34 +0800 Subject: fix: Fix #624. --- FrontEnd/src/index.css | 46 ++++++++++++++-------------- FrontEnd/src/palette.ts | 15 +++++---- FrontEnd/src/views/timeline-common/index.css | 12 ++++++++ 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; 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; -- cgit v1.2.3