diff --git a/public/themes/default.css b/public/themes/default.css index 1715df512..82bcce0c4 100644 --- a/public/themes/default.css +++ b/public/themes/default.css @@ -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); diff --git a/public/themes/light.css b/public/themes/light.css index 1d22ccd11..66c5aec0b 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -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); diff --git a/src/app/app.less b/src/app/app.less index 929b3294c..41e84754b 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -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); } } diff --git a/src/app/bookmarks/bookmarks.less b/src/app/bookmarks/bookmarks.less index 65049b41d..b2d9e903d 100644 --- a/src/app/bookmarks/bookmarks.less +++ b/src/app/bookmarks/bookmarks.less @@ -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); - } } } diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less index 3a9473bed..6ce1eef79 100644 --- a/src/app/common/elements/button.less +++ b/src/app/common/elements/button.less @@ -61,7 +61,7 @@ } &.secondary.danger { - color: var(--app-error-color); + color: var(--app-text-disabled-color); } &.small { diff --git a/src/app/common/elements/status.less b/src/app/common/elements/status.less index b05d8a219..3a27ce5ba 100644 --- a/src/app/common/elements/status.less +++ b/src/app/common/elements/status.less @@ -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); } } diff --git a/src/app/common/icons/icons.less b/src/app/common/icons/icons.less index f00d6bc62..87530878b 100644 --- a/src/app/common/icons/icons.less +++ b/src/app/common/icons/icons.less @@ -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); } } diff --git a/src/app/common/modals/about.less b/src/app/common/modals/about.less index 4f72b4897..444ff8d37 100644 --- a/src/app/common/modals/about.less +++ b/src/app/common/modals/about.less @@ -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); } } diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less index 66549fdd9..818727eab 100644 --- a/src/app/connections/connections.less +++ b/src/app/connections/connections.less @@ -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 { diff --git a/src/app/pluginsview/pluginsview.less b/src/app/pluginsview/pluginsview.less index 0f556dd79..d9a0067d0 100644 --- a/src/app/pluginsview/pluginsview.less +++ b/src/app/pluginsview/pluginsview.less @@ -1,6 +1,4 @@ .plugins-view { - background-color: var(--session-bg-color); - .header { margin: 1.5em 1.5em 0.5em; diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less index 17ade0bd9..c8fdd3c31 100644 --- a/src/app/workspace/screen/screenview.less +++ b/src/app/workspace/screen/screenview.less @@ -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; diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx index a5424ba09..67e7534b1 100644 --- a/src/app/workspace/screen/screenview.tsx +++ b/src/app/workspace/screen/screenview.tsx @@ -694,20 +694,6 @@ class ScreenWindowView extends React.Component<{ session: Session; screen: Scree let renderMode = this.renderMode.get(); return (
- [workspace="{session.name.get()}" screen="{screen.name.get()}"]
+ [workspace="{session.name.get()}" tab="{screen.name.get()}"]