Firefox 113 Änderungen

"use strict";

/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */

/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */

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

 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
 
 
 [!] 'Method 2' is requi#486860 to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)

 [!] 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

 ENABLING options > set var to true
 DISABLING options > set var to false
 Modifying appearance > change values
 - color - name: #486860, blue, transparent / hex code: #486860, #FFF
 - color - 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, #486860, rgba(0,0,255,0.8))
 - p#486860efined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */

// GENERAL SCROLLBAR SETTINGS
var hide_scrollbars = false; // default: hide_scrollbars = false
var hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
var custom_scrollbar_size = true; // default: custom_scrollbar_size = false
var custom_scrollbar_size_value = 12; // in px // default: custom_scrollbar_size_value = 17
var custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false
var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// floating scrollbars
var enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code
// custom scrollbars
var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
var cs_thumb_border = 0; // in px // default: cs_thumb_border = 1 | DBI
var cs_thumb_roundness = 0; // in px // default: cs_thumb_roundness = 0
var cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0
var cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
var cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code
// button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow
var cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5
// 'flat' scrollbars
var cs_ignore_color_gradients = true; // default: cs_ignore_color_gradients = false

var cs_thumb_minimal_size = 12; // in px

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
var cs_background_color = "#f9f9fb"; // default: cs_background_color = "#DDDDDD" | DBI Standar
var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_vertical = "unset"
var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_horizontal = "unset"
// - corner
var cs_corner_background_color = "#DDDDDD"; // default: cs_corner_background_color = "#DDDDDD"
var 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 = "unset"
// - thumb/slider
var cs_thumb_color = "#486860"; // default: cs_thumb_color = "#486860"
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset"
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset"
var cs_thumb_hover_color = "#d76e00"; // default: cs_thumb_hover_color = "xxx" DBI
var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset"
var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset"
var cs_thumb_border_color = "#486860"; // default: cs_thumb_border_color = "#486860"
// - buttons
var cs_buttons_color = "#f9f9fb"; // default: cs_buttons_color = "blue" DBI
var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_vertical = "unset"
var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_horizontal = "unset"
var cs_buttons_hover_color = "#f9f9fb"; // default: cs_buttons_hover_color = "#486860" DBI
var cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_vertical = "unset"
var cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_horizontal = "unset"
// - button arrows
var cs_arrows_on_buttons_color = "#486860"; // default: cs_arrows_on_buttons_color = "#486860"
var cs_arrows_on_buttons_hover_color = "#486860"; // default: cs_arrows_on_buttons_hover_color = "xxx" DBI

// 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";

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


// Scrollbar code

Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var custom_scrollbars = {

    init: function() {

    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {\
      -moz-appearance: none !important;\
      appearance: none !important;\
    }\
    scrollbar {\
      background-color: '+cs_background_color+' !important;\
    }\
    scrollbar[orient="vertical"] {\
      background-image: '+cs_background_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] {\
      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;\
      border: '+cs_thumb_border+'px solid '+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;\
    }\
    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;\
    }\
    '), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

    }
};

var cs_scrollbars_scrollbar_button_arrows = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      background-color: unset !important;\
      background-image: unset !important;\
      border-radius: 0px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-width: '+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-height: '+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var cs_scrollbars_arrows_on_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      border-radius: 0px !important;\
    }\
    \
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-width: '+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-height: '+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    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;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_size = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-width: 0 !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var floating_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      position: relative !important;\
      z-index: 1000000000 !important;\
    }\
    scrollbar[orient="vertical"],\
    scrollbar[orient="horizontal"],\
    scrollbar, scrollcorner {\
      background-color: transparent !important; \
      background-image: unset !important; \
    }\
    scrollbar[orient="vertical"] {\
      margin-inline-start: -'+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_opacity = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      opacity: '+custom_opacity_value+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var remove_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      display: none !important;\
      visibility: collapse !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configu#486860 above
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_size==true) scrollbar_size.init();
if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

// 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 = false;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 0;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 80;                         // 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 = 20;                     // 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 = "transparent";                // 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 = "#DDDDDD";         // 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 = "red";                     // 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 = "#2b2c86";                // 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 = "transparent";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "lightgrey";                   // 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 = "#eeeeee";             // 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);

})()

"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.4 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"
- arrow icons
- files have to be downloaded from https://github.com/Aris-t2/CustomJSforFx/tree/master/icons
- files have to be placed inside 'icons' (sub)folder --> 'chrome\icons'
- own svg files can also be used, if they are named up.svg, down.svg, left.svg, right.svg


*/


(function() {




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


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


// Schaltflächen ausblenden
// default: hide_scrollbar_buttons = false
const hide_scrollbar_buttons = true;


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


// benutzerdefinierte Sichtbarkeit
// default: custom_scrollbar_opacity = false
const custom_scrollbar_opacity = true;
// default: custom_opacity_value = "1.0"
const custom_opacity_value = "0.9";








/* 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_version = 1
//  1 ==> SVG arrows as code: might not work on some pages
//  2 ==> SVG arrows as files: files have to be downloaded from
//        https://github.com/Aris-t2/CustomJSforFx/tree/master/icons
//        and placed inside 'chrome\icons' folder
const custom_scrollbar_arrows_version = 1;


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


// benutzerdefinierte Schiebereglerrandbreite
// default: cs_thumb_border = 0 / in px
const cs_thumb_border = 1;


// benutzerdefinierte Schiebereglerrundung
// default: cs_thumb_roundness = 0 / in px
const cs_thumb_roundness = 80;


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


// benutzerdefinierte Schaltflächenrundung
// default: cs_buttons_roundness = 0 / in px
const cs_buttons_roundness = 5;


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




/* Custom scrollbar colors and gradients ********************************************/


// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
// default: cs_background_color = "#DDDDDD"
const cs_background_color = "transparent";
// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_vertical = "linear-gradient(to right,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)"
let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";




// default: cs_corner_background_color = "#DDDDDD" / - corner
const cs_corner_background_color = "transparent";


// 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 = "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%)";






// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
// default: cs_thumb_color = "#33CCFF" / thumb/slider
const cs_thumb_color = "red";
// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,0,0,0.5),transparent)";
// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,0,0,0.5),transparent)";




// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
// default: cs_thumb_hover_color = "#66FFFF"
const cs_thumb_hover_color = "red";
// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,0,0,1.000),transparent)";
// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,0,0,1.000),transparent)";








// benutzerdefinierte Schiebereglerrandfarbe
// default: cs_thumb_border_color = "#33CCFF"
const cs_thumb_border_color = "red";




// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
// default: cs_buttons_color = "#66FFFF" / buttons
const cs_buttons_color = "red";
// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_vertical = "linear-gradient(to right,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)"
let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";




// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
// default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_hover_color = "red";
// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_vertical = "linear-gradient(to right,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)"
let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_border_color = "#33CCFF"
const cs_buttons_border_color = "red";




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


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




// 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: 17px !important;
}
scrollbar thumb[orient="horizontal"] {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: 17px !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_version === 1)
custom_scrollbar_arrows_code=`
scrollbar scrollbarbutton {
background-repeat: no-repeat !important;
background-position: center center !important;
}
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
}
scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
}
`;
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[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfilePathChrome}icons/up.svg") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfilePathChrome}icons/down.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfilePathChrome}icons/left.svg") !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfilePathChrome}icons/right.svg") !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;
}
scrollbar[orient="vertical"] scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[orient="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);




})();