fenix-fox/chrome/overlay_scrollbars.as.css
MrOtherGuy fcec71b08a ovrelay-scrollbars: use currentcolor instead of black for thumb
This makes the thumb visible on pages with dark background - at least
most of the time.
2021-12-12 08:59:50 +02:00

67 lines
No EOL
2 KiB
CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_scrollbars.as.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This is supposed to be loaded as a agent sheet via autoconfig */
/* It will not work otherwise and might do unexpected things */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
scrollbar {
-moz-appearance: none !important;
position: relative !important;
background-color: transparent;
z-index: 9;
}
scrollbar thumb{
-moz-appearance: none !important;
background-color: transparent;
pointer-events: auto;
opacity: 0.5;
transition: opacity 0.1s ease-in;
}
scrollbar[orient = "vertical"] thumb{
border-image-source: linear-gradient(to right, transparent 13px, currentcolor 13px);
border-image-width: 0 0 0 16px;
border-image-slice: 0% 0% 0% 100%;
border-image-repeat: stretch;
}
scrollbar[orient = "horizontal"] thumb{
border-image-source: linear-gradient(to bottom, transparent 13px, currentcolor 13px);
border-image-width: 16px 0 0 0;
border-image-slice: 100% 0% 0% 0%;
border-image-repeat: stretch;
}
scrollbar gripper,
scrollbar scrollbarbutton{
display: none;
}
scrollbar[orient = "vertical"] {
min-width: 16px !important;
-moz-margin-start: -16px;/*margin to fill the whole render window with content and overlay the scrollbars*/
}
scrollbar[orient = "horizontal"] {
height: 16px !important;
margin-top: -16px;
}
scrollbar[orient = "vertical"] thumb{
border-right: 16px solid rgba(133, 132, 131, 1);
width: 16px;
min-height: 16px;
}
scrollbar[orient = "horizontal"] thumb{
border-bottom: 16px solid rgba(133, 132, 131, 1);
min-width: 16px !important;
}
scrollbar:hover {
background-color: rgba(0, 0, 0, 0.25);
}
scrollbar:hover thumb{ opacity: 1; }
scrollbar:hover thumb{ border-image: none !important; }
select > scrollbar,
select > scrollbar > thumb{
-moz-appearance: initial !important;
-moz-margin-start: 0px !important
}