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

bring back global style rules for thin scrollbars (also FF now!)

pull/21833/head
Bruno Windels 2020-03-30 12:41:05 +02:00
parent cf4f595f79
commit eff9db4273
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. limitations under the License.
*/ */
.mx_AutoHideScrollbar { // make any scrollbar grey and thin
overflow-x: hidden; html {
overflow-y: auto; scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
overflow-y: overlay; // where supported }
-ms-overflow-style: -ms-autohiding-scrollbar; // scrollbar-width is not inherited (but -color is, why?!),
// so declare it on every element
&::-webkit-scrollbar { * {
width: 6px;
height: 6px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: transparent;
}
scrollbar-color: transparent transparent;
scrollbar-width: thin; 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 { .mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background-color: $scrollbar-track-color; background-color: $scrollbar-track-color;
} }
@ -43,5 +46,22 @@ limitations under the License.
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color; 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;
} }