mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
fix default term font family and style integration (#331)
* move root css vars to root.less (otherwise we get duplicate declarations). * make the default term font family consistent (fix reload loop bug)
This commit is contained in:
Mike Sawka
GitHub
parent
4d7212e945
commit
7a4e1593b4
@ -1,14 +1,8 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@import "./common/themes/themes.less";
|
||||
|
||||
:root {
|
||||
--fa-style-family: "Font Awesome 6 Sharp";
|
||||
|
||||
// these variables are overridden by user settings
|
||||
--termfontfamily: "JetBrains Mono", monospace;
|
||||
--termfontsize: 12px;
|
||||
--termlineheight: 15px;
|
||||
--termpad: 7px; // padding value (scaled to termfontsize)
|
||||
}
|
||||
@import "./root.less";
|
||||
|
||||
html,
|
||||
body {
|
||||
|
||||
@ -26,6 +26,7 @@ export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
|
||||
export const DevServerEndpoint = "http://127.0.0.1:8090";
|
||||
export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
|
||||
export const DefaultTermFontSize = 12;
|
||||
export const DefaultTermFontFamily = "JetBrains Mono";
|
||||
export const MinFontSize = 8;
|
||||
export const MaxFontSize = 24;
|
||||
export const InputChunkSize = 500;
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
@base-color: #eceeec;
|
||||
@base-background: rgba(21, 23, 21, 1);
|
||||
@base-background-transparent: rgba(15, 17, 15, 0.7);
|
||||
@ -81,126 +84,3 @@
|
||||
|
||||
@thin-border-color: #333;
|
||||
@main-content-bottom-background: #333;
|
||||
|
||||
:root {
|
||||
// primary
|
||||
--primary-text-color: #eceeec;
|
||||
--primary-icon-color: var(--primary-text-color);
|
||||
--primary-border-color: #333;
|
||||
--primary-background-color: rgba(21, 23, 21, 1);
|
||||
--primary-background: rgba(21, 23, 21, 1);
|
||||
--primary-accent-color: rgb(88, 193, 66);
|
||||
--wave-green: rgb(88, 193, 66);
|
||||
--wave-green-faded: rgba(88, 193, 66, 0.4);
|
||||
--success-green: rgb(38, 97, 26);
|
||||
--error-red: #cc0000;
|
||||
--warning-yellow: #ffa500;
|
||||
|
||||
--text-primary: #fff;
|
||||
--text-secondary: #c3c8c2;
|
||||
--text-caption: #8b918a;
|
||||
|
||||
--base-background-transparent: rgba(21, 23, 21, 0.7);
|
||||
--base-background-dev: rgba(21, 23, 48, 0.7);
|
||||
--background-session: rgba(13, 13, 13, 0.85);
|
||||
--background-session-components: rgba(48, 49, 48, 0.6);
|
||||
--background-session-components-solid: rgb(33, 34, 33);
|
||||
|
||||
--cmd-input-border-color: rgba(88, 193, 66, 0.8);
|
||||
|
||||
--disabled-background: rgba(76, 81, 75, 1);
|
||||
--disabled-color: #adadad;
|
||||
--disabled-color-faded: rgba(173, 173, 173, 0.6);
|
||||
--scrollbar-background: rgba(21, 23, 21, 1);
|
||||
--scrollbar-thumb-background: rgb(134, 134, 134);
|
||||
--button-background: rgb(38, 38, 38);
|
||||
--button-disabled-background: rgb(30, 29, 29);
|
||||
|
||||
--textarea-background: #2a2a2a;
|
||||
|
||||
--status-connected: #46a758;
|
||||
--status-connecting: #f5d90a;
|
||||
--status-error: #e54d2e;
|
||||
--status-disconnected: #c3c8c2;
|
||||
|
||||
--term-text-error: #cc0000;
|
||||
--term-error-color: rgb(204, 0, 0);
|
||||
--term-text-yellow: #c4a000;
|
||||
--term-black: #000000;
|
||||
--term-text-red: #cc0000;
|
||||
--term-green: #4e9a06;
|
||||
--term-blue: #3465a4;
|
||||
--term-cyan: #06989a;
|
||||
--term-text-white: #d3d7cf;
|
||||
--term-bright-red: #ef2929;
|
||||
--term-bright-green: #58c142;
|
||||
--term-bright-yellow: #fce94f;
|
||||
--term-bright-blue: #32afff;
|
||||
--term-bright-magenta: #ad7fa8;
|
||||
--term-bright-cyan: #34e2e2;
|
||||
--term-bright-white: #ffffff;
|
||||
|
||||
--button-bg-yellow: #e9be68;
|
||||
--button-bg-red: #d06c68;
|
||||
|
||||
--history-error-red: #d06c68;
|
||||
--history-selected-error-red: #f79494;
|
||||
|
||||
--tab-red: #e54d2e;
|
||||
--tab-orange: #ef713b;
|
||||
--tab-yellow: #e0b956;
|
||||
--tab-green: #58c142;
|
||||
--tab-mint: #4bffa9;
|
||||
--tab-cyan: #4bdfff;
|
||||
--tab-blue: #3971ff;
|
||||
--tab-violet: #ba76ff;
|
||||
--tab-pink: #e05677;
|
||||
--tab-white: #ffffff;
|
||||
|
||||
--soft-blue: #729fcf;
|
||||
--active-menu-color: rgb(0, 71, 171);
|
||||
|
||||
--app-accent-color: rgb(88, 193, 66);
|
||||
--app-error-color: rgb(204, 0, 0);
|
||||
--app-warning-color: rgb(255, 165, 0);
|
||||
--app-scrollbar-thumb-color: rgb(134, 134, 134);
|
||||
--app-text-color: rgb(236, 238, 236);
|
||||
--app-border-color: #333;
|
||||
--app-border: rgba(241, 246, 243, 0.08);
|
||||
|
||||
--sidebar-dev-bg-color: #151730;
|
||||
--sidebar-separator-color: rgba(241, 246, 243, 0.08);
|
||||
--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;
|
||||
--line-sidebar-message-color: rgb(196, 160, 0);
|
||||
|
||||
--line-background: rgba(21, 23, 21, 1);
|
||||
--line-avatar-color: #eceeec;
|
||||
--line-text-color: #f2f4f2;
|
||||
--line-svg-fill-color: rgb(150, 152, 150);
|
||||
--line-svg-hover-fill-color: #eceeec;
|
||||
--line-selected-border-color: rgb(193, 195, 193);
|
||||
--line-separator-color: rgb(126, 126, 126);
|
||||
--line-meta-line1-color: rgb(150, 152, 150);
|
||||
--line-error-color: #cc0000;
|
||||
--line-warning-color: #ffa500;
|
||||
--line-base-soft-blue-color: #729fcf;
|
||||
--line-active-border-color: rgb(97, 158, 72);
|
||||
--line-selected-bg-color: rgba(255, 255, 255, 0.1);
|
||||
--line-selected-border-left-color: #ccc;
|
||||
--line-selected-error-border-color: rgba(204, 0, 0, 0.8);
|
||||
--line-selected-error-bg-color: rgb(19, 4, 3);
|
||||
--line-error-bg-color: rgba(200, 0, 0, 0.1);
|
||||
--line-error-border-left-color: --line-selected-error-border-color;
|
||||
--line-simple-text-color: rgba(236, 238, 236, 0.6);
|
||||
--line-meta-text-color: rgb(139, 145, 138);
|
||||
--line-meta-user-color: rgba(140, 184, 232);
|
||||
--line-svg-color: rgba(236, 238, 236, 0.6);
|
||||
--line-svg-hover-color: rgba(236, 238, 236, 1);
|
||||
--line-status-success-fill: rgb(88, 193, 66);
|
||||
--line-status-error-fill: #cc0000;
|
||||
--line-status-warning-fill: #ffa500;
|
||||
}
|
||||
|
||||
133
src/app/root.less
Normal file
133
src/app/root.less
Normal file
@ -0,0 +1,133 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
:root {
|
||||
--fa-style-family: "Font Awesome 6 Sharp";
|
||||
|
||||
// these variables are overridden by user settings
|
||||
--termfontfamily: "JetBrains Mono", monospace;
|
||||
--termfontsize: 12px;
|
||||
--termlineheight: 15px;
|
||||
--termpad: 7px; // padding value (scaled to termfontsize)
|
||||
|
||||
// primary
|
||||
--primary-text-color: #eceeec;
|
||||
--primary-icon-color: var(--primary-text-color);
|
||||
--primary-border-color: #333;
|
||||
--primary-background-color: rgba(21, 23, 21, 1);
|
||||
--primary-background: rgba(21, 23, 21, 1);
|
||||
--primary-accent-color: rgb(88, 193, 66);
|
||||
--wave-green: rgb(88, 193, 66);
|
||||
--wave-green-faded: rgba(88, 193, 66, 0.4);
|
||||
--success-green: rgb(38, 97, 26);
|
||||
--error-red: #cc0000;
|
||||
--warning-yellow: #ffa500;
|
||||
|
||||
--text-primary: #fff;
|
||||
--text-secondary: #c3c8c2;
|
||||
--text-caption: #8b918a;
|
||||
|
||||
--base-background-transparent: rgba(21, 23, 21, 0.7);
|
||||
--base-background-dev: rgba(21, 23, 48, 0.7);
|
||||
--background-session: rgba(13, 13, 13, 0.85);
|
||||
--background-session-components: rgba(48, 49, 48, 0.6);
|
||||
--background-session-components-solid: rgb(33, 34, 33);
|
||||
|
||||
--cmd-input-border-color: rgba(88, 193, 66, 0.8);
|
||||
|
||||
--disabled-background: rgba(76, 81, 75, 1);
|
||||
--disabled-color: #adadad;
|
||||
--disabled-color-faded: rgba(173, 173, 173, 0.6);
|
||||
--scrollbar-background: rgba(21, 23, 21, 1);
|
||||
--scrollbar-thumb-background: rgb(134, 134, 134);
|
||||
--button-background: rgb(38, 38, 38);
|
||||
--button-disabled-background: rgb(30, 29, 29);
|
||||
|
||||
--textarea-background: #2a2a2a;
|
||||
|
||||
--status-connected: #46a758;
|
||||
--status-connecting: #f5d90a;
|
||||
--status-error: #e54d2e;
|
||||
--status-disconnected: #c3c8c2;
|
||||
|
||||
--term-text-error: #cc0000;
|
||||
--term-error-color: rgb(204, 0, 0);
|
||||
--term-text-yellow: #c4a000;
|
||||
--term-black: #000000;
|
||||
--term-text-red: #cc0000;
|
||||
--term-green: #4e9a06;
|
||||
--term-blue: #3465a4;
|
||||
--term-cyan: #06989a;
|
||||
--term-text-white: #d3d7cf;
|
||||
--term-bright-red: #ef2929;
|
||||
--term-bright-green: #58c142;
|
||||
--term-bright-yellow: #fce94f;
|
||||
--term-bright-blue: #32afff;
|
||||
--term-bright-magenta: #ad7fa8;
|
||||
--term-bright-cyan: #34e2e2;
|
||||
--term-bright-white: #ffffff;
|
||||
|
||||
--button-bg-yellow: #e9be68;
|
||||
--button-bg-red: #d06c68;
|
||||
|
||||
--history-error-red: #d06c68;
|
||||
--history-selected-error-red: #f79494;
|
||||
|
||||
--tab-red: #e54d2e;
|
||||
--tab-orange: #ef713b;
|
||||
--tab-yellow: #e0b956;
|
||||
--tab-green: #58c142;
|
||||
--tab-mint: #4bffa9;
|
||||
--tab-cyan: #4bdfff;
|
||||
--tab-blue: #3971ff;
|
||||
--tab-violet: #ba76ff;
|
||||
--tab-pink: #e05677;
|
||||
--tab-white: #ffffff;
|
||||
|
||||
--soft-blue: #729fcf;
|
||||
--active-menu-color: rgb(0, 71, 171);
|
||||
|
||||
--app-accent-color: rgb(88, 193, 66);
|
||||
--app-error-color: rgb(204, 0, 0);
|
||||
--app-warning-color: rgb(255, 165, 0);
|
||||
--app-scrollbar-thumb-color: rgb(134, 134, 134);
|
||||
--app-text-color: rgb(236, 238, 236);
|
||||
--app-border-color: #333;
|
||||
--app-border: rgba(241, 246, 243, 0.08);
|
||||
|
||||
--sidebar-dev-bg-color: #151730;
|
||||
--sidebar-separator-color: rgba(241, 246, 243, 0.08);
|
||||
--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;
|
||||
--line-sidebar-message-color: rgb(196, 160, 0);
|
||||
|
||||
--line-background: rgba(21, 23, 21, 1);
|
||||
--line-avatar-color: #eceeec;
|
||||
--line-text-color: #f2f4f2;
|
||||
--line-svg-fill-color: rgb(150, 152, 150);
|
||||
--line-svg-hover-fill-color: #eceeec;
|
||||
--line-selected-border-color: rgb(193, 195, 193);
|
||||
--line-separator-color: rgb(126, 126, 126);
|
||||
--line-meta-line1-color: rgb(150, 152, 150);
|
||||
--line-error-color: #cc0000;
|
||||
--line-warning-color: #ffa500;
|
||||
--line-base-soft-blue-color: #729fcf;
|
||||
--line-active-border-color: rgb(97, 158, 72);
|
||||
--line-selected-bg-color: rgba(255, 255, 255, 0.1);
|
||||
--line-selected-border-left-color: #ccc;
|
||||
--line-selected-error-border-color: rgba(204, 0, 0, 0.8);
|
||||
--line-selected-error-bg-color: rgb(19, 4, 3);
|
||||
--line-error-bg-color: rgba(200, 0, 0, 0.1);
|
||||
--line-error-border-left-color: --line-selected-error-border-color;
|
||||
--line-simple-text-color: rgba(236, 238, 236, 0.6);
|
||||
--line-meta-text-color: rgb(139, 145, 138);
|
||||
--line-meta-user-color: rgba(140, 184, 232);
|
||||
--line-svg-color: rgba(236, 238, 236, 0.6);
|
||||
--line-svg-hover-color: rgba(236, 238, 236, 1);
|
||||
--line-status-success-fill: rgb(88, 193, 66);
|
||||
--line-status-error-fill: #cc0000;
|
||||
--line-status-warning-fill: #ffa500;
|
||||
}
|
||||
@ -329,7 +329,7 @@ class Model {
|
||||
let cdata = this.clientData.get();
|
||||
let ff = cdata?.feopts?.termfontfamily;
|
||||
if (ff == null) {
|
||||
ff = "JetBrains Mono, monospace";
|
||||
ff = appconst.DefaultTermFontFamily;
|
||||
}
|
||||
return ff;
|
||||
}
|
||||
@ -1143,7 +1143,7 @@ class Model {
|
||||
setClientData(clientData: ClientDataType) {
|
||||
let newFontFamily = clientData?.feopts?.termfontfamily;
|
||||
if (newFontFamily == null) {
|
||||
newFontFamily = "JetBrains Mono";
|
||||
newFontFamily = appconst.DefaultTermFontFamily;
|
||||
}
|
||||
let newFontSize = clientData?.feopts?.termfontsize;
|
||||
if (newFontSize == null) {
|
||||
|
||||
@ -334,10 +334,7 @@ function loadFonts(termFont: string) {
|
||||
if (termFont == "Hack") {
|
||||
loadHackFont();
|
||||
}
|
||||
document.documentElement.style.setProperty(
|
||||
"--termfontfamily",
|
||||
'"' + termFont + '"' + ', "JetBrains Mono", monospace'
|
||||
);
|
||||
document.documentElement.style.setProperty("--termfontfamily", '"' + termFont + '"');
|
||||
}
|
||||
|
||||
const DOW_STRS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user