Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

grisu2099

Zitat von 2002Andreas

Hast du doch gut gelöst so

Wenn du meinst...

Mira_Belle

Zitat von grisu2099

Ich habe mich mal an dem Skript aus #27 versucht...

Für alle, die gerne eine andere Farbe beim Hovern der Pfeile hätten, hier mein Ergebnis:

JavaScript

"use strict";

...
  
  // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_color = "green";

  //definiert die Hoverfarbe für die Scrollbuttons
  const custom_scrollbar_arrows_hover_color = "red";

...
      
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !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;
          background-repeat: no-repeat !important;
          background-position: center center !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;
          background-repeat: no-repeat !important;
          background-position: center center !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;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }


        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }
    `;

...

Alles anzeigen

Keine Ahnung, ob das eleganter zu lösen geht - ich bin froh, es überhaupt hingekriegt zu haben!

Auf eine ähnliche Lösung bin ich auch gekommen!

JavaScript

...

  // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_color = "%23bfbfbf";

  // default: custom_scrollbar_arrows_color_hover = "grey";
  const custom_scrollbar_arrows_color_hover = "%23ffa500";

...

  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

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

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
      }
    `;

Alles anzeigen

Wobei ich aber die Buttons in der gleichen Hintergrundfarbe wie die Scrollbar gehalten habe,

und das Hovern quasi ausgeschaltet habe.

oldman53

Zitat von ArisCTR

Die "bereinigte Version" ist jetzt auch online.

Hallo,

vielen Dank für das Überarbeiten. Interessante Beobachtung, bei Aufruf folgender Seite werden die in schwarz

eingestellten Pfeile oben und unten eliminiert. https://www.farb-tabelle.de/de/farbtabelle.htm

Mit aktuellen FFx Release auf mehreren Windows 10 Maschinen.

2002Andreas

Zitat von oldman53

Pfeile oben und unten eliminiert

Was es nicht alles gibt

Zitat von oldman53

Mit aktuellen FFx Release

Auch im Nightly fehlen die Pfeile.

Mira_Belle

Zitat von oldman53

Pfeile oben und unten eliminiert

Oh.

Auch mit diesem abgewandelte Skript verhält es sich so.

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 = "%23bfbfbf";

  // default: custom_scrollbar_arrows_color_hover = "grey";
  const custom_scrollbar_arrows_color_hover = "%23ffa500";

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

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

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

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

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

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

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

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

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


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


  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
  let hide_scrollbar_buttons_code='';
  let custom_scrollbar_opacity_code='';
  let hide_scrollbars_code='';
  let thin_scrollbars_code='';
  
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
        slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
          appearance: auto;
          -moz-default-appearance: none !important;
        }
        slider {
          background-color: `+cs_background_color+` !important;
        }
        scrollbar[orient="vertical"] slider {
          background-image: `+cs_background_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] slider {
          background-image: `+cs_background_image_horizontal+` !important;
        }
        scrollcorner {
          background-color: `+cs_corner_background_color+` !important;
          background-image: `+cs_corner_background_image+` !important;
        }
        scrollbar thumb {
          background-color: `+cs_thumb_color+` !important;
          border-radius: `+cs_thumb_roundness+`px !important;
          box-shadow: inset 0 0 0 `+cs_thumb_border+`px `+cs_thumb_border_color+` !important;
        }
        scrollbar thumb[orient="vertical"] {
          background-image: `+cs_thumb_image_vertical+` !important;
          min-height: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
        }
        scrollbar thumb[orient="horizontal"] {
          background-image: `+cs_thumb_image_horizontal+` !important;
          min-width: `+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+`px !important;
        }
        scrollbar thumb:hover, scrollbar thumb:active {
          background-color: `+cs_thumb_hover_color+` !important;
        }
        scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
          background-image: `+cs_thumb_hover_image_vertical+` !important;
        }
        scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
          background-image: `+cs_thumb_hover_image_horizontal+` !important;
        }
        scrollbar scrollbarbutton {
          background-color: `+cs_buttons_color+` !important;
          border-radius: `+cs_buttons_roundness+`px !important;
          box-shadow: inset 0 0 0 `+cs_buttons_border+`px `+cs_buttons_border_color+` !important;
          height: 17px !important;
          width: 17px !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          background-image: `+cs_buttons_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          background-image: `+cs_buttons_image_horizontal+` !important;
        }
        scrollbar scrollbarbutton:hover {
          background-color: `+cs_buttons_hover_color+` !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton:hover {
          background-image: `+cs_buttons_hover_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton:hover {
          background-image: `+cs_buttons_hover_image_horizontal+` !important;
        }
    `;
    
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

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

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
      }

      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color_hover+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
      }
    `;

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

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

Alles anzeigen

2002Andreas

Noch eine Seite gefunden bei github.

https://raw.githubusercontent.com/Aris-t2/CustomJSforFx/master/scripts/custom_scrollbars_WIP_Fx113p.uc.js

2002Andreas

Mit diesem Skript in der Version 112 ist noch alles ok.

https://raw.githubusercontent.com/Aris-t2/CustomJSforFx/master/scripts/custom_scrollbars_fx112.uc.js

Ich habe den Pfeil mal in rot erstellt, zwecks besserer Erkennung.

oldman53

Zitat von 2002Andreas

Mit diesem Skript in der Version 112 ist noch alles ok.

Ja, danke das funktioniert überall.

Vorteil trotz des kuriosen Verhaltens der Version aus #23, ~~da bleiben die Scrollbalken bei Zoom von Seiten in den Dimensionen stabil.~~ schrumpfen oder blähen bei Zoom weniger stark.

Mira_Belle

Wegen des komischen Verhaltens des Skripts auf manchen Seiten bindet doch mal eine lokal abgespeicherte "SVG"

Anstatt der Vorgegebene ein.

Die wird dann nämlich angezeigt. Woran das liegen könnte,

Mira_Belle

Einen schönen Guten Morgen.

Problem der "verschwundenen" Symbole (Pfeile) behoben.

Und ganz nebenbei auch mein Problem mit dem Button und den Pfeilen.

Hier das Script zum Testen und die Symbole im Anhang.

Wichtig, es sind gefärbte Vektorgrafiken!

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

Symbole.zip

Kann das mal jemand mit den Nightlies testen?

Ich habe die nicht!

Mira_Belle

Sorry, das Skript einen Beitrag weiter oben enthält ein, zwei kleinere Fehler!

Bitte in den anderen Thread springen.

NoNameNeeded

Zitat von Mira_Belle

Kann das mal jemand mit den Nightlies testen?
Ich habe die nicht!

Es gibt keine Scrollbarbuttons.

Dort wo sie zu erwarten wären ist einfach nur der dunkle Hintergrund der Leiste zu sehen.

Das ist sowohl bei der aktuellen als auch bei der Nightly Version so.

Mira_Belle

Zitat von NoNameNeeded

Es gibt keine Scrollbarbuttons.
Dort wo sie zu erwarten wären ist einfach nur der dunkle Hintergrund der Leiste zu sehen.
Das ist sowohl bei der aktuellen als auch bei der Nightly Version so.

Zitat von Mira_Belle

Einen schönen Guten Morgen.
Hier das Script zum Testen und die Symbole im Anhang.
Wichtig, es sind gefärbte Vektorgrafiken!

Symbole.zip

2002Andreas

Noch ein kleines Problem mit dem Skript von Aris gefunden.

Wenn die Entwickler-Werkzeuge geöffnet sind, dann fehlt der Thumb darin.

Vergrößere ich das Fenster, dann passt es jedoch.

Alternativ den Zoom verkleinern in den Werkzeugen, reicht auch aus.

Mira_Belle

Zitat von 2002Andreas

Noch ein kleines Problem mit dem Skript von Aris gefunden.
Wenn die Entwickler-Werkzeuge geöffnet sind, dann fehlt der Thumb darin.
...

Hattest Du den Wert const cs_thumb_minimal_size auf 12 eingestellt?

Ich frage ja nur, weil mit diesem Wert das bei mir nicht auftritt.

Der Thumb wird da nämlich kleiner, als bei Dir zusehen ist.

2002Andreas

Zitat von Mira_Belle

Hattest Du den Wert

In dem von mir benutzen Skript von Aris gibt es das nicht.

CustomJSforFx/custom_scrollbars.uc.js at master · Aris-t2/CustomJSforFx

custom scripts. Contribute to Aris-t2/CustomJSforFx development by creating an account on GitHub.

github.com

Mira_Belle

Oh, dann muss ich das wohl eingebaut haben.

Ist dann aber aus Aris "altem" Javascript!

Von alleine wäre ich da ja gar nicht draufgekommen.

Auf jeden Fall tritt damit nicht das komische Verhalten auf.

Endor

Nur zur Info: Aris hat das Script wieder aktualisiert.

Aktuell ist jetzt Version 2.0.3

CustomJSforFx/custom_scrollbars.uc.js at master · Aris-t2/CustomJSforFx

custom scripts. Contribute to Aris-t2/CustomJSforFx development by creating an account on GitHub.

github.com

Mfg.
Endor

Mira_Belle

Bin ich gerade geadelt worden?

Aris hat doch wahrhaftig Ideen von mir aufgegriffen.

Zeile 158

Zeilen 268 bis 286

im neuen Skript der Version 2.0.3

Wobei ich ehrlich sein muss, dass mit dem Pfad stammt ja nicht von mir, aber ich habe es hier in "meiner" Version

des Scrollbarscriptes erstmals verwendet.

Auch das mit den Vektorgrafiken habe ich irgendwo aufgeschnappt und dann hier verwurschtelt.

oldman53

Zitat von Endor

Nur zur Info: Aris hat das Script wieder aktualisiert.

Hallo,

die in #47 beschriebene Erscheinung ist damit noch existent.

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

Ähnliche Themen

Seit kurzem arbeitet die Erweiterung Default Bookmark Folder im Nightly nicht mehr wie bisher gewohnt

browser.warnOnQuit Skript funktioniert im aktuellem Nightly nicht mehr

Vor und Zurück Schaltfläche CSS funktioniert nicht mehr richtig

Alle Tabs als Lesezeichen funktioniert nicht mehr

Skript für Bottom-Toolbar funktioniert im aktuellem Nightly nicht mehr

Script für vertikale Toolbar funktioniert in der Nightly nicht mehr