Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Convert the rest of the colors to CSS variables (#333)

Browse Source 
* css variables for sidebar

* type

* line css vars

* lines css vars

* bookmarks css vars

* clientsettings css vars

* button.less css vars

* checkbox.less css vars

* cmdstrcode.less css vars

* dropdown.less css vars

* markdown css vars

* status css vars

* convert all hex colors to rgb color

* textfield css vars

* toggle css vars

* tooltip css vars

* statusindicator css vars

* about modal css vars

* disconnected modal css vars

* editremoteconn modal css vars

* linesettings modal css vars

* tos modal css vars

* viewremoteconndetail modal css vars

* prompt css vars

* connections view css vars

* add colors comments

* history view css vars

* cmdinput css vars

* cmdinput css vars

* screenview css vars

* convert less vars to css vars
This commit is contained in:
Red J Adaya 2024-02-26 15:21:23 +08:00 committed by GitHub
parent 85d4259937
commit 19daffad56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 398 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/app/app.less
View File

@ -12,12 +12,12 @@ body {
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
background-color: black; background-color: black;
color: @base-color; color: var(--app-text-color);
} }
body { body {
&.is-dev .sidebar { &.is-dev .sidebar {
background-color: @base-background-dev; background-color: var(--app-bg-color-dev);
} }
} }
@ -27,8 +27,8 @@ textarea {
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
background: @base-background; background: var(--app-bg-color);
color: @base-color; color: var(--app-text-color);
} }
// typography // typography
@ -49,7 +49,7 @@ textarea {
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
font-family: @text-s1-font; font-family: @text-s1-font;
color: @text-primary; color: var(--app-text-color);
} }
.text-standard { .text-standard {
@ -84,11 +84,11 @@ textarea {
} }
body a { body a {
color: @wave-green; color: var(--app-accent-color);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: @wave-green; color: var(--app-accent-color);
} }
} }
@ -98,7 +98,7 @@ body code {
} }
svg.icon { svg.icon {
fill: @base-color; fill: var(--app-text-color);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
@ -137,19 +137,11 @@ svg.icon {
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background-color: @scrollbar-background !important; background-color: var(--scrollbar-thumb-color) !important;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
background-color: @scrollbar-thumb !important; background-color: var(--scrollbar-thumb-color) !important;
}
.glow {
&:focus,
&:hover {
border: 1px solid @background-session-components !important;
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
}
} }
.truncate { .truncate {
@ -165,10 +157,10 @@ svg.icon {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
background-color: @button-background !important; background-color: @button-background !important;
color: @wave-green; color: var(--app-accent-color);
.hoverEffect; .hoverEffect;
&:hover { &:hover {
color: @wave-green; color: var(--app-accent-color);
} }
&.disabled { &.disabled {
color: fade(@disabled-color, 60%); color: fade(@disabled-color, 60%);
@ -263,7 +255,7 @@ a.a-block {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: @term-white; background-color: var(--app-text-color);
opacity: 0; opacity: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -324,43 +316,43 @@ a.a-block {
} }
.text-button { .text-button {
color: @term-white; color: var(--app-text-color);
cursor: pointer; cursor: pointer;
background-color: #171717; background-color: #171717;
outline: 2px solid #171717; outline: 2px solid #171717;
&:hover, &:hover,
&:focus { &:focus {
color: @term-white; color: var(--app-text-color);
background-color: #333; background-color: #333;
outline: 2px solid #333; outline: 2px solid #333;
} }
&.connect-button { &.connect-button {
color: @term-green; color: var(--button-primary-bg-color);
&:hover { &:hover {
color: @term-green; color: var(--button-primary-bg-color);
} }
} }
&.disconnect-button { &.disconnect-button {
color: @term-red; color: var(--button-error-bg-color);
&:hover { &:hover {
color: @term-red; color: var(--button-error-bg-color);
} }
} }
&.success-button { &.success-button {
color: @term-green; color: var(--button-primary-bg-color);
&:hover { &:hover {
color: @term-green; color: var(--button-primary-bg-color);
} }
} }
&.error-button { &.error-button {
color: @term-red; color: var(--button-error-bg-color);
&:hover { &:hover {
color: @term-red; color: var(--button-error-bg-color);
} }
} }
@ -399,12 +391,12 @@ a.a-block {
&.active, &.active,
&.active.selected { &.active.selected {
display: block; display: block;
background-color: @tab-blue !important; background-color: var(--tab-blue) !important;
} }
&.active.selected.fg-focus { &.active.selected.fg-focus {
display: block; display: block;
background-color: @tab-green !important; background-color: var(--tab-green) !important;
} }
} }
@ -438,12 +430,12 @@ a.a-block {
} }
.load-error-text { .load-error-text {
color: @term-red; color: var(--tab-red);
padding-top: 5px; padding-top: 5px;
} }
.plugin-info-text { .plugin-info-text {
color: @term-white; color: var(--app-text-color);
padding-top: 5px; padding-top: 5px;
} }
@ -492,138 +484,138 @@ a.a-block {
.icon.color-green { .icon.color-green {
path, path,
circle { circle {
fill: @tab-green; fill: var(--tab-green);
} }
i { i {
color: @tab-green; color: var(--tab-green);
} }
} }
.icon.color-red { .icon.color-red {
path, path,
circle { circle {
fill: @tab-red; fill: var(--tab-red);
} }
i { i {
color: @tab-red; color: var(--tab-green);
} }
} }
.icon.color-orange { .icon.color-orange {
path, path,
circle { circle {
fill: @tab-orange; fill: var(--tab-orange);
} }
i { i {
color: @tab-orange; color: var(--tab-orange);
} }
} }
.icon.color-blue { .icon.color-blue {
path, path,
circle { circle {
fill: @tab-blue; fill: var(--tab-blue);
} }
i { i {
color: @tab-blue; color: var(--tab-blue);
} }
} }
.icon.color-yellow { .icon.color-yellow {
path, path,
circle { circle {
fill: @tab-yellow; fill: var(--tab-yellow);
} }
i { i {
color: @tab-yellow; color: var(--tab-yellow);
} }
} }
.icon.color-pink { .icon.color-pink {
path, path,
circle { circle {
fill: @tab-pink; fill: var(--tab-pink);
} }
i { i {
color: @tab-pink; color: var(--tab-pink);
} }
} }
.icon.color-mint { .icon.color-mint {
path, path,
circle { circle {
fill: @tab-mint; fill: var(--tab-mint);
} }
i { i {
color: @tab-mint; color: var(--tab-mint);
} }
} }
.icon.color-cyan { .icon.color-cyan {
path, path,
circle { circle {
fill: @tab-cyan; fill: var(--tab-cyan);
} }
i { i {
color: @tab-cyan; color: var(--tab-cyan);
} }
} }
.icon.color-violet { .icon.color-violet {
path, path,
circle { circle {
fill: @tab-violet; fill: var(--tab-violet);
} }
i { i {
color: @tab-violet; color: var(--tab-violet);
} }
} }
.icon.color-white { .icon.color-white {
path, path,
circle { circle {
fill: @tab-white; fill: var(--tab-white);
} }
i { i {
color: @tab-white; color: var(--tab-white);
} }
} }
.status-icon.status-connected { .status-icon.status-connected {
path, path,
circle { circle {
fill: @status-connected; fill: var(--status-connected-color);
} }
} }
.status-icon.status-connecting { .status-icon.status-connecting {
path, path,
circle { circle {
fill: @status-connecting; fill: var(--status-connecting-color);
} }
} }
.status-icon.status-disconnected { .status-icon.status-disconnected {
path, path,
circle { circle {
fill: @status-disconnected; fill: var(--status-disconnected-color);
} }
} }
.status-icon.status-error { .status-icon.status-error {
path, path,
circle { circle {
fill: @status-error; fill: var(--status-error-color);
} }
} }
@ -649,7 +641,7 @@ a.a-block {
} }
.view { .view {
background-color: @background-session; background-color: var(--session-bg-color);
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -687,12 +679,12 @@ a.a-block {
} }
&.settings-error { &.settings-error {
color: @term-red; color: var(--term-red);
margin-top: 20px; margin-top: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: #200707; background-color: #200707;
border: 1px solid @term-red; border: 1px solid var(--term-red);
font-weight: bold; font-weight: bold;
.error-dismiss { .error-dismiss {
@ -716,7 +708,7 @@ a.a-block {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: @term-white; color: var(--app-text-color);
&.settings-clickable { &.settings-clickable {
cursor: pointer; cursor: pointer;
@ -747,37 +739,37 @@ a.a-block {
} }
.tab-color-icon.color-default path { .tab-color-icon.color-default path {
fill: @tab-green; fill: var(--tab-green);
} }
.tab-color-icon.color-green path { .tab-color-icon.color-green path {
fill: @tab-green; fill: var(--tab-green);
} }
.tab-color-icon.color-orange path { .tab-color-icon.color-orange path {
fill: @tab-orange; fill: var(--tab-orange);
} }
.tab-color-icon.color-red path { .tab-color-icon.color-red path {
fill: @tab-red; fill: var(--tab-red);
} }
.tab-color-icon.color-yellow path { .tab-color-icon.color-yellow path {
fill: @tab-yellow; fill: var(--tab-yellow);
} }
.tab-color-icon.color-blue path { .tab-color-icon.color-blue path {
fill: @tab-blue; fill: var(--tab-blue);
} }
.tab-color-icon.color-mint path { .tab-color-icon.color-mint path {
fill: @tab-mint; fill: var(--tab-mint);
} }
.tab-color-icon.color-cyan path { .tab-color-icon.color-cyan path {
fill: @tab-cyan; fill: var(--tab-cyan);
} }
.tab-color-icon.color-white path { .tab-color-icon.color-white path {
fill: @tab-white; fill: var(--tab-white);
} }
.tab-color-icon.color-violet path { .tab-color-icon.color-violet path {
fill: @tab-violet; fill: var(--tab-violet);
} }
.tab-color-icon.color-pink path { .tab-color-icon.color-pink path {
fill: @tab-pink; fill: var(--tab-pink);
} }
.tab-colors, .tab-colors,
@ -817,7 +809,7 @@ a.a-block {
.action-text { .action-text {
margin-left: 20px; margin-left: 20px;
color: @term-red; color: var(--term-red);
} }
.settings-share-link { .settings-share-link {

24
src/app/bookmarks/bookmarks.less
View File

@ -1,7 +1,5 @@
@import "@/common/themes/themes.less";
.bookmarks-view { .bookmarks-view {
background-color: @background-session; background-color: var(--session-bg-color);
.close-button { .close-button {
position: absolute; position: absolute;
@ -14,7 +12,7 @@
svg { svg {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
fill: @base-color; fill: var(--app-text-color);
} }
} }
@ -31,15 +29,15 @@
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
fill: @base-color; fill: var(--app-text-color);
} }
.bookmarks-list { .bookmarks-list {
color: @term-white; color: var(--bookmarks-text-color);
margin: 4px 10px 5px 5px; margin: 4px 10px 5px 5px;
.no-bookmarks { .no-bookmarks {
color: @term-white; color: var(--bookmarks-text-color);
padding: 30px 10px 35px 10px; padding: 30px 10px 35px 10px;
border-bottom: 1px solid white; border-bottom: 1px solid white;
} }
@ -75,21 +73,21 @@
} }
label { label {
color: @term-white; color: var(--bookmarks-text-color);
margin-bottom: 4px; margin-bottom: 4px;
} }
textarea { textarea {
width: 80%; width: 80%;
min-width: 50%; min-width: 50%;
color: @term-white; color: var(--bookmarks-text-color);
background-color: @term-black; background-color: var(--bookmarks-textarea-bg-color);
} }
.bookmark-id-div { .bookmark-id-div {
display: none; display: none;
position: absolute; position: absolute;
color: @disabled-color; color: var(--bookmarks-disabled-text-color);
right: 5px; right: 5px;
bottom: 2px; bottom: 2px;
font-size: 0.8em; font-size: 0.8em;
@ -104,7 +102,7 @@
flex-direction: row; flex-direction: row;
visibility: hidden; visibility: hidden;
color: @term-white; color: var(--bookmarks-text-color);
.bookmark-control:first-child { .bookmark-control:first-child {
margin-left: 0; margin-left: 0;
@ -116,7 +114,7 @@
padding: 2px; padding: 2px;
&:hover { &:hover {
color: @term-bright-white; color: var(--bookmarks-control-hover-color);
} }
} }
} }

30
src/app/clientsettings/clientsettings.less
View File

@ -1,7 +1,7 @@
@import "@/common/themes/themes.less"; @import "@/common/themes/themes.less";
.clientsettings-view { .clientsettings-view {
background-color: @background-session; background-color: var(--session-bg-color);
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -58,12 +58,12 @@
} }
&.settings-error { &.settings-error {
color: @term-red; color: var(--view-error-color);
margin-top: 20px; margin-top: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: #200707; background-color: #200707;
border: 1px solid @term-red; border: 1px solid var(--view-error-color);
font-weight: bold; font-weight: bold;
.error-dismiss { .error-dismiss {
@ -119,37 +119,37 @@
} }
.tab-color-icon.color-default path { .tab-color-icon.color-default path {
fill: @tab-green; fill: var(--tab-green);
} }
.tab-color-icon.color-green path { .tab-color-icon.color-green path {
fill: @tab-green; fill: var(--tab-green);
} }
.tab-color-icon.color-orange path { .tab-color-icon.color-orange path {
fill: @tab-orange; fill: var(--tab-orange);
} }
.tab-color-icon.color-red path { .tab-color-icon.color-red path {
fill: @tab-red; fill: var(--tab-red);
} }
.tab-color-icon.color-yellow path { .tab-color-icon.color-yellow path {
fill: @tab-yellow; fill: var(--tab-yellow);
} }
.tab-color-icon.color-blue path { .tab-color-icon.color-blue path {
fill: @tab-blue; fill: var(--tab-blue);
} }
.tab-color-icon.color-mint path { .tab-color-icon.color-mint path {
fill: @tab-mint; fill: var(--tab-mint);
} }
.tab-color-icon.color-cyan path { .tab-color-icon.color-cyan path {
fill: @tab-cyan; fill: var(--tab-cyan);
} }
.tab-color-icon.color-white path { .tab-color-icon.color-white path {
fill: @tab-white; fill: var(--tab-white);
} }
.tab-color-icon.color-violet path { .tab-color-icon.color-violet path {
fill: @tab-violet; fill: var(--tab-violet);
} }
.tab-color-icon.color-pink path { .tab-color-icon.color-pink path {
fill: @tab-pink; fill: var(--tab-pink);
} }
.tab-colors, .tab-colors,
@ -189,7 +189,7 @@
.action-text { .action-text {
margin-left: 20px; margin-left: 20px;
color: @term-red; color: var(--view-error-color);
} }
.settings-share-link { .settings-share-link {

65
src/app/common/elements/button.less
View File

@ -15,35 +15,26 @@
border-radius: 6px; border-radius: 6px;
height: auto; height: auto;
&:hover {
color: @term-white;
}
i {
fill: rgba(255, 255, 255, 0.12);
}
&.primary { &.primary {
color: @term-green;
background: none; background: none;
i { i {
fill: @term-green; fill: var(--button-primary-bg-color);
} }
&.solid { &.solid {
color: @term-bright-white; color: var(--button-text-color);
background: @term-green; background: var(--button-primary-bg-color);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset; 0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
i { i {
fill: @term-white; fill: var(--app-text-color);
} }
} }
&.outlined { &.outlined {
border: 1px solid @term-green; border: 1px solid var(--button-primary-bg-color);
} }
&.ghost { &.ghost {
@ -51,68 +42,32 @@
} }
&:hover { &:hover {
color: @term-bright-white; color: var(--button-text-color);
} }
} }
&.secondary { &.secondary {
color: @term-white; color: var(--app-text-color);
background: none; background: none;
&.solid { &.solid {
background: rgba(255, 255, 255, 0.09); background: var(--button-secondary-bg-color);
box-shadow: none; box-shadow: none;
} }
&.outlined { &.outlined {
border: 1px solid rgba(255, 255, 255, 0.09); border: 1px solid var(--button-secondary-bg-color);
} }
&.ghost { &.ghost {
padding: 6px 10px; padding: 6px 10px;
i { i {
fill: @term-green; fill: var(--button-primary-bg-color);
} }
} }
} }
&.color-yellow {
&.solid {
border-color: @warning-yellow;
background-color: mix(@warning-yellow, @term-white, 50%);
box-shadow: none;
}
&.outlined {
color: @warning-yellow;
border-color: @warning-yellow;
&:hover {
color: @term-white;
border-color: @term-white;
}
}
&.ghost {
}
}
&.color-red {
&.solid {
border-color: @term-red;
background-color: mix(@term-red, @term-white, 50%);
box-shadow: none;
}
&.outlined {
color: @term-red;
border-color: @term-red;
}
&.ghost {
}
}
&.disabled { &.disabled {
opacity: 0.5; opacity: 0.5;
} }

8
src/app/common/elements/checkbox.less
View File

@ -12,7 +12,7 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
color: @term-bright-white; color: var(--checkbox-bg-color);
transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1); transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
} }
input[type="checkbox"] + label > span { input[type="checkbox"] + label > span {
@ -38,7 +38,7 @@
} }
input[type="checkbox"]:checked + label > span { input[type="checkbox"]:checked + label > span {
border: 10px solid @term-green; border: 10px solid var(--button-primary-bg-color);
} }
input[type="checkbox"]:checked + label > span:before { input[type="checkbox"]:checked + label > span:before {
content: ""; content: "";
@ -47,8 +47,8 @@
left: 3px; left: 3px;
width: 7px; width: 7px;
height: 12px; height: 12px;
border-right: 2px solid #fff; border-right: 2px solid var(--checkbox-check-color);
border-bottom: 2px solid #fff; border-bottom: 2px solid var(--checkbox-check-color);
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: 0% 100%; transform-origin: 0% 100%;
animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1); animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);

25
src/app/common/elements/cmdstrcode.less
View File

@ -38,7 +38,7 @@
} }
.code-div { .code-div {
background-color: @term-black; background-color: var(--cmdstrcode-bg-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
min-width: 100px; min-width: 100px;
@ -48,10 +48,10 @@
code { code {
flex-shrink: 0; flex-shrink: 0;
min-width: 100px; min-width: 100px;
color: @term-white; color: var(--cmdstrcode-text-color);
white-space: pre; white-space: pre;
padding: 2px 8px 2px 8px; padding: 2px 8px 2px 8px;
background-color: @term-black; background-color: var(--cmdstrcode-bg-color);
font-size: 1em; font-size: 1em;
font-family: @fixed-font; font-family: @fixed-font;
} }
@ -74,7 +74,7 @@
width: 20px; width: 20px;
&:hover { &:hover {
color: @term-white; color: var(--cmdstrcode-text-color);
} }
} }
} }
@ -83,20 +83,3 @@
visibility: visible !important; visibility: visible !important;
} }
} }
.copied-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: @term-white;
opacity: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
pointer-events: none;
animation-name: fade-in-out;
animation-duration: 0.3s;
}

6
src/app/common/elements/dropdown.less
View File

@ -21,7 +21,7 @@
top: 16px; top: 16px;
font-size: 12.5px; font-size: 12.5px;
transition: all 0.3s; transition: all 0.3s;
color: @term-white; color: var(--dropdown-text-color);
line-height: 10px; line-height: 10px;
&.float { &.float {
@ -94,11 +94,11 @@
} }
&-error { &-error {
border-color: @term-red; border-color: var(--dropdown-error-color);
} }
&:focus { &:focus {
border-color: @term-green; border-color: var(--dropdown-focus-color);
} }
} }

18
src/app/common/elements/markdown.less
View File

@ -1,7 +1,7 @@
@import "@/common/themes/themes.less"; @import "@/common/themes/themes.less";
.markdown { .markdown {
color: @term-white; color: var(--app-text-color);
font-family: @markdown-font; font-family: @markdown-font;
font-size: 14px; font-size: 14px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -11,8 +11,8 @@
} }
code { code {
background-color: @markdown-highlight; background-color: var(--markdown-bg-color);
color: @term-white; color: var(--app-text-color);
font-family: var(--termfontfamily); font-family: var(--termfontfamily);
border-radius: 4px; border-radius: 4px;
} }
@ -24,13 +24,13 @@
} }
.title { .title {
color: @term-white; color: var(--app-text-color);
margin-top: 16px; margin-top: 16px;
margin-bottom: 8px; margin-bottom: 8px;
} }
strong { strong {
color: @term-white; color: var(--app-text-color);
} }
a { a {
@ -39,7 +39,7 @@
table { table {
tr th { tr th {
color: @term-white; color: var(--app-text-color);
} }
} }
@ -57,19 +57,19 @@
blockquote { blockquote {
margin: 4px 10px 4px 10px; margin: 4px 10px 4px 10px;
border-radius: 3px; border-radius: 3px;
background-color: @markdown-highlight; background-color: var(--markdown-bg-color);
padding: 2px 4px 2px 6px; padding: 2px 4px 2px 6px;
} }
pre { pre {
background-color: @markdown-highlight; background-color: var(--markdown-bg-color);
margin: 4px 10px 4px 10px; margin: 4px 10px 4px 10px;
padding: 6px 6px 6px 10px; padding: 6px 6px 6px 10px;
border-radius: 4px; border-radius: 4px;
} }
pre.selected { pre.selected {
outline: 2px solid @term-green; outline: 2px solid var(--markdown-outline-color);
} }
.title.is-1 { .title.is-1 {

8
src/app/common/elements/status.less
View File

@ -13,18 +13,18 @@
} }
.dot.green { .dot.green {
background-color: @status-connected; background-color: var(--status-connected-color);
} }
.dot.red { .dot.red {
background-color: @status-error; background-color: var(--status-error-color);
} }
.dot.gray { .dot.gray {
background-color: @status-disconnected; background-color: var(--status-disconnected-color);
} }
.dot.yellow { .dot.yellow {
background-color: @status-connecting; background-color: var(--status-connecting-color);
} }
} }

8
src/app/common/elements/textfield.less
View File

@ -18,7 +18,7 @@
} }
&.focused { &.focused {
border-color: @term-green; border-color: var(--textfield-focused-border-color);
} }
&.disabled { &.disabled {
@ -26,7 +26,7 @@
} }
&.error { &.error {
border-color: @term-red; border-color: var(--textfield-error-border-color);
} }
&-inner { &-inner {
@ -42,7 +42,7 @@
top: 16px; top: 16px;
font-size: 12.5px; font-size: 12.5px;
transition: all 0.3s; transition: all 0.3s;
color: @text-secondary; color: var(--textfield-label-color);
line-height: 10px; line-height: 10px;
&.float { &.float {
@ -63,7 +63,7 @@
font-size: 16px; font-size: 16px;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
color: @term-bright-white; color: var(--textfield-text-color);
line-height: 20px; line-height: 20px;
&.offset-left { &.offset-left {

2
src/app/common/elements/textfield.tsx
View File

@ -17,6 +17,7 @@ interface TextFieldProps {
value?: string; value?: string;
className?: string; className?: string;
onChange?: (value: string) => void; onChange?: (value: string) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
placeholder?: string; placeholder?: string;
defaultValue?: string; defaultValue?: string;
decoration?: TextFieldDecorationProps; decoration?: TextFieldDecorationProps;
@ -157,6 +158,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
onChange={this.handleInputChange} onChange={this.handleInputChange}
onFocus={this.handleFocus} onFocus={this.handleFocus}
onBlur={this.handleBlur} onBlur={this.handleBlur}
onKeyDown={this.props.onKeyDown}
placeholder={placeholder} placeholder={placeholder}
maxLength={maxLength} maxLength={maxLength}
autoFocus={autoFocus} autoFocus={autoFocus}

6
src/app/common/elements/toggle.less
View File

@ -20,7 +20,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #333; background-color: var(--toggle-bg-color);
transition: 0.5s; transition: 0.5s;
border-radius: 33px; border-radius: 33px;
} }
@ -32,13 +32,13 @@
width: 18px; width: 18px;
left: 2px; left: 2px;
bottom: 2px; bottom: 2px;
background-color: @term-white; background-color: var(--toggle-thumb-color);
transition: 0.5s; transition: 0.5s;
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked + .slider {
background-color: @term-green; background-color: var(--toggle-checked-bg-color);
} }
input:checked + .slider:before { input:checked + .slider:before {

2
src/app/common/elements/tooltip.less
View File

@ -17,7 +17,7 @@
i { i {
display: inline; display: inline;
font-size: 13px; font-size: 13px;
fill: @base-color; fill: var(--checkbox-text-color);
padding-top: 0.2em; padding-top: 0.2em;
} }
} }

8
src/app/common/icons/icons.less
View File

@ -75,18 +75,18 @@ The following accounts for a debounce in the status indicator. We will only disp
visibility: hidden; visibility: hidden;
} }
.spin #spinner { .spin #spinner {
stroke: @term-white; stroke: var(--status-indicator-color);
} }
&.error #indicator { &.error #indicator {
visibility: visible; visibility: visible;
fill: @term-red; fill: var(--status-indicator-error);
} }
&.success #indicator { &.success #indicator {
visibility: visible; visibility: visible;
fill: @term-green; fill: var(--status-indicator-success);
} }
&.output #indicator { &.output #indicator {
visibility: visible; visibility: visible;
fill: @term-white; fill: var(--status-indicator-color);
} }
} }

12
src/app/common/modals/about.less
View File

@ -38,12 +38,12 @@
line-height: 20px; line-height: 20px;
div:first-child { div:first-child {
color: @term-bright-white; color: var(--app-text-primary-color);
font-size: 14.5px; font-size: 14.5px;
} }
div:last-child { div:last-child {
color: @term-white; color: var(--app-text-color);
text-align: left; text-align: left;
} }
} }
@ -61,7 +61,7 @@
} }
div:first-child + div { div:first-child + div {
color: @term-white; color: var(--app-text-color);
} }
} }
@ -72,7 +72,7 @@
margin-bottom: 5px; margin-bottom: 5px;
i { i {
color: @term-green; color: var(--status-updated-color);
} }
} }
} }
@ -80,7 +80,7 @@
.status.outdated { .status.outdated {
div { div {
i { i {
color: @term-yellow; color: var(--status-outdated-color);
} }
} }
@ -107,7 +107,7 @@
.about-section:last-child { .about-section:last-child {
margin-bottom: 24px; margin-bottom: 24px;
color: @term-white; color: var(--app-text-color);
} }
} }
} }

12
src/app/common/modals/disconnected.less
View File

@ -8,7 +8,7 @@
.modal-content { .modal-content {
footer { footer {
.footer-text-link { .footer-text-link {
color: @term-white; color: var(--app-text-color);
cursor: pointer; cursor: pointer;
} }
} }
@ -31,17 +31,11 @@
} }
pre { pre {
color: @term-white; color: var(--app-text-color);
background-color: @term-black; background-color: var(--pre-bg-color);
} }
} }
} }
} }
.wave-modal-footer {
button:first-child {
color: @term-green;
}
}
} }
} }

2
src/app/common/modals/editremoteconn.less
View File

@ -34,7 +34,7 @@
gap: 12px; gap: 12px;
.name { .name {
color: @term-bright-white; color: var(--app-text-primary-color);
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;

2
src/app/common/modals/linesettings.less
View File

@ -16,7 +16,7 @@
width: 100%; width: 100%;
.settings-input .hotkey { .settings-input .hotkey {
color: @text-secondary; color: var(--hotkey-text-color);
} }
} }
} }

6
src/app/common/modals/tos.less
View File

@ -25,7 +25,7 @@
} }
.modal-subtitle { .modal-subtitle {
color: @term-white; color: var(--app-text-color);
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -56,13 +56,13 @@
flex: 1 0 0; flex: 1 0 0;
.item-title { .item-title {
color: @term-bright-white; color: var(--app-text-primary-color);
font-style: normal; font-style: normal;
line-height: 20px; line-height: 20px;
} }
.item-text { .item-text {
color: @term-white; color: var(--app-text-color);
font-style: normal; font-style: normal;
line-height: 20px; line-height: 20px;
} }

4
src/app/common/modals/viewremoteconndetail.less
View File

@ -34,7 +34,7 @@
} }
.rconndetail-name { .rconndetail-name {
color: @term-bright-white; color: var(--app-text-primary-color);
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
@ -73,7 +73,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: @term-white; color: var(--app-text-color);
} }
} }

28
src/app/common/prompt/prompt.less
View File

@ -11,7 +11,7 @@
vertical-align: middle; vertical-align: middle;
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
fill: @wave-green; fill: var(--app-accent-color);
} }
i { i {
@ -19,57 +19,57 @@
} }
.term-prompt-branch { .term-prompt-branch {
color: @term-white; color: var(--prompt-white);
} }
.term-prompt-python { .term-prompt-python {
color: @term-bright-magenta; color: var(--prompt-bright-magenta);
} }
.term-prompt-remote { .term-prompt-remote {
} }
.term-prompt-remote { .term-prompt-remote {
color: @term-bright-green; color: var(--prompt-bright-green);
&.color-green { &.color-green {
color: @term-bright-green; color: var(--prompt-bright-green);
} }
&.color-red { &.color-red {
color: @term-bright-red; color: var(--prompt-bright-red);
} }
&.color-blue { &.color-blue {
color: @term-bright-blue; color: var(--prompt-bright-blue);
} }
&.color-yellow { &.color-yellow {
color: @term-bright-yellow; color: var(--prompt-bright-yellow);
} }
&.color-magenta { &.color-magenta {
color: @term-bright-magenta; color: var(--prompt-bright-magenta);
} }
&.color-cyan { &.color-cyan {
color: @term-bright-cyan; color: var(--prompt-bright-cyan);
} }
&.color-white { &.color-white {
color: @term-bright-white; color: var(--prompt-bright-white);
} }
&.color-orange { &.color-orange {
color: @tab-orange; color: var(--prompt-orange);
} }
} }
.term-prompt-cwd { .term-prompt-cwd {
color: @term-bright-green; color: var(--prompt-bright-green);
} }
.term-prompt-end { .term-prompt-end {
color: @term-bright-green; color: var(--prompt-bright-green);
} }
} }

4
src/app/connections/connections.less
View File

@ -39,13 +39,13 @@
th { th {
height: 32px; height: 32px;
padding: 5px 15px 5px 10px; padding: 5px 15px 5px 10px;
color: @text-secondary; color: var(--view-text-color);
} }
} }
tr.connections-item { tr.connections-item {
border-bottom: 1px solid rgba(241, 246, 243, 0.15); border-bottom: 1px solid rgba(241, 246, 243, 0.15);
color: @text-secondary; color: var(--view-text-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {

39
src/app/history/history.less
View File

@ -1,12 +1,12 @@
@import "@/common/themes/themes.less"; @import "@/common/themes/themes.less";
.history-view { .history-view {
background-color: @background-session; background-color: var(--session-bg-color);
.icon { .icon {
width: 1.3em !important; width: 1.3em !important;
height: 1.3em !important; height: 1.3em !important;
fill: @base-color; fill: var(--app-text-color);
} }
.history-checkbox { .history-checkbox {
@ -51,7 +51,7 @@
svg { svg {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
fill: @base-color; fill: var(--app-text-color);
} }
} }
@ -63,15 +63,6 @@
font-weight: bold; font-weight: bold;
font-size: 1.5em; font-size: 1.5em;
} }
input {
border: none;
border-radius: 4px;
font-size: 1em;
padding: 0.5em 1em;
background-color: @background-session-components;
color: @base-color;
}
} }
.history-search { .history-search {
@ -99,7 +90,7 @@
.label { .label {
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
color: @base-color; color: var(--app-text-color);
} }
.icon { .icon {
vertical-align: middle; vertical-align: middle;
@ -110,7 +101,7 @@
.session-dropdown, .session-dropdown,
.remote-dropdown { .remote-dropdown {
.dropdown-item { .dropdown-item {
color: @term-white; color: var(--app-text-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #666; background-color: #666;
@ -130,7 +121,7 @@
.search-checkbox { .search-checkbox {
margin-left: 15px; margin-left: 15px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
background: @base-border; background: var(--button-secondary-bg-color);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -163,7 +154,7 @@
.reset-button { .reset-button {
margin-left: 1em; margin-left: 1em;
color: @base-color; color: var(--app-text-color);
line-height: 1.75em; line-height: 1.75em;
} }
} }
@ -191,7 +182,7 @@
.trash-icon { .trash-icon {
width: 12px; width: 12px;
height: 12px; height: 12px;
fill: @text-secondary; fill: var(--app-text-color);
} }
.control-checkbox { .control-checkbox {
@ -216,11 +207,11 @@
} }
&:hover { &:hover {
color: @term-white; color: var(--app-text-color);
} }
&.delete-button.is-active { &.delete-button.is-active {
color: @term-bright-red !important; color: var(--view-error-color) !important;
} }
} }
@ -273,7 +264,7 @@
.line-container { .line-container {
padding: 0px 10px 10px 10px; padding: 0px 10px 10px 10px;
overflow-x: auto; overflow-x: auto;
background-color: @term-black; background-color: var(--prompt-black);
} }
.line-context { .line-context {
@ -285,10 +276,10 @@
.vic-btn { .vic-btn {
cursor: pointer; cursor: pointer;
color: @term-white; color: var(--app-text-color);
&:hover { &:hover {
color: @term-white; color: var(--app-text-color);
} }
} }
} }
@ -312,7 +303,7 @@
display: flex; display: flex;
border-bottom: 1px solid rgba(250, 250, 250, 0.1); border-bottom: 1px solid rgba(250, 250, 250, 0.1);
align-items: center; align-items: center;
color: @text-secondary; color: var(--app-text-color);
&.is-selected { &.is-selected {
background-color: #222; background-color: #222;
@ -373,7 +364,7 @@
} }
td.cmdstr { td.cmdstr {
color: @term-white; color: var(--app-text-color);
flex: 1 0 0; flex: 1 0 0;
border-radius: 3px; border-radius: 3px;
white-space: pre; white-space: pre;

25
src/app/history/history.tsx
View File

@ -13,8 +13,8 @@ import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat"; import localizedFormat from "dayjs/plugin/localizedFormat";
import customParseFormat from "dayjs/plugin/customParseFormat"; import customParseFormat from "dayjs/plugin/customParseFormat";
import { Line } from "@/app/line/linecomps"; import { Line } from "@/app/line/linecomps";
import { CmdStrCode } from "@/common/elements";
import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil"; import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
import { TextField } from "@/elements";
import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg"; import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg"; import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg";
@ -194,9 +194,9 @@ class HistoryView extends React.Component<{}, {}> {
} }
@boundMethod @boundMethod
changeSearchText(e: any) { changeSearchText(val: string) {
mobx.action(() => { mobx.action(() => {
GlobalModel.historyViewModel.searchText.set(e.target.value); GlobalModel.historyViewModel.searchText.set(val);
})(); })();
} }
@ -433,19 +433,12 @@ class HistoryView extends React.Component<{}, {}> {
<div className="history-title">History</div> <div className="history-title">History</div>
<div className="history-search"> <div className="history-search">
<div className="main-search field"> <div className="main-search field">
<p className="control has-icons-left"> <TextField
<input placeholder="Exact String Search"
className="input" onChange={this.changeSearchText}
type="text" onKeyDown={this.searchKeyDown}
placeholder="Exact String Search" decoration={{ startDecoration: <SearchIcon className="icon" /> }}
value={hvm.searchText.get()} />
onChange={this.changeSearchText}
onKeyDown={this.searchKeyDown}
/>
<span className="is-small is-left">
<SearchIcon className="icon" />
</span>
</p>
</div> </div>
<div className="advanced-search"> <div className="advanced-search">
<div <div

231
src/app/root.less
View File

@ -10,103 +10,123 @@
--termlineheight: 15px; --termlineheight: 15px;
--termpad: 7px; // padding value (scaled to termfontsize) --termpad: 7px; // padding value (scaled to termfontsize)
// primary // global colors
--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-accent-color: rgb(88, 193, 66);
--app-error-color: rgb(204, 0, 0); --app-error-color: rgb(204, 0, 0);
--app-warning-color: rgb(255, 165, 0); --app-warning-color: rgb(255, 165, 0);
--app-scrollbar-thumb-color: rgb(134, 134, 134); --app-text-color: rgb(211, 215, 207);
--app-text-color: rgb(236, 238, 236); --app-text-primary-color: rgb(255, 255, 255);
--app-border-color: #333; --app-text-secondary-color: rgb(195, 200, 194);
--app-border: rgba(241, 246, 243, 0.08); --app-border-color: rgb(51, 51, 51);
--app-bg-color: rgba(21, 23, 21, 1);
--app-bg-color-dev: rgba(21, 23, 48, 1);
--sidebar-dev-bg-color: #151730; // global generic colors
--sidebar-separator-color: rgba(241, 246, 243, 0.08); --app-black: rgb(0, 0, 0);
--sidebar-workspace-active-color: rgba(241, 246, 243, 0.08);
--sidebar-separator-color: rgba(241, 246, 243, 0.08);
--sidebar-settings-color: #ffffff;
--line-sidebar-message-text: #c4a000; // scrollbar colors
--scrollbar-background-color: rgba(21, 23, 21, 1);
--scrollbar-thumb-color: rgb(134, 134, 134);
// code color
--pre-bg-color: rgb(0, 0, 0);
// tab colors
--tab-red: rgb(229, 77, 46);
--tab-orange: rgb(239, 113, 59);
--tab-yellow: rgb(224, 185, 86);
--tab-green: rgb(88, 193, 66);
--tab-mint: rgb(75, 255, 169);
--tab-cyan: rgb(75, 223, 255);
--tab-blue: rgb(57, 113, 255);
--tab-violet: rgb(186, 118, 255);
--tab-pink: rgb(224, 86, 119);
--tab-white: rgb(255, 255, 255);
// prompt colors
--prompt-black: rgb(0, 0, 0);
--prompt-white: rgb(211, 215, 207);
--prompt-orange: rgb(239, 113, 59);
--prompt-blue: rgb(52, 101, 164);
--prompt-bright-black: rgb(85, 87, 83);
--prompt-bright-red: rgb(239, 41, 41);
--prompt-bright-green: rgb(88, 193, 66);
--prompt-bright-yellow: rgb(252, 233, 79);
--prompt-bright-blue: rgb(50, 175, 255);
--prompt-bright-magenta: rgb(173, 127, 168);
--prompt-bright-cyan: rgb(52, 226, 226);
--prompt-bright-white: rgb(255, 255, 255);
// button colors
--button-text-color: rgb(255, 255, 255);
--button-primary-bg-color: rgb(78, 154, 6);
--button-secondary-bg-color: rgba(255, 255, 255, 0.09);
--button-warning-bg-color: rgb(204, 0, 0);
// input colors
--checkbox-text-color: rgb(255, 255, 255);
--checkbox-bg-color: rgb(78, 154, 6);
--checkbox-check-color: rgb(255, 255, 255);
// dropdown colors
--dropdown-text-color: rgb(211, 215, 207);
--dropdown-error-color: rgb(229, 77, 46);
--dropdown-focus-color: rgb(78, 154, 6);
// textfield colors
--textfield-focused-border-color: rgb(78, 154, 6);
--textfield-error-border-color: rgb(229, 77, 46);
--textfield-label-color: rgb(195, 200, 194);
--textfield-text-color: rgb(255, 255, 255);
// toggle colors
--toggle-bg-color: rgb(51, 51, 51);
--toggle-thumb-color: rgb(211, 215, 207);
--toggle-checked-bg-color: rgb(78, 154, 6);
// cmdstrcode colors
--cmdstrcode-bg-color: rgb(0, 0, 0);
--cmdstrcode-text-color: rgb(211, 215, 207);
// markdown colors
--markdown-bg-color: rgb(35, 35, 35);
--markdown-outline-color: rgb(78, 154, 6);
// status(remote) colors
// todo: all status colors must be unified
--status-connected-color: rgb(70, 167, 88);
--status-connecting-color: rgb(245, 217, 10);
--status-error-color: rgb(229, 77, 46);
--status-disconnected-color: rgb(195, 200, 194);
// status indicator colors
// todo: all status colors must be unified
--status-indicator-color: rgb(211, 215, 207);
--status-indicator-error: rgb(204, 0, 0);
--status-indicator-success: rgb(78, 154, 6);
// status(version) colors
// todo: all status colors must be unified
--status-outdated-color: rgb(196, 160, 0);
--status-updated-color: rgb(78, 154, 6);
// term status colors
// todo: all status colors must be unified
--term-error-color: rgb(204, 0, 0);
--term-warning-color: rgb(196, 160, 0);
// hotkey colors
--hotkey-text-color: rgb(195, 200, 194);
// sidebar colors
--sidebar-dev-bg-color: rgb(21, 23, 48);
--sidebar-settings-color: rgb(255, 255, 255);
// line colors
--line-sidebar-message-color: rgb(196, 160, 0); --line-sidebar-message-color: rgb(196, 160, 0);
--line-background: rgba(21, 23, 21, 1); --line-background: rgba(21, 23, 21, 1);
--line-avatar-color: #eceeec; --line-avatar-color: #eceeec;
--line-text-color: #f2f4f2; --line-text-color: rgb(211, 215, 207);
--line-svg-fill-color: rgb(150, 152, 150); --line-svg-fill-color: rgb(150, 152, 150);
--line-svg-hover-fill-color: #eceeec; --line-svg-hover-fill-color: #eceeec;
--line-selected-border-color: rgb(193, 195, 193); --line-selected-border-color: rgb(193, 195, 193);
@ -121,7 +141,7 @@
--line-selected-error-border-color: rgba(204, 0, 0, 0.8); --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
--line-selected-error-bg-color: rgb(19, 4, 3); --line-selected-error-bg-color: rgb(19, 4, 3);
--line-error-bg-color: rgba(200, 0, 0, 0.1); --line-error-bg-color: rgba(200, 0, 0, 0.1);
--line-error-border-left-color: --line-selected-error-border-color; --line-error-border-left-color: rgba(204, 0, 0, 0.8);
--line-simple-text-color: rgba(236, 238, 236, 0.6); --line-simple-text-color: rgba(236, 238, 236, 0.6);
--line-meta-text-color: rgb(139, 145, 138); --line-meta-text-color: rgb(139, 145, 138);
--line-meta-user-color: rgba(140, 184, 232); --line-meta-user-color: rgba(140, 184, 232);
@ -130,4 +150,35 @@
--line-status-success-fill: rgb(88, 193, 66); --line-status-success-fill: rgb(88, 193, 66);
--line-status-error-fill: #cc0000; --line-status-error-fill: #cc0000;
--line-status-warning-fill: #ffa500; --line-status-warning-fill: #ffa500;
// view colors
// todo: bookmarks is a view, colors must be unified with --view* colors
--bookmarks-text-color: rgb(211, 215, 207);
--bookmarks-textarea-bg-color: rgb(0, 0, 0);
--bookmarks-disabled-text-color: rgb(173, 173, 173);
--bookmarks-control-hover-color: rgb(255, 255, 255);
// view colors
--view-error-color: rgb(204, 0, 0);
--view-text-color: rgb(195, 200, 194);
// session colors
--session-bg-color: rgba(13, 13, 13, 0.85);
// cmdinput colors
--cmdinput-textarea-bg-color: rgb(27, 12, 12);
--cmdinput-text-error-color: rgb(239, 41, 41);
--cmdinput-history-title-color: rgb(114, 159, 207);
--cmdinput-remote-title-color: rgb(6, 152, 154);
--cmdinput-history-item-error-color: rgb(220, 119, 118);
--cmdinput-history-item-selected-error-color: rgb(247, 148, 148);
--cmdinput-remote-field-control-color: rgb(0, 0, 0);
--cmdinput-warning-color: rgb(255, 165, 0);
--cmdinput-button-bg-color: rgb(88, 193, 66);
--cmdinput-comment-button-bg-color: rgb(57, 113, 255);
--cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
--cmdinput-history-bg-color: rgb(21, 23, 21, 1);
// screen view color
--screen-view-text-caption-color: rgb(139, 145, 138);
} }

4
src/app/sidebar/sidebar.less
View File

@ -11,8 +11,8 @@
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 20; z-index: 20;
border-radius: 10px; border-radius: 10px;
border-left: 1px solid var(--primary-border-color); border-left: 1px solid var(--app-border-color);
border-bottom: 1px solid var(--primary-border-color); border-bottom: 1px solid var(--app-border-color);
.title-bar-drag { .title-bar-drag {
-webkit-app-region: drag; -webkit-app-region: drag;

85
src/app/workspace/cmdinput/cmdinput.less
View File

@ -9,7 +9,7 @@
width: 100%; width: 100%;
padding: var(--termfontsize); padding: var(--termfontsize);
z-index: 100; z-index: 100;
border-top: 1px solid @thin-border-color; border-top: 1px solid var(--app-border-color);
&.active { &.active {
} }
@ -40,7 +40,7 @@
.remote-status-warning { .remote-status-warning {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: @term-yellow; color: var(--cmdinput-warning-color);
align-items: center; align-items: center;
.button { .button {
@ -52,7 +52,7 @@
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
color: @term-white; color: var(--app-text-color);
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
@ -82,11 +82,11 @@
height: 1em; height: 1em;
margin: 0 0.5em; margin: 0 0.5em;
vertical-align: text-top; vertical-align: text-top;
fill: @base-color; fill: var(--app-text-color);
} }
.warning { .warning {
fill: @warning-yellow; fill: var(--cmdinput-warning-color);
} }
} }
@ -120,17 +120,17 @@
bottom: calc(-13px + var(--termpad)); bottom: calc(-13px + var(--termpad));
right: 0px; right: 0px;
font-size: 10px; font-size: 10px;
color: @text-secondary; color: var(--app-text-secondary-color);
line-height: 1; line-height: 1;
padding: 0px 8px 3px 8px; padding: 0px 8px 3px 8px;
background-color: @textarea-background; background-color: var(--cmdinput-textarea-bg);
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
} }
} }
textarea { textarea {
color: @term-bright-white; color: var(--app-text-primary-color);
background-color: @textarea-background; background-color: var(--cmdinput-textarea-bg);
padding: var(--termpad); padding: var(--termpad);
resize: none; resize: none;
overflow: auto; overflow: auto;
@ -158,17 +158,17 @@
.cmd-quick-context .button { .cmd-quick-context .button {
background-color: #000 !important; background-color: #000 !important;
color: @term-white; color: var(--app-text-color);
} }
&.inputmode-global .cmd-quick-context .button { &.inputmode-global .cmd-quick-context .button {
color: @term-black; color: var(--app-black);
background-color: @tab-green !important; background-color: var(--cmdinput-button-bg-color) !important;
} }
&.inputmode-comment .cmd-quick-context .button { &.inputmode-comment .cmd-quick-context .button {
color: @term-black; color: var(--app-black);
background-color: @tab-blue !important; background-color: var(--cmdinput-comment-button-bg-color) !important;
} }
.cmd-exec { .cmd-exec {
@ -181,11 +181,11 @@
height: 2.5em; height: 2.5em;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
fill: @wave-green; fill: var(--app-accent-color);
padding: 0.25em; padding: 0.25em;
} }
.icon.disabled { .icon.disabled {
fill: @disabled-background; fill: var(--cmdinput-disabled-icon-color);
cursor: default; cursor: default;
} }
.cmd-btn { .cmd-btn {
@ -223,8 +223,8 @@
} }
.chat-textarea { .chat-textarea {
color: @term-bright-white; color: var(--app-text-primary-color);
background-color: @textarea-background; background-color: var(--cmdinput-textarea-bg);
padding: 0.5em; padding: 0.5em;
resize: none; resize: none;
overflow: auto; overflow: auto;
@ -250,7 +250,7 @@
} }
.chat-msg-assistant { .chat-msg-assistant {
color: @term-white; color: var(--app-text-color);
} }
.chat-msg-user { .chat-msg-user {
@ -262,7 +262,7 @@
} }
.chat-msg-error { .chat-msg-error {
color: @term-bright-red; color: var(--cmdinput-text-error);
font-family: @markdown-font; font-family: @markdown-font;
font-size: 14px; font-size: 14px;
} }
@ -273,7 +273,7 @@
} }
.cmd-history { .cmd-history {
color: @term-white; color: var(--app-text-color);
margin-bottom: 5px; margin-bottom: 5px;
overflow: auto; overflow: auto;
flex-shrink: 1; flex-shrink: 1;
@ -283,8 +283,8 @@
z-index: 102; z-index: 102;
top: 5px; top: 5px;
left: 20px; left: 20px;
background-color: @background-session-components-solid; background-color: var(--cmdinput-history-bg-color);
color: @soft-blue; color: var(--cmdinput-history-title-color);
padding-bottom: 4px; padding-bottom: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -311,7 +311,7 @@
.history-items { .history-items {
margin-top: 24px; margin-top: 24px;
color: @term-white; color: var(--app-text-color);
padding-bottom: 6px; padding-bottom: 6px;
@ -320,7 +320,7 @@
} }
.history-item.history-haderror { .history-item.history-haderror {
color: mix(@term-red, @term-white, 50%); color: var(--cmdinput-history-item-error-color);
} }
.history-line:first-child { .history-line:first-child {
@ -338,12 +338,12 @@
.history-item.is-selected { .history-item.is-selected {
font-weight: bold; font-weight: bold;
color: @term-bright-white; color: var(--app-text-primary-color);
background-color: #444; background-color: #444;
} }
.history-item.is-selected.history-haderror { .history-item.is-selected.history-haderror {
color: mix(@term-bright-red, @term-bright-white, 50%); color: var(--cmdinput-history-item-selected-error-color);
} }
} }
} }
@ -354,21 +354,16 @@
margin-bottom: var(--termpad); margin-bottom: var(--termpad);
.info-msg { .info-msg {
color: @soft-blue; color: var(--cmdinput-history-title-color);
padding-bottom: 2px; padding-bottom: 2px;
a { a {
color: @term-blue; color: var(--prompt-blue);
} }
} }
.info-title {
color: @soft-blue;
padding-bottom: 2px;
}
.info-lines { .info-lines {
color: @term-white; color: var(--app-text-color);
white-space: pre; white-space: pre;
padding-bottom: 6px; padding-bottom: 6px;
} }
@ -384,7 +379,7 @@
.info-comp { .info-comp {
min-width: 200px; min-width: 200px;
color: @term-white; color: var(--app-text-color);
margin-right: 10px; margin-right: 10px;
&.has-space { &.has-space {
@ -393,19 +388,19 @@
} }
.metacmd-comp { .metacmd-comp {
color: @term-bright-green; color: var(--prompt-bright-green);
} }
} }
.info-error { .info-error {
color: @term-red; color: var(--cmdinput-text-error-color);
padding-bottom: 2px; padding-bottom: 2px;
} }
.info-remote-showall { .info-remote-showall {
table.remotes-table { table.remotes-table {
th { th {
color: @term-white; color: var(--app-text-color);
font-weight: bold; font-weight: bold;
} }
@ -429,7 +424,7 @@
.info-remote-title { .info-remote-title {
font-weight: bold; font-weight: bold;
color: @term-cyan; color: var(--cmdinput-remote-title-color);
} }
.info-error, .info-error,
@ -464,7 +459,7 @@
white-space: pre; white-space: pre;
width: 140px; width: 140px;
font-weight: bold; font-weight: bold;
color: @term-bright-white; color: var(--app-text-primary-color);
} }
.undo-icon { .undo-icon {
@ -478,8 +473,8 @@
input[type="text"], input[type="text"],
input[type="number"], input[type="number"],
input[type="password"] { input[type="password"] {
background-color: @term-black; background-color: var(--app-black);
color: @term-white; color: var(--app-text-color);
width: 200px; width: 200px;
} }
} }
@ -494,8 +489,8 @@
&.select-input { &.select-input {
select { select {
width: 200px; width: 200px;
background-color: @term-black; background-color: var(--app-black);
color: @term-white; color: var(--app-text-color);
} }
} }
} }

28
src/app/workspace/screen/screenview.less
View File

@ -4,7 +4,7 @@
.screen-view { .screen-view {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
border-top: 1px solid @thin-border-color; border-top: 1px solid var(--app-border-color);
} }
.screen-sidebar, .screen-sidebar,
@ -21,7 +21,7 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
border-left: 1px solid @thin-border-color; border-left: 1px solid var(--app-border-color);
.sidebar-header { .sidebar-header {
/* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */ /* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
@ -29,12 +29,12 @@
flex-direction: row; flex-direction: row;
padding: 3px 0; padding: 3px 0;
margin: 0; margin: 0;
border-bottom: 1px solid @thin-border-color; border-bottom: 1px solid var(--app-border-color);
font-size: var(--termfontsize); font-size: var(--termfontsize);
font-family: var(--termfontfamily); font-family: var(--termfontfamily);
font-weight: normal; font-weight: normal;
line-height: var(--termlineheight); line-height: var(--termlineheight);
color: @text-caption; color: var(--screen-view-text-caption-color);
&:hover { &:hover {
color: white; color: white;
@ -99,13 +99,13 @@
top: 0; top: 0;
right: 0; right: 0;
background-color: rgba(78, 154, 6, 0.65); background-color: rgba(78, 154, 6, 0.65);
color: @term-black; color: var(--app-black);
padding: 2px 8px 2px 4px; padding: 2px 8px 2px 4px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
z-index: 10; z-index: 10;
&.is-active { &.is-active {
color: @term-white; color: var(--app-text-color);
} }
.render-mode { .render-mode {
@ -113,10 +113,10 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: @term-white; color: var(--app-text-color);
&:hover { &:hover {
color: @term-white; color: var(--app-text-color);
} }
} }
} }
@ -142,7 +142,7 @@
} }
.share-tag { .share-tag {
color: @term-white; color: var(--app-text-color);
position: absolute; position: absolute;
top: 0; top: 0;
left: 40%; left: 40%;
@ -192,7 +192,7 @@
padding: 1.5em 1em; padding: 1.5em 1em;
margin-top: 0; margin-top: 0;
line-height: 2.5em; line-height: 2.5em;
border-top: 1px solid @base-border; border-top: 1px solid var(--app-border);
&:first-child { &:first-child {
border-top: none; border-top: none;
} }
@ -240,7 +240,7 @@
} }
.cr-help-text { .cr-help-text {
color: @text-caption; color: var(--screen-view-text-caption-color);
margin-left: 5px; margin-left: 5px;
} }
@ -328,17 +328,17 @@
height: 16px; height: 16px;
path { path {
fill: @text-primary; fill: var(--app-text-primary-color);
} }
} }
} }
.text-standard { .text-standard {
color: @text-secondary; color: var(--app-text-secondary-color);
} }
.text-caption { .text-caption {
color: @text-caption; color: var(--screen-view-text-caption-color);
} }
.ellipsis { .ellipsis {

8
src/app/workspace/workspace.less
View File

@ -10,9 +10,9 @@
} }
border-radius: 10px; border-radius: 10px;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
border-bottom: 1px solid @thin-border-color; border-bottom: 1px solid var(--app-border-color);
border-right: 1px solid @thin-border-color; border-right: 1px solid var(--app-border-color);
border-left: 1px solid @thin-border-color; border-left: 1px solid var(--app-border-color);
background-color: black; background-color: black;
.center-message { .center-message {
@ -21,6 +21,6 @@
justify-content: center; justify-content: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
color: @text-secondary; color: var(--app-text-secondary-color);
} }
} }