Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Mira_Belle

Speravir Werde das Skript überarbeiten, sobald ich aus dem Urlaub zurück bin.

Danke.

Boersenfeger

Moin, ich klinke mich hier nochmal ein... Nachdem ich die Farben für mich definiert habe und die Fehler von Speravir aus #242 eingearbeitet habe (ohne die CSS Zusammenfassung), möchte ich die Scrollbar um 5 px breiter haben. Diesbezüglich hatte ich hier schon mal angefragt, Mira_Belle hatte aber keine Lösung. Vielleicht nun ein anderer oder andere?

JavaScript

// Scrollbar.uc.js

"use strict";
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/*																															   */
/* Version: v2.0.8.uc.js for Firefox 143+ 																					   */
/*																															   */
/* Scrollbar.v2.0.8.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1279113#post1279113						   */
/*																															   */
/* ******************************************************************************************************************************

	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
		[!] Die genannten Einstellungen müssen auf 'false' gesetzt werden, damit dieser Code funktioniert.

			/* ----------------------------------------------------------------------------------- */
			/*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
			/*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
			/*                                                                                     */
			/*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
			/* ----------------------------------------------------------------------------------- */

/* *************************************************************************************************************************** */

(function() {

  /* **** Konfiguration **** */

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

  // CUSTOM SCROLLBAR COLORS/GRADIENTS
  // - scrollbar
  let cs_scrollbar_arrows_color = 						"#cf3476"				   ;// "#7c7c7c"	"#1e90ff"
  let cs_scrollbar_arrows_hover_color = 				"#c71585"				   ;// "#ffa600"	"#bebebe"
  // - background
  let cs_background_color = 							"#f3da0b"				   ;// default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
  let cs_background_roundness = 						0							;// default: cs_background_roundness = 0 / in px	/ 9
  let cs_ignore_color_gradients = 						false						;// default: cs_ignore_color_gradients = false / true 'flat' scrollbars
  // - corner
  let cs_corner_background_color = 						"#bfbfbf"				   ;// default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
  // - thumb/slider
  let cs_thumb_color = 									"#ec7f53"				   ;// default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_hover_color = 							"#f00bff"				   ;// default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_border_color = 							"#5b5b66"				   ;// default: cs_thumb_border_color = "#33CCFF"
  let cs_thumb_border = 								1							;// default: cs_thumb_border = 0 / in px 1
  let cs_thumb_roundness = 								9							;// default: cs_thumb_roundness = 0 / in px 9
  let cs_thumb_minimal_size = 							17							;// default: cs_thumb_minimal_size = 17 / in px
  // - buttons
  let cs_buttons_color = 								"#a52a2a"				   ;// default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
  let cs_buttons_hover_color = 							"#3e5f8a"				   ;// default: cs_buttons_hover_color = "#33CCFF"	/ "#bfffff"
  let cs_button_size =									17							;// in px // default: cs_button_size = 17 / in px
  let cs_buttons_border = 								0							;// default: cs_buttons_border = 0 / in px
  let cs_buttons_roundness = 							0							;// default: cs_buttons_roundness = 0 / in px

  /* **** Ende Konfiguration **** */

/* *************************************************************************************************************************** */
  // FIXED SCROLL BAR COLORS/COLOR GRADIENTS
	// - fixed values for background image gradients
	let GRADIENT_VERTICAL = 							"linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
	let GRADIENT_HORIZONTAL = 							"linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
	// - background  
	let cs_background_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_background_image_horizontal = 				GRADIENT_HORIZONTAL		;// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - corner
	let 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%)"						;// 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
	let cs_thumb_image_vertical = 						GRADIENT_VERTICAL			;// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_image_horizontal = 					GRADIENT_HORIZONTAL		;// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_horizontal = 				GRADIENT_HORIZONTAL		;// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - buttons
	let cs_buttons_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_image_horizontal = 					GRADIENT_HORIZONTAL		;// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_horizontal =				GRADIENT_HORIZONTAL		;// 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='';

	custom_scrollbars_code=`
		scrollcorner,
  		scrollbar > slider, 
		scrollbar > slider > thumb, 
		scrollbar > scrollbarbutton {
		/*  appearance: auto; */
		  -moz-default-appearance: none !important;
		}
		scrollbar > slider {
		  background-color: ${cs_background_color} !important;
		  background-image: ${cs_background_image_horizontal} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollbar[vertical] > slider {
		  background-image: ${cs_background_image_vertical} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollcorner {
		  background-color: ${cs_corner_background_color} !important;
		  background-image: ${cs_corner_background_image} !important;
		}
		scrollbar > slider > 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[vertical] > slider > thumb {
		  background-image: ${cs_thumb_image_vertical} !important;
		  min-height: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb {
		  background-image: ${cs_thumb_image_horizontal} !important;
		  min-width: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
		  background-color: ${cs_thumb_hover_color} !important;
		}
		scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
		  background-image: ${cs_thumb_hover_image_vertical} !important;
		}
		scrollbar > slider > thumb:hover, scrollbar > slider > thumb: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 !important;
		  height: 17px !important;
		  width: 17px !important;
		}
		scrollbar[vertical] scrollbarbutton {
		  background-image: ${cs_buttons_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton {
		  background-image: ${cs_buttons_image_horizontal} !important;
		}
		scrollbar > scrollbarbutton:hover {
		  background-color: ${cs_buttons_hover_color} !important;
		}
		scrollbar[vertical] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_horizontal} !important;
		}
	`;

	custom_scrollbar_arrows_code=`
		scrollbar > scrollbarbutton {
		  background-repeat: no-repeat !important;
		  background-position: center center !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
		}

		/* Hover */

		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
		}
		scrollbar > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
		}

		scrollbar > scrollbarbutton {
			min-width: ${cs_button_size}px !important;
			min-height: ${cs_button_size}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

Mira_Belle

Boersenfeger Ich fürchte, dass Dir da niemand wird helfen können.

Wenn mich meine grauen Zellen nicht in die Irre führen, gab es früher schon einmal Probleme mit der Breite der Scrollleisten.

Ackere mal die alten Threads durch.

Werde ich nächste Woche dann mal machen.

Speravir

1. Als Update zu Beitrag #242. Als ich wegen Boersenfegers Nachfrage nachsah, ist mir komischerweise eben erst aufgefallen, dass man ja schon wenige Zeilen zuvor ebenfalls zusammenfassen kann und das nicht mehr existente horizontal muss auch in den folgenden Zeile entfernt werden, deshalb alles nochmal gemeinsam:

CSS

		scrollbar > slider > thumb {
		  background-color: ${cs_thumb_color} !important;
		  background-image: ${cs_thumb_image_horizontal} !important;

		  border-radius: ${cs_thumb_roundness}px !important;
		  box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
		  min-width: ${cs_thumb_minimal_size}px !important;

		}
		scrollbar[vertical] > slider > thumb {
		  background-image: ${cs_thumb_image_vertical} !important;
		  min-height: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb:is(:hover, active) {
		  background-color: ${cs_thumb_hover_color} !important;
		  background-image: ${cs_thumb_hover_image_horizontal} !important;
		}
		scrollbar > slider > thumb[vertical]:is(:hover, :active) {
		  background-image: ${cs_thumb_hover_image_vertical} !important;
		}
		scrollbar > scrollbarbutton {
		  background-color: ${cs_buttons_color} !important;
		  background-image: ${cs_buttons_image_horizontal} !important;
		  border-radius: ${cs_buttons_roundness}px !important;
		  box-shadow: inset 0 0 0 ${cs_buttons_border}px !important;
		  height: 17px !important;
		  width: 17px !important;
		}
		scrollbar[vertical] > scrollbarbutton {
		  background-image: ${cs_buttons_image_vertical} !important;
		}
		scrollbar > scrollbarbutton:hover {
		  background-color: ${cs_buttons_hover_color} !important;
		  background-image: ${cs_buttons_hover_image_horizontal} !important;
		}
		scrollbar[vertical] > scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_vertical} !important;
		}

Alles anzeigen

2. Breite der Leisten:

Zitat von Boersenfeger

möchte ich die Scrollbar um 5 px breiter haben.

Teste, was geschieht, wenn du oben unter Punkt 1 in Zeile 117 und 148 den Wert für Höhe beziehungsweise Breite auf 22px setzt.

Übrigens:

Es funktioniert nicht mehr richtig seit irgendeinem Firefox-Update, meine ich, aber ich habe hier (aktualisiert natürlich) Aris’ jüngste Version custom_scrollbars.uc.js, wo es in Zeile 53–54 eine Einstellung thin_scrollbars gibt und relativ am Ende des Skripts den dazugehörenden CSS-Code (bei Aris ab Z. 323), den man dann nur wegen des entfernten horizontal anpassen muss:

JavaScript

  if(thin_scrollbars === true)
    thin_scrollbars_code=`
        :root{
          scrollbar-width: thin !important;
        }
        scrollbar scrollbarbutton {
          height: 7px !important;
          width: 14px !important;
        }
        scrollbar[vertical] scrollbarbutton {
          height: 14px !important;
          width: 7px !important;
        }
    `;

Alles anzeigen

Ich hab für mich Höhe und Breite auf denselben Wert gesetzt. Bringt nur nichts für breitere Laufleisten.

Mira_Belle

Speravir Das sind die Gründe, warum ich dieses CSS in einer neueren Version des Skripts entfernt habe.

Boersenfeger

Zitat von Speravir

2. Breite der Leisten:

Zitat von Boersenfeger

möchte ich die Scrollbar um 5 px breiter haben.

Teste, was geschieht, wenn du oben unter Punkt 1 in Zeile 117 und 148 den Wert für Höhe beziehungsweise Breite auf 22px setzt.

Leider keine Änderung...

Kann man da evtl. über about:config was anpassen?

lenny2

Zitat von Boersenfeger

Kann man da evtl. über about:config was anpassen?

widget.non-native-theme.scrollbar.style = 4     // The width of the scroll bar must be greater than 0.
ui.themedScrollbar = #909098                    // (does not exist, create it) Background color of the scroll bar
ui.themedScrollbarThumb = #00A3D9               // (does not exist, create it) Thumb color
ui.themedScrollbarThumbActive = #ffbf00         // (does not exist, create it) Active
ui.themedScrollbarThumbHover = orange           // (does not exist, create it) Hover

Sören Hentzschel

Die erste Option hast du völlig falsch kommentiert. Weder geht es dort um die Breite noch ist ein Wert von 0 falsch noch können da beliebige Werte, die größer als 0 sind, angegeben werden.

Code

# The style of scrollbars to use. Here are the current options:
#
#   0: Default platform scrollbar style.
#   1: macOS scrollbars
#   2: GTK scrollbars
#   3: Android scrollbars
#   4: Windows 10 scrollbars
#   5: Windows 11 scrollbars
#
# Note that switching to non-default scrollbars is experimental and other
# scrollbar-related prefs may interfere with the experience. For example,
# setting the GTK thumb size may have no effect when using non-GTK scrollbars
# on GTK.

Alles anzeigen

StaticPrefList.yaml - mozsearch

grisu2099

Zitat von Boersenfeger

Kann man da evtl. über about:config was anpassen?

Versuch mal folgendes in der user.js:

JavaScript

user_pref("widget.non-native-theme.win.scrollbar.use-system-size", false);
user_pref("widget.non-native-theme.scrollbar.size.override", 22);

Boersenfeger

Auch das funktioniert nicht. Ich habe nun nur diesen Wert geändert:

user_pref("widget.non-native-theme.scrollbar.style", 1); /* Scrollbalken breiter */

Damit habe ich den breiteren Scrollbalken, es fehlen dafür der obere und untere Anker. Der Scrollbalken ist mir wichtiger, von daher für mich erledigt.

Danke an alle Beteiligten.

Mira_Belle

Boersenfeger
Ich habe heute alle Beiträge zur Scrollbar durch geackert!

Ich würde Dich bitten, folgendes Script zu verwenden.
Und dann ließ Dir bitte beide verlinkten Beiträge durch.

CSS

// Scrollbar.uc.js

"use strict";
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/*																															   */
/* Version: v2.0.8.a.uc.js for Firefox 143+ 																				   */
/*																															   */
/* Scrollbar.v2.0.8.a.uc.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1280271#post1280271					   */
/*																															   */
/* ******************************************************************************************************************************

	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
		[!] Die genannten Einstellungen müssen auf 'false' gesetzt werden, damit dieser Code funktioniert.

			/* ----------------------------------------------------------------------------------- */
			/*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
			/*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
			/*                                                                                     */
			/*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
			/* ----------------------------------------------------------------------------------- */

/* *************************************************************************************************************************** */

(function() {

  /* **** Konfiguration **** */

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

  // CUSTOM SCROLLBAR COLORS/GRADIENTS
  // - scrollbar
  let cs_scrollbar_arrows_color = 						"#bfbfbf"				   ;// "#7c7c7c"	"#1e90ff"
  let cs_scrollbar_arrows_hover_color = 				"#ffa600"				   ;// "#ffa600"	"#bebebe"
  // - background
  let cs_background_color = 							"#5b5b66"				   ;// default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
  let cs_background_roundness = 						0							;// default: cs_background_roundness = 0 / in px	/ 9
  let cs_ignore_color_gradients = 						true						;// default: cs_ignore_color_gradients = false / true 'flat' scrollbars
  // - corner
  let cs_corner_background_color = 						"#bfbfbf"				   ;// default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
  // - thumb/slider
  let cs_thumb_color = 									"#bfbfbf"				   ;// default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_hover_color = 							"#ffa600"				   ;// default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_border_color = 							"#5b5b66"				   ;// default: cs_thumb_border_color = "#33CCFF"
  let cs_thumb_border = 								1							;// default: cs_thumb_border = 0 / in px 1
  let cs_thumb_roundness = 								9							;// default: cs_thumb_roundness = 0 / in px 9
  let cs_thumb_minimal_size = 							17							;// default: cs_thumb_minimal_size = 17 / in px
  // - buttons
  let cs_buttons_color = 								"#5b5b66"				   ;// default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
  let cs_buttons_hover_color = 							"#5b5b66"				   ;// default: cs_buttons_hover_color = "#33CCFF"	/ "#bfffff"
  let cs_button_size =									17							;// in px // default: cs_button_size = 17 / in px
  let cs_buttons_border = 								0							;// default: cs_buttons_border = 0 / in px
  let cs_buttons_roundness = 							0							;// default: cs_buttons_roundness = 0 / in px
 
  /* **** Ende Konfiguration **** */

/* *************************************************************************************************************************** */
  // FIXED SCROLL BAR COLORS/COLOR GRADIENTS
	// - fixed values for background image gradients
	let GRADIENT_VERTICAL = 							"linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
	let GRADIENT_HORINZONTAL = 							"linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
	// - background  
	let cs_background_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_background_image_horizontal = 				GRADIENT_HORINZONTAL		;// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - corner
	let 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%)"						;// 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
	let cs_thumb_image_vertical = 						GRADIENT_VERTICAL			;// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_image_horizontal = 					GRADIENT_HORINZONTAL		;// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_horizontal = 				GRADIENT_HORINZONTAL		;// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - buttons
	let cs_buttons_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_image_horizontal = 					GRADIENT_HORINZONTAL		;// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_horizontal =				GRADIENT_HORINZONTAL		;// 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='';

	custom_scrollbars_code=`
		scrollcorner,
  		scrollbar > slider, 
		scrollbar > slider > thumb, 
		scrollbar > scrollbarbutton {
		/*  appearance: auto; */
		  -moz-default-appearance: none !important;
		}
		scrollbar > slider {
		  background-color: ${cs_background_color} !important;
		  background-image: ${cs_background_image_horizontal} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollbar[vertical] > slider {
		  background-image: ${cs_background_image_vertical} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollcorner {
		  background-color: ${cs_corner_background_color} !important;
		  background-image: ${cs_corner_background_image} !important;
		}
		scrollbar > slider > 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[vertical] > slider > thumb {
		  background-image: ${cs_thumb_image_vertical} !important;
		  min-height: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb {
		  background-image: ${cs_thumb_image_horizontal} !important;
		  min-width: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
		  background-color: ${cs_thumb_hover_color} !important;
		}
		scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
		  background-image: ${cs_thumb_hover_image_vertical} !important;
		}
		scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[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 !important;
		}
		scrollbar[vertical] scrollbarbutton {
		  background-image: ${cs_buttons_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton {
		  background-image: ${cs_buttons_image_horizontal} !important;
		}
		scrollbar > scrollbarbutton:hover {
		  background-color: ${cs_buttons_hover_color} !important;
		}
		scrollbar[vertical] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_horizontal} !important;
		}
	`;

	custom_scrollbar_arrows_code=`

		scrollbar > scrollbarbutton {
		  background-repeat: no-repeat !important;
		  background-position: center center !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: top !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: bottom !important;
		}
		scrollbar > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: left !important;
		}
		scrollbar > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: right !important;
		}

		/* Hover */

		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: top !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: bottom !important;
		}
		scrollbar > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: left !important;
		}
		scrollbar > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: right !important;
		}
		scrollbar > scrollbarbutton {
			min-width: ${cs_button_size}px !important;
			min-height: ${cs_button_size}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 hier die Links.
1. #59

und, wichtig, https://itigic.com/de/activate-an…-in-windows-11/

Wenn Du diesen Ratschlag befolgst, kannst Du immer das aktuelle Skript nutzen und es müssen keine extra Verrenkungen
erarbeitet werden.

Speravir

Zitat von Mira_Belle

Das sind die Gründe, warum ich dieses CSS in einer neueren Version des Skripts entfernt habe.

Ach so. Alles klar.

Zitat von Boersenfeger

Leider keine Änderung...

Auch dir danke für die Rückmeldung.

Zitat von Boersenfeger

Ich habe nun nur diesen Wert geändert:
user_pref("widget.non-native-theme.scrollbar.style", 1); /* Scrollbalken breiter */

Und die anderen Varianten hattest du ebenso getestet, wenigstens 2–4 (5 ist Windows 11)?

Es gibt da übrigens noch eine Einstellung, die bei Tests besser auf false gesetzt wird: layout.css.cached-scrollbar-styles.enabled. Für das Skript sollte sie keine Auswirkung haben, aber für den CSS-Teil, wie man am Namen der Einstellung erahnen kann.

Mira_Belle

So, heute Morgen noch einmal so einiges getestet!

Also, das mit den Einträgen in die user.js klappt. Beitrag #251
Die Bildlaufleisten (Scrollbar) werden breiter.

Nur das Symbol (Button) bleibt eben "klein",
aber auch das habe ich in den Griff bekommen!

Beispiel, wenn die Bildlaufleisten (Scrollbar) auf 22px eingestellt wurde:
_{(Ist jetzt nur für die Senkrechte)}

CSS

		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: top !important;
			min-width: 22px !important;
			min-height: 22px !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: bottom !important;
			min-width: 22px !important;
			min-height: 22px !important;
		}

Alles anzeigen

Mira_Belle

Hier die neueste Version!

Ich hoffe ja, dass nun alle Glücklich damit werden,

ABER, lest verdammt noch mal bitte den Header durch, dafür ist der da!
Dort wird das Wichtigste erklärt.

JavaScript

// Scrollbar.uc.js

"use strict";
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/*																															   */
/* Version: v2.0.8.b.uc.js for Firefox 143+ 																				   */
/*																															   */
/* Scrollbar.v2.0.8.b.uc.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1280302#post1280302					   */
/*																															   */
/* ******************************************************************************************************************************

	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
		[!] Die genannten Einstellungen müssen auf 'false' gesetzt werden, damit dieser Code funktioniert.

		user.js >
			user_pref("widget.non-native-theme.win.scrollbar.use-system-size", false);	// false schaltet die Systemeinstellung aus
			user_pref("widget.non-native-theme.scrollbar.size.override", 22);			// 22 setzt die Scrollbarbreite auf 22px)
		[!] The above entries must be set in user.js for this code to work.
		[!] Die oben genannten Einträge müssen in der user.js gesetzt werden, damit dieser Code funktioniert.

			/* ----------------------------------------------------------------------------------- */
			/*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
			/*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
			/*                                                                                     */
			/*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
			/* ----------------------------------------------------------------------------------- */

/* *************************************************************************************************************************** */

(function() {

  /* **** Konfiguration **** */

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

  // CUSTOM SCROLLBAR COLORS/GRADIENTS
  // - scrollbar
  let cs_scrollbar_arrows_color = 						"#bfbfbf"				   ;// "#7c7c7c"	"#1e90ff"
  let cs_scrollbar_arrows_hover_color = 				"#ffa600"				   ;// "#ffa600"	"#bebebe"
  let cs_scrollbar_size =								22							;// Important!	See README !!
  // - background
  let cs_background_color = 							"#5b5b66"				   ;// default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
  let cs_background_roundness = 						0							;// default: cs_background_roundness = 0 / in px	/ 9
  let cs_ignore_color_gradients = 						true						;// default: cs_ignore_color_gradients = false / true 'flat' scrollbars
  // - corner
  let cs_corner_background_color = 						"#bfbfbf"				   ;// default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
  // - thumb/slider
  let cs_thumb_color = 									"#bfbfbf"				   ;// default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_hover_color = 							"#ffa600"				   ;// default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_border_color = 							"#5b5b66"				   ;// default: cs_thumb_border_color = "#33CCFF"
  let cs_thumb_border = 								1							;// default: cs_thumb_border = 0 / in px 1
  let cs_thumb_roundness = 								9							;// default: cs_thumb_roundness = 0 / in px 9
  let cs_thumb_minimal_size = 							17							;// default: cs_thumb_minimal_size = 17 / in px
  // - buttons
  let cs_buttons_color = 								"#5b5b66"				   ;// default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
  let cs_buttons_hover_color = 							"#5b5b66"				   ;// default: cs_buttons_hover_color = "#33CCFF"	/ "#bfffff"
  let cs_button_size =									17							;// in px // default: cs_button_size = 17 / in px
  let cs_buttons_border = 								0							;// default: cs_buttons_border = 0 / in px
  let cs_buttons_roundness = 							0							;// default: cs_buttons_roundness = 0 / in px
 
  /* **** Ende Konfiguration **** */

/* *************************************************************************************************************************** */
  // FIXED SCROLL BAR COLORS/COLOR GRADIENTS
	// - fixed values for background image gradients
	let GRADIENT_VERTICAL = 							"linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
	let GRADIENT_HORINZONTAL = 							"linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
	// - background  
	let cs_background_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_background_image_horizontal = 				GRADIENT_HORINZONTAL		;// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - corner
	let 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%)"						;// 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
	let cs_thumb_image_vertical = 						GRADIENT_VERTICAL			;// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_image_horizontal = 					GRADIENT_HORINZONTAL		;// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_thumb_hover_image_horizontal = 				GRADIENT_HORINZONTAL		;// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	// - buttons
	let cs_buttons_image_vertical = 					GRADIENT_VERTICAL			;// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_image_horizontal = 					GRADIENT_HORINZONTAL		;// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_vertical = 				GRADIENT_VERTICAL			;// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
	let cs_buttons_hover_image_horizontal =				GRADIENT_HORINZONTAL		;// 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='';

	custom_scrollbars_code=`
		scrollcorner,
  		scrollbar > slider, 
		scrollbar > slider > thumb, 
		scrollbar > scrollbarbutton {
		/*  appearance: auto; */
		  -moz-default-appearance: none !important;
		}
		scrollbar > slider {
		  background-color: ${cs_background_color} !important;
		  background-image: ${cs_background_image_horizontal} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollbar[vertical] > slider {
		  background-image: ${cs_background_image_vertical} !important;
		  border-radius: ${cs_background_roundness}px !important;
		}
		scrollcorner {
		  background-color: ${cs_corner_background_color} !important;
		  background-image: ${cs_corner_background_image} !important;
		}
		scrollbar > slider > 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[vertical] > slider > thumb {
		  background-image: ${cs_thumb_image_vertical} !important;
		  min-height: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb {
		  background-image: ${cs_thumb_image_horizontal} !important;
		  min-width: ${cs_thumb_minimal_size}px !important;
		}
		scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
		  background-color: ${cs_thumb_hover_color} !important;
		}
		scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
		  background-image: ${cs_thumb_hover_image_vertical} !important;
		}
		scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[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 !important;
		}
		scrollbar[vertical] scrollbarbutton {
		  background-image: ${cs_buttons_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton {
		  background-image: ${cs_buttons_image_horizontal} !important;
		}
		scrollbar > scrollbarbutton:hover {
		  background-color: ${cs_buttons_hover_color} !important;
		}
		scrollbar[vertical] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_vertical} !important;
		}
		scrollbar[horizontal] scrollbarbutton:hover {
		  background-image: ${cs_buttons_hover_image_horizontal} !important;
		}
	`;

	custom_scrollbar_arrows_code=`

		scrollbar > scrollbarbutton {
		  background-repeat: no-repeat !important;
		  background-position: center center !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: top !important;
			min-width: ${cs_scrollbar_size}px !important;
			min-height: ${cs_scrollbar_size}px !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: bottom !important;
			min-width: ${cs_scrollbar_size}px !important;
			min-height: ${cs_scrollbar_size}px !important;
		}
		scrollbar > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: left !important;
			min-width: ${cs_scrollbar_size}px !important;
			min-height: ${cs_scrollbar_size}px !important;
		}
		scrollbar > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_color} !important;
            fill-opacity: 1 !important;
			background-position: right !important;
			min-width: ${cs_scrollbar_size}px !important;
			min-height: ${cs_scrollbar_size}px !important;
		}

		/* Hover */

		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: top !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: bottom !important;
		}
		scrollbar > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: left !important;
		}
		scrollbar > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
		    -moz-context-properties: fill, fill-opacity;
            fill: ${cs_scrollbar_arrows_hover_color} !important;
            fill-opacity: 1 !important;
			background-position: right !important;
		}
		scrollbar > scrollbarbutton {
			min-width: ${cs_button_size}px !important;
			min-height: ${cs_button_size}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

Dharkness

Zitat von Mira_Belle

Ich hoffe ja, dass nun alle Glücklich damit werden,

Noch nicht so richtig, hier werden z.Z. noch kein Scrollbutton dargestellt, magst Du mir bitte mal die passenden Grafiken für die Scrollbutton zukommen lassen, vielleicht werden sie dann angezeigt?

Zitat von Mira_Belle

Hier die neueste Version!

Die jetzt mit SVGs, die funktionieren, hier nun auch läuft, Dankeschön.

Mira_Belle

Gedanken zu den Symbolen!

Es scheint wohl so, dass mit diesem Skript nur Vektorgrafiken gescheit funktionieren.
Wenn wer auch immer unbedingt PNG's oder was anderes nehmen will,
muss es zusehen, wie er das Skript dann anpasst,

Er müsste sich eigentlich nur die Light-Version mal genauer anschauen. #237

Dharkness

Zitat von Mira_Belle

Es scheint wohl so, dass mit diesem Skript nur Vektorgrafiken gescheit funktionieren.

Die hatte ich ja zuvor auch schon verwendet, aber die ließen sich nicht farblich anpassen. Ich hatte noch andere SVGs und mit denen hat es dann funktioniert, ich hatte die nur aus den Augen verloren, denn die hatte ich ewig nicht mehr verwendet.

Mira_Belle

Dharkness Merkwürdig.

Kannst Du mal testen?

Pfeile.zip

Sind alle Pfeile, sowohl schon Farblich, als auch "anpassbar"!

Dharkness

Zitat von Mira_Belle

Merkwürdig.

In der Tat.

Zitat von Mira_Belle

Kannst Du mal testen?

Ich habe nicht alle getestet, aber Pfeil-hoch.svg als auch Pfeil-hoch_blau.svg funktionieren, nur meine originalen funktionieren nicht, ist m.M.n. aber egal, es funktioniert ja jetzt und ich hätte nötigenfalls dank Dir Ersatz, also alles gut und Dankeschön.

Mira_Belle

Zitat von Dharkness

... getestet, aber Pfeil-hoch.svg ...

Lassen die sich im Skript einfärben?
Bei den anderen ist die Farbe ja vorgegeben!

Ach und lass mir mal Deine Symbole zukommen,
jene, die bei Dir nicht angezeigt werden.
Ich würde das gerne mal testen, eventuell fällt mir dann ja dazu was ein.

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Ähnliche Themen

Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Skript VerticalToolbar.uc.js funktioniert in neu erstellten Profilen nicht mehr richtig

Skript "newTabButtonUndoTabList.uc.js" funktioniert nicht mehr im Nightly - (seit Nightly 139)

Skript für vertikale Toolbar funktioniert im heutigen Nightly nicht mehr richtig

Skript für vertikale Toolbar funktioniert im neuesten Nightly nicht mehr korrekt

Mehrzeilige Tableiste funktioniert nicht mehr seit kurzem