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

Finalize CSS vars (#472)

Browse Source 
* remove unused vars

* replace remote status vars with --app-* vars

* replace status indicator vars with --app-* vars

* remove unused vars in default.css

* no need for bg color in view

* use --app* colors for view color

* remove --app-black var

* remove some unused css and divs
This commit is contained in:
Red J Adaya 2024-03-19 13:00:13 +08:00 committed by GitHub
parent a32bc10981
commit d2f5d87194
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 36 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
public/themes/default.css
View File

@ -7,16 +7,6 @@
:root {
--fa-style-family: "Font Awesome 6 Sharp";
/* these variables are overridden by user settings */
/*
--termfontfamily: "Hack";
--termfontsize: 13px;
--termlineheight: 15px;
--termpad: 7px;
--termfontsize-sm: 11px;
--termlineheight-sm: 13px;
*/
/* base fonts */
--base-font: normal 15px / normal "Lato", sans-serif;
@ -52,12 +42,10 @@
--app-bg-color: black;
--app-accent-color: rgb(88, 193, 66);
--app-accent-bg-color: rgba(88, 193, 66, 0.25);
--app-error-color: rgb(229, 77, 46);
--app-warning-color: rgb(224, 185, 86);
--app-success-color: rgb(78, 154, 6);
--app-text-color: rgb(211, 215, 207);
--app-text-primary-color: rgb(255, 255, 255);
--app-text-secondary-color: rgb(195, 200, 194);
--app-text-disabled-color: rgb(173, 173, 173);
--app-border-color: rgb(51, 51, 51);
--app-maincontent-bg-color: #333;
--app-panel-bg-color: rgba(21, 23, 21, 1);
@ -65,17 +53,15 @@
--app-icon-color: rgb(139, 145, 138);
--app-icon-hover-color: #fff;
--app-selected-mask-color: rgba(255, 255, 255, 0.06);
/* icon colors */
--app-error-color: rgb(229, 77, 46);
--app-warning-color: rgb(224, 185, 86);
--app-success-color: rgb(78, 154, 6);
--app-idle-color: var(--app-text-secondary-color);
/* just for macos */
--app-border-radius-darwin: 10px;
/* global generic colors */
--app-black: rgb(0, 0, 0);
/* scrollbar colors */
/* --scrollbar-background-color: rgba(21, 23, 21, 1); */
--scrollbar-background-color: var(--app-bg-color);
--scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
@ -116,28 +102,9 @@
--markdown-bg-color: rgb(35, 35, 35);
--markdown-outline-color: var(--form-element-primary-color);
/* status(remote) colors */
/* todo: all status colors must be unified */
--status-connected-color: var(--app-success-color);
--status-connecting-color: var(--app-warning-color);
--status-error-color: var(--app-error-color);
--status-disconnected-color: var(--app-text-secondary-color);
/* status indicator colors */
/* todo: all status colors must be unified */
--status-indicator-color: var(--app-text-color);
--status-indicator-error: var(--status-error-color);
--status-indicator-success: var(--status-connected-color);
/* status(version) colors */
/* todo: all status colors must be unified */
--status-outdated-color: var(--status-connecting-color);
--status-updated-color: var(--status-connected-color);
/* term status colors */
/* todo: all status colors must be unified */
--term-error-color: var(--status-error-color);
--term-warning-color: var(--status-connecting-color);
--term-error-color: var(--app-error-color);
--term-warning-color: var(--app-warning-color);
/* hotkey colors */
--hotkey-text-color: var(--app-text-secondary-color);
@ -178,17 +145,6 @@
--line-actions-active-color: rgba(255, 255, 255, 1);
--line-actions-bg-color: rgba(255, 255, 255, 0.15);
/* 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: var(--app-error-color);
--view-text-color: var(--app-text-color);
/* table colors */
--table-border-color: rgba(241, 246, 243, 0.15);
--table-thead-border-top-color: rgba(250, 250, 250, 0.1);
@ -199,9 +155,6 @@
--table-tr-selected-bg-color: #222;
--table-tr-selected-hover-bg-color: #333;
/* session colors */
--session-bg-color: rgba(13, 13, 13, 0.85);
/* cmdinput colors */
--cmdinput-textarea-bg-color: #171717;
--cmdinput-text-error-color: var(--term-red);

2
public/themes/light.css
View File

@ -31,7 +31,7 @@
--button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */
/* view colors */
--view-text-color: var(--app-text-color);
--app-text-color: var(--app-text-color);
/* table colors */
--table-thead-border-top-color: rgba(0, 0, 0, 0.2);

8
src/app/app.less
View File

@ -735,28 +735,28 @@ a.a-block {
.status-icon.status-connected {
path,
circle {
fill: var(--status-connected-color);
fill: var(--app-success-color);
}
}
.status-icon.status-connecting {
path,
circle {
fill: var(--status-connecting-color);
fill: var(--app-warning-color);
}
}
.status-icon.status-disconnected {
path,
circle {
fill: var(--status-disconnected-color);
fill: var(--app-idle-color);
}
}
.status-icon.status-error {
path,
circle {
fill: var(--status-error-color);
fill: var(--app-text-disabled-color);
}
}

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

@ -6,11 +6,11 @@
}
.bookmarks-list {
color: var(--bookmarks-text-color);
color: var(--app-text-color);
margin: 4px 10px 5px 5px;
.no-bookmarks {
color: var(--bookmarks-text-color);
color: var(--app-text-color);
padding: 30px 10px 35px 10px;
border-bottom: 1px solid white;
}
@ -46,21 +46,21 @@
}
label {
color: var(--bookmarks-text-color);
color: var(--app-text-color);
margin-bottom: 4px;
}
textarea {
width: 80%;
min-width: 50%;
color: var(--bookmarks-text-color);
background-color: var(--bookmarks-textarea-bg-color);
color: var(--app-text-color);
background-color: var(--form-element-bg-color);
}
.bookmark-id-div {
display: none;
position: absolute;
color: var(--bookmarks-disabled-text-color);
color: var(--app-text-disabled-color);
right: 5px;
bottom: 2px;
font-size: 0.8em;
@ -75,7 +75,7 @@
flex-direction: row;
visibility: hidden;
color: var(--bookmarks-text-color);
color: var(--app-text-color);
.bookmark-control:first-child {
margin-left: 0;
@ -85,10 +85,6 @@
margin-left: 10px;
cursor: pointer;
padding: 2px;
&:hover {
color: var(--bookmarks-control-hover-color);
}
}
}

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

@ -61,7 +61,7 @@
}
&.secondary.danger {
color: var(--app-error-color);
color: var(--app-text-disabled-color);
}
&.small {

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

@ -11,18 +11,18 @@
}
.dot.green {
background-color: var(--status-connected-color);
background-color: var(--app-success-color);
}
.dot.red {
background-color: var(--status-error-color);
background-color: var(--app-text-disabled-color);
}
.dot.gray {
background-color: var(--status-disconnected-color);
background-color: var(--app-idle-color);
}
.dot.yellow {
background-color: var(--status-connecting-color);
background-color: var(--app-warning-color);
}
}

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

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

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

@ -70,7 +70,7 @@
margin-bottom: 5px;
i {
color: var(--status-updated-color);
color: var(--app-success-color);
}
}
}
@ -78,7 +78,7 @@
.status.outdated {
div {
i {
color: var(--status-outdated-color);
color: var(--app-warning-color);
}
}

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

@ -33,13 +33,13 @@
th {
height: 32px;
padding: 5px 15px 5px 10px;
color: var(--view-text-color);
color: var(--app-text-color);
}
}
tr.connections-item {
border-bottom: 1px solid var(--table-tr-border-bottom-color);
color: var(--view-text-color);
color: var(--app-text-color);
cursor: pointer;
&:hover {

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

@ -1,6 +1,4 @@
.plugins-view {
background-color: var(--session-bg-color);
.header {
margin: 1.5em 1.5em 0.5em;

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

@ -95,33 +95,6 @@
height: 100%;
overflow-x: hidden;
.rendermode-tag {
position: absolute;
top: 0;
right: 0;
background-color: rgba(78, 154, 6, 0.65);
color: var(--app-black);
padding: 2px 8px 2px 4px;
border-bottom-left-radius: 5px;
z-index: 10;
&.is-active {
color: var(--app-text-color);
}
.render-mode {
padding-top: 2px;
position: relative;
cursor: pointer;
color: var(--app-text-color);
&:hover {
color: var(--app-text-color);
}
}
}
.window-empty {
display: flex;
align-items: center;
@ -129,11 +102,11 @@
width: 100%;
padding: 10px;
height: 100%;
color: #ccc;
color: var(--app-text-color);
code {
background-color: transparent;
color: #4e9a06;
color: var(--term-green);
}
&.should-fade {
@ -142,44 +115,6 @@
}
}
.share-tag {
color: var(--app-text-color);
position: absolute;
top: 0;
left: 40%;
background-color: darken(rgb(0, 177, 10), 20%);
padding: 2px 8px 2px 4px;
z-index: 11;
/* border-radius: 0 0 5px 5px; */
opacity: 0.8;
display: flex;
flex-direction: column;
.share-tag-link {
margin-top: 10px;
display: none;
}
&:hover {
.share-tag-title {
font-weight: bold;
}
opacity: 1;
padding: 20px;
width: 250px;
border: 1px solid #ccc;
border-top: 0;
.share-tag-link {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
}
}
.filter-running {
position: relative;
display: flex;

43
src/app/workspace/screen/screenview.tsx
View File

@ -694,20 +694,6 @@ class ScreenWindowView extends React.Component<{ session: Session; screen: Scree
let renderMode = this.renderMode.get();
return (
<div className="window-view" ref={this.windowViewRef} style={{ width: this.props.width }}>
<div
key="rendermode-tag"
className={cn("rendermode-tag", { "is-active": isActive })}
style={{ display: "none" }}
>
<div className="render-mode" onClick={this.toggleRenderMode}>
<If condition={renderMode == "normal"}>
<i title="collapse" className="fa-sharp fa-solid fa-arrows-to-line" />
</If>
<If condition={renderMode == "collapsed"}>
<i title="expand" className="fa-sharp fa-solid fa-arrows-from-line" />
</If>
</div>
</div>
<If condition={lines.length == 0}>
<If condition={screen.nextLineNum.get() == 1}>
<NewTabSettings screen={screen} />
@ -718,40 +704,13 @@ class ScreenWindowView extends React.Component<{ session: Session; screen: Scree
<div key="window-empty" className={cn("window-empty")}>
<div>
<code className="text-standard">
[workspace="{session.name.get()}" screen="{screen.name.get()}"]
[workspace="{session.name.get()}" tab="{screen.name.get()}"]
</code>
</div>
</div>
</div>
</If>
</If>
<If condition={screen.isWebShared()}>
<div key="share-tag" className="share-tag">
<If condition={this.shareCopied.get()}>
<div className="copied-indicator" />
</If>
<div className="share-tag-title">
<i title="archived" className="fa-sharp fa-solid fa-share-nodes" /> web shared
</div>
<div className="share-tag-link">
<div className="button is-wave-green is-outlined is-small" onClick={this.copyShareLink}>
<span>copy link</span>
<span className="icon">
<i className="fa-sharp fa-solid fa-copy" />
</span>
</div>
<div
className="button is-wave-green is-outlined is-small"
onClick={this.openScreenSettings}
>
<span>open settings</span>
<span className="icon">
<i className="fa-sharp fa-solid fa-cog" />
</span>
</div>
</div>
</div>
</If>
<If condition={lines.length > 0}>
<LinesView
screen={screen}

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

@ -62,7 +62,7 @@
right: 12rem;
border-radius: 5px;
background-color: var(--form-element-secondary-color);
color: var(--app-error-color);
color: var(--app-text-disabled-color);
z-index: 1;
padding: 0 0.8em;
font-size: 0.8em;