Beiträge von Mira_Belle

Mira_Belle

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

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

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

Ich bedanke mich schon ein Mal im Voraus.

JavaScript

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

Alles anzeigen

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

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

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

Mira_Belle

Zitat von NoNameNeeded

Egal wo ich da auch max-width: 4px !important; eintrage, es hilft nix.
(4px ist zu schmal, aber da würde ich die Veränderung sofort sehen, ist nur zum Test).

Einen schönen Guten Morgen.

Du scheinst ja genauso hartnäckig und ahnungslos zu sein wie ich!

Ich ringe auch Probleme nieder, ob ich von der Sache Ahnung habe oder nicht.

Leider wird Dich meine Antwort enttäuschen, die Breite der Scrollbar lässt sich leider nicht beeinflussen.

Und es kommt noch schlimmer, wenn Du eine Page vergrößerst, wird die Scrollbar auch breiter.

Das hat damit zu tun, dass dieses Element irgendwie nicht direkt zum Browser gehört.

Zumindest hatte ich diese Erklärung so noch im Hinterkopf, irgendwo hat das irgendwer hier mal etwas

genauer erklärt, ich werde das noch mal raussuchen.

Kannst Du Dein "neues" Skript noch ein Mal hier reinstellen?

(Text kopieren, und danach markieren und erst dann auf den Button CODE klicken.

Jetzt nur noch auswählen, dass es Javascript ist)

Mira_Belle

Zitat von NoNameNeeded

...

Die Fragen, die Du stellst, sind irrelevant!

Das Skript funktioniert nicht mehr und ist auch nicht mehr anpassbar.

Versuche es mit Aris original Javascript oder nimm "meines",

bei Fragen kann Dir mit diesen Skripts dann auch geholfen werden.

Und danke für Dein Skript, die Symbole, bzw. deren Code, finde interessant.

Mal schauen, was ich daraus machen kann.

Mira_Belle

Zitat von NoNameNeeded

...
Dafür fehlen mir dann doch die Kenntnisse.

Schau Dir doch mal das von mir geänderte Skript hier an,

da habe ich die Pfeile durch svg-Dateien ersetzt. Das sollte genau so auch mit png oder so funktionieren.

Eventuell hilft es Dir ja weiter.

Und schau doch Mal ob Du es nicht schaffst Deinen Code in formatierter Version hier zu posten,

so ist er doch gar nicht lesbar.

Nur Not zipe Dein Skript und lade es hoch.

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.

Mira_Belle

Zitat von 2002Andreas

...

Und so bei youtube auf Deutsch:

Es geht ja nur um Letzteren!

Sorry, dann habe ich das falsch verstanden, und da ich eh kein Abo habe,

hätte ich das auch gar nicht hinbekommen.

Mira_Belle

Und damit die Suchbox inkl. Lupe und Button dazu passt:

CSS

ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox {
    color: yellow;
    border: 1px solid blue;
    background-color: red;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox:hover {
    color: blue;
    background-color: orange;
}

ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
    color: yellow;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox:hover {
    color: blue;
}
#container.ytd-searchbox {
    border: 1px solid blue;
}

Alles anzeigen

Damit das mit dem Suchbutton etwas besser klappt,

dass dann noch hinzufügen!

CSS

#search-icon-legacy > yt-icon:nth-child(1) {
  padding-left: 15px;
  padding-right: 25px;
  padding-top: 6px;
  padding-bottom: 6px;
}

So würde das ganze dann in etwa aussehen:

CSS

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    color: yellow;
    background-color: red;
}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
    background-color: orange;
    color: blue;
}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
    color: yellow;
    background-color: red;

}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover {
    background-color: orange;
    color: blue;
}

.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline {
    background-color: red;
    color: yellow;
}
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline:hover {
    background-color: orange;
    color: blue;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox {
    color: yellow;
    border: 1px solid blue;
    background-color: red;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox:hover {
    color: blue;
    background-color: orange;
}

ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
    color: yellow;
}
ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox:hover {
    color: blue;
}
#container.ytd-searchbox {
    border: 1px solid blue;
}
#search-icon-legacy > yt-icon:nth-child(1) {
  padding-left: 15px;
  padding-right: 25px;
  padding-top: 6px;
  padding-bottom: 6px;
}

Alles anzeigen

Mira_Belle

Zitat von Son Goku

Guten Morgen,
ich nochmal
irgendwie schaffe ich das nicht diesen Button anzupassen

es werden alle Buttons geädert.
aber nur den einen kriege ich leider nicht hin
Hilfe.

Alles anzeigen

Auch einen schönen Guten Morgen.

Versuche es doch mal hiermit:

CSS

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    color: yellow;
    background-color: red;
}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled:hover {
    background-color: orange;
    color: blue;
}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
    color: yellow;
    background-color: red;

}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover {
    background-color: orange;
    color: blue;
}

.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline {
    background-color: red;
    color: yellow;
}
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline:hover {
    background-color: orange;
    color: blue;
}

Alles anzeigen

Mira_Belle

Auch von mir ein dickes Danke an Aris.

Leider habe ich ein selbst erschaffenes Problem mit diesem Skript.

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

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

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

Ich bin etwas am Verzweifeln.

JavaScript

"use strict";

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

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

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

(function() {

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

})()

Alles anzeigen

Mira_Belle

Schlangenöl und die Anmerkungen dazu, wenn ich so etwas schon lese.

Wenn AV-Programme so unnütz wären, frage ich mich, warum Microsoft dann ein solches Programm

so tief in sein BS, in Windows 10 sowie in Windows 11 eingebunden hat.

Aber ja, man kann darüber diskutieren, ob es vonnöten ist, diese AV-Lösung durch ein "externes Programm" zu "ersetzen",

aber auch die "interne AV-Lösung" ist nicht von Fehlern befreit, wie Microsoft immer wieder beweist.

Z.Z. z.B. RAR-Archive als Virus deklarieren, oder ganze Pfade ganz einfach gar nicht scannen und schützen, usw.!

Wer der "interne AV-Lösung" nicht so recht vertraut, z.B. die Erkennungsrate so grottenschlecht ist,

oder er/sie andere Probleme damit hat, kann sehr wohl eine externe AV-Lösung probieren.

Je doch sollte er/sie niemals vergessen, was da im System so tief herumwerkelt,

und dass das auch recht oft für Probleme sorgen kann.

Wie man sich auch entscheidet, so wirklich richtig kann man es nicht machen!

Nur wer auch den internen AV-Schutz komplett aushebelt, der mach alles, aber auch wirklich alles richtig falsch.

Zurück zum Thema, @micha112

Es scheint bei dir ja wirklich die AV-Lösung von G-Data zusein.

Wenn es reicht das Plugin zu deaktivieren und Du sonst keine Probleme mit dem Programm hat,

dann belasse es dabei.

ABER, wenn Du auch nur den leisesten Verdacht hat, dass es auch andere Probleme auf Deinem System gib,

dann deinstalliere G-Data, einen gewissen Grundschutz bring Microsoft Windows schon von Haus aus mit.

Mira_Belle

Zitat von Sören Hentzschel

DOM = Document Object Model, vereinfacht gesagt die Baumstruktur der HTML-Elemente. Mit dem DOM-Element ist demnach das entsprechende HTML-Element gemeint.
Wenn du das fragen musst, ist der zitierte Text wohl nicht von dir. Bitte die Quelle im Zitat verlinken.

Habe ich erledigt!

Zitat von Sören Hentzschel

Zitat von Mira_Belle

Es wird durch oncommand-Handler eine Funktion gesetzt!
Wie Setze ich das in "meinem" Problem um?
Die Funktionen werden doch im DOM bestimmt!

Ich denke nicht, dass du ein menuitem-Element erstellen möchtest? Zumindest ging es hier bislang nicht darum. Daher kannst du oncommand vergessen. Mir fehlt generell der Zusammenhang, was der Code jetzt mit dem ursprünglichen Problem zu tun haben soll.

Ich verstehe das ganze Skript (noch) nicht!

Und wie und wo da der Zusammenhang sein soll, musst Du Mary-J. fragen,

die hat auf diesen Code verwiesen.

Wenn ich das richtig verstanden habe, steckt da wohl die Lösung drin, einen Button einer Erweiterung

erst dann zu "bearbeiten", in meinem Fall kopieren, wenn das Element der Erweiterung auch geladen ist.

ABER, ich kann mich auch irren, und liege total falsch.

Zitat von BrokenHeart

Zitat von Sören Hentzschel

Wenn du das fragen musst, ist der zitierte Text wohl nicht von dir. Bitte die Quelle im Zitat verlinken.

Nur eine (begründete) Vermutung: "ChatGPT".

Goldrichtig!

Zitat von BrokenHeart

Ich schätze zwar deine "respektlose" (im positiven Sinne ) Art, wie du mit allen zur Verfügung stehenden Mitteln zu deinen Ergebnissen kommst, aber ich halte dein jetziges Vorgehen um JS (oder eine andere Programmiersprache) zu lernen, für nicht sonderlich effektiv. Irgendwie zäumst du das Pferd von hinten auf. Du nimmst dir Skripte aus diesem Forum und versuchst die dann auch für andere Aufgaben anzupassen und umzuschreiben. Prinzipiell ist dagegen gar nichts einzuwenden, macht speziell hier im Forum fast jeder so. Aber man sollte sich darüber im Klaren sein, dass man damit bestenfalls lernt wie man hackt und nicht wirklich schnell dem Ziel näher kommt, eigenständig Probleme mittels Programmierung zu lösen, was du ja offensichtlich möchtest.
Fast alle Skripte die hier geschrieben wurden stellen Hacks dar, weil hier ein bestehendes Programm (=Firefox) auf nicht offiziell unterstütze Art angepasst und erweitert wird. D.h., man muss/sollte sich auch mit dem Firefox-Programmcode beschäftigen, um ein hinreichendes Verständnis für eine Lösung zu bekommen. All das ist meiner Meinung nach aber höchstens der zweite Schritt, den du gehen solltest. Dir nützt dieses spezielle Wissen gar nichts, wenn du kein Verständnis der Sprache bzw. allgemein vom Programmieren hast.
Warum nicht erst eine Programmiersprache an Hand von Büchern oder online z.B. an einfachen HTML-Problemen lernen und üben und damit dann eine einigermaßen sichere Grundlage für weitergehende Experimente am Firefox zu haben? Z.B. eine Webextension zu entwickeln wäre doch auch eine reizvolle Herausforderung, oder? Da hast du dann eine gut dokumentierte API und müsstest dich nicht an den "Eingeweiden" des Firefox vergreifen...

Aber das ist so Mühselig.

Aber Du hast sicher recht, ich sollte mich besser dransetzen und grundlegendes fundiertes Wissen

durch z.B. einen Onlinekurs zu erlangen.

Denn es gibt ja so viele Dinge in den Codes, die ich mir nur durch Ausprobieren versuche zu erklären,

und ob dann meine Schlussfolgerungen und Erklärungen richtig sind, weis auch nur der Geier.

Ich denke, ich lass’ nun mein Bastelobjekt ruhen.

Danke.

Mira_Belle

Der alte Titel dieses Threads:

Aus Firefox Translate aus der URL-Leiste einen eigenständigen und verschiebbaren Button machen.

Wieder nur Aufzeichnungen meiner Gedanken, um später daran anknüpfen zu können.

JavaScript

(function () {
  if (location.href !== 'chrome://browser/content/browser.xhtml')
      return;

  const ref = document.getElementById('context-take-screenshot');
  if (ref) {
      ref.after($C('menuitem', {
          label: "Save all pages for read them later",
          oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem-_saveItAll").click(event);'
      }));
      ref.after($C('menuitem', {
          label: "Save this page for Read Later",
          oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem-_saveIt").click(event);'
      }));
  }
  var style = "data:text/css;charset=utf-8," + encodeURIComponent(`
      #contentAreaContextMenu [id^="saveforreadlater_gmail_com-menuitem"] {
          display: none;
      }
  `);

  windowUtils.loadSheetUsingURIString(style, windowUtils.AUTHOR_SHEET);

  function $C(tag, attrs) {
      var el;
      if (!tag) return el;
      attrs = attrs || {};
      el = document.createXULElement(tag);
      if (attrs) Object.keys(attrs).forEach(function (key) {
          el.setAttribute(key, attrs[key]);
      });
      return el;
  }
})()

Alles anzeigen

Was passiert da? Die Erklärung Zeile für Zeile.

Zitat von ChatGPT

Die erste Zeile definiert die anonyme Funktion und öffnet eine Klammer. Der Funktionskörper beginnt hier.
Die nächste Zeile prüft, ob die aktuelle URL 'chrome://browser/content/browser.xhtml' ist. Wenn dies nicht der Fall ist, wird die Funktion mit der Rückgabe beendet.
Wenn die URL korrekt ist, wird der Code fortgesetzt.
In der nächsten Zeile wird das DOM-Element mit der ID "context-take-screenshot" gesucht und in der Variable "ref" gespeichert.
In den nächsten Zeilen wird eine Bedingung geprüft, ob das "ref"-Element existiert. Wenn ja, werden zwei neue Menüpunkte erstellt, die dem "ref"-Element nachfolgen.
Der erste neue Menüpunkt hat das Label "Save all pages for read them later" und der oncommand-Handler setzt eine Funktion, die durch ein Klicken auf diesen Menüpunkt aufgerufen wird.
Der zweite neue Menüpunkt hat das Label "Save this page for Read Later", und der oncommand-Handler ruft auch eine Funktion auf, die durch ein Klicken auf diesen Menüpunkt aufgerufen wird.
Die Funktionen werden nicht direkt im Skript definiert, sondern sie rufen bestimmte Funktionen aus dem DOM auf, um das Speichern von Webseiten zu ermöglichen.
In der nächsten Zeile wird eine Variable "style" erstellt, die einen String mit CSS-Code enthält. Der CSS-Code versteckt alle Menüpunkte, die mit der ID "saveforreadlater_gmail_com-menuitem" beginnen, in der rechten Maustaste-Kontextmenüleiste.
Die Funktion "$C" wird in der letzten Zeile definiert. Sie wird verwendet, um ein neues XUL-Element zu erstellen und seine Attribute zu setzen. Es wird ein XUL-Element erstellt, das dem Tag-Namen in der Variablen "tag" entspricht. Die Funktion kann auch Attribute für das Element setzen, die in der Variablen "attrs" definiert sind.
Zum Schluss wird die Klammer geschlossen, um die anonyme Funktion zu beenden, und die Funktion wird sofort aufgerufen, da sie in Klammern eingeschlossen ist.

Alles anzeigen

Fragen.

Was ist ein DOM-Element?

Es wird durch oncommand-Handler eine Funktion gesetzt!

Wie Setze ich das in "meinem" Problem um?

Die Funktionen werden doch im DOM bestimmt!

Ist mit dem DOM-Element etwa die Erweiterung gemeint?

Mira_Belle

Zitat von Mary-J.

Das ist jetzt eigentlich schon peinlich, zum Fremdschämen..
Ich glaube, du weißt einfach nicht mehr wovon du redest...

Dann kläre mich auf!

So wie ich das sehe ist das:

JavaScript

(function () {
  if (location.href !== 'chrome://browser/content/browser.xhtml') 
  return;
   setTimeout(() => {
     const orig = document.getElementById('saveforreadlater_gmail_com-menuitem-_saveIt');
    const ref = document.getElementById('context-take-screenshot');
    contentAreaContextMenu.insertBefore(orig, ref.nextSibling);
                      }, 20000);
              }
)
();

Alles anzeigen

das JavaSript, das nur beim ersten Aufruf funktioniert. Richtig?

Und jenes ist das, was jizz als Lösung vorschlägt:

JavaScript

(function () {
    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

    const ref = document.getElementById('context-take-screenshot');
    if (ref) {
        ref.after($C('menuitem', {
            label: "Save all pages for read them later",
            oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem - _saveItAll").click(event);'
        }));
        ref.after($C('menuitem', {
            label: "Save this page for Read Later",
            oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem-_saveIt").click(event);'
        }));
    }
    var style = "data:text/css;charset=utf-8," + encodeURIComponent(`
        #contentAreaContextMenu [id^="saveforreadlater_gmail_com-menuitem"] {
            display: none;
        }
    `);

    windowUtils.loadSheetUsingURIString(style, windowUtils.AUTHOR_SHEET);

    function $C(tag, attrs) {
        var el;
        if (!tag) return el;
        attrs = attrs || {};
        el = document.createXULElement(tag);
        if (attrs) Object.keys(attrs).forEach(function (key) {
            el.setAttribute(key, attrs[key]);
        });
        return el;
    }
})()

Alles anzeigen

Und ich sehe da, dass da das Klickverhalten definiert wird, daher kam ich darauf, dass ich das nicht verstehe.

Aber auch wenn ich total daneben liege, schrieb ich schon, dass ich im Grunde von JavaScript einfach noch nicht

genug verstehe, um mit diesem Script wirklich etwas anfangen zu können.

Gute Nacht.

Mira_Belle

Zitat von Mary-J.

Hallo Mira_Belle,
das Probl. ist komplizierter als du denkst,

Denke nicht. Ich bin mir bewusst, dass es sehr kompliziert ist.

Zitat von Mary-J.

Edit:
Die Lsg. ist hier.:

Beitrag

RE: userChrome.js Scripte für den Fuchs (Diskussion)

[…]

(Quelltext, 37 Zeilen)

jizz

5. Dezember 2022 um 12:11

Ich hoffe du kommst damit weiter.

Danke, darüber bin ich auch schon ein Mal gestolpert, aber dafür reichen meine JavaScript-Kenntnisse

einfach nicht, noch nicht aus.

Eventuell kapiere ich das auch nie.

Aber ich meine erkennen zu können, dass dieser Ansatz in diesem Fall Firefox Translate

so nicht funktionieren wird.

Denn es müsste erst das Klickverhalten implementieren werden,

und da steige ich dann definitiv aus.

Daran scheiterte ja auch schon das Erstellen eines Buttons mit den Eigenschaften und Funktionen.

Den man dann hätte einfach auf die Leiste hätte verschieben können.

Tja, so ist es halt.

Das ganz dient ja nur noch zur Übung und ist mir auch nicht mehr so wichtig.

Mira_Belle

Eventuell ließe sich auch in der userChrome.js festlegen in welcher Reihenfolge

und nach welcher Zeit welches Skript geladen werden soll.

Nachtrag.

Mit der Verzögerung habe ich gerade ausprobiert, klappt!

JavaScript

userChrome.ignoreCache = true;
setTimeout(function() {
userChrome.import("scripts", "UChrm");
}, 2000);

Mit dieser Überlegung könnte man z.B. direkt ein Skript in einem anderen Pfad sofort laden

und alle anderen etwas Zeitversetzt!

also z.B.

JavaScript

userChrome.ignoreCache = true;
userChrome.import("ordnername/myscript.js", "UChrm");
setTimeout(function() {
userChrome.import("scripts", "UChrm"); //so fern alle anderen Skripte in diesem Ordner liegen!
}, 200);

Mira_Belle

@2002Andreas & @Mary-J.

Ihr beiden habt aber mit Sicherheit einfach die Buttons der Anwendungen da hinverschoben.

Richtig?

Denn wenn ich das so mit der Leiste von "Boersenfeger" so gemacht habe, z.B. uBlock, funktionierte dies auch wunderbar.

Jedoch wenn per JavaScript der Button inkl. seiner Funktionen dorthin kopiert werden sollte,

erschien zwar das Symbol, jedoch ohne die Funktionen, die ein Linksklick normalerweise auslösen sollte.

Und warum Kopieren?

Na versucht doch ein Mal, die Schaltfläche von Firefox Translate aus der Adresszeile (Urlbar) zu lösen.

Ansonsten bin ich bei Euch, wie geschrieben, funktioniert DAS mit allen verschiebbaren Buttons

aller von mir genutzten Erweiterungen.

Aber nur aus Interesse, wenn mir jemand eine Lösung anbieten könnte, wäre das für mich wirklich sehr interessant und würde meine JavaScript-Fähigkeiten doch ein wenig erweitern.

Wenn ich daran denke, dass ich mit JavaScript bis vor einigen Monaten noch so gar nichts am Hut hatte,

bin ich schon ein kleines bisschen stolz auf mich.

Nur so eine kleine Überlegung!

Eventuell ließe sich das Problem ja auch umgehen, wenn der Kopiervorgang in ein eigenes Skript ausgelagert werden würde,

welches zeitversetzt erst dann aufgerufen wird, wenn der Firefox komplett mit all seinen Erweiterungen geladen ist.

Aber das ist dann doch eine Hausnummer zu groß für mich, und nur zu Übungszwecken?

Weiß nicht, vielleicht, vielleicht auch nicht.

Ach @Mary-J.

Wenn Du Dir den Quellcode weiter oben genau anschaust, wirst Du feststellen,

dass dieses genau auf dem von Dir verwendeten aufbaut.

Es wurde z.B. von Boersenfege der CSS-Code integriert, was Du genau auf die gleiche Weise machen könntet,

damit alles für die Leiste beisammen ist.

Wenn Du das machen möchtest, verwende aber besser das JavaScript aus => #1

Mira_Belle

Und ich habe schon wieder etwas missverstanden!

Das Ganze wird erst in Zukunft, also in der v. 113 oder so Final werden,

oder halt schon in der Nightly.

Dir auch eine Gute Nacht.

Beiträge von Mira_Belle

Scrollbar.uc.js Skript die Hg Farbe ändern

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

Scrollbar Skript funktioniert nicht mehr

Scrollbar Skript funktioniert nicht mehr

Scrollbar Skript funktioniert nicht mehr

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

Youtube Abonnieren Button CSS - krieg es nicht hin

Youtube Abonnieren Button CSS - krieg es nicht hin

Youtube Abonnieren Button CSS - krieg es nicht hin

Scrollbar.uc.js Skript die Hg Farbe ändern

FF 111.01: Websites öffen gar nicht oder nur teilweise oder brauchen sehr lange

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

Aus Firefox Translate aus der URL-Leiste einen eigenständigen und verschiebbaren Button machen.

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

RE: userChrome.js Scripte für den Fuchs (Diskussion)

Reihenfolge von Skripten, Bedeutung und Anwendung?

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste