From 4d7212e94560514ce97cf93a89605232d8a54143 Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Sun, 25 Feb 2024 05:06:05 +0800 Subject: [PATCH] implement css variables to line.less (#324) --- src/app/common/themes/themes.less | 107 +++++++++++++++++++++++++++--- src/app/line/line.less | 37 +++++------ 2 files changed, 115 insertions(+), 29 deletions(-) diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less index 92bd3f83..8d90d120 100644 --- a/src/app/common/themes/themes.less +++ b/src/app/common/themes/themes.less @@ -70,6 +70,7 @@ // @font-face declaration lives in app.less @fixed-font: "Martian Mono", sans-serif; +@terminal-font: "JetBrains Mono", sans-serif; @text-s1-font: "Martian Mono", sans-serif; @@ -82,17 +83,90 @@ @main-content-bottom-background: #333; :root { + // primary + --primary-text-color: #eceeec; + --primary-icon-color: var(--primary-text-color); + --primary-border-color: #333; + --primary-background-color: rgba(21, 23, 21, 1); + --primary-background: rgba(21, 23, 21, 1); + --primary-accent-color: rgb(88, 193, 66); + --wave-green: rgb(88, 193, 66); + --wave-green-faded: rgba(88, 193, 66, 0.4); + --success-green: rgb(38, 97, 26); + --error-red: #cc0000; + --warning-yellow: #ffa500; + + --text-primary: #fff; + --text-secondary: #c3c8c2; + --text-caption: #8b918a; + + --base-background-transparent: rgba(21, 23, 21, 0.7); + --base-background-dev: rgba(21, 23, 48, 0.7); + --background-session: rgba(13, 13, 13, 0.85); + --background-session-components: rgba(48, 49, 48, 0.6); + --background-session-components-solid: rgb(33, 34, 33); + + --cmd-input-border-color: rgba(88, 193, 66, 0.8); + + --disabled-background: rgba(76, 81, 75, 1); + --disabled-color: #adadad; + --disabled-color-faded: rgba(173, 173, 173, 0.6); + --scrollbar-background: rgba(21, 23, 21, 1); + --scrollbar-thumb-background: rgb(134, 134, 134); + --button-background: rgb(38, 38, 38); + --button-disabled-background: rgb(30, 29, 29); + + --textarea-background: #2a2a2a; + + --status-connected: #46a758; + --status-connecting: #f5d90a; + --status-error: #e54d2e; + --status-disconnected: #c3c8c2; + + --term-text-error: #cc0000; + --term-error-color: rgb(204, 0, 0); + --term-text-yellow: #c4a000; + --term-black: #000000; + --term-text-red: #cc0000; + --term-green: #4e9a06; + --term-blue: #3465a4; + --term-cyan: #06989a; + --term-text-white: #d3d7cf; + --term-bright-red: #ef2929; + --term-bright-green: #58c142; + --term-bright-yellow: #fce94f; + --term-bright-blue: #32afff; + --term-bright-magenta: #ad7fa8; + --term-bright-cyan: #34e2e2; + --term-bright-white: #ffffff; + + --button-bg-yellow: #e9be68; + --button-bg-red: #d06c68; + + --history-error-red: #d06c68; + --history-selected-error-red: #f79494; + + --tab-red: #e54d2e; + --tab-orange: #ef713b; + --tab-yellow: #e0b956; + --tab-green: #58c142; + --tab-mint: #4bffa9; + --tab-cyan: #4bdfff; + --tab-blue: #3971ff; + --tab-violet: #ba76ff; + --tab-pink: #e05677; + --tab-white: #ffffff; + + --soft-blue: #729fcf; + --active-menu-color: rgb(0, 71, 171); + --app-accent-color: rgb(88, 193, 66); --app-error-color: rgb(204, 0, 0); --app-warning-color: rgb(255, 165, 0); --app-scrollbar-thumb-color: rgb(134, 134, 134); - --app-text-color: rgb(236, 238, 236); - --app-border-color: #333; - --primary-text-color: #eceeec; - - --primary-border-color: #333; + --app-border: rgba(241, 246, 243, 0.08); --sidebar-dev-bg-color: #151730; --sidebar-separator-color: rgba(241, 246, 243, 0.08); @@ -100,9 +174,22 @@ --sidebar-separator-color: rgba(241, 246, 243, 0.08); --sidebar-settings-color: #ffffff; - --line-text-color: #d3d7cf; + --line-sidebar-message-text: #c4a000; + --line-sidebar-message-color: rgb(196, 160, 0); + + --line-background: rgba(21, 23, 21, 1); + --line-avatar-color: #eceeec; + --line-text-color: #f2f4f2; + --line-svg-fill-color: rgb(150, 152, 150); + --line-svg-hover-fill-color: #eceeec; + --line-selected-border-color: rgb(193, 195, 193); + --line-separator-color: rgb(126, 126, 126); + --line-meta-line1-color: rgb(150, 152, 150); + --line-error-color: #cc0000; + --line-warning-color: #ffa500; + --line-base-soft-blue-color: #729fcf; + --line-active-border-color: rgb(97, 158, 72); --line-selected-bg-color: rgba(255, 255, 255, 0.1); - --line-active-border-color: rgba(88, 193, 66, 0.8); --line-selected-border-left-color: #ccc; --line-selected-error-border-color: rgba(204, 0, 0, 0.8); --line-selected-error-bg-color: rgb(19, 4, 3); @@ -113,7 +200,7 @@ --line-meta-user-color: rgba(140, 184, 232); --line-svg-color: rgba(236, 238, 236, 0.6); --line-svg-hover-color: rgba(236, 238, 236, 1); - --line-sidebar-message-color: rgb(196, 160, 0); - - --term-error-color: rgb(204, 0, 0); + --line-status-success-fill: rgb(88, 193, 66); + --line-status-error-fill: #cc0000; + --line-status-warning-fill: #ffa500; } diff --git a/src/app/line/line.less b/src/app/line/line.less index 14237802..8b0bc84b 100644 --- a/src/app/line/line.less +++ b/src/app/line/line.less @@ -30,7 +30,7 @@ } &.line-invalid { - color: var(--line-text-color); + color: var(--term-text-white); margin-left: 5px; } @@ -78,7 +78,7 @@ } .load-error-text { - color: var(--term-error-color); + color: var(--term-text-red); padding-top: 5px; } @@ -87,7 +87,7 @@ } .sidebar-message { - color: var(--line-sidebar-message-color); + color: var(--term-text-yellow); } .focus-indicator { @@ -98,7 +98,7 @@ &.line-simple { font-size: 11px; line-height: 1.2; - color: var(--line-simple-text-color); + color: var(--line-text-color); .simple-line-header { display: flex; @@ -122,22 +122,22 @@ margin-left: 0.5em; margin-right: 0.5em; vertical-align: text-top; - fill: var(--app-text-color); + fill: var(--primary-background-color); } .success { - color: var(--app-accent-color); - fill: var(--app-accent-color); + color: var(--primary-accent-color); + fill: var(--primary-accent-color); } .fail { - color: var(--app-error-color); - fill: var(--app-error-color); + color: var(--line-error-color); + fill: var(--line-error-color); } .warning { - color: var(--app-warning-color); - fill: var(--app-warning-color); + color: var(--line-warning-color); + fill: var(--line-warning-color); } } @@ -220,7 +220,6 @@ flex-direction: row; .user { - // color: lighten(@soft-blue, 10%); color: var(--line-meta-user-color); font-weight: bold; margin-top: 1px; @@ -238,7 +237,7 @@ svg { width: 1em; margin-right: 0.5em; - fill: var(--line-svg-color); + fill: var(--line-svg-fill-color); } } @@ -251,9 +250,9 @@ border-radius: 50%; line-height: 1em; svg { - fill: var(--line-svg-color); + fill: var(--line-svg-fill-color); &:hover { - fill: var(--line-svg-hover-color); + fill: var(--line-svg-hover-fill-color); } } } @@ -280,7 +279,7 @@ .cmdtext-overflow { flex-shrink: 0; padding-right: 2px; - color: var(--line-text-color); + color: var(--term-text-white); cursor: pointer; } } @@ -295,7 +294,7 @@ .cmdtext-expanded { white-space: pre; - color: var(--line-text-color); + color: var(--term-text-white); padding-bottom: 5px; } } @@ -359,13 +358,13 @@ padding: 2px 5px 0px 5px; display: inline-block; font-size: 10px; - color: var(--line-text-color); + color: var(--term-text-white); background-color: #151715; } .cmd-rtnstate-diff { font-family: var(--termfontfamily); - color: var(--line-text-color); + color: var(--term-text-white); white-space: pre; margin-left: 10px; padding-left: 10px;