OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

use css scrollbar styles to make native scrollbars prettier

pull/21833/head
Bruno Windels 2019-01-21 19:01:18 +01:00
parent 89b576936b
commit 5aff76b49d
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

@ -83,7 +83,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

@ -79,7 +79,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: 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';