Beiträge von Mira_Belle

Mira_Belle

Also ich weiß nicht weiter!
Bei mir funktioniert das Skript wie ich es mir gedacht habe!
Bei anderen wohl auch.
Wenn Du Endor die Pfeile nutzen möchtest, nutze Option "1"
und ändere die Farben nach Anleitung.

Code

  // only for 'custom_scrollbar_arrows_version = 1'
  const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

Welche 1.Farbe und welche 2.Farbe?
Die Farbwerte bitte.

Mira_Belle

Code

  // 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 custom_scrollbar_arrows_version = 1;            // default: custom_scrollbar_arrows_version = 1
                                                        //  1 ==> SVG arrows as code: might not work on some pages
                                                        //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder

  // only for 'custom_scrollbar_arrows_version = 1'
  const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

  // only for 'custom_scrollbar_arrows_version = 2'
  const cs_scrollbar_arrows_color = "#1e90ff"		// "#7c7c7c"	"#bfbfbf"
  const cs_scrollbar_arrows_hover_color = "#ffa600"

Alles anzeigen

Also, hier wird die Option ausgewäht!
const custom_scrollbar_arrows_version = 1;

wenn 1
dann hier die Farben =>

Code

  // only for 'custom_scrollbar_arrows_version = 1'
  const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

wenn 2
dann eben hier die Farben =>

Code

  // only for 'custom_scrollbar_arrows_version = 2'
  const cs_scrollbar_arrows_color = "#1e90ff"		// "#7c7c7c"	"#bfbfbf"
  const cs_scrollbar_arrows_hover_color = "#ffa600"

Mira_Belle

Und die Symbole heißen wie?
Und stimmt die Bezeichnung dann auch mit denen im Skript über ein?

Ich habe hier keine Probleme.

Hier noch einmal die Symbole, in denen die Farbe nicht festgelegt ist.
Chevron.zip
und
Pfeile.zip

Ach, und stimmt das nun mit dem Pfad?

Code

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

CSS

background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;

oder

CSS

background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;

Je nachdem, welches SVG Du nutzt.

Und immer daran denken, cache löschen!

Mira_Belle

Ich bin zu der Überzeugung gekommen, dass das Flüchtigkeitsfehler beim Umbenennen der Dateien,
bei Veränderungen im Skript oder was auch immer sein müssen.

Trag doch einfach die gewünschten Farben in den Zeilen =>

JavaScript

  // only for 'custom_scrollbar_arrows_version = 2'
  const cs_scrollbar_arrows_color = "#bfbfbf"		// "#7c7c7c"
  const cs_scrollbar_arrows_hover_color = "#ffa600"

ein und ändert auch die Bezeichnungen hier =>

JavaScript

		scrollbar[orient="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[orient="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[orient="horizontal"] > 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[orient="horizontal"] > 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[orient="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[orient="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[orient="horizontal"] > 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[orient="horizontal"] > 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;
		}

Alles anzeigen

Und nutzt diese Symbole => Pfeile.zip

#1e90ff für das Blau

#d3d3d3 für das helle Grau

#ffa500 für Orange

Mira_Belle

Bin gerade nicht zu Hause.

Werde der Sache noch auf die Spur kommen.

Habt Geduld.

Mira_Belle

Ich bin noch am testen!!!

Irgendwie stört sich irgendwas an bestimmten Bezeichnungen der Pfeile.

Oder benennt die Pfeile um!

Mira_Belle

Zitat von edvoldi

Kannst Du dann auch deine 4 Dateien hier hochladen?

Du meinst die blauen Pfeile?
Warum? Die Farbe kannst Du doch nun in der Konfiguration einstellen!!
Du musst nur die Pfeile.zip von mir runterladen und die richtigen Symbole verwenden!

Ich verstehe das nicht.

Aber wenn Du die Pfeile unbedingt in Blau haben willst, bekommst Du sie!

blau.zip

Mira_Belle

Wozu mach ich mir so eine Mühe.

Nun gut, is wie's is.

Mira_Belle

Und bevor es Kritik gibt, die Farben könnt/müsst ihr Euch anpassen.

Zitat von Endor

Prima.
Schiebst Du mir dann bitte noch die vier orangen farbenen Pfeil Bilder rüber?

Nö.
Es gibt ein Update, da kann man in der Konfiguration die Farben definieren!

Zeilen 86 & 87

CSS

// 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************************** */
/* Scrollbar.v2.0.7.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
/* Scrollbar.v2.0.8.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278349#post1278349************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.8 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************

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"


			/* ----------------------------------------------------------------------------------- */
			/*     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'));

  // GENERAL SCROLLBAR SETTINGS
  const hide_scrollbars = false;                		// default: hide_scrollbars = false
  const hide_scrollbar_buttons = false;         		// default: hide_scrollbar_buttons = false
  const thin_scrollbars = false;                		// default: thin_scrollbars = false / browsers own way to show thin scrollbars
  const custom_scrollbar_opacity = false;        		// default: custom_scrollbar_opacity = false
  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 custom_scrollbar_arrows_version = 2;            // default: custom_scrollbar_arrows_version = 1
                                                        //  1 ==> SVG arrows as code: might not work on some pages
                                                        //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder

  // only for 'custom_scrollbar_arrows_version = 1'
  const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

  // only for 'custom_scrollbar_arrows_version = 2'
  const cs_scrollbar_arrows_color = "#bfbfbf"		// "#7c7c7c"
  const cs_scrollbar_arrows_hover_color = "#ffa600"

  const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px 1
  const cs_thumb_roundness = 9;                         // default: cs_thumb_roundness = 0 / in px 9
  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 = 17;                     // default: cs_thumb_minimal_size = 17; / in px
  const cs_ignore_color_gradients = false;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars

  // CUSTOM SCROLLBAR COLORS/GRADIENTS
  // - background
  const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
  let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_background_roundness = 9;					// default: cs_background_roundness = 0 / in px	/ 9
  // - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
  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
  const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";              // 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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";        // 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
  let cs_button_size = 17;								  // in px // default: cs_button_size = 17	/ 26
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
  let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";            // 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"	/ "#bfffff"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF"
  let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

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

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

  // 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=`
		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 ${cs_buttons_border_color} !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;
		}
	`;
	
  if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 1)
	custom_scrollbar_arrows_code=`

		scrollbar > scrollbarbutton {
		  background-repeat: no-repeat !important;
		  background-position: center center !important;
		}
		scrollbar[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[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 > 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 > 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[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_hover_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;
          background-repeat: no-repeat !important;
          background-position: top !important;
        }
        scrollbar[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_hover_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;
          background-repeat: no-repeat !important;
          background-position: bottom !important;
        }
        scrollbar > 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_hover_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;
          background-repeat: no-repeat !important;
          background-position: left !important;
        }
        scrollbar > 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_hover_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;
          background-repeat: no-repeat !important;
          background-position: right !important;
        }
	`;
  else if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 2)
	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}/Chevron-up.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}/Chevron-down.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}/Chevron-left.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}/Chevron-right.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}/Chevron-up.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}/Chevron-down.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}/Chevron-left.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}/Chevron-right.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;
		}
	`;

  if(hide_scrollbar_buttons === true)
	hide_scrollbar_buttons_code=`
		scrollbar > scrollbarbutton {
		  opacity: 0 !important;
		}
		scrollbar[vertical] > scrollbarbutton {
		  min-height: 1px !important;
		  height: 1px !important;
		  max-height: 1px !important;
		}
		scrollbar[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;
		}
		scrollbar[vertical] > scrollbarbutton {
		  height: 14px !important;
		  width: 7px !important;
		}
		scrollbar[horizontal] > scrollbarbutton {
		  height: 7px !important;
		  width: 14px !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

Und hier die passenden Symbole dafür.

Symbole.zip

Mira_Belle

Bitte in jedem Skript ergänzen!

Code

/* ----------------------------------------------------------------------------------- */
/*     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   */
/* ----------------------------------------------------------------------------------- */

Hier nochmal das Skript mit der Erklärung zu den Symbolen und wo sie am besten gespeichert werden sollten,
damit man am Skript nichts groß ändern muss.

CSS

// 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************************** */
/* Scrollbar.v2.0.7.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.7 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************

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"


			/* ----------------------------------------------------------------------------------- */
			/*     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'));

  // GENERAL SCROLLBAR SETTINGS
  const hide_scrollbars = false;                		// default: hide_scrollbars = false
  const hide_scrollbar_buttons = false;         		// default: hide_scrollbar_buttons = false
  const thin_scrollbars = false;                		// default: thin_scrollbars = false / browsers own way to show thin scrollbars
  const custom_scrollbar_opacity = false;        		// default: custom_scrollbar_opacity = false
  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 custom_scrollbar_arrows_version = 1;            // default: custom_scrollbar_arrows_version = 1
                                                        //  1 ==> SVG arrows as code: might not work on some pages
                                                        //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder

  // only for 'custom_scrollbar_arrows_version = 1'
  const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

  const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px 1
  const cs_thumb_roundness = 9;                         // default: cs_thumb_roundness = 0 / in px 9
  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 = 17;                     // default: cs_thumb_minimal_size = 17; / in px
  const cs_ignore_color_gradients = false;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars

  // CUSTOM SCROLLBAR COLORS/GRADIENTS
  // - background
  const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
  let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_background_roundness = 9;					// default: cs_background_roundness = 0 / in px	/ 9
  // - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
  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
  const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";              // 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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";        // 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
  let cs_button_size = 17;									// in px // default: cs_button_size = 17	/ 26
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
  let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";            // 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"	/ "#bfffff"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF"
  let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

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

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

  // 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=`
		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 ${cs_buttons_border_color} !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;
		}
	`;
	
  if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 1)
	custom_scrollbar_arrows_code=`

		scrollbar > scrollbarbutton {
		  background-repeat: no-repeat !important;
		  background-position: center center !important;
		}
		scrollbar[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[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 > 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 > 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[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_hover_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;
          background-repeat: no-repeat !important;
          background-position: top !important;
        }
        scrollbar[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_hover_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;
          background-repeat: no-repeat !important;
          background-position: bottom !important;
        }
        scrollbar > 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_hover_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;
          background-repeat: no-repeat !important;
          background-position: left !important;
        }
        scrollbar > 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_hover_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;
          background-repeat: no-repeat !important;
          background-position: right !important;
        }
	`;
  else if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 2)
	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}/Chevron-up_hellgrau.svg") !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Chevron-down_hellgrau.svg") !important;
		}
		scrollbar > scrollbarbutton[type="decrement"] {
		  background-image: url("${ProfileDirectory}/Chevron-left_hellgrau.svg") !important;
		}
		scrollbar > scrollbarbutton[type="increment"] {
		  background-image: url("${ProfileDirectory}/Chevron-right_hellgrau.svg") !important;
		}

		/* Hover */

		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Chevron-up_orange.svg") !important;
		}
		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Chevron-down_orange.svg") !important;
		}
		scrollbar > scrollbarbutton[type="decrement"]:hover {
		  background-image: url("${ProfileDirectory}/Chevron-left_orange.svg") !important;
		}
		scrollbar > scrollbarbutton[type="increment"]:hover {
		  background-image: url("${ProfileDirectory}/Chevron-right_orange.svg") !important;
		}

		scrollbar > scrollbarbutton {
			min-width: ${cs_button_size}px !important;
			min-height: ${cs_button_size}px !important;
		}
	`;

  if(hide_scrollbar_buttons === true)
	hide_scrollbar_buttons_code=`
		scrollbar > scrollbarbutton {
		  opacity: 0 !important;
		}
		scrollbar[vertical] > scrollbarbutton {
		  min-height: 1px !important;
		  height: 1px !important;
		  max-height: 1px !important;
		}
		scrollbar[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;
		}
		scrollbar[vertical] > scrollbarbutton {
		  height: 14px !important;
		  width: 7px !important;
		}
		scrollbar[horizontal] > scrollbarbutton {
		  height: 7px !important;
		  width: 14px !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

Mira_Belle

Endor Sorry, wusste nicht, dass ich auch speziell darauf hinweisen muss, dass aus einem Skript aufgerufene Dateien
auch so im Verzeichnis heißen müssen!

Des Rätsels Lösung ist also gefunden?

Mira_Belle

Endor Nachdem ich nun alle Kommentare gelesen habe, habe ich keine Ahnung wo bei Dir der Fehler liegen könnte.
Es liegt aber sehr wahrscheinlich an dem Rechner, bzw. dessen Installation.

Mira_Belle

Zitat von Sören Hentzschel

Das ist ganz klar ein Bug des Windows Explorers, wenn der keine Vorschau anzeigt

Du hast Recht! Ich habe das verwechselt. Sorry.

Mira_Belle

Zitat von Endor

Firefox 143 und 144 nur als portable verfügbar.

Du willst das Skript auf einem Rechner nutzen, auf dem der FF nur als portable verfügbar ist?
Wow, keine Ahnung ob das Skript damit zurecht kommt, wobei auch da ja der Profilpfad genauso
wie bei einer Installation angelegt wird.
Schon komisch.
Trage doch mal den kompletten Pfad in der Zeile ein, wo das Symbol aufgerufen wird.

Also background-image: url("C:/Users/xxxx/AppData/Roaming/Mozilla/Firefox/Profiles/z3osmcsk.Firefox-143/chrome/Icons/up.svg") !important;
Fehler mit dem Slash behoben

Und wenn das auch nicht fruchtet, bitte "Dein" unverändertes Skript
Ich muss das sehen und ausprobieren, Deine Symbole habe ich ja schon.

Mira_Belle

Mh, ändere mal am Ende der Variabel "icons" in "Icons".

Mira_Belle

Die Variabel stimmt!

Wenn Du die Symbole nur in "chrome" gespeichert hast, lösche am Ende

das "icons".

Hast Du die Symbole unter "chrome" in einem anderen Ordner, z.b. "image",

musst Du "icons" eben durch "image" ersetzen.

Zitat von Endor

sie

Merwüdig.

Bitte kopiere doch mal den genauen Pfad.

Natürlich ohe Deinen Benutzernamen, mach da xxxx rein.

Mira_Belle

In welchem Ordner hast Du die Symbole denn gespeichert?

Sie sollten unter

"Profil"/chrome/icons

abgespeichert sein

Mira_Belle

Zitat von grisu2099

Bei einem Klick auf Endors .svg-Dateien öffnen die sich hier im Firefox...

Ja, der Firefox macht das, aber die SVG sollte im Explorer angezeigt werden.
Wobei man diesen unter Windows 10 erst per patch dazu bekommt, dass es auch SVG's anzeigt.

Am besten ist, man schaut mit einem Editor sich den Code an!
Wenn es Probleme gibt, einfach fragen.
Nicht immer ist es so einfach wie bei diesen Symbolen.

Mira_Belle

Ach ja, die guten SVG's!

Schaut Euch doch mal den Code an!

Code

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
  <path fill='dodgerblue' fill-opacity='context-fill-opacity' 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'/>
</svg>

Wer viel mit SVG bastelt, sieht warum es nicht funktionieren kann

Code

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='dodgerblue'>
  <path 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'/>
</svg>

Seht Ihr den Unterschied?

down.svg up.svg

Und noch etwas Klugscheiß hinterher.
Für "dodgerblue" kann man auch Werte, was ich persönlich besser finde, nemen,
z.B. #1e90ff oder rgb(31, 143, 255).
ABER niemals die " " oder die ' ' vergessen!
Und bleibt bei einem, also entweder " " oder ' '.

Warum ich Werte bevorzuge? Weil man in einem gescheiten Editor die Farben angezeigt bekommt
und es einefunktion gibt, diese per "Schieber" zu verändern.
Also benutze ich immer "#ff8c00" anstatt "orange".

Mira_Belle

Zitat von Endor

Das einbinden von eigenen Symbolen für die Pfeile up.svg bzw. down.svg
funktioniert hier nicht. Das wäre wenn man hier
const custom_scrollbar_arrows_version = 1; auf 2 stellt.

Das steht doch auch so im Skript.

Code

  const custom_scrollbar_arrows_version = 1;            // default: custom_scrollbar_arrows_version = 1
                                                        //  1 ==> SVG arrows as code: might not work on some pages
                                                        //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder

1 => interner Code
2=> externe Symbole

Eventuell sollte ich da noch einen deutschen Kommentar einbauen, dass entweder der Pfad zu den Symbolen angepasst werden muss, oder dass die Symbole, wie immer in "meinen" Skripts, in einem Ordner mit dem Namen "icons" sich unter "chrome"
im Profilverzeichnis befinden muss.

Beiträge von Mira_Belle

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig