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

initial implementation for lines.less

Browse Source
This commit is contained in:
Red Adaya 2024-02-22 22:17:53 +08:00
parent 96cabeff98
commit 6e3ab22a07
11 changed files with 194 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.less
View File

@ -1,4 +1,4 @@
@import "./common/themes/themes.less";
@import "@/common/themes/themes.less";
@font-face {
font-family: "Martian Mono";
@ -19,7 +19,7 @@ body {
font-weight: 300;
line-height: 1.5;
background: @base-background-transparent;
color: @base-color;
color: var(--base-color);
}
body.is-dev {
@ -33,7 +33,7 @@ textarea {
font-weight: 300;
line-height: 1.5;
background: @base-background;
color: @base-color;
color: var(--base-color);
}
// typography
@ -103,7 +103,7 @@ body code {
}
svg.icon {
fill: @base-color;
fill: var(--base-color);
width: 100%;
height: 100%;
display: inline-block;

3
src/app/app.tsx
View File

@ -20,6 +20,9 @@ import { MainSideBar } from "./sidebar/sidebar";
import { DisconnectedModal, ClientStopModal } from "./common/modals";
import { ModalsProvider } from "./common/modals/provider";
import { ErrorBoundary } from "./common/error/errorboundary";
import "@/common/themes/fonts.less";
import "@/common/themes/themes.less";
import "./app.less";
dayjs.extend(localizedFormat);

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

@ -14,7 +14,7 @@
svg {
width: 1.5em;
height: 1.5em;
fill: @base-color;
fill: var(--base-color);
}
}
@ -31,7 +31,7 @@
.icon {
width: 1em;
height: 1em;
fill: @base-color;
fill: var(--base-color);
}
.bookmarks-list {

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

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

9
src/app/common/themes/fonts.less Normal file
View File

@ -0,0 +1,9 @@
:root {
--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";
}

134
src/app/common/themes/themes.less
View File

@ -77,3 +77,137 @@
@markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
@markdown-highlight: rgb(35, 35, 35);
:root {
--base-color: #eceeec;
// semantic vars based on --base-color
--line-avatar-color: #eceeec;
--line-text-color: #f2f4f2;
--line-svg-fill: var(--line-text-color);
--line-svg-hover-fill: #eceeec;
--line-selected-border-color: #f0f1f0;
--line-separator-color: #f6f7f6;
--base-background: rgba(21, 23, 21, 1);
// semantic vars based on --base-background
--line-background: rgba(21, 23, 21, 1);
--base-background-transparent: rgba(21, 23, 21, 0.7);
--base-background-dev: rgba(21, 23, 48, 0.7);
--base-border: rgba(241, 246, 243, 0.08);
--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);
--wave-green: rgb(88, 193, 66);
// semantic vars based on --wave-green
--line-status-success-fill: rgb(88, 193, 66);
--wave-green-faded: rgba(88, 193, 66, 0.4);
--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);
--success-green: rgb(38, 97, 26);
--error-red: #cc0000;
// semantic vars based on --error-red
--line-base-error-color: #cc0000;
// semantic vars based on --error-red
--line-status-error-fill: #cc0000;
--warning-yellow: #ffa500;
// semantic vars based on --warning-yellow
--line-status-warning-fill: #ffa500;
--textarea-background: #2a2a2a;
--text-primary: #fff;
--text-secondary: #c3c8c2;
--text-caption: #8b918a;
--status-connected: #46a758;
--status-connecting: #f5d90a;
--status-error: #e54d2e;
--status-disconnected: #c3c8c2;
--term-black: #000000;
--term-red: #cc0000;
// semantic vars based on --term-red
--line-load-error-text-color: #cc0000;
--term-green: #4e9a06;
// semantic vars based on --term-green
--line-active-border-color: #8ebb39;
--term-yellow: #c4a000;
// semantic vars based on --term-yellow
--line-base-yellow-color: #fce94f;
// semantic vars based on --term-yellow
--line-sidebar-message-text-color: #c4a000;
--term-blue: #3465a4;
--term-cyan: #06989a;
--term-white: #d3d7cf;
// semantic vars based on --term-white
--line-base-white-color: #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;
// semantic vars based on --soft-blue
--line-base-soft-blue-color: #729fcf;
--line-meta-user-color: #89afd7;
--active-menu-color: rgb(0, 71, 171);
--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";
--markdown-highlight: rgb(35, 35, 35);
}

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

@ -6,7 +6,7 @@
.icon {
width: 1.3em !important;
height: 1.3em !important;
fill: @base-color;
fill: var(--base-color);
}
.history-checkbox {
@ -51,7 +51,7 @@
svg {
width: 1.5em;
height: 1.5em;
fill: @base-color;
fill: var(--base-color);
}
}
@ -70,7 +70,7 @@
font-size: 1em;
padding: 0.5em 1em;
background-color: @background-session-components;
color: @base-color;
color: var(--base-color);
}
}
@ -99,7 +99,7 @@
.label {
display: inline;
vertical-align: middle;
color: @base-color;
color: var(--base-color);
}
.icon {
vertical-align: middle;
@ -163,7 +163,7 @@
.reset-button {
margin-left: 1em;
color: @base-color;
color: var(--base-color);
line-height: 1.75em;
}
}

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

@ -1,5 +1,3 @@
@import "@/common/themes/themes.less";
.line.line-text {
flex-direction: row;
padding-top: 5px;
@ -13,7 +11,7 @@
}
.line .load-error-text {
color: @term-red;
color: var(--line-load-error-text-color);
padding-top: 5px;
}
@ -36,7 +34,7 @@
}
.sidebar-message {
color: @term-yellow;
color: var(--line-sidebar-message-text-color);
}
.line-header {
@ -84,7 +82,7 @@
}
.meta.meta-line1 {
color: rgba(@base-color, 0.6) !important;
color: var(--line-text-color) !important;
font-size: 11px;
}
@ -132,7 +130,7 @@
position: relative;
.cmd-rtnstate-label {
font-family: @terminal-font;
font-family: var(--terminal-font);
position: relative;
font-size: 10px;
z-index: 2;
@ -140,13 +138,13 @@
padding: 2px 5px 0px 5px;
display: inline-block;
font-size: 10px;
color: @term-white;
color: var(--line-base-white-color);
background-color: #151715;
}
.cmd-rtnstate-diff {
font-family: @terminal-font;
color: @term-white;
font-family: var(--terminal-font);
color: var(--line-base-white-color);
white-space: pre;
margin-left: 10px;
padding-left: 10px;
@ -181,16 +179,16 @@
overflow: hidden;
flex-shrink: 0;
position: relative;
background: @base-background;
background: var(--line-background);
border: 1px solid transparent;
&.selected {
border: 1px solid rgba(@base-color, 0.8) !important;
border: 1px solid var(--line-selected-border-color) !important;
box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
}
&.active {
border: 1px solid rgba(@wave-green, 0.8) !important;
border: 1px solid var(--line-active-border-color) !important;
box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
}
@ -202,7 +200,7 @@
&.line-simple {
font-size: 11px;
line-height: 1.2;
color: rgba(@base-color, 0.6);
color: var(--line-text-color);
.simple-line-header {
display: flex;
@ -232,19 +230,19 @@
height: 1em;
margin: 0 0.5em;
vertical-align: text-top;
fill: @base-color;
fill: var(--line-avatar-color);
}
.success {
fill: @wave-green;
fill: var(--line-status-success-fill);
}
.fail {
fill: @error-red;
fill: var(--line-status-error-fill);
}
.warning {
fill: @warning-yellow;
fill: var(--line-status-warning-fill);
}
}
@ -275,7 +273,8 @@
align-items: center;
justify-content: center;
font-weight: bold;
color: @term-white;
// color: @term-white;
color: var(--line-avatar-color);
border-radius: 5px;
position: relative;
@ -307,30 +306,30 @@
&.status-error {
.status-icon {
color: @error-red;
color: var(--line-base-error-color);
}
}
&.status-hangup {
.status-icon {
color: @term-yellow;
color: var(--line-base-yellow-color);
}
}
&.status-running {
background-color: @soft-blue;
background-color: var(--line-base-soft-blue-color);
}
&.status-waiting {
background-color: @term-yellow;
background-color: var(--line-base-yellow-color);
}
&.status-detached {
background-color: @soft-blue;
background-color: var(--line-base-soft-blue-color);
.status-icon {
top: 3px;
right: 3px;
color: @term-white;
color: var(--line-base-soft-blue-color);
}
}
}
@ -353,7 +352,7 @@
}
.user {
color: lighten(@soft-blue, 10%);
color: var(--line-meta-user-color);
font-weight: bold;
margin-top: 1px;
margin-right: 10px;
@ -372,7 +371,7 @@
svg {
width: 1em;
margin-right: 0.5em;
fill: rgba(@base-color, 0.6);
fill: var(--line-text-color);
}
}
@ -386,9 +385,9 @@
border-radius: 50%;
line-height: 1em;
svg {
fill: rgba(@base-color, 0.6);
fill: var(--line-text-color);
&:hover {
fill: @base-color;
fill: var(--line-svg-hover-fill);
}
}
}
@ -417,7 +416,7 @@
.cmdtext-overflow {
flex-shrink: 0;
padding-right: 2px;
color: @term-white;
color: var(--line-base-white-color);
cursor: pointer;
margin-top: 4px;
@ -435,7 +434,7 @@
.cmdtext-expanded {
white-space: pre;
color: @term-white;
color: var(--line-base-white-color);
padding-bottom: 5px;
}
}
@ -453,7 +452,7 @@
}
.line.line-invalid {
color: @term-white;
color: var(--line-base-white-color);
margin-left: 5px;
}
@ -477,7 +476,7 @@
&:focus,
&:focus-within {
&::-webkit-scrollbar-thumb {
background-color: @scrollbar-thumb !important;
background-color: var(--scrollbar-thumb-background) !important;
}
}
@ -493,7 +492,7 @@
display: flex;
align-items: center;
margin-top: 1em;
color: rgba(@base-color, 0.5);
color: var(--line-separator-color);
}
.line-sep::before,
@ -501,7 +500,7 @@
content: "";
height: 1px;
flex-grow: 1;
background-color: rgba(@base-color, 0.5);
background-color: var(--line-separator-color);
}
.line-sep::before {

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

@ -23,7 +23,7 @@
svg {
width: 1.5em;
height: 1.5em;
fill: @base-color;
fill: var(--base-color);
}
}
}

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

@ -221,7 +221,7 @@
}
.menu-label {
color: @base-color;
color: var(--base-color);
}
.menu-list {

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

@ -91,7 +91,7 @@
height: 1em;
margin: 0 0.5em;
vertical-align: text-top;
fill: @base-color;
fill: var(--base-color);
}
.warning {