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

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.clientsettings-view {
.content {
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 {
background: none;
color: inherit;

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

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

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.cmdstr-code {
position: relative;
display: flex;
@ -53,7 +51,7 @@
padding: 2px 8px 2px 8px;
background-color: var(--cmdstrcode-bg-color);
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 {
position: relative;
height: 44px;

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

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

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

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

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

@ -1,8 +1,6 @@
@import "@/common/themes/themes.less";
.markdown {
color: var(--app-text-color);
font-family: @markdown-font;
font-family: var(--markdown-font);
font-size: 14px;
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 {
position: fixed;
top: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12
src/app/root.less
View File

@ -10,6 +10,13 @@
--termlineheight: 15px;
--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
--screentabs-height: 38px;
@ -17,6 +24,7 @@
--app-accent-color: rgb(88, 193, 66);
--app-error-color: rgb(204, 0, 0);
--app-warning-color: rgb(255, 165, 0);
--app-success-color: rgb(38, 97, 26);
--app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194);
@ -85,6 +93,7 @@
--textfield-error-border-color: rgb(229, 77, 46);
--textfield-label-color: rgb(195, 200, 194);
--textfield-text-color: rgb(255, 255, 255);
--textfield-bg-color: rgba(48, 49, 48, 0.6);
// toggle colors
--toggle-bg-color: rgb(51, 51, 51);
@ -190,4 +199,7 @@
// screen view color
--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";
.main-sidebar {

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

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

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.main-content {
.screen-view {
flex-grow: 1;
@ -82,7 +80,7 @@
padding: 5px 10px;
background-color: #333;
border-radius: 5px;
font-family: @fixed-font;
font-family: var(--fixed-font);
}
}
}
@ -337,10 +335,6 @@
color: var(--app-text-secondary-color);
}
.text-caption {
color: var(--screen-view-text-caption-color);
}
.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";
#main .screen-tabs .screen-tab {
@ -23,15 +22,15 @@
&.color-green,
&.color-default {
svg.svg-icon-inner path {
fill: @tab-green;
fill: var(--tab-green);
}
.icon i {
color: @tab-green;
color: var(--tab-green);
}
&.is-active {
border-top: 1px solid @tab-green;
border-top: 1px solid var(--tab-green);
background: linear-gradient(
180deg,
rgba(88, 193, 66, 0.2) 9.34%,
@ -43,15 +42,15 @@
&.color-orange {
svg.svg-icon-inner path {
fill: @tab-orange;
fill: var(--tab-orange);
}
.icon i {
color: @tab-orange;
color: var(--tab-orange);
}
&.is-active {
border-top: 1px solid @tab-orange;
border-top: 1px solid var(--tab-orange);
background: linear-gradient(
180deg,
rgba(239, 113, 59, 0.2) 9.34%,
@ -63,15 +62,15 @@
&.color-red {
svg.svg-icon-inner path {
fill: @tab-red;
fill: var(--tab-red);
}
.icon i {
color: @tab-red;
color: var(--tab-red);
}
&.is-active {
border-top: 1px solid @tab-red;
border-top: 1px solid var(--tab-red);
background: linear-gradient(
180deg,
rgba(229, 77, 46, 0.2) 9.34%,
@ -83,15 +82,15 @@
&.color-yellow {
svg.svg-icon-inner path {
fill: @tab-yellow;
fill: var(--tab-yellow);
}
.icon i {
color: @tab-yellow;
color: var(--tab-yellow);
}
&.is-active {
border-top: 1px solid @tab-yellow;
border-top: 1px solid var(--tab-yellow);
background: linear-gradient(
180deg,
rgba(224, 185, 86, 0.2) 9.34%,
@ -103,15 +102,15 @@
&.color-blue {
svg.svg-icon-inner path {
fill: @tab-blue;
fill: var(--tab-blue);
}
.icon i {
color: @tab-blue;
color: var(--tab-blue);
}
&.is-active {
border-top: 1px solid @tab-blue;
border-top: 1px solid var(--tab-blue);
background: linear-gradient(
180deg,
rgba(57, 113, 255, 0.2) 9.34%,
@ -123,15 +122,15 @@
&.color-mint {
svg.svg-icon-inner path {
fill: @tab-mint;
fill: var(--tab-mint);
}
.icon i {
color: @tab-mint;
color: var(--tab-mint);
}
&.is-active {
border-top: 1px solid @tab-mint;
border-top: 1px solid var(--tab-mint);
background: linear-gradient(
180deg,
rgba(75, 255, 169, 0.2) 9.34%,
@ -143,15 +142,15 @@
&.color-cyan {
svg.svg-icon-inner path {
fill: @tab-cyan;
fill: var(--tab-cyan);
}
.icon i {
color: @tab-cyan;
color: var(--tab-cyan);
}
&.is-active {
border-top: 1px solid @tab-cyan;
border-top: 1px solid var(--tab-cyan);
background: linear-gradient(
180deg,
rgba(75, 223, 255, 0.2) 9.34%,
@ -163,15 +162,15 @@
&.color-white {
svg.svg-icon-inner path {
fill: @tab-white;
fill: var(--tab-white);
}
.icon i {
color: @tab-white;
color: var(--tab-white);
}
&.is-active {
border-top: 1px solid @tab-white;
border-top: 1px solid var(--tab-white);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 9.34%,
@ -183,15 +182,15 @@
&.color-violet {
svg.svg-icon-inner path {
fill: @tab-violet;
fill: var(--tab-violet);
}
.icon i {
color: @tab-violet;
color: var(--tab-violet);
}
&.is-active {
border-top: 1px solid @tab-violet;
border-top: 1px solid var(--tab-violet);
background: linear-gradient(
180deg,
rgba(186, 118, 255, 0.2) 9.34%,
@ -203,15 +202,15 @@
&.color-pink {
svg.svg-icon-inner path {
fill: @tab-pink;
fill: var(--tab-pink);
}
.icon i {
color: @tab-pink;
color: var(--tab-pink);
}
&.is-active {
border-top: 1px solid @tab-pink;
border-top: 1px solid var(--tab-pink);
background: linear-gradient(
180deg,
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 {
overflow: hidden;

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

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

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

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

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

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

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

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

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

@ -1,7 +1,5 @@
@import "@/common/themes/themes.less";
.mustache-renderer {
color: @term-white;
color: var(--app-text-color);
.cmd-hints {
display: inline-block !important;
position: relative;
@ -14,6 +12,6 @@
}
.refresh-button {
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-message {
display: flex;
@ -7,31 +5,31 @@
justify-content: flex-start;
.openai-role {
color: @term-bright-green;
color: var(--prompt-bright-green);
font-weight: bold;
width: 100px;
flex-shrink: 0;
}
.openai-role.openai-role-assistant {
color: @term-bright-white;
color: var(--app-text-primary-color);
}
.openai-content-user {
white-space: pre;
color: @term-white;
color: var(--app-text-color);
}
.openai-content-assistant {
color: @term-white;
color: var(--app-text-color);
}
.openai-role-error {
color: @term-bright-red;
color: var(--app-text-color);
}
.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";
.terminal-wrapper {