diff --git a/public/index-dev.html b/public/index-dev.html index 9c4aeea4..f0c1c4a4 100644 --- a/public/index-dev.html +++ b/public/index-dev.html @@ -13,7 +13,6 @@
-
diff --git a/public/index.html b/public/index.html index 29d66fb5..3718ee97 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,6 @@
-
diff --git a/src/app/app.less b/src/app/app.less index de53b56c..c1cd0780 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -21,6 +21,10 @@ body { } } +body .sidebar { + background-color: var(--app-bg-color); +} + textarea { overflow: hidden; font-family: @fixed-font; @@ -137,11 +141,35 @@ svg.icon { } *::-webkit-scrollbar-track { - background-color: var(--scrollbar-thumb-color) !important; + background-color: var(--scrollbar-background-color) !important; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color) !important; + border-radius: 4px; + margin: 0 1px 0 1px; +} + +*::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover-color) !important; +} + +.hide-scrollbar { + &::-webkit-scrollbar { + display: none; + } +} + +.wide-scrollbar { + &::-webkit-scrollbar { + width: 12px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + border: 2px solid transparent; + background-clip: padding-box; + } } .truncate { @@ -176,15 +204,6 @@ svg.icon { outline: none !important; } -#title-bar { - -webkit-app-region: drag; - height: 10px; - width: 100%; - position: absolute; - top: 0; - left: 0; -} - input[type="checkbox"] { cursor: pointer; } @@ -210,10 +229,11 @@ a.a-block { // main layout #main { - margin-top: 10px; - height: calc(100vh - 10px); + height: 100vh; display: flex; flex-direction: column; + background-color: var(--app-maincontent-bg-color); + border-top: 1px solid var(--app-border-color); .main-content { display: flex; @@ -235,17 +255,6 @@ a.a-block { } overflow: auto; } - - .main-content-bottom-color { - position: absolute; - width: 100%; - left: 0; - right: 0; - bottom: 0; - height: 30%; - pointer-events: none; - background-color: @main-content-bottom-background; - } } } diff --git a/src/app/app.tsx b/src/app/app.tsx index 07e66ee7..d6fca450 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -115,7 +115,6 @@ class App extends React.Component<{}, {}> { onContextMenu={this.handleContextMenu} >
-
diff --git a/src/app/line/lines.less b/src/app/line/lines.less index da577ab9..6dc14ec4 100644 --- a/src/app/line/lines.less +++ b/src/app/line/lines.less @@ -9,19 +9,8 @@ position: relative; overflow-x: hidden; - &::-webkit-scrollbar-thumb { - background-color: transparent !important; - } - &::-webkit-scrollbar-track { - background-color: transparent !important; - } - - &:hover, - &:focus, - &:focus-within { - &::-webkit-scrollbar-thumb { - background-color: var(--app-scrollbar-thumb-color) !important; - } + &.hide-scrollbar::-webkit-scrollbar-thumb { + display: none; } .line:nth-child(2) { diff --git a/src/app/line/linesview.tsx b/src/app/line/linesview.tsx index b6418d3f..a267e98b 100644 --- a/src/app/line/linesview.tsx +++ b/src/app/line/linesview.tsx @@ -495,7 +495,7 @@ class LinesView extends React.Component< // let lineElem = ; lineElements.push(lineElem); } - let linesClass = cn("lines", renderMode == "normal" ? "lines-expanded" : "lines-collapsed"); + let linesClass = cn("lines", renderMode == "normal" ? "lines-expanded" : "lines-collapsed", "wide-scrollbar"); return (
diff --git a/src/app/root.less b/src/app/root.less index 66df7c5c..3faa294a 100644 --- a/src/app/root.less +++ b/src/app/root.less @@ -20,13 +20,17 @@ --app-border-color: rgb(51, 51, 51); --app-bg-color: rgba(21, 23, 21, 1); --app-bg-color-dev: rgba(21, 23, 48, 1); + --app-maincontent-bg-color: #333; + --app-border-radius: 10px; // global generic colors --app-black: rgb(0, 0, 0); // scrollbar colors - --scrollbar-background-color: rgba(21, 23, 21, 1); - --scrollbar-thumb-color: rgb(134, 134, 134); + // --scrollbar-background-color: rgba(21, 23, 21, 1); + --scrollbar-background-color: #171717; + --scrollbar-thumb-color: #333; + --scrollbar-thumb-hover-color: rgb(211, 215, 207); // code color --pre-bg-color: rgb(0, 0, 0); diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less index b15666ea..ec433eab 100644 --- a/src/app/sidebar/sidebar.less +++ b/src/app/sidebar/sidebar.less @@ -10,7 +10,7 @@ line-height: 20px; backdrop-filter: blur(4px); z-index: 20; - border-radius: 10px; + border-radius: var(--app-border-radius) 0 var(--app-border-radius) var(--app-border-radius); border-left: 1px solid var(--app-border-color); border-bottom: 1px solid var(--app-border-color); diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less index c0efb79f..ae4c978f 100644 --- a/src/app/workspace/cmdinput/cmdinput.less +++ b/src/app/workspace/cmdinput/cmdinput.less @@ -274,7 +274,8 @@ .cmd-history { color: var(--app-text-color); - margin-bottom: 5px; + font-family: var(--termfontfamily); + font-size: var(--termfontsize); overflow: auto; flex-shrink: 1; @@ -282,14 +283,19 @@ position: absolute; z-index: 102; top: 5px; - left: 20px; - background-color: var(--cmdinput-history-bg-color); + left: 0; + background-color: var(--app-black); color: var(--cmdinput-history-title-color); padding-bottom: 4px; display: flex; flex-direction: row; - width: calc(100% - 40px); + width: 100%; overflow-x: auto; + border-bottom: 1px solid var(--app-border-color); + + div:first-child { + margin-left: var(--termpad); + } .history-opt { white-space: nowrap; diff --git a/src/app/workspace/cmdinput/historyinfo.tsx b/src/app/workspace/cmdinput/historyinfo.tsx index 84b4236d..5df0cb39 100644 --- a/src/app/workspace/cmdinput/historyinfo.tsx +++ b/src/app/workspace/cmdinput/historyinfo.tsx @@ -206,9 +206,9 @@ class HistoryInfo extends React.Component<{}, {}> { scrNames = GlobalModel.getScreenNames(); } return ( -
+
-
history
+
history
[for {opts.queryType} ⌘S]
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index e81f6fe7..9567f7a1 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -5,6 +5,11 @@ border-top: 1px solid transparent; font-size: 12.5px; + // this comes back when we have a completely removable left-sidebar + // &:first-child { + // border-radius: var(--app-border-radius) 0px 0px 0px; + // } + &.color-green, &.color-default { svg.svg-icon-inner path { @@ -298,8 +303,6 @@ .new-screen { flex-shrink: 0; - margin-left: 1em; - margin-right: 1em; cursor: pointer; display: flex; align-items: center; @@ -312,4 +315,10 @@ vertical-align: middle; } } + + .tabs-end-spacer { + flex-grow: 1; + min-width: 20px; + -webkit-app-region: drag; + } } diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx index 24c5cd80..4e382210 100644 --- a/src/app/workspace/screen/tabs.tsx +++ b/src/app/workspace/screen/tabs.tsx @@ -205,6 +205,7 @@ class ScreenTabs extends React.Component<
+
); } diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less index 3fcb5f35..1e42e14d 100644 --- a/src/app/workspace/workspace.less +++ b/src/app/workspace/workspace.less @@ -8,8 +8,7 @@ &.is-hidden { display: none; } - border-radius: 10px; - border-radius: 0 0 6px 6px; + border-radius: 0 var(--app-border-radius) var(--app-border-radius) var(--app-border-radius); border-bottom: 1px solid var(--app-border-color); border-right: 1px solid var(--app-border-color); border-left: 1px solid var(--app-border-color);