fix blocks blurry border (#104)

frontend/app/app.less

@@ -22,17 +22,17 @@ body {
 }
 
 *::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-background-color) !important;
+    background-color: var(--scrollbar-background-color);
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb-color) !important;
+    background-color: var(--scrollbar-thumb-color);
     border-radius: 4px;
     margin: 0 1px 0 1px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover-color) !important;
+    background-color: var(--scrollbar-thumb-hover-color);
 }
 
 .flex-spacer {
@@ -61,3 +61,18 @@ body {
     --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
     --os-handle-bg-active: var(--scrollbar-thumb-active-color);
 }
+
+.scrollbar-hide-until-hover {
+    *::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-track {
+        display: none;
+    }
+
+    *::-webkit-scrollbar-corner {
+        display: none;
+    }
+
+    *:hover::-webkit-scrollbar-thumb {
+        display: block;
+    }
+}

frontend/app/block/block.less

@@ -12,7 +12,6 @@
     min-height: 0;
     position: relative;
     border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.1);
 
     .block-frame-icon {
         margin-right: 0.5em;
@@ -56,16 +55,16 @@
     }
 
     &.block-frame-default {
-        border: 2px solid transparent;
+        position: relative;
+        padding: 2px;
 
-        &.block-focused {
+        .block-frame-default-inner {
-            border: 2px solid var(--accent-color);
+            background-color: rgba(255, 255, 255, 0.05);
-
+            width: 100%;
-            &.block-no-highlight,
+            height: 100%;
-            &.block-preview {
+            border-radius: 8px;
-                border: 2px solid transparent;
+            display: flex;
-            }
+            flex-direction: column;
-        }
 
             .block-frame-default-header {
                 display: flex;
@@ -75,7 +74,7 @@
                 gap: 8px;
                 align-self: stretch;
                 font: var(--header-font);
-            background-color: #262626;
+                background-color: rgba(255, 255, 255, 0.1);
                 border-radius: 8px 8px 0 0;
 
                 .block-frame-default-header-iconview {
@@ -162,11 +161,39 @@
                     }
                 }
             }
-    }
 
             .block-frame-preview {
-        background-color: var(--main-bg-color);
+                background-color: rgba(0, 0, 0, 0.7);
                 width: 100%;
                 flex-grow: 1;
+                border-bottom-left-radius: 8px;
+                border-bottom-right-radius: 8px;
+            }
+        }
+
+        .block-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 2px solid transparent;
+            pointer-events: none;
+            padding: 2px;
+            border-radius: 8px;
+        }
+
+        &.block-focused {
+            .block-mask {
+                border: 2px solid var(--accent-color);
+            }
+
+            &.block-no-highlight,
+            &.block-preview {
+                .block-mask {
+                    border: 2px solid rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
     }
 }

frontend/app/block/block.tsx

@@ -293,6 +293,8 @@ const BlockFrame_Default_Component = ({
             ref={blockModel?.blockRef}
             style={style}
         >
+            <div className="block-mask"></div>
+            <div className="block-frame-default-inner">
                 <div
                     className="block-frame-default-header"
                     ref={layoutModel?.dragHandleRef}
@@ -312,6 +314,7 @@ const BlockFrame_Default_Component = ({
                 </div>
                 {preview ? <div className="block-frame-preview" /> : children}
             </div>
+        </div>
     );
 };
 

frontend/app/tab/tab.less

@@ -5,7 +5,7 @@
     position: absolute;
     width: 130px;
     height: 100%;
-    padding: 6px 3px;
+    padding: 6px 3px 0px;
     box-sizing: border-box;
     font-weight: bold;
     color: var(--secondary-text-color);

frontend/app/tab/tabbar.less

@@ -10,7 +10,7 @@
     .tab-bar {
         position: relative; // Needed for absolute positioning of child tabs
         margin-left: 100px;
-        height: 40px;
+        height: 33px;
         // 36 is the width of add tab button
         // 100 is offset from the left, for macOS window controls and dragging
         // 50 right offset for dragging

frontend/app/theme.less

@@ -19,10 +19,11 @@
     --warning-color: rgb(224, 185, 86);
     --success-color: rgb(78, 154, 6);
     --hover-bg-color: rgba(255, 255, 255, 0.1);
+    --block-bg-color: rgba(255, 255, 255, 0.05);
 
     /* scrollbar colors */
-    --scrollbar-background-color: var(--main-bg-color);
+    --scrollbar-background-color: transparent;
-    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
     --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
     --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
 

frontend/app/view/preview.tsx

@@ -399,7 +399,7 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
     }, 10);
 
     return (
-        <div ref={ref} className="full-preview">
+        <div ref={ref} className="full-preview scrollbar-hide-until-hover">
             <DirNav cwdAtom={fileNameAtom} />
             {specializedView}
         </div>

frontend/app/view/term/term.less

@@ -107,4 +107,28 @@
             }
         }
     }
+
+    .terminal {
+        *::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        *::-webkit-scrollbar-track {
+            background-color: var(--scrollbar-background-color);
+        }
+
+        *::-webkit-scrollbar-thumb {
+            display: none;
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: 4px;
+            margin: 0 1px 0 1px;
+        }
+
+        &:hover {
+            *::-webkit-scrollbar-thumb {
+                display: block;
+            }
+        }
+    }
 }