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

Merge pull request #4300 from matrix-org/bwindels/fixglobalscrollbars 

Fix: bring back global thin scrollbars
pull/21833/head
Bruno Windels 2020-03-30 10:56:19 +00:00 committed by GitHub
parent 90b8d87a39 eff9db4273
commit 117ea5dc76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
res/css/structures/_AutoHideScrollbar.scss
View File

@ -14,28 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay; // where supported
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: transparent;
}
scrollbar-color: transparent transparent;
// make any scrollbar grey and thin
html {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
}
// scrollbar-width is not inherited (but -color is, why?!),
// so declare it on every element
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: $scrollbar-track-color;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: $scrollbar-thumb-color;
}
// make auto-hide scrollbars not transparent again on hover
.mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
&::-webkit-scrollbar {
background-color: $scrollbar-track-color;
}
@ -43,5 +46,22 @@ limitations under the License.
&::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;
}
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
}
// make scrollbars transparent for autohide scrollbars
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay; // where supported
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
scrollbar-color: transparent transparent;
}