PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2470 from matrix-org/bwindels/css-scrollbars

Browse source 
Make native scrollbars prettier
This commit is contained in:
Bruno Windels 2019-01-29 08:20:21 +00:00 committed by GitHub
commit cc2b6f9524
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/structures/_AutoHideScrollbar.scss
View file

@ -64,3 +64,20 @@ body.mx_scrollbar_nooverlay {
margin-right: calc(-1 * var(--scrollbar-width)); 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;
}

4
res/themes/dark/css/_dark.scss
View file

@ -74,7 +74,9 @@ $strong-input-border-color: #656565;
// used for UserSettings EditableText // used for UserSettings EditableText
$input-underline-color: $primary-fg-color; $input-underline-color: $primary-fg-color;
$input-fg-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 // context menus
$menu-border-color: rgba(187, 187, 187, 0.5); $menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #373737; $menu-bg-color: #373737;

4
res/themes/dharma/css/_dharma.scss
View file

@ -86,7 +86,9 @@ $strong-input-border-color: #c7c7c7;
// used for UserSettings EditableText // used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5); $input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9); $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 // context menus
$menu-border-color: #ebedf8; $menu-border-color: #ebedf8;
$menu-bg-color: #fff; $menu-bg-color: #fff;

4
res/themes/light/css/_base.scss
View file

@ -83,7 +83,9 @@ $field-focused-label-bg-color: #ffffff;
// used for UserSettings EditableText // used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5); $input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9); $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 // context menus
$menu-border-color: rgba(187, 187, 187, 0.5); $menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6; $menu-bg-color: #f6f6f6;

1
src/components/structures/AutoHideScrollbar.js
View file

@ -20,6 +20,7 @@ import React from "react";
// Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me) // Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
function getScrollbarWidth(alternativeOverflow) { function getScrollbarWidth(alternativeOverflow) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'mx_AutoHideScrollbar'; //to get width of css scrollbar
div.style.position = 'absolute'; div.style.position = 'absolute';
div.style.top = '-9999px'; div.style.top = '-9999px';
div.style.width = '100px'; div.style.width = '100px';