From 5aff76b49da5fe90b266d9ba4202af9d92479cb7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 21 Jan 2019 19:01:18 +0100 Subject: [PATCH] use css scrollbar styles to make native scrollbars prettier --- res/css/structures/_AutoHideScrollbar.scss | 17 +++++++++++++++++ res/themes/dark/css/_dark.scss | 4 +++- res/themes/dharma/css/_dharma.scss | 4 +++- res/themes/light/css/_base.scss | 4 +++- src/components/structures/AutoHideScrollbar.js | 1 + 5 files changed, 27 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index 60aea7ce8f..cb0d6f7f09 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -64,3 +64,20 @@ body.mx_scrollbar_nooverlay { margin-right: calc(-1 * var(--scrollbar-width)); } } + +// style the native scrollbars ... +// ... standard css scrollbars (firefox at time of writing) +.mx_AutoHideScrollbar { + scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color; + scrollbar-width: thin; +} +// or fallback for webkit browsers +::-webkit-scrollbar { + width: 6px; + background-color: $scrollbar-track-color; +} + +::-webkit-scrollbar-thumb { + background-color: $scrollbar-thumb-color; + border-radius: 3px; +} diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 997a74e6aa..53d4b42ff4 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -74,7 +74,9 @@ $strong-input-border-color: #656565; // used for UserSettings EditableText $input-underline-color: $primary-fg-color; $input-fg-color: $primary-fg-color; - +// scrollbars +$scrollbar-thumb-color: rgba(255, 255, 255, 0.2); +$scrollbar-track-color: transparent; // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c70d7f020a..01eaaed1bc 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -83,7 +83,9 @@ $strong-input-border-color: #c7c7c7; // used for UserSettings EditableText $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); - +// scrollbars +$scrollbar-thumb-color: rgba(0, 0, 0, 0.2); +$scrollbar-track-color: transparent; // context menus $menu-border-color: #ebedf8; $menu-bg-color: #fff; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 96c179f6f5..bf453a6eb4 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -79,7 +79,9 @@ $strong-input-border-color: #c7c7c7; // used for UserSettings EditableText $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); - +// scrollbars +$scrollbar-thumb-color: rgba(0, 0, 0, 0.2); +$scrollbar-track-color: transparent; // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js index 47ae24ba0f..a8fccec08e 100644 --- a/src/components/structures/AutoHideScrollbar.js +++ b/src/components/structures/AutoHideScrollbar.js @@ -20,6 +20,7 @@ import React from "react"; // Copyright (c) Noel Delgado (pixelia.me) function getScrollbarWidth(alternativeOverflow) { const div = document.createElement('div'); + div.className = 'mx_AutoHideScrollbar'; //to get width of css scrollbar div.style.position = 'absolute'; div.style.top = '-9999px'; div.style.width = '100px';