Probieren mal bitte. Gradient funktioniert in v143.0b6, auch in den Ordnern für die Lesezeichenleiste. scrollbar.css sollte sich im Root des Chrome-Ordners befinden. Aktivieren Sie das Skript auf die übliche Weise oder fügen Sie es an das Ende von Config.js an.
Ich weiß nicht, ob Sie die grafischen Pfeile an den Enden der Scrollbar aktivieren können, oder ob sie dort benötigt werden.
CSS
/* scrollbar.css */ /* Gradient colors in Firefox v143.0beta6 */
/* Use with agent-sheet-scrollbar.js */
/* Set your choice in about:config: widget.non-native-theme.scrollbar.style > 0, 1, 2, 3, 4 or 5 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
scrollbar, scrollcorner, html|select {
--v-scrollbar-background: linear-gradient(to right,#5F5F6B,#ABABB0,#5F5F6B); !important; /* Scrollbar background grad. */
--v-scrollbutton-background: #006cd9 !important; /* Top and Down buttons background */
--v-scrollbar-border-radius: 8px !important; /* Top, Bottom, Thumb buttons radius */
--v-scrollbar-min-size: 17px !important; /* button size */
/* --v-scrollbar-dn-image: url(".././icons/dn.svg"); /* down arrow */
/* --v-scrollbar-up-image: url(".././icons/up.svg"); /* up arrow */
/* --v-scrollbar-rit-image: url(".././icons/rgt.svg"); /* right arrow */
/* --v-scrollbar-lft-image: url(".././icons/lft.svg"); /* left arrow */
/* --v-scrollbar-image-size: 5px !important; /* scroll buttons icon, 0 to hide */
}
/*✅✅✅✅✅✅ Scrollbar ✅✅✅✅✅✅*/
scrollbar {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
scrollbar[root="true"] {
position: relative !important;
z-index: 2147483647 !important;
}
scrollbar[root="true"][orient="vertical"] {
margin-left: calc(-1 * var(--v-scrollbar-min-size)) !important;
}
scrollbar[root="true"][orient="horizontal"] {
margin-top: calc(-1 * var(--v-scrollbar-min-size)) !important;
}
scrollcorner {
-moz-appearance: none !important;
appearance: none !important;
width: var(--v-scrollbar-min-size) !important;
height: var(--v-scrollbar-min-size) !important;
background: none !important;
border: none !important;
}
scrollbar > slider {
-moz-appearance: none !important;
appearance: none !important;
background: var(--v-scrollbar-background) !important;
border: none !important;
}
scrollbar > slider > thumb,
scrollbar > scrollbarbutton,
html|*:not(html|select) > scrollbar > slider > thumb,
html|select > html|button {
-moz-appearance: none !important;
appearance: none !important;
border: none !important;
border-radius: var(--v-scrollbar-border-radius) !important;
background-color: var(--v-scrollbar-thumb-color) !important;
background-image: linear-gradient(to right, #08A6DA, #7CD0EB 70%, #08A6DA); !important; /* gragient color */
background-repeat: no-repeat !important;
background-position: center !important;
background-size: var(--v-scrollbar-image-size) !important;
}
scrollbar[orient="vertical"],
scrollbar[orient="vertical"] > slider,
scrollbar[orient="vertical"] > slider > thumb {
min-width: var(--v-scrollbar-min-size) !important;
max-width: var(--v-scrollbar-min-size) !important;
min-height: 32px !important; /* minimum slider length */
}
scrollbar[orient="horizontal"],
scrollbar[orient="horizontal"] > slider,
scrollbar[orient="horizontal"] > slider > thumb {
min-height: var(--v-scrollbar-min-size) !important;
max-height: var(--v-scrollbar-min-size) !important;
}
scrollbar > scrollbarbutton {
min-width: var(--v-scrollbar-min-size) !important;
min-height: var(--v-scrollbar-min-size) !important;
background-color: var(--v-scrollbutton-background) !important;
}
scrollbar > slider > thumb:hover,
scrollbar > scrollbarbutton:not([disabled="true"]):hover {
background-image: linear-gradient(to right, #FFA808, #ffdc73 70%, #FFA808); !important; /* gragient color */
}
scrollbar > slider > thumb:active,
scrollbar > scrollbarbutton:not([disabled="true"]):active,
html|select > html|button:active {
background-image: linear-gradient(to right, #ff5c26, #ffdc73 70%, #ff5c26); !important; /* gragient color */
}
html|select > html|button {
background-image: var(--v-scrollbar-dn-image) !important;
}
scrollbar > scrollbarbutton[type="increment"],
html|select > html|button[orientation="right"] {
background-image: var(--v-scrollbar-rit-image) !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: var(--v-scrollbar-dn-image) !important;
}
scrollbar > scrollbarbutton[type="decrement"],
html|select > html|button[orientation="left"] {
background-image: var(--v-scrollbar-lft-image) !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: var(--v-scrollbar-up-image) !important;
}
scrollbar > scrollbarbutton[disabled="true"] {
opacity: 0.5 !important;
}JavaScript
// agent-sheet.js
(function() {
let ProfDir = Services.dirsvc.get("ProfD", Ci.nsIFile);
if (ProfDir.leafName === "chrome_debugger_profile") {ProfDir = ProfDir.parent;}
ProfDir.append("chrome");
ProfDir.append("scrollbar.css");
if (!ProfDir.exists() || !ProfDir.isFile()) {return;}
let UriPath = Services.io.newFileURI(ProfDir);
let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
sss.loadAndRegisterSheet(UriPath, 0);
})();
Welche beiden Skripte?
