diff --git a/src/renderer/components/+apps-releases/release-details.scss b/src/renderer/components/+apps-releases/release-details.scss index a6fb0e1cf6..672d739de1 100644 --- a/src/renderer/components/+apps-releases/release-details.scss +++ b/src/renderer/components/+apps-releases/release-details.scss @@ -32,7 +32,6 @@ border: 1px solid var(--drawerSubtitleBackground); border-radius: $radius; overflow: auto; - @include custom-scrollbar(); .TableHead { border-bottom: none; diff --git a/src/renderer/components/+preferences/preferences.scss b/src/renderer/components/+preferences/preferences.scss index 1fd6469494..cb0d866e15 100644 --- a/src/renderer/components/+preferences/preferences.scss +++ b/src/renderer/components/+preferences/preferences.scss @@ -6,7 +6,6 @@ .Badge { display: flex; - margin: 0; margin-bottom: 1px; padding: $padding $spacing; } diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx index 78f2896a73..ba869cec52 100644 --- a/src/renderer/components/+preferences/preferences.tsx +++ b/src/renderer/components/+preferences/preferences.tsx @@ -137,7 +137,7 @@ export class Preferences extends React.Component { formatOptionLabel={this.formatHelmOptionLabel} controlShouldRenderValue={false} /> -
+
{Array.from(this.helmAddedRepos).map(([name, repo]) => { const tooltipId = `message-${name}`; return ( diff --git a/src/renderer/components/+whats-new/whats-new.scss b/src/renderer/components/+whats-new/whats-new.scss index 8aa37fdf66..d7b13ac3e7 100644 --- a/src/renderer/components/+whats-new/whats-new.scss +++ b/src/renderer/components/+whats-new/whats-new.scss @@ -26,7 +26,7 @@ } > .content { - @include custom-scrollbar; + overflow: auto; margin-top: $spacing; padding: $spacing * 2; diff --git a/src/renderer/components/ace-editor/ace-editor.scss b/src/renderer/components/ace-editor/ace-editor.scss index 7aabbf01d5..ef04a4aa6f 100644 --- a/src/renderer/components/ace-editor/ace-editor.scss +++ b/src/renderer/components/ace-editor/ace-editor.scss @@ -7,10 +7,6 @@ .theme-light & { border: 1px solid gainsboro; - - .ace_scrollbar { - @include custom-scrollbar(dark); - } } > .editor { @@ -51,8 +47,4 @@ .ace_comment { color: #808080; } - - .ace_scrollbar { - @include custom-scrollbar; - } } \ No newline at end of file diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index 836d3a4ab1..037b088efe 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -1,15 +1,6 @@ @import "~flex.box"; @import "fonts"; -*, *:before, *:after { - box-sizing: border-box; - padding: 0; - margin: 0; - border: 0; - outline: none; - -webkit-font-smoothing: antialiased; -} - :root { --unit: 8px; --padding: var(--unit); @@ -27,6 +18,33 @@ --drag-region-height: 22px } +*, *:before, *:after { + box-sizing: border-box; + padding: 0; + margin: 0; + border: 0; + outline: none; + -webkit-font-smoothing: antialiased; +} + +::-webkit-scrollbar { + width: 16px; + height: 15px; // Align sizes visually + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--scrollBarColor); + background-clip: padding-box; + border: 4px solid transparent; + border-right-width: 5px; + border-radius: 16px; +} + +::-webkit-scrollbar-corner { + background-color: transparent; +} + ::selection { background: $primary; color: white; diff --git a/src/renderer/components/dialog/dialog.scss b/src/renderer/components/dialog/dialog.scss index 7b2887be18..949f801aa4 100644 --- a/src/renderer/components/dialog/dialog.scss +++ b/src/renderer/components/dialog/dialog.scss @@ -1,7 +1,5 @@ .Dialog { - @include custom-scrollbar; - position: fixed; overflow: auto; left: 0; @@ -11,6 +9,7 @@ padding: $unit * 5; z-index: $zIndex-dialog; overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX + overflow: auto; &.modal { background: transparentize(#222, .5); diff --git a/src/renderer/components/dock/pod-logs.scss b/src/renderer/components/dock/pod-logs.scss index c90adf7ddf..47909b4fb9 100644 --- a/src/renderer/components/dock/pod-logs.scss +++ b/src/renderer/components/dock/pod-logs.scss @@ -3,12 +3,7 @@ --overlay-active-bg: orange; .logs { - @include custom-scrollbar; - - // fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight` - // `overflow: overlay` don't allow scroll to the last line overflow: auto; - position: relative; color: $textColorAccent; background: $logsBackground; diff --git a/src/renderer/components/dock/terminal-window.scss b/src/renderer/components/dock/terminal-window.scss index 5bc45c1e1f..f08c378ee9 100644 --- a/src/renderer/components/dock/terminal-window.scss +++ b/src/renderer/components/dock/terminal-window.scss @@ -5,17 +5,7 @@ margin-left: $padding * 2; margin-top: $padding * 2; - .theme-light & { - .xterm-viewport { - @include custom-scrollbar(dark); - } - } - > .xterm { overflow: hidden; } - - .xterm-viewport { - @include custom-scrollbar; - } } \ No newline at end of file diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss index 488a890f2c..b34b3b5965 100644 --- a/src/renderer/components/drawer/drawer.scss +++ b/src/renderer/components/drawer/drawer.scss @@ -10,12 +10,6 @@ box-shadow: 0 0 $unit * 2 $boxShadow; z-index: $zIndex-drawer; - .theme-light & { - .drawer-content { - @include custom-scrollbar(dark); - } - } - &.left { left: 0; } @@ -71,11 +65,8 @@ } .drawer-content { - @include custom-scrollbar; - - > *:not(.Spinner) { - padding: var(--spacing); - } + overflow: auto; + padding: var(--spacing); .Table .TableHead { background-color: $contentColor; diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index b0540b9a15..c975ea3305 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -33,7 +33,7 @@ } > .content-wrapper { - @include custom-scrollbar-themed; + overflow: auto; padding: $spacing * 2; display: flex; flex-direction: column; diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss index 7b1406fb7b..1c5932b8d9 100644 --- a/src/renderer/components/layout/sidebar.scss +++ b/src/renderer/components/layout/sidebar.scss @@ -19,11 +19,7 @@ &.pinned { .sidebar-nav { - @include custom-scrollbar; - - .theme-light & { - @include custom-scrollbar(dark); - } + overflow: auto; } } @@ -63,8 +59,6 @@ } .sidebar-nav { - @include hidden-scrollbar; - padding: $padding / 1.5 0; .Icon { diff --git a/src/renderer/components/layout/tab-layout.scss b/src/renderer/components/layout/tab-layout.scss index e8b62558d7..639a089527 100755 --- a/src/renderer/components/layout/tab-layout.scss +++ b/src/renderer/components/layout/tab-layout.scss @@ -9,13 +9,8 @@ main { - @include custom-scrollbar; $spacing: $margin * 2; - .theme-light & { - @include custom-scrollbar(dark); - } - grid-area: main; overflow-y: scroll; // always reserve space for scrollbar (17px) overflow-x: auto; diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss index 73c5afc3fe..155bf0ae23 100644 --- a/src/renderer/components/layout/wizard-layout.scss +++ b/src/renderer/components/layout/wizard-layout.scss @@ -9,8 +9,8 @@ grid-template-columns: 1fr 40%; > * { - @include custom-scrollbar-themed; --flex-gap: #{$spacing}; + overflow: auto; padding: $spacing; } diff --git a/src/renderer/components/markdown-viewer/markdown-viewer.scss b/src/renderer/components/markdown-viewer/markdown-viewer.scss index 35b842d4f6..58f808b99b 100644 --- a/src/renderer/components/markdown-viewer/markdown-viewer.scss +++ b/src/renderer/components/markdown-viewer/markdown-viewer.scss @@ -4,10 +4,8 @@ line-height: 1.5; word-wrap: break-word; - &.light { - pre, table { - @include custom-scrollbar(dark); - } + pre, table { + overflow: auto; } .pl-c { @@ -513,7 +511,6 @@ } table { - @include custom-scrollbar; border-collapse: collapse; display: table; width: 100%; @@ -581,13 +578,12 @@ .highlight pre, pre { - @include custom-scrollbar; padding: 16px; font-size: 85%; line-height: 1.45; background-color: $helmDescriptionPreBackground; border-radius: 3px; - overflow: auto !important; + overflow: auto; } pre code { diff --git a/src/renderer/components/markdown-viewer/markdown-viewer.tsx b/src/renderer/components/markdown-viewer/markdown-viewer.tsx index e1870e0d30..b50e4e2c16 100644 --- a/src/renderer/components/markdown-viewer/markdown-viewer.tsx +++ b/src/renderer/components/markdown-viewer/markdown-viewer.tsx @@ -6,7 +6,6 @@ import React, { Component } from "react"; import marked from "marked"; import DOMPurify from "dompurify"; import { cssNames } from "../../utils"; -import { themeStore } from "../../theme.store"; DOMPurify.addHook('afterSanitizeAttributes', function (node) { // Set all elements owning target to target=_blank @@ -29,7 +28,7 @@ export class MarkdownViewer extends Component { const html = DOMPurify.sanitize(marked(markdown)); return (
); diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss index 2509c1e951..6573a7487a 100755 --- a/src/renderer/components/mixins.scss +++ b/src/renderer/components/mixins.scss @@ -6,52 +6,6 @@ @import "table/table.mixins"; @import "+network/network-mixins"; -// todo: re-use in other places with theming -@mixin custom-scrollbar-themed($invert: false) { - @if ($invert) { - @include custom-scrollbar(dark); - .theme-light & { - @include custom-scrollbar(light); - } - } @else { - // fits better with dark background - @include custom-scrollbar(light); - .theme-light & { - @include custom-scrollbar(dark); - } - } -} - -@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) { - $themes: ( - light: #5f6064, - dark: #bbb, - ); - - $scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none); - $scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2); - - overflow: auto; // allow scrolling for container - - // Webkit - &::-webkit-scrollbar { - width: $scrollBarSize; - height: $scrollBarSize; - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background: $scrollBarColor; - background-clip: padding-box; - border: $borderSpacing solid transparent; - border-radius: $scrollBarSize; - } - - &::-webkit-scrollbar-corner { - background-color: transparent; - } -} - // Hide scrollbar but keep the element scrollable @mixin hidden-scrollbar { overflow: auto; diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss index a9468a0c8a..f3fd6e47b0 100644 --- a/src/renderer/components/select/select.scss +++ b/src/renderer/components/select/select.scss @@ -75,7 +75,6 @@ html { min-width: 100%; &-list { - @include custom-scrollbar; padding-right: 1px; padding-left: 1px; width: max-content; @@ -152,10 +151,6 @@ html { --select-option-selected-bgc: $textColorSecondary; .Select { - &__menu-list { - @include custom-scrollbar($theme: dark); - } - &__multi-value { background: none; box-shadow: 0 0 0 1px $textColorSecondary; diff --git a/src/renderer/components/table/table.scss b/src/renderer/components/table/table.scss index 1ff6343598..76b02ac62f 100644 --- a/src/renderer/components/table/table.scss +++ b/src/renderer/components/table/table.scss @@ -1,19 +1,14 @@ .Table { - &.scrollable { - .theme-light & { - @include custom-scrollbar(dark); - } - - @include custom-scrollbar(); - flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox - } - &.autoSize { .TableCell { flex: 1 0; } } + &.scrollable { + overflow: auto; + } + &.selectable { .TableHead, .TableRow { padding: 0 $padding; diff --git a/src/renderer/components/virtual-list/virtual-list.scss b/src/renderer/components/virtual-list/virtual-list.scss index 4357321c7a..a7e1deda36 100644 --- a/src/renderer/components/virtual-list/virtual-list.scss +++ b/src/renderer/components/virtual-list/virtual-list.scss @@ -2,12 +2,6 @@ overflow: hidden; > .list { - @include custom-scrollbar; - - .theme-light & { - @include custom-scrollbar(dark); - } - - overflow-y: overlay !important; + overflow-y: overlay!important; } } \ No newline at end of file diff --git a/src/renderer/components/wizard/wizard.scss b/src/renderer/components/wizard/wizard.scss index 9895b1bec1..487796f822 100755 --- a/src/renderer/components/wizard/wizard.scss +++ b/src/renderer/components/wizard/wizard.scss @@ -15,7 +15,7 @@ } @mixin scrollableContent() { - @include custom-scrollbar($theme: dark); + overflow: auto; padding: var(--wizard-spacing); height: var(--wizard-content-height); max-height: var(--wizard-content-max-height); diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index f1afcb0d24..6606af6d15 100644 --- a/src/renderer/themes/lens-dark.json +++ b/src/renderer/themes/lens-dark.json @@ -107,6 +107,7 @@ "selectOptionHoveredColor": "#87909c", "lineProgressBackground": "#414448", "radioActiveBackground": "#36393e", - "menuActiveBackground": "#36393e" + "menuActiveBackground": "#36393e", + "scrollBarColor": "#5f6064" } } diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json index 302a52a699..ebd8441a9b 100644 --- a/src/renderer/themes/lens-light.json +++ b/src/renderer/themes/lens-light.json @@ -39,13 +39,13 @@ "helmImgBackground": "#e8e8e8", "helmStableRepo": "#3d90ce", "helmIncubatorRepo": "#ff7043", - "helmDescriptionHr": "#41474a", + "helmDescriptionHr": "#dddddd", "helmDescriptionBlockqouteColor": "#555555", "helmDescriptionBlockqouteBorder": "#8a8f93", "helmDescriptionBlockquoteBackground": "#eeeeee", "helmDescriptionHeaders": "#3e4147", "helmDescriptionH6": "#6a737d", - "helmDescriptionTdBorder": "#47494a", + "helmDescriptionTdBorder": "#c6c6c6", "helmDescriptionTrBackground": "#1c2125", "helmDescriptionCodeBackground": "#ffffff1a", "helmDescriptionPreBackground": "#eeeeee", @@ -108,6 +108,7 @@ "selectOptionHoveredColor": "#ffffff", "lineProgressBackground": "#e8e8e8", "radioActiveBackground": "#f1f1f1", - "menuActiveBackground": "#e8e8e8" + "menuActiveBackground": "#e8e8e8", + "scrollBarColor": "#bbbbbb" } }