Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

more on conversion to css vars (#345)

Browse Source
This commit is contained in:
Red J Adaya 2024-02-28 01:09:03 +08:00 committed by GitHub
parent 8a0df07b47
commit 3612bc3ae8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 89 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/app.less
View File

@ -1,13 +1,12 @@
// Copyright 2024, Command Line Inc. // Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import "./common/themes/themes.less";
@import "./root.less"; @import "./root.less";
html, html,
body { body {
overflow: hidden; overflow: hidden;
font-family: @fixed-font; font-family: var(--fixed-font);
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
@ -27,7 +26,7 @@ body .sidebar {
textarea { textarea {
overflow: hidden; overflow: hidden;
font-family: @fixed-font; font-family: var(--fixed-font);
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
@ -40,7 +39,7 @@ textarea {
font-size: 12.5px; font-size: 12.5px;
font-weight: 300; font-weight: 300;
line-height: 20px; line-height: 20px;
font-family: @text-s1-font; font-family: var(--text-s1-font);
.icon { .icon {
width: 16px; width: 16px;
@ -52,7 +51,7 @@ textarea {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
font-family: @text-s1-font; font-family: var(--text-s1-font);
color: var(--app-text-color); color: var(--app-text-color);
} }
@ -60,7 +59,7 @@ textarea {
font-size: 12.5px; font-size: 12.5px;
font-weight: 300; font-weight: 300;
line-height: 20px; line-height: 20px;
font-family: @text-s1-font; font-family: var(--text-s1-font);
.icon { .icon {
width: 16px; width: 16px;
@ -69,14 +68,14 @@ textarea {
} }
.text-secondary { .text-secondary {
font-family: @fixed-font; font-family: var(--fixed-font);
font-size: 11px; font-size: 11px;
font-weight: 300; font-weight: 300;
line-height: 16px; line-height: 16px;
} }
.text-caption { .text-caption {
font-family: @fixed-font; font-family: var(--fixed-font);
font-size: 10px; font-size: 10px;
font-weight: 300; font-weight: 300;
line-height: 14px; line-height: 14px;
@ -181,18 +180,19 @@ svg.icon {
.dropdown, .dropdown,
.button { .button {
display: inline-block; display: inline-block;
border: 1px solid @base-border !important; border: 1px solid var(--button-secondary-bg-color) !important;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
background-color: @button-background !important; background-color: var(--button-secondary-bg-color) !important;
color: var(--app-accent-color); color: var(--app-accent-color);
.hoverEffect; .hoverEffect;
&:hover { &:hover {
color: var(--app-accent-color); color: var(--app-accent-color);
} }
&.disabled { &.disabled {
color: fade(@disabled-color, 60%); color: var(--app-text-color);
background: @button-disabled-background; background: var(--button-secondary-bg-color);
opacity: 0.5;
cursor: initial; cursor: initial;
&:hover { &:hover {
box-shadow: none; box-shadow: none;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.clientsettings-view { .clientsettings-view {
.content { .content {
padding: 0 18px 0 30px; padding: 0 18px 0 30px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-button { .wave-button {
background: none; background: none;
color: inherit; color: inherit;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.checkbox { .checkbox {
display: flex; display: flex;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.cmdstr-code { .cmdstr-code {
position: relative; position: relative;
display: flex; display: flex;
@ -53,7 +51,7 @@
padding: 2px 8px 2px 8px; padding: 2px 8px 2px 8px;
background-color: var(--cmdstrcode-bg-color); background-color: var(--cmdstrcode-bg-color);
font-size: 1em; font-size: 1em;
font-family: @fixed-font; font-family: var(--termfontfamily);
} }
} }

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-dropdown { .wave-dropdown {
position: relative; position: relative;
height: 44px; height: 44px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.inline-edit { .inline-edit {
.icon { .icon {
display: inline; display: inline;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-input-decoration { .wave-input-decoration {
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -1,8 +1,6 @@
@import "@/common/themes/themes.less";
.markdown { .markdown {
color: var(--app-text-color); color: var(--app-text-color);
font-family: @markdown-font; font-family: var(--markdown-font);
font-size: 14px; font-size: 14px;
overflow-wrap: break-word; overflow-wrap: break-word;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-modal-container { .wave-modal-container {
position: fixed; position: fixed;
top: 0; top: 0;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-password { .wave-password {
.wave-textfield-inner-eye { .wave-textfield-inner-eye {
position: absolute; position: absolute;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.sidebar-handle { .sidebar-handle {
position: absolute; position: absolute;
top: 0; top: 0;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-status-container { .wave-status-container {
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-textfield { .wave-textfield {
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.checkbox-toggle { .checkbox-toggle {
position: relative; position: relative;
display: inline-block; display: inline-block;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.wave-tooltip { .wave-tooltip {
display: flex; display: flex;
position: absolute; position: absolute;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.front-icon { .front-icon {
margin-right: 5px; margin-right: 5px;
} }

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.about-modal { .about-modal {
.wave-modal-content { .wave-modal-content {
gap: 24px; gap: 24px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.alert-modal { .alert-modal {
width: 500px; width: 500px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.clientstop-modal { .clientstop-modal {
.inner-content { .inner-content {
display: flex; display: flex;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.crconn-modal { .crconn-modal {
width: 452px; width: 452px;
min-height: 411px; min-height: 411px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.disconnected-modal { .disconnected-modal {
.wave-modal-content { .wave-modal-content {
.wave-modal-body { .wave-modal-body {

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.erconn-modal { .erconn-modal {
width: 502px; width: 502px;
min-height: 411px; min-height: 411px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.line-settings-modal { .line-settings-modal {
width: 640px; width: 640px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.screen-settings-modal { .screen-settings-modal {
width: 640px; width: 640px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.session-settings-modal { .session-settings-modal {
width: 640px; width: 640px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.tabswitcher-modal { .tabswitcher-modal {
width: 452px; width: 452px;
min-height: 384px; min-height: 384px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.tos-modal { .tos-modal {
width: 640px; width: 640px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.userinput-modal { .userinput-modal {
width: 500px; width: 500px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.rconndetail-modal { .rconndetail-modal {
width: 631px; width: 631px;
min-height: 565px; min-height: 565px;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.term-prompt { .term-prompt {
font-weight: normal; font-weight: normal;
font-size: var(--termfontsize); font-size: var(--termfontsize);

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.connections-view { .connections-view {
.no-items { .no-items {
display: flex; display: flex;

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.history-view { .history-view {
padding-bottom: 10px; padding-bottom: 10px;
@ -69,8 +67,8 @@
border-radius: 4px; border-radius: 4px;
font-size: 1em; font-size: 1em;
padding: 0.5em 1em; padding: 0.5em 1em;
background-color: @background-session-components; background-color: var(--textfield-bg-color);
color: @base-color; color: var(--app-text-color);
} }
.main-search { .main-search {

2
src/app/line/line.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.line { .line {
margin: 0; margin: 0;
padding: var(--termpad) var(--termpad) calc(var(--termpad) + 1px) calc(var(--termpad) * 2); padding: var(--termpad) var(--termpad) calc(var(--termpad) + 1px) calc(var(--termpad) * 2);

4
src/app/line/lines.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.lines { .lines {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -35,7 +33,7 @@
content: ""; content: "";
height: 1px; height: 1px;
flex-grow: 1; flex-grow: 1;
background-color: rgba(@base-color, 0.5); background-color: var(--app-text-color);
} }
.line-sep-labeled::before { .line-sep-labeled::before {

10
src/app/pluginsview/pluginsview.less
View File

@ -1,7 +1,5 @@
@import "@/common/themes/themes.less";
.plugins-view { .plugins-view {
background-color: @background-session; background-color: var(--session-bg-color);
.header { .header {
margin: 1.5em 1.5em 0.5em; margin: 1.5em 1.5em 0.5em;
@ -23,7 +21,7 @@
svg { svg {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
fill: @base-color; fill: var(--app-text-color);
} }
} }
} }
@ -32,7 +30,7 @@
display: flex; display: flex;
.plugins-list { .plugins-list {
padding: 1em; padding: 1em;
border-right: 1px solid @base-border; border-right: 1px solid var(--app-text-color);
min-height: calc(100vh - 6em); min-height: calc(100vh - 6em);
max-height: calc(100vh - 6em); max-height: calc(100vh - 6em);
overflow-y: auto; overflow-y: auto;
@ -45,7 +43,7 @@
margin-bottom: 1em; margin-bottom: 1em;
border: 1px solid transparent; border: 1px solid transparent;
&.selected { &.selected {
border-color: @wave-green; border-color: var(--app-accent-color);
} }
.plugin-summary-header { .plugin-summary-header {
display: flex; display: flex;

12
src/app/root.less
View File

@ -10,6 +10,13 @@
--termlineheight: 15px; --termlineheight: 15px;
--termpad: 7px; // padding value (scaled to termfontsize) --termpad: 7px; // padding value (scaled to termfontsize)
// other fonts
--fixed-font: "Martian Mono", sans-serif;
--terminal-font: "JetBrains Mono", sans-serif;
--text-s1-font: "Martian Mono", sans-serif;
--markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
// magic // magic
--screentabs-height: 38px; --screentabs-height: 38px;
@ -17,6 +24,7 @@
--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-success-color: rgb(38, 97, 26);
--app-text-color: rgb(211, 215, 207); --app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255); --app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194); --app-text-secondary-color: rgb(195, 200, 194);
@ -85,6 +93,7 @@
--textfield-error-border-color: rgb(229, 77, 46); --textfield-error-border-color: rgb(229, 77, 46);
--textfield-label-color: rgb(195, 200, 194); --textfield-label-color: rgb(195, 200, 194);
--textfield-text-color: rgb(255, 255, 255); --textfield-text-color: rgb(255, 255, 255);
--textfield-bg-color: rgba(48, 49, 48, 0.6);
// toggle colors // toggle colors
--toggle-bg-color: rgb(51, 51, 51); --toggle-bg-color: rgb(51, 51, 51);
@ -190,4 +199,7 @@
// screen view color // screen view color
--screen-view-text-caption-color: rgb(139, 145, 138); --screen-view-text-caption-color: rgb(139, 145, 138);
// plugins colors
--code-gutter-bg-color: rgba(88, 193, 66, 0.4);
} }

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

@ -1,4 +1,3 @@
@import "@/common/themes/themes.less";
@import "@/common/icons/icons.less"; @import "@/common/icons/icons.less";
.main-sidebar { .main-sidebar {

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.cmd-input { .cmd-input {
max-height: max(300px, 40%); max-height: max(300px, 40%);
display: flex; display: flex;
@ -256,7 +254,7 @@
.chat-msg-user { .chat-msg-user {
.msg-text { .msg-text {
font-family: @markdown-font; font-family: var(--markdown-font);
font-size: 14px; font-size: 14px;
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -264,7 +262,7 @@
.chat-msg-error { .chat-msg-error {
color: var(--cmdinput-text-error); color: var(--cmdinput-text-error);
font-family: @markdown-font; font-family: var(--markdown-font);
font-size: 14px; font-size: 14px;
} }

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.main-content { .main-content {
.screen-view { .screen-view {
flex-grow: 1; flex-grow: 1;
@ -82,7 +80,7 @@
padding: 5px 10px; padding: 5px 10px;
background-color: #333; background-color: #333;
border-radius: 5px; border-radius: 5px;
font-family: @fixed-font; font-family: var(--fixed-font);
} }
} }
} }
@ -337,10 +335,6 @@
color: var(--app-text-secondary-color); color: var(--app-text-secondary-color);
} }
.text-caption {
color: var(--screen-view-text-caption-color);
}
.ellipsis { .ellipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
} }

61
src/app/workspace/screen/tabs.less
View File

@ -1,4 +1,3 @@
@import "@/common/themes/themes.less";
@import "@/common/icons/icons.less"; @import "@/common/icons/icons.less";
#main .screen-tabs .screen-tab { #main .screen-tabs .screen-tab {
@ -23,15 +22,15 @@
&.color-green, &.color-green,
&.color-default { &.color-default {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-green; fill: var(--tab-green);
} }
.icon i { .icon i {
color: @tab-green; color: var(--tab-green);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-green; border-top: 1px solid var(--tab-green);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(88, 193, 66, 0.2) 9.34%, rgba(88, 193, 66, 0.2) 9.34%,
@ -43,15 +42,15 @@
&.color-orange { &.color-orange {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-orange; fill: var(--tab-orange);
} }
.icon i { .icon i {
color: @tab-orange; color: var(--tab-orange);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-orange; border-top: 1px solid var(--tab-orange);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(239, 113, 59, 0.2) 9.34%, rgba(239, 113, 59, 0.2) 9.34%,
@ -63,15 +62,15 @@
&.color-red { &.color-red {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-red; fill: var(--tab-red);
} }
.icon i { .icon i {
color: @tab-red; color: var(--tab-red);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-red; border-top: 1px solid var(--tab-red);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(229, 77, 46, 0.2) 9.34%, rgba(229, 77, 46, 0.2) 9.34%,
@ -83,15 +82,15 @@
&.color-yellow { &.color-yellow {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-yellow; fill: var(--tab-yellow);
} }
.icon i { .icon i {
color: @tab-yellow; color: var(--tab-yellow);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-yellow; border-top: 1px solid var(--tab-yellow);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(224, 185, 86, 0.2) 9.34%, rgba(224, 185, 86, 0.2) 9.34%,
@ -103,15 +102,15 @@
&.color-blue { &.color-blue {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-blue; fill: var(--tab-blue);
} }
.icon i { .icon i {
color: @tab-blue; color: var(--tab-blue);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-blue; border-top: 1px solid var(--tab-blue);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(57, 113, 255, 0.2) 9.34%, rgba(57, 113, 255, 0.2) 9.34%,
@ -123,15 +122,15 @@
&.color-mint { &.color-mint {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-mint; fill: var(--tab-mint);
} }
.icon i { .icon i {
color: @tab-mint; color: var(--tab-mint);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-mint; border-top: 1px solid var(--tab-mint);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(75, 255, 169, 0.2) 9.34%, rgba(75, 255, 169, 0.2) 9.34%,
@ -143,15 +142,15 @@
&.color-cyan { &.color-cyan {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-cyan; fill: var(--tab-cyan);
} }
.icon i { .icon i {
color: @tab-cyan; color: var(--tab-cyan);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-cyan; border-top: 1px solid var(--tab-cyan);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(75, 223, 255, 0.2) 9.34%, rgba(75, 223, 255, 0.2) 9.34%,
@ -163,15 +162,15 @@
&.color-white { &.color-white {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-white; fill: var(--tab-white);
} }
.icon i { .icon i {
color: @tab-white; color: var(--tab-white);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-white; border-top: 1px solid var(--tab-white);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(255, 255, 255, 0.2) 9.34%, rgba(255, 255, 255, 0.2) 9.34%,
@ -183,15 +182,15 @@
&.color-violet { &.color-violet {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-violet; fill: var(--tab-violet);
} }
.icon i { .icon i {
color: @tab-violet; color: var(--tab-violet);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-violet; border-top: 1px solid var(--tab-violet);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(186, 118, 255, 0.2) 9.34%, rgba(186, 118, 255, 0.2) 9.34%,
@ -203,15 +202,15 @@
&.color-pink { &.color-pink {
svg.svg-icon-inner path { svg.svg-icon-inner path {
fill: @tab-pink; fill: var(--tab-pink);
} }
.icon i { .icon i {
color: @tab-pink; color: var(--tab-pink);
} }
&.is-active { &.is-active {
border-top: 1px solid @tab-pink; border-top: 1px solid var(--tab-pink);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(255, 136, 165, 0.2) 9.34%, rgba(255, 136, 165, 0.2) 9.34%,

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.session-view { .session-view {
overflow: hidden; overflow: hidden;

18
src/plugins/code/code.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.code-renderer { .code-renderer {
.monaco-editor { .monaco-editor {
.monaco-editor-background, .monaco-editor-background,
@ -10,7 +8,7 @@
height: 4px !important; height: 4px !important;
width: 4px !important; width: 4px !important;
.slider { .slider {
background-color: @scrollbar-thumb !important; background-color: var(--scrollbar-background-color) !important;
} }
} }
} }
@ -55,13 +53,13 @@
bottom: -3px; bottom: -3px;
left: 14px; left: 14px;
.message { .message {
background: @success-green; background: var(--app-success-color);
border-radius: 6px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 4px 1rem; padding: 4px 1rem;
max-width: 80vw; max-width: 80vw;
&.error { &.error {
background: @error-red; background: var(--app-error-color);
} }
} }
} }
@ -70,8 +68,8 @@
top: 0.2em; top: 0.2em;
right: 12rem; right: 12rem;
border-radius: 5px; border-radius: 5px;
background-color: @button-background; background-color: var(--button-secondary-bg-color);
color: @error-red; color: var(--app-error-color);
z-index: 1; z-index: 1;
padding: 0 0.8em; padding: 0 0.8em;
font-size: 0.8em; font-size: 0.8em;
@ -96,7 +94,7 @@
.gutter { .gutter {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
background: fade(@wave-green, 40%); background: var(--code-gutter-bg-color);
max-width: 3px; max-width: 3px;
} }
.gutter-horizontal { .gutter-horizontal {
@ -106,10 +104,10 @@
cursor: row-resize; cursor: row-resize;
} }
.gutter:hover { .gutter:hover {
background: @wave-green; background: var(--app-accent-color);
} }
.gutter-dragging:hover { .gutter-dragging:hover {
background: @wave-green; background: var(--app-accent-color);
} }
.pane { .pane {

14
src/plugins/csv/csv.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.csv-renderer { .csv-renderer {
opacity: 0; /* Start with an opacity of 0, meaning it's invisible */ opacity: 0; /* Start with an opacity of 0, meaning it's invisible */
@ -29,7 +27,7 @@
table { table {
border-collapse: collapse; border-collapse: collapse;
overflow-x: auto; overflow-x: auto;
border: 1px solid @scrollbar-thumb; border: 1px solid var(--scrollbar-thumb-hover-color);
thead { thead {
position: relative; position: relative;
@ -38,11 +36,11 @@
overflow-y: scroll; overflow-y: scroll;
tr { tr {
border-bottom: 1px solid @scrollbar-thumb; border-bottom: 1px solid var(--scrollbar-thumb-hover-color);
th { th {
color: @term-white; color: var(--app-text-color);
border-right: 1px solid @scrollbar-thumb; border-right: 1px solid var(--scrollbar-thumb-hover-color);
border-bottom: none; border-bottom: none;
padding: 2px 10px; padding: 2px 10px;
flex-basis: 100%; flex-basis: 100%;
@ -81,8 +79,8 @@
display: flex; display: flex;
td { td {
border-right: 1px solid @scrollbar-thumb; border-right: 1px solid var(--scrollbar-thumb-hover-color);
border-left: 1px solid @scrollbar-thumb; border-left: 1px solid var(--scrollbar-thumb-hover-color);
padding: 3px 10px; padding: 3px 10px;
flex-basis: 100%; flex-basis: 100%;
flex-grow: 2; flex-grow: 2;

2
src/plugins/image/image.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.image-renderer { .image-renderer {
img { img {
display: block; display: block;

4
src/plugins/markdown/markdown.less
View File

@ -1,7 +1,5 @@
@import "@/common/themes/themes.less";
.markdown-renderer { .markdown-renderer {
color: @term-white; color: var(--app-text-color);
.scroller { .scroller {
overflow-y: auto; overflow-y: auto;

6
src/plugins/mustache/mustache.less
View File

@ -1,7 +1,5 @@
@import "@/common/themes/themes.less";
.mustache-renderer { .mustache-renderer {
color: @term-white; color: var(--app-text-color);
.cmd-hints { .cmd-hints {
display: inline-block !important; display: inline-block !important;
position: relative; position: relative;
@ -14,6 +12,6 @@
} }
.refresh-button { .refresh-button {
color: rgb(52, 52, 52); color: rgb(52, 52, 52);
background-color: @term-white; background-color: var(--app-text-color);
} }
} }

14
src/plugins/openai/openai.less
View File

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.openai-renderer { .openai-renderer {
.openai-message { .openai-message {
display: flex; display: flex;
@ -7,31 +5,31 @@
justify-content: flex-start; justify-content: flex-start;
.openai-role { .openai-role {
color: @term-bright-green; color: var(--prompt-bright-green);
font-weight: bold; font-weight: bold;
width: 100px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.openai-role.openai-role-assistant { .openai-role.openai-role-assistant {
color: @term-bright-white; color: var(--app-text-primary-color);
} }
.openai-content-user { .openai-content-user {
white-space: pre; white-space: pre;
color: @term-white; color: var(--app-text-color);
} }
.openai-content-assistant { .openai-content-assistant {
color: @term-white; color: var(--app-text-color);
} }
.openai-role-error { .openai-role-error {
color: @term-bright-red; color: var(--app-text-color);
} }
.openai-content-error { .openai-content-error {
color: @term-bright-red; color: var(--app-text-color);
} }
} }

1
src/plugins/terminal/terminal.less
View File

@ -1,4 +1,3 @@
@import "@/common/themes/themes.less";
@import "./xterm.less"; @import "./xterm.less";
.terminal-wrapper { .terminal-wrapper {