Finalize CSS vars (#472)

* 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

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);
-
+    --app-error-color: rgb(229, 77, 46);
-    /* icon colors */
+    --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(--app-error-color);
-    --term-error-color: var(--status-error-color);
+    --term-warning-color: var(--app-warning-color);
-    --term-warning-color: var(--status-connecting-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);

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);

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);
     }
 }
 

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);
+            color: var(--app-text-color);
-            background-color: var(--bookmarks-textarea-bg-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);
-                }
             }
         }
 

src/app/common/elements/button.less

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

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);
     }
 }

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);
     }
 }

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);
                         }
                     }
 

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 {

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;
 

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;

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 (
             <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}

src/plugins/code/code.less

@@ -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;