Scrollbar.uc.js Skript die Hg Farbe ändern

Mira_Belle

Auch von mir ein dickes Danke an Aris.

Leider habe ich ein selbst erschaffenes Problem mit diesem Skript.

Nach einigen kleineren Anpassungen, ich habe eigene Pfeile für die Buttons definiert,

schaffe ich es einfach nicht, die Hintergrundfarbe eben dieser Buttons zu definieren!

Ob bitte mal jemand sich das Skript anschauen könnte?

Ich bin etwas am Verzweifeln.

JavaScript

"use strict";

/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox
   https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js

   Version: 2.0.2 for Firefox 111+
   
   NOTE: 'non-compatible options' from earlier versions were removed

   README
  
   about:config >
       widget.windows.overlay-scrollbars.enabled > false (Windows)
       widget.gtk.overlay-scrollbars.enabled > false (Linux)
   [!] The above preferences have to be set to 'false' for this code to work
 
   [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
   -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
   -> close Firefox
   -> delete 'startupCache' folders content
 
   Modifying appearance > change values
   - enable/disable options: true <-> false
   - color
     - name: red, blue, transparent 
     - hex code: #33CCFF, #FFF
     - rgb(a): rgba(0,0,255,0.8)
     - hsl(a): hsla(240,100%,50%,0.8)
   - numbers: 1, 2, 3 ... 10, 11, 12 ...
   - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
   - gradients: linear-gradient(direction, color, color, color)
   - gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
   - predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
   - no color or no color value -> use "unset"
 
*/

(function() {

// Path "berechneten" !
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

  /* General scrollbar settings *******************************************************/

  // default: hide_scrollbars = false
  const hide_scrollbars = false;

  // default: hide_scrollbar_buttons = false
  const hide_scrollbar_buttons = false;

  // default: thin_scrollbars = false / browsers own way to show thin scrollbars
  const thin_scrollbars = false;

  // default: custom_scrollbar_opacity = false
  const custom_scrollbar_opacity = false;

  // default: custom_opacity_value = "1.0"
  const custom_opacity_value = "1.0";


  /* Custom scrollbar settings ("custom_scrollbar_" --> "cs_") ************************/
  
  // default: custom_scrollbars = true
  const custom_scrollbars = true;
  
  // default: custom_scrollbar_arrows = true
  const custom_scrollbar_arrows = true;
  
  // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_color = "grey";

  // default: cs_thumb_border = 0 / in px
  const cs_thumb_border = 1;
  
  // default: cs_thumb_roundness = 0 / in px
  const cs_thumb_roundness = 7;
 
  // default: cs_buttons_border = 0 / in px
  const cs_buttons_border = 0;

  // default: cs_buttons_roundness = 0 / in px
  const cs_buttons_roundness = 0;

  // default: cs_thumb_minimal_size = 12; / in px
  const  cs_thumb_minimal_size = 200;

  // default: cs_ignore_color_gradients = false / 'flat' scrollbars
  const cs_ignore_color_gradients = false; 
  

  /* Custom scrollbar colors and gradients ********************************************/
  
  // default: cs_background_color = "#DDDDDD"
  const cs_background_color = "#5b5b66";

  // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_vertical = "unset";
  
  // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";
  
  // default: cs_corner_background_color = "#DDDDDD" / - corner
  const cs_corner_background_color = "#bfbfbf";
  
  // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
  let cs_corner_background_image = "unset";

  // default: cs_thumb_color = "#33CCFF" / thumb/slider
  const cs_thumb_color = "#bfbfbf";
  
  // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_vertical = "unset"; 
  
  // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset"; 
  
  // default: cs_thumb_hover_color = "#66FFFF"
  const cs_thumb_hover_color = "orange";
  
  // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_vertical = "unset";
  
  // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";
  
  // default: cs_thumb_border_color = "#33CCFF"
  const cs_thumb_border_color = "#5b5b66";
  
  // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  const cs_buttons_color = "#66FFFF";
  
  // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_vertical = "unset";

  // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";
  
  // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_hover_color = "orange";
  
  // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_vertical = "unset";
  
  // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";
  
  // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  const cs_buttons_border_color = "#5b5b66";

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


  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";


  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
  let hide_scrollbar_buttons_code='';
  let custom_scrollbar_opacity_code='';
  let hide_scrollbars_code='';
  let thin_scrollbars_code='';
  
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
        slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
          appearance: auto;
          -moz-default-appearance: none !important;
        }
        slider {
          background-color: `+cs_background_color+` !important;
        }
        scrollbar[orient="vertical"] slider {
          background-image: `+cs_background_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] slider {
          background-image: `+cs_background_image_horizontal+` !important;
        }
        scrollcorner {
          background-color: `+cs_corner_background_color+` !important;
          background-image: `+cs_corner_background_image+` !important;
        }
        scrollbar thumb {
          background-color: `+cs_thumb_color+` !important;
          border-radius: `+cs_thumb_roundness+`px !important;
          box-shadow: inset 0 0 0 `+cs_thumb_border+`px `+cs_thumb_border_color+` !important;
        }
        scrollbar thumb[orient="vertical"] {
          background-image: `+cs_thumb_image_vertical+` !important;
          min-height: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
        }
        scrollbar thumb[orient="horizontal"] {
          background-image: `+cs_thumb_image_horizontal+` !important;
          min-width: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
        }
        scrollbar thumb:hover, scrollbar thumb:active {
          background-color: `+cs_thumb_hover_color+` !important;
        }
        scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
          background-image: `+cs_thumb_hover_image_vertical+` !important;
        }
        scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
          background-image: `+cs_thumb_hover_image_horizontal+` !important;
        }
        scrollbar scrollbarbutton {
          background-color: `+cs_buttons_color+` !important;
          border-radius: `+cs_buttons_roundness+`px !important;
          box-shadow: inset 0 0 0 `+cs_buttons_border+`px `+cs_buttons_border_color+` !important;
          height: 17px !important;
          width: 17px !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          background-image: `+cs_buttons_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          background-image: `+cs_buttons_image_horizontal+` !important;
        }
        scrollbar scrollbarbutton:hover {
          background-color: `+cs_buttons_hover_color+` !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton:hover {
          background-image: `+cs_buttons_hover_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton:hover {
          background-image: `+cs_buttons_hover_image_horizontal+` !important;
        }
    `;
    
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        mask-image: url("${ProfileDirectory}/Chevron-up,_12.svg") !important;
          
        mask-repeat: no-repeat !important;
        mask-position: center center !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        mask-image: url("${ProfileDirectory}/Chevron-down,_12.svg") !important;
        mask-repeat: no-repeat !important;
        mask-position: center center !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        mask-image: url("${ProfileDirectory}/Chevron-left,_12.svg") !important;
        mask-repeat: no-repeat !important;
        mask-position: center center !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        mask-image: url("${ProfileDirectory}/Chevron-right,_12.svg") !important;
        mask-repeat: no-repeat !important;
        mask-position: center center !important;
      }
    `;

  if(hide_scrollbar_buttons === true)
    hide_scrollbar_buttons_code=`
        scrollbar scrollbarbutton {
          opacity: 0 !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          min-height: 1px !important;
          height: 1px !important;
          max-height: 1px !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          min-width: 1px !important;
          width: 1px !important;
          max-width: 1px !important;
        }
    `;
    
  if(custom_scrollbar_opacity === true)
    custom_scrollbar_opacity_code=`
        scrollbar {
          opacity: `+custom_opacity_value+` !important;
        }
    `;
  
  if(hide_scrollbars === true)
    hide_scrollbars_code=`
        scrollbar, scrollcorner {
          display: none !important;
          visibility: collapse !important;
        }
    `;
  
  if(thin_scrollbars === true)
    thin_scrollbars_code=`
        :root{
          scrollbar-width: thin !important;
        }
    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        `+custom_scrollbars_code+`
        `+custom_scrollbar_arrows_code+`
        `+hide_scrollbar_buttons_code+`
        `+custom_scrollbar_opacity_code+`
        `+hide_scrollbars_code+`
        `+thin_scrollbars_code+`
  `), null, null),
  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);

})()

Alles anzeigen

Mira_Belle

Sollte dieses Skript fehlerfrei sein, wäre das Thema vorerst erledigt!

Daher bitte ich um Überprüfung und auch ob es unter den Nightly-Versionen 112 sowie 113 anstandslos läuft.

Zum Testen werden auch die Vektorgraviken benötigt, da sie farbig sind!

Symbole.zip

Ich bedanke mich schon ein Mal im Voraus.

JavaScript

// Scrollbar.uc.js
"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************
   HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt
   README
 
   about:config >
       widget.windows.overlay-scrollbars.enabled > false (Windows)
       widget.gtk.overlay-scrollbars.enabled > false (Linux)
   [!] The above preferences have to be set to 'false' for this code to work
 
  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen
  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
 
   Anpassungen vornehmen > Werte ändern
   - - Optionen aktivieren/deaktivieren: true <-> false
   - Farbe
     - Name: red, blue, transparent
     - Hexcode: #33CCFF, #FFF
     - rgb(a): rgba(0,0,255,0.8)
     - hsl(a): hsla(240,100%,50%,0.8)
   - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
   - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
   - Farbverläufe: linear-gradient(direction, color, color, color)
   - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
   - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
   - keine Farbe oder keine Farbwerte -> verwende "unset"
 
*/
(function() {
  /* Profile path "calculate" **************************************************************************************************/
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
 
  const custom_opacity_value = "1.0";             // default: custom_opacity_value = "1.0"
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
  const custom_scrollbars = true;  // default: custom_scrollbars = true
  const custom_scrollbar_arrows = true;  // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 1;  // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 7;  // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;  // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;  // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 200;  // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;   // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
  const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_hover_color = "orange";                // default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_border_color = "#5b5b66";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#5b5b66";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";
  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
 
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
        slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
          appearance: auto;
          -moz-default-appearance: none !important;
        }
        slider {
          background-color: ${cs_background_color} !important;
        }
        scrollbar[orient="vertical"] slider {
          background-image: ${cs_background_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] slider {
          background-image: ${cs_background_image_horizontal} !important;
        }
        scrollcorner {
          background-color: ${cs_corner_background_color} !important;
          background-image: ${cs_corner_background_image} !important;
        }
        scrollbar thumb {
          background-color: ${cs_thumb_color} !important;
          border-radius: ${cs_thumb_roundness}px !important;
          box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
        }
        scrollbar thumb[orient="vertical"] {
          background-image: ${cs_thumb_image_vertical} !important;
          min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
        }
        scrollbar thumb[orient="horizontal"] {
          background-image: ${cs_thumb_image_horizontal} !important;
          min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
        }
        scrollbar thumb:hover, scrollbar thumb:active {
          background-color: ${cs_thumb_hover_color} !important;
        }
        scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
          background-image: ${cs_thumb_hover_image_vertical} !important;
        }
        scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
          background-image: ${cs_thumb_hover_image_horizontal} !important;
        }
        scrollbar scrollbarbutton {
          background-color: ${cs_buttons_color} !important;
          border-radius: ${cs_buttons_roundness}px !important;
          box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
          height: 17px !important;
          width: 17px !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          background-image: ${cs_buttons_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          background-image: ${cs_buttons_image_horizontal} !important;
        }
        scrollbar scrollbarbutton:hover {
          background-color: ${cs_buttons_hover_color} !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton:hover {
          background-image: ${cs_buttons_hover_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton:hover {
          background-image: ${cs_buttons_hover_image_horizontal} !important;
        }
    `;
   
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
      }
/* hover  */
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
      }
       
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
      }
       
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
      }
       
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
      }
    `;
  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        ${custom_scrollbars_code}
        ${custom_scrollbar_arrows_code}
  `), null, null),
  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
})()

Alles anzeigen

Endor

Hallo Mira_Belle.

Habe Dein Script hier in Firefox 113 Nightly getestet.

~~Funktioniert hier einwandfrei. Alles bestens.~~
Edit: Doch nicht so ganz. Siehe:

RE: Scrollbar.uc.js Skript die Hg Farbe ändern
Auch am Code konnte ich keine Fehler erkennen.

Scrollbars usw. sehen übrigens toll aus!!!

Mfg.
Endor

FuchsFan

Zitat von Endor

Funktioniert hier einwandfrei.

Eigentlich hier auch, aber trotzdem muss ich feststellen, dass bei erhöhtem Zoom es dann so aussieht (hier mal 300%). Oder ist das beabsichtigt?

2002Andreas

Bei 50% so in Fx 111.

Boersenfeger

Zitat von Endor

Hallo Mira_Belle.
Habe Dein Script hier in Firefox 113 Nightly getestet.
Funktioniert hier einwandfrei. Alles bestens....

Schließe mich an und habe das Script adoptiert Dankeschön!

Ich nutze den Fuchs mit 110 % und ändere da nix, ansonsten kann ich die Erscheinung bestätigen.

Endor

Zitat von FuchsFan

Eigentlich hier auch, aber trotzdem muss ich feststellen, dass bei erhöhtem Zoom es dann so aussieht (hier mal 300%). Oder ist das beabsichtigt?

Ja das muss ich leider auch bestätigen.

Sieht hier aus wie bei FuchsFan.

Mfg.
Endor

2002Andreas

Zitat von Endor

Ja das muss ich leider auch bestätigen.

Da fehlt was im Code, Zeile 3 + 4

CSS

     scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
   }

und das für alle 4 Grafiken.

300%

50%

Endor

Hallo 2002Andreas

Ja damit wird nur noch ein Symbol angezeigt egal welche Vergrößerung.
Aber das Pfeilsymbol wird verschoben beim Vergrößern. Das obere weiter nach unten
das untere weiter nach oben.
Außer man setzt in den Firefox Einstellungen den Haken bei
Nur Text zoomen

Dann passt es hier.

Mfg.
Endor

2002Andreas

Zitat von Endor

Nur Text zoomen

Ok, darauf habe ich nicht weiter geachtet.

Ist in meinem Testprofil so eingestellt.

Endor

2002Andreas

Könnte man hier
background-position: center !important;

noch einen weiteren Wert hinzufügen?

Je nachdem top oder bottom usw.
Lese gerade hier:
https://developer.mozilla.org/en-US/docs/Web…ground-position

Mfg.
Endor

Hallo 2002Andreas.

Ich habe es hier jetzt so gemacht, dann funktioniert es:

CSS

  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
        background-repeat: no-repeat !important;
        background-position: top !important;

      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; 
        background-repeat: no-repeat !important;
        background-position: bottom !important;

      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
        background-repeat: no-repeat !important;
        background-position: left !important;

      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
        background-repeat: no-repeat !important;
        background-position: right !important;

      }
/* hover  */
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
        background-repeat: no-repeat !important;
        background-position: top !important;
      }
       
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important;
        background-repeat: no-repeat !important;
        background-position: bottom !important;
      }
       
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
        background-repeat: no-repeat !important;
        background-position: left !important;
      }
       
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
        background-repeat: no-repeat !important;
        background-position: right !important;
      }
    `;

Alles anzeigen

Was meinst Du dazu?

Mfg.
Endor

2002Andreas

Zitat von Endor

Was meinst Du dazu?

Funktioniert so.

Noch ein Problem gefunden:

Fenster verkleiner...kein Thumb vorhanden.

Dto. bei 270%

2002Andreas

Dann muss Mira_Belle noch nachbessern.

Bei dem Skript von Aris treten diese Probleme nicht auf.

Mira_Belle

Eijajeijei.

Erst einmal Danke für's Testen.

Da ist mir beim Anpassen des Code ein Fauxpas passiert,

da habe ich doch glatt wichtigen Code vergessen oder versehentlich gelöscht!

Fürgt doch bitte mal in Zeile 182 vor das /* hover */

JavaScript

      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        background-repeat: no-repeat;
        background-position: center;
      }

ein.

Dann ist der Fehler mit den doppelten Pfeilen beim Verkleinern,

bzw. mit den Untereinandergereiten beim Vergrößern behoben.

Sollte zumindest.

Endor

Das mit den fixen Positionen werde ich mal testen und schauen, was es bewirkt.

Oben => top, Unten => bottom, links, rechts wahrscheinlich dann left and right.

Zu dem verschwundenen Thumb.

Das habe ich aus Aris altem Skript!

Wer mit so schmalem Fenter hin und wieder arbeitet,

sollt die Variable in Zeile 58 von 200 eben auf den Devaultwert ändern.

Denke Aris hat diesen Wert wohl mit Absicht so festgelegt, noch kleiner macht wohl keinen Sinn.

Hatt jemand noch ungereimtheiten festgestellt, die ich verbessern muss?

Dann stelle ichhier noch einmal das korrigierte Javaskript,

also mit dem fehlenden Code und devault thumb_minimal_size = 12, ein.

Bitte noch ein mal prüfen.

JavaScript

// Scrollbar.uc.js

"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************

   HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt

   README
  
   about:config >
       widget.windows.overlay-scrollbars.enabled > false (Windows)
       widget.gtk.overlay-scrollbars.enabled > false (Linux)
   [!] The above preferences have to be set to 'false' for this code to work
 
  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen

  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
 
   Anpassungen vornehmen > Werte ändern
   - - Optionen aktivieren/deaktivieren: true <-> false
   - Farbe
     - Name: red, blue, transparent 
     - Hexcode: #33CCFF, #FFF
     - rgb(a): rgba(0,0,255,0.8)
     - hsl(a): hsla(240,100%,50%,0.8)
   - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
   - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
   - Farbverläufe: linear-gradient(direction, color, color, color)
   - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
   - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
   - keine Farbe oder keine Farbwerte -> verwende "unset"
 
*/

(function() {

  /* Profile path "calculate" **************************************************************************************************/

  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

// GENERAL SCROLLBAR SETTINGS
 
  const custom_opacity_value = "1.0";             // default: custom_opacity_value = "1.0"

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_") 

  const custom_scrollbars = true;                       // default: custom_scrollbars = true
  const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 7;                         // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 12;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
  const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_hover_color = "orange";                // default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_border_color = "#5b5b66";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#5b5b66";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";

  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
 
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
        slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
          appearance: auto;
          -moz-default-appearance: none !important;
        }
        slider {
          background-color: ${cs_background_color} !important;
        }
        scrollbar[orient="vertical"] slider {
          background-image: ${cs_background_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] slider {
          background-image: ${cs_background_image_horizontal} !important;
        }
        scrollcorner {
          background-color: ${cs_corner_background_color} !important;
          background-image: ${cs_corner_background_image} !important;
        }
        scrollbar thumb {
          background-color: ${cs_thumb_color} !important;
          border-radius: ${cs_thumb_roundness}px !important;
          box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
        }
        scrollbar thumb[orient="vertical"] {
          background-image: ${cs_thumb_image_vertical} !important;
          min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
        }
        scrollbar thumb[orient="horizontal"] {
          background-image: ${cs_thumb_image_horizontal} !important;
          min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
        }
        scrollbar thumb:hover, scrollbar thumb:active {
          background-color: ${cs_thumb_hover_color} !important;
        }
        scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
          background-image: ${cs_thumb_hover_image_vertical} !important;
        }
        scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
          background-image: ${cs_thumb_hover_image_horizontal} !important;
        }
        scrollbar scrollbarbutton {
          background-color: ${cs_buttons_color} !important;
          border-radius: ${cs_buttons_roundness}px !important;
          box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
          height: 17px !important;
          width: 17px !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          background-image: ${cs_buttons_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          background-image: ${cs_buttons_image_horizontal} !important;
        }
        scrollbar scrollbarbutton:hover {
          background-color: ${cs_buttons_hover_color} !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton:hover {
          background-image: ${cs_buttons_hover_image_vertical} !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton:hover {
          background-image: ${cs_buttons_hover_image_horizontal} !important;
        }
    `;
    
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important; */
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
      }

      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        background-repeat: no-repeat;
        background-position: center;
      }

    /* hover */

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
      }
        
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
      }
        
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
      }
        
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
      }

    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        ${custom_scrollbars_code}
        ${custom_scrollbar_arrows_code}
  `), null, null),

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);

})()

Alles anzeigen

Mira_Belle

Gerade das mit den fixen Positionen getestet.

Habe keinen Unterschied festgestellt zu der "Center"-Lösung.

Da ich finde, dass das die einfachere Lösung ist, habe ich den Code

für die fixen Positionen wieder verworfen, aber es funktioniert!

Muss ich mir merken und habe den Link auch abgespeichert.

Dass die Scrollbar inkl. Symbole beim Vergrößern und/oder verkleinern ebenfalls

sich mit verändert, stört mich auch, aber irgendwo wurde es erklärt und es lässt sich wohl nicht verhindern.

PS:

Wer diese oder auch andere Symbole gerne in Farbig hätte, bitte per PN eine Anfrage stellen.

Speravir

Zitat von Endor

Könnte man hier
background-position: center !important;

noch einen weiteren Wert hinzufügen?
Je nachdem top oder bottom usw.

Ja, könnte man. Siehe auf der von dir verlinkten MDN-Seite:

Zitat von MDN – CSS: background-position

2-value syntax: one value defines X and the other defines Y. Each value may be:

One of the keyword values top, left, bottom, right. If left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
[…]
Note that: If one value is top or bottom, then the other value may not be top or bottom. If one value is left or right, then the other value may not be left or right. This means, e.g., that top top and left right are not valid.

(Es gibt noch weitere Listenpunkte.)

Mira_Belle

Wenn ich das richtig verstanden habe, kann man also oben links, oder rechts, aber auch unten links, oder rechts definieren!

Also z.B. background-position: top left; auch background-position: bottom left;

Nur könnte mir jemand erklären, welchen Sinn das hier mit den Pfeilen machen würde?

Ich kann den nämlich nicht entdecken.

2002Andreas

Zitat von Mira_Belle

Bitte noch ein mal prüfen.

Das Skript funktioniert nicht in den Browser-Werkzeugen.

In den Entwickler-Werkzeugen bzw. dem Browser hingegen schon.

PS:

Ist mit dem Skript von Aris allerdings auch so.

2002Andreas

Zitat von Mira_Belle

devault thumb_minimal_size = 12

Das funktioniert auch.

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Bitte noch ein mal prüfen.

Das Skript funktioniert nicht in den Browser-Werkzeugen.
In den Entwickler-Werkzeugen bzw. dem Browser hingegen schon.
...

Ja, das ist beim "alten" Skript von Aris auch schon so gewesen,

und war (ist) mein Problem gewesen, an die Symbole (in Aris neuem Skript) zu kommen.

Daher habe ich den Weg genommen, die Vektorgrafiken direkt bunt zu machen.