Schaut mal hier!
Eventuell könnt ihr mit diesen Infos den Müll loswerden.
Jedoch solltet Ihr Euch fragen, wie dieser Käse auf Euer System gekommen ist. 
Schaut mal hier!
Eventuell könnt ihr mit diesen Infos den Müll loswerden.
Jedoch solltet Ihr Euch fragen, wie dieser Käse auf Euer System gekommen ist. 
Hallo Mira_Belle,
einen Bug gibt es noch, wenn man auf Webseiten mit dem Zoom spielt, gibt es bei negativen Werten, z.B. 90%, rechts der Scrollbar eine kleine Lücke.
Das ist kein Bug!
Das hat damit zu tun, wie die Scrollbar generiert wird, und genau aus dem gleichen Grund
lässt sich der Thumb nicht auf eine bestimmte Größe "festtackern".
Wer also die Scrollbar eh mit Devaultbreite nutzt und sich an diesem Verhalten stört,
löscht die Zeilen 218 und 222 aus dem Skript.
Nur noch mal als Hinweis ![]()
Die Scrollbar ist dann nicht mehr in ihrer Breite anpassbar.
...
about:support
benötigt eine Suche und das geht nicht.
...
Äh, nö.
Einfach in die Adresszeile eingeben.
So ein letztes Update, vor Ostern. 
Einen kleinen Bug beseitigt, der nur auftrat, wenn man an den Werten für die Scrollbaarbreite spielte.
UND die Änderung von oldman53 umgesetzt! Danke dafür.
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* Scrollbar.v1.0.6.js https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.6.1 for Firefox 111+ ***************************************************************************************** */
/* ******************************************************************************************************************************
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
/* *************************************************************************************************************************** */
(function() {
// PROFILE PHATH "CALCULATE"
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_scrollbar_size_value = 14; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 12; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_arrows_on_buttons_buttons_size = 1.1; // default: cs_arrows_on_buttons_buttons_size = 1.0
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbarbutton[type="increment"],
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
scrollbarbutton[type="increment"],
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-repeat: no-repeat;
background-position: center !important; */
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
/* background-position: top !important; */
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important;
/* background-position: bottom !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
/* background-position: left !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
/* background-position: right !important; */
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton {
height: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
max-width: ${custom_scrollbar_size_value}px !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton {
width: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
max-height: ${custom_scrollbar_size_value}px !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen

Und niemandem ist aufgefallen, dass const custom_opacity_value = "1.5"; // default: custom_opacity_value = "1.0"
so ganz ohne Funktion ist. Ist nicht weiters schlimm, hatte ja keine Auswirkung.
...Hat irgendwer einen Vorschlag, wie ich Breite bzw Höhe auf 22px festtackern kann?
Also, so wie es scheint, lässt sich der Thumb nicht auf eine bestimmte Größe "festtackern"!
Aber ich habe die Funktion die Breite der Scrollbar wieder eingebaut.
const custom_scrollbar_size_value = 14; // in px // default: custom_scrollbar_size_value = 17
Auch kann man, wenn die Scrollbar recht schmal ist, den Button im gegenzug wieder etwas vergrößern.
ABER, die Abstände über & unter, bzw, rechts & links, Symbolen verändern sich ![]()
let cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5
Hier nun die nächste Version.
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.5 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- - Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
(function() {
/* Profile path "calculate" **************************************************************************************************/
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_scrollbar_size_value = 14; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 12; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
/* background-position: top !important; */
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important;
/* background-position: bottom !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
/* background-position: left !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
/* background-position: right !important; */
}
scrollbarbutton[type="increment"],
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
scrollbarbutton[type="increment"],
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-repeat: no-repeat;
background-position: center !important;
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton {
min-height: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
height: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
max-height: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
min-width: ${custom_scrollbar_size_value}px !important;
width: ${custom_scrollbar_size_value}px !important;
max-width: ${custom_scrollbar_size_value}px !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton {
min-width: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
width: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
max-width: ${(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)}px !important;
min-height: ${custom_scrollbar_size_value}px !important;
height: ${custom_scrollbar_size_value}px !important;
max-height: ${custom_scrollbar_size_value}px !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen
Ich bleibe dran an der Geschicht mit den Thrumbs (Slider),
aber wenn ich die Kommentare von Aris in seinen anderen Skripten richtig verstanden habe,
ist da wohl nichts zu machen.
Aber ihr wisst ja, ich bin da etwas verbissen.
Wunsche Allen nun 
und viele, viele
.
...Hat irgendwer einen Vorschlag, wie ich Breite bzw Höhe auf 22px festtackern kann?
Du meinst die Slider (Thumbs)!?
Da habe ich mir bisher auch die Zähne ausgebissen. Sollte aber möglich sein.
Also hier nun die z.Z. finale Version!
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.3 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- - Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
(function() {
/* Profile path "calculate" **************************************************************************************************/
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 12; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
/* background-position: top !important; */
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important;
/* background-position: bottom !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
/* background-position: left !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
/* background-position: right !important; */
}
scrollbarbutton[type="increment"],
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
scrollbarbutton[type="increment"],
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-repeat: no-repeat;
background-position: center !important;
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen
Aber denkt drann, nicht die Symbole zu vergessen!
Und wer gerne andere Verktorgrafiken nutzen möchte, ich färbe sie gerne auf Wunsch für Euch ein.
Habe es zwar nicht ausprobiert, aber es sollten auch "*.png" funktionieren, damit es noch bunter wird. ![]()
Oh, dann muss ich das wohl eingebaut haben.
Ist dann aber aus Aris "altem" Javascript!
Von alleine wäre ich da ja gar nicht draufgekommen.
Auf jeden Fall tritt damit nicht das komische Verhalten auf.
Noch ein kleines Problem mit dem Skript von Aris gefunden.
Wenn die Entwickler-Werkzeuge geöffnet sind, dann fehlt der Thumb darin.
...
Hattest Du den Wert const cs_thumb_minimal_size auf 12 eingestellt?
Ich frage ja nur, weil mit diesem Wert das bei mir nicht auftritt.
Der Thumb wird da nämlich kleiner, als bei Dir zusehen ist.
Bitte noch ein mal prüfen.
Das Skript funktioniert nicht in den Browser-Werkzeugen.
In den Entwickler-Werkzeugen bzw. dem Browser hingegen schon.
...
Ja, das ist beim "alten" Skript von Aris auch schon so gewesen,
und war (ist) mein Problem gewesen, an die Symbole (in Aris neuem Skript) zu kommen.
Daher habe ich den Weg genommen, die Vektorgrafiken direkt bunt zu machen.
Es gibt keine Scrollbarbuttons.
Dort wo sie zu erwarten wären ist einfach nur der dunkle Hintergrund der Leiste zu sehen.
Das ist sowohl bei der aktuellen als auch bei der Nightly Version so.
Einen schönen Guten Morgen.
Hier das Script zum Testen und die Symbole im Anhang.
Wichtig, es sind gefärbte Vektorgrafiken!
Wenn ich das richtig verstanden habe, kann man also oben links, oder rechts, aber auch unten links, oder rechts definieren!
Also z.B. background-position: top left; auch background-position: bottom left;
Nur könnte mir jemand erklären, welchen Sinn das hier mit den Pfeilen machen würde?
Ich kann den nämlich nicht entdecken.
Sorry, das Skript einen Beitrag weiter oben enthält ein, zwei kleinere Fehler!
Gerade das mit den fixen Positionen getestet.
Habe keinen Unterschied festgestellt zu der "Center"-Lösung.
Da ich finde, dass das die einfachere Lösung ist, habe ich den Code
für die fixen Positionen wieder verworfen, aber es funktioniert!
Muss ich mir merken und habe den Link auch abgespeichert.
Dass die Scrollbar inkl. Symbole beim Vergrößern und/oder verkleinern ebenfalls
sich mit verändert, stört mich auch, aber irgendwo wurde es erklärt und es lässt sich wohl nicht verhindern.
PS:
Wer diese oder auch andere Symbole gerne in Farbig hätte, bitte per PN eine Anfrage stellen.
Eijajeijei.
Erst einmal Danke für's Testen.
Da ist mir beim Anpassen des Code ein Fauxpas passiert,
da habe ich doch glatt wichtigen Code vergessen oder versehentlich gelöscht!
Fürgt doch bitte mal in Zeile 182 vor das /* hover */
scrollbarbutton[type="increment"],
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
scrollbarbutton[type="increment"],
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-repeat: no-repeat;
background-position: center;
}
ein.
Dann ist der Fehler mit den doppelten Pfeilen beim Verkleinern,
bzw. mit den Untereinandergereiten beim Vergrößern behoben.
Sollte zumindest.
Das mit den fixen Positionen werde ich mal testen und schauen, was es bewirkt.
Oben => top, Unten => bottom, links, rechts wahrscheinlich dann left and right.
Zu dem verschwundenen Thumb.
Das habe ich aus Aris altem Skript!
Wer mit so schmalem Fenter hin und wieder arbeitet,
sollt die Variable in Zeile 58 von 200 eben auf den Devaultwert ändern.
Denke Aris hat diesen Wert wohl mit Absicht so festgelegt, noch kleiner macht wohl keinen Sinn.
Hatt jemand noch ungereimtheiten festgestellt, die ich verbessern muss?
Dann stelle ichhier noch einmal das korrigierte Javaskript,
also mit dem fehlenden Code und devault thumb_minimal_size = 12, ein.
Bitte noch ein mal prüfen.
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- - Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
(function() {
/* Profile path "calculate" **************************************************************************************************/
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 12; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
}
scrollbarbutton[type="increment"],
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
scrollbarbutton[type="increment"],
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-repeat: no-repeat;
background-position: center;
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen
Sollte dieses Skript fehlerfrei sein, wäre das Thema vorerst erledigt!
Daher bitte ich um Überprüfung und auch ob es unter den Nightly-Versionen 112 sowie 113 anstandslos läuft.
Zum Testen werden auch die Vektorgraviken benötigt, da sie farbig sind!
Ich bedanke mich schon ein Mal im Voraus.
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- - Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
(function() {
/* Profile path "calculate" **************************************************************************************************/
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 200; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen
Einen schönen Guten Morgen.
Problem der "verschwundenen" Symbole (Pfeile) behoben.
Und ganz nebenbei auch mein Problem mit dem Button und den Pfeilen.
Hier das Script zum Testen und die Symbole im Anhang.
Wichtig, es sind gefärbte Vektorgrafiken!
// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
-> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
-> Firefox schließen
-> Inhalt des 'startupCache'-Ordners löschen
Alternativ mit einem JavaScipt!
-> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
Anpassungen vornehmen > Werte ändern
- - Optionen aktivieren/deaktivieren: true <-> false
- Farbe
- Name: red, blue, transparent
- Hexcode: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
- Farbverläufe: linear-gradient(direction, color, color, color)
- Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- keine Farbe oder keine Farbwerte -> verwende "unset"
*/
(function() {
/* Profile path "calculate" **************************************************************************************************/
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const custom_scrollbars = true; // default: custom_scrollbars = true
const custom_scrollbar_arrows = true; // default: custom_scrollbar_arrows = true
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px
const cs_thumb_roundness = 7; // default: cs_thumb_roundness = 0 / in px
const cs_buttons_border = 0; // default: cs_buttons_border = 0 / in px
const cs_buttons_roundness = 0; // default: cs_buttons_roundness = 0 / in px
const cs_thumb_minimal_size = 200; // default: cs_thumb_minimal_size = 12; / in px
const cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#5b5b66"; // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
let cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: ${cs_background_color} !important;
}
scrollbar[orient="vertical"] slider {
background-image: ${cs_background_image_vertical} !important;
}
scrollbar[orient="horizontal"] slider {
background-image: ${cs_background_image_horizontal} !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar thumb {
background-color: ${cs_thumb_color} !important;
border-radius: ${cs_thumb_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
}
scrollbar thumb[orient="vertical"] {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: ${cs_thumb_hover_image_horizontal} !important;
}
scrollbar scrollbarbutton {
background-color: ${cs_buttons_color} !important;
border-radius: ${cs_buttons_roundness}px !important;
box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_horizontal} !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
}
/* hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
${custom_scrollbars_code}
${custom_scrollbar_arrows_code}
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()
Alles anzeigen
Kann das mal jemand mit den Nightlies testen?
Ich habe die nicht!
Wegen des komischen Verhaltens des Skripts auf manchen Seiten bindet doch mal eine lokal abgespeicherte "SVG"
Anstatt der Vorgegebene ein. ![]()
Die wird dann nämlich angezeigt. Woran das liegen könnte,
![]()
Pfeile oben und unten eliminiert
Oh. ![]()
Auch mit diesem abgewandelte Skript verhält es sich so.
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox
https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
Version: 2.0.2 for Firefox 111+
NOTE: 'non-compatible options' from earlier versions were removed
README
about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work
[!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
-> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
-> close Firefox
-> delete 'startupCache' folders content
Modifying appearance > change values
- enable/disable options: true <-> false
- color
- name: red, blue, transparent
- hex code: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- numbers: 1, 2, 3 ... 10, 11, 12 ...
- opacity: 0.0 to 1.0 e.g. 1.4, 1,75
- gradients: linear-gradient(direction, color, color, color)
- gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- no color or no color value -> use "unset"
*/
(function() {
// Path "berechneten" !
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
/* General scrollbar settings *******************************************************/
// default: hide_scrollbars = false
const hide_scrollbars = false;
// default: hide_scrollbar_buttons = false
const hide_scrollbar_buttons = false;
// default: thin_scrollbars = false / browsers own way to show thin scrollbars
const thin_scrollbars = false;
// default: custom_scrollbar_opacity = false
const custom_scrollbar_opacity = false;
// default: custom_opacity_value = "1.0"
const custom_opacity_value = "1.0";
/* Custom scrollbar settings ("custom_scrollbar_" --> "cs_") ************************/
// default: custom_scrollbars = true
const custom_scrollbars = true;
// default: custom_scrollbar_arrows = true
const custom_scrollbar_arrows = true;
// default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_color = "%23bfbfbf";
// default: custom_scrollbar_arrows_color_hover = "grey";
const custom_scrollbar_arrows_color_hover = "%23ffa500";
// default: cs_thumb_border = 0 / in px
const cs_thumb_border = 1;
// default: cs_thumb_roundness = 0 / in px
const cs_thumb_roundness = 7;
// default: cs_buttons_border = 0 / in px
const cs_buttons_border = 0;
// default: cs_buttons_roundness = 0 / in px
const cs_buttons_roundness = 0;
// default: cs_thumb_minimal_size = 12; / in px
const cs_thumb_minimal_size = 200;
// default: cs_ignore_color_gradients = false / 'flat' scrollbars
const cs_ignore_color_gradients = false;
/* Custom scrollbar colors and gradients ********************************************/
// default: cs_background_color = "#DDDDDD"
const cs_background_color = "#5b5b66";
// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_vertical = "unset";
// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "unset";
// default: cs_corner_background_color = "#DDDDDD" / - corner
const cs_corner_background_color = "#bfbfbf";
// default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
let cs_corner_background_image = "unset";
// default: cs_thumb_color = "#33CCFF" / thumb/slider
const cs_thumb_color = "#bfbfbf";
// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_vertical = "unset";
// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset";
// default: cs_thumb_hover_color = "#66FFFF" "#ffa500"="orange"
const cs_thumb_hover_color = "#ffa500";
// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_vertical = "unset";
// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset";
// default: cs_thumb_border_color = "#33CCFF"
const cs_thumb_border_color = "#5b5b66";
// default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
const cs_buttons_color = "#5b5b66";
// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_vertical = "unset";
// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset";
// default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_hover_color = "#5b5b66";
// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_vertical = "unset";
// default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "unset";
// default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
const cs_buttons_border_color = "#5b5b66";
/* ******************************************************************************************** */
/* ******************************************************************************************** */
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients === true)
cs_background_image_vertical
= cs_background_image_horizontal
= cs_corner_background_image
= cs_thumb_image_vertical
= cs_thumb_image_horizontal
= cs_thumb_hover_image_vertical
= cs_thumb_hover_image_horizontal
= cs_buttons_image_vertical
= cs_buttons_image_horizontal
= cs_buttons_hover_image_vertical
= cs_buttons_hover_image_horizontal
= "unset";
let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
let hide_scrollbar_buttons_code='';
let custom_scrollbar_opacity_code='';
let hide_scrollbars_code='';
let thin_scrollbars_code='';
if(custom_scrollbars === true)
custom_scrollbars_code=`
slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
appearance: auto;
-moz-default-appearance: none !important;
}
slider {
background-color: `+cs_background_color+` !important;
}
scrollbar[orient="vertical"] slider {
background-image: `+cs_background_image_vertical+` !important;
}
scrollbar[orient="horizontal"] slider {
background-image: `+cs_background_image_horizontal+` !important;
}
scrollcorner {
background-color: `+cs_corner_background_color+` !important;
background-image: `+cs_corner_background_image+` !important;
}
scrollbar thumb {
background-color: `+cs_thumb_color+` !important;
border-radius: `+cs_thumb_roundness+`px !important;
box-shadow: inset 0 0 0 `+cs_thumb_border+`px `+cs_thumb_border_color+` !important;
}
scrollbar thumb[orient="vertical"] {
background-image: `+cs_thumb_image_vertical+` !important;
min-height: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: `+cs_thumb_image_horizontal+` !important;
min-width: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
}
scrollbar thumb:hover, scrollbar thumb:active {
background-color: `+cs_thumb_hover_color+` !important;
}
scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
background-image: `+cs_thumb_hover_image_vertical+` !important;
}
scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
background-image: `+cs_thumb_hover_image_horizontal+` !important;
}
scrollbar scrollbarbutton {
background-color: `+cs_buttons_color+` !important;
border-radius: `+cs_buttons_roundness+`px !important;
box-shadow: inset 0 0 0 `+cs_buttons_border+`px `+cs_buttons_border_color+` !important;
height: 17px !important;
width: 17px !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
background-image: `+cs_buttons_image_vertical+` !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
background-image: `+cs_buttons_image_horizontal+` !important;
}
scrollbar scrollbarbutton:hover {
background-color: `+cs_buttons_hover_color+` !important;
}
scrollbar[orient="vertical"] scrollbarbutton:hover {
background-image: `+cs_buttons_hover_image_vertical+` !important;
}
scrollbar[orient="horizontal"] scrollbarbutton:hover {
background-image: `+cs_buttons_hover_image_horizontal+` !important;
}
`;
if(custom_scrollbar_arrows === true)
custom_scrollbar_arrows_code=`
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"],
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-repeat: no-repeat !important;
background-position: center center !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
}
`;
if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar scrollbarbutton {
opacity: 0 !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
min-width: 1px !important;
width: 1px !important;
max-width: 1px !important;
}
`;
if(custom_scrollbar_opacity === true)
custom_scrollbar_opacity_code=`
scrollbar {
opacity: `+custom_opacity_value+` !important;
}
`;
if(hide_scrollbars === true)
hide_scrollbars_code=`
scrollbar, scrollcorner {
display: none !important;
visibility: collapse !important;
}
`;
if(thin_scrollbars === true)
thin_scrollbars_code=`
:root{
scrollbar-width: thin !important;
}
`;
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService)
.loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
`+custom_scrollbars_code+`
`+custom_scrollbar_arrows_code+`
`+hide_scrollbar_buttons_code+`
`+custom_scrollbar_opacity_code+`
`+hide_scrollbars_code+`
`+thin_scrollbars_code+`
`), null, null),
Components.classes["@mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})();
Alles anzeigen
Egal wo ich da auch max-width: 4px !important; eintrage, es hilft nix.
(4px ist zu schmal, aber da würde ich die Veränderung sofort sehen, ist nur zum Test).
Einen schönen Guten Morgen.
Du scheinst ja genauso hartnäckig und ahnungslos zu sein wie ich! ![]()
Ich ringe auch Probleme nieder, ob ich von der Sache Ahnung habe oder nicht.
Leider wird Dich meine Antwort enttäuschen, die Breite der Scrollbar lässt sich leider nicht beeinflussen.
Und es kommt noch schlimmer, wenn Du eine Page vergrößerst, wird die Scrollbar auch breiter.
Das hat damit zu tun, dass dieses Element irgendwie nicht direkt zum Browser gehört.
Zumindest hatte ich diese Erklärung so noch im Hinterkopf, irgendwo hat das irgendwer hier mal etwas
genauer erklärt, ich werde das noch mal raussuchen.
Kannst Du Dein "neues" Skript noch ein Mal hier reinstellen?
(Text kopieren, und danach markieren und erst dann auf den Button CODE klicken.
Jetzt nur noch auswählen, dass es Javascript ist)