Beiträge von Firefox_94.0.1

Firefox_94.0.1 · 16. Juli 2023

Zitat von .DeJaVu

Zitat

Win 11 23h1

Woher bezogen? Offiziell für finalmente gibt es die nicht.

Sorry, da hat MS offensichtlich mal wieder die Namensgebung geändert. Laut winver ist es die 22h2 (22626.1992).

Firefox_94.0.1 · 16. Juli 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Hier meine Datei:

Teste bitte:

CSS

/*winfuture.de*/
@-moz-document domain("winfuture.de") {

#news_content.template-clean {
font-size: 14px !important;
line-height: 1.8em !important;
hyphens: manual !important;
-webkit-hyphens: manual !important;
-ms-hyphens: manual !important;
}


h1.template-clean {
font-size: 20px !important;
margin-bottom: 10px !important;
}


#news_content.template-clean .teaser_text {
font-size: 16px !important;
margin-bottom: 20px !important;
}


#news_content.template-clean h2 {
font-size: 16px !important;
margin-bottom: 5px !important;
}


}

Alles anzeigen

Nicht so:

Code

@-moz-document domain("https://winfuture.de") {

Sondern so:

Code

@-moz-document domain("winfuture.de") {

Alles anzeigen

Danke. Jetzt funktioniert es.

Zitat von .DeJaVu

Aber du merkst selbst, dass das nicht jeder versteht, oder? #8

Ist das erste Mal gewesen, dass das falsch verstanden wurde. Ich setze jetzt einen Hinweis darauf in meine Signatur.

Firefox_94.0.1 · 16. Juli 2023

Zitat von .DeJaVu

Zeit für eine Namensänderung.

Warum? Mein Name bezieht sich auf die Version, die damals aktuell war, als ich mich hier angemeldet habe...

Firefox_94.0.1 · 16. Juli 2023

Hallo,

bei Winfuture.de haben sie die Schriftgröße der News deutlich vergrößert. Für mich ist das eindeutig zu groß. Nun wollte ich mir das per Usercontent.css anpassen (arbeite hier mit dem @import und anpassungen auf anderen Seiten funktionieren), aber irgendwas funktioniert nicht, da die Änderungen nicht geladen werden. Hier meine Datei:

CSS

/*winfuture.de*/
@-moz-document domain("https://winfuture.de"){


#news_content.template-clean {
font-size: 14px !important;
line-height: 1.8em !important;
hyphens: manual !important;
-webkit-hyphens: manual !important;
-ms-hyphens: manual !important;
}


h1.template-clean {
font-size: 20px !important;
margin-bottom: 10px !important;
}


#news_content.template-clean .teaser_text {
font-size: 16px !important;
margin-bottom: 20px !important;
}


#news_content.template-clean h2 {
font-size: 16px !important;
margin-bottom: 5px !important;
}


}

Alles anzeigen

Firefox_94.0.1 · 14. Mai 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Gibt es eine Lösung

Auf den meisten about Seiten sieht das hier so aus mit deinem Skript:

Und so bei einem längeren Antwortbeitrag:

Also immer ganz schmal

Alles anzeigen

Muss morgen mal die Änderungen für die Skriptnutzung ab Version 115 durchführen. Evtl. hängt das doch schon (teilweise) damit zusammen...

Firefox_94.0.1 · 14. Mai 2023

Ich nutze aktuell folgendes Skript für die benutzerdefinierte Scollleiste:

CSS

"use strict";


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


NOTE: 'non-compatible options' from earlier versions were removed
README


about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work


[!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
-> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
-> close Firefox
-> delete 'startupCache' folders content


Modifying appearance > change values
- enable/disable options: true <-> false
- color
- name: red, blue, transparent
- hex code: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- numbers: 1, 2, 3 ... 10, 11, 12 ...
- opacity: 0.0 to 1.0 e.g. 1.4, 1,75
- gradients: linear-gradient(direction, color, color, color)
- gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- no color or no color value -> use "unset"
- arrow icons
- files have to be downloaded from https://github.com/Aris-t2/CustomJSforFx/tree/master/icons
- files have to be placed inside 'icons' (sub)folder --> 'chrome\icons'
- own svg files can also be used, if they are named up.svg, down.svg, left.svg, right.svg


*/


(function() {




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


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


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


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


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


/* Custom scrollbar settings ("custom_scrollbar_" --> "cs_") ************************/


// default: custom_scrollbars = true
const custom_scrollbars = true;


// default: custom_scrollbar_arrows = true
const custom_scrollbar_arrows = true;


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


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


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


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


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


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


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




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


// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "transparent";                // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "transparent";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "transparent";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
const cs_corner_background_color = "transparent";         // default: cs_corner_background_color = "#DDDDDD" / - corner
let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
const cs_thumb_color = "red";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_hover_color = "#2b2c86";                // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_thumb_border_color = "transparent";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
const cs_buttons_color = "lightgrey";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_buttons_hover_color = "#eeeeee";             // default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_border_color = "#lightgrey";            // 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)"




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


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




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




let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
let hide_scrollbar_buttons_code='';
let custom_scrollbar_opacity_code='';
let hide_scrollbars_code='';
let thin_scrollbars_code='';


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


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


if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar scrollbarbutton {
opacity: 0 !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
min-width: 1px !important;
width: 1px !important;
max-width: 1px !important;
}
`;


if(custom_scrollbar_opacity === true)
custom_scrollbar_opacity_code=`
scrollbar {
opacity: ${custom_opacity_value} !important;
}
`;


if(hide_scrollbars === true)
hide_scrollbars_code=`
scrollbar, scrollcorner {
display: none !important;
visibility: collapse !important;
}
`;


if(thin_scrollbars === true)
thin_scrollbars_code=`
:root{
scrollbar-width: thin !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
height: 7px !important;
width: 14px !important;
}
`;


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




})();

Alles anzeigen

Die Einstellung

Code

const thin_scrollbars = true;

bewirkt, dass die Leiste am Seitenrand schmal angezeigt wird. Jetzt habe ich aber das Problem, dass Scrollleisten an anderen Positionen (beispielsweise wenn man hier im Forum eine längere Antwort verfasst) weiterhin breit angezeigt werden.

Gibt es eine Lösung, dass an diesen Stellen auch die schmale Leiste angezeigt wird?

Edit: auch auf den about: -Seiten von Firefox wird nur die breite Leiste angezeigt...

Firefox_94.0.1 · 10. Mai 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

mit welcher ich seit Beginn teste

Es gab nicht ohne Grund ein Update auf das Skript.
Also hat es keinen Sinn, am alten Skrpit zu basteln, und das auch nur wegen der Farben etc., das lässt sich auch alles im neuen Skript anpassen.

Ich habe mir die neueste Version von Github heruntergeladen (steht auch drin: Version 2.0.4; du hast du 2.0.2). Jetzt habe ich deine Einstellungen für die Farben in mein Skript eingefügt und nun funktioniert alles wie gewünscht. Danke für deine Hilfe.

Firefox_94.0.1 · 10. Mai 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

weiter rumgetestet

Was hast du denn aus dem Skript gemacht

Das ist die Version, mit welcher ich seit Beginn teste (siehe meinen ersten Beitrag zu dem Thema hier).

Firefox_94.0.1 · 10. Mai 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Ich brauche die Einstellung für:

Dann vergleich doch beide Skripte, und ändere die Farben wie du sie willst.

Was anderes können wir doch auch nicht machen.

Etwas mehr Einsatz/Willen von dir kann nicht schaden

Teste mal, und den Rest musst du dann noch selber anpassen.

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 = false;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 0;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 80;                         // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 20;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars

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

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

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

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

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

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

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

    /* hover */

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

    `;

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

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

})()

Alles anzeigen

Danke für die Hilfe. Ich habe zwischenzeitlich weiter rumgetestet und nun auch (fast) das gewünschte Ergebnis.

CSS

"use strict";


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


NOTE: 'non-compatible options' from earlier versions were removed
README


about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work


[!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
-> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
-> close Firefox
-> delete 'startupCache' folders content


Modifying appearance > change values
- enable/disable options: true <-> false
- color
- name: red, blue, transparent
- hex code: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- numbers: 1, 2, 3 ... 10, 11, 12 ...
- opacity: 0.0 to 1.0 e.g. 1.4, 1,75
- gradients: linear-gradient(direction, color, color, color)
- gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- no color or no color value -> use "unset"
- arrow icons
- files have to be downloaded from https://github.com/Aris-t2/CustomJSforFx/tree/master/icons
- files have to be placed inside 'icons' (sub)folder --> 'chrome\icons'
- own svg files can also be used, if they are named up.svg, down.svg, left.svg, right.svg


*/


(function() {




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


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


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


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


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








/* Custom scrollbar settings ("custom_scrollbar_" --> "cs_") ************************/


// default: custom_scrollbars = true
const custom_scrollbars = true;


// default: custom_scrollbar_arrows = true
const custom_scrollbar_arrows = true;


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


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


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


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


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


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


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




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


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




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


// default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
let cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)";






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




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








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




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




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


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




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


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




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




let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
let hide_scrollbar_buttons_code='';
let custom_scrollbar_opacity_code='';
let hide_scrollbars_code='';
let thin_scrollbars_code='';


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


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


if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar scrollbarbutton {
opacity: 0 !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
min-width: 1px !important;
width: 1px !important;
max-width: 1px !important;
}
`;


if(custom_scrollbar_opacity === true)
custom_scrollbar_opacity_code=`
scrollbar {
opacity: ${custom_opacity_value} !important;
}
`;


if(hide_scrollbars === true)
hide_scrollbars_code=`
scrollbar, scrollcorner {
display: none !important;
visibility: collapse !important;
}
`;


if(thin_scrollbars === true)
thin_scrollbars_code=`
:root{
scrollbar-width: thin !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
height: 7px !important;
width: 14px !important;
}
`;


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




})();

Alles anzeigen

Wenn du mir jetzt noch helfen könntest, dass #2b2c86 als hover-Farbe funktioniert. Daran scheitere ich jetzt.

Firefox_94.0.1 · 10. Mai 2023

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

aber bei Skripten hört es bei mir auf.

Was hat denn die Bezeichnung einer Farbe mit Skripten zu tun

Da steht z.B.:
Code
 const cs_background_color = "#DDDDDD";       
Also die Farbe vom Hintergrund.
In diesem Fall Hellgrau.

Du musst doch nur dort die Farbe ändern, wo du eine andere möchtest.
Alles anzeigen

Wenns nur die Farbe wäre. Ich habe hier mal 2 Bilder angefügt. Auf dem oberen sieht man, wie ich den Balken früher hatte und unten, wie er jetzt mit dem neuen Skript ausschaut. Da ist nicht nur die Farbe geändert...

Ich brauche die Einstellung für:

- das Entfernen der Pfeile oben und unten

- die Rundung der Leistenenden

- der Breite der Leiste

- für die Farbe der Leiste (hier auch noch die hover-Einstellung).

Firefox_94.0.1 · 10. Mai 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

keine so schönen Erklärungen

Ab Zeile 72 wird doch alles erklärt

Ich versteh das leider nicht. CSS und html kann ich so irgendwie noch, aber bei Skripten hört es bei mir auf...

Edit: Und wenn du das mit den Pfeilen meinst: Ich hatte beim alten Skript gar keine Pfeile eingestellt.

Firefox_94.0.1 · 10. Mai 2023

Zitat von Mira_Belle

Zitat von Firefox_94.0.1

Ich brauche auch hilfe bei dem Scrollbar-Skript. Oben die Version mit meinen bisherigen Einstellungen, welche aber nicht mehr funktioniert, unten die aktuelle Version von GitHub, in welche meine Änderungen eingefügt werden müssten. Ich bekomme das irgendwie nicht hin.
...

Ich wäre echt froh, wenn mir jemand helfen könnte.

Was genau sind denn Deine Änderungen?

Und teste doch einmal dieses Skript:

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 = 0;                            // 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 = 40;                     // 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 = "#DDDDDD";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
// - corner
  const cs_corner_background_color = "#DDDDDD";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#33CCFF";                     // 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 = "red";                // 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 = "#eeeeee";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#eeeeee";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

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

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

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

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

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

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

    /* hover */

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

    `;

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

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

})()

Alles anzeigen

Ich habe im oberen Skript bei den Punkten unter "Allgemeine Einstellungen" die Werte / Farben so angepasst, dass es bei mir gepasst hat. Jetzt weiß ich nicht, wie ich diese in das neue Skript übernehmen kann, da sich teils die Bezeichnungen geändert haben und auch keine so schönen Erklärungen, für was die Einstellung jetzt genau ist, dabei stehen.

Das neue Skript funktioniert ja, aber der Scrollbalken ist halt nicht so schön angepasst, wie in der alten Version. Und eben diese Anpassungen möchte ich gerne im neuen Skript haben.

Firefox_94.0.1 · 9. Mai 2023

Ich brauche auch hilfe bei dem Scrollbar-Skript. Oben die Version mit meinen bisherigen Einstellungen, welche aber nicht mehr funktioniert, unten die aktuelle Version von GitHub, in welche meine Änderungen eingefügt werden müssten. Ich bekomme das irgendwie nicht hin.

CSS

"use strict";




/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js */


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


README


Aktivieren einer Einstellung > var ... auf 'true' setzen
Deaktivieren einer Einstellung > var ... auf 'false' setzen
Anpassungen vornehmen > Aendern von Werten
- Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
- Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
- Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
- Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))


- Beispiel 2:
Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)


Info
- Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!


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


// Allgemeine Einstellungen


// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 6; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "transparent"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "red"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "#2b2c86"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 80; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "tranparent"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 5; /* Standard = 0 (in px) */




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




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


var custom_scrollbars = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar, scrollcorner {\
-moz-appearance: none !important;\
background-color: '+cs_background_color+' !important; \
background-image: '+cs_background_image+' !important; \
}\
scrollbar thumb {\
-moz-appearance: none !important;\
background-color: '+cs_thumb_color+' !important;\
background-image: '+cs_thumb_image+' !important;\
border-radius: '+cs_thumb_roundness+'px !important;\
border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
}\
scrollbar thumb:hover, scrollbar thumb:active {\
-moz-appearance: none !important;\
background-color: '+cs_thumb_hover_color+' !important;\
background-image: '+cs_thumb_hover_image+' !important;\
}\
scrollbar scrollbarbutton {\
-moz-appearance: none !important;\
background-color: '+cs_buttons_color+' !important;\
background-image: '+cs_buttons_image+' !important;\
border-radius: '+cs_buttons_roundness+'px !important;\
}\
scrollbar scrollbarbutton:hover {\
-moz-appearance: none !important;\
background-color: '+cs_buttons_hover_color+' !important;\
background-image: '+cs_buttons_hover_image+' !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_buttons = {


init: function() {


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


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_width = {


init: function() {


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


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var floating_scrollbars = {


init: function() {


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


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_opacity = {


init: function() {


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


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var remove_scrollbars = {


init: function() {


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


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

CSS

"use strict";


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


NOTE: 'non-compatible options' from earlier versions were removed
README


about:config >
widget.windows.overlay-scrollbars.enabled > false (Windows)
widget.gtk.overlay-scrollbars.enabled > false (Linux)
[!] The above preferences have to be set to 'false' for this code to work


[!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
-> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
-> close Firefox
-> delete 'startupCache' folders content


Modifying appearance > change values
- enable/disable options: true <-> false
- color
- name: red, blue, transparent
- hex code: #33CCFF, #FFF
- rgb(a): rgba(0,0,255,0.8)
- hsl(a): hsla(240,100%,50%,0.8)
- numbers: 1, 2, 3 ... 10, 11, 12 ...
- opacity: 0.0 to 1.0 e.g. 1.4, 1,75
- gradients: linear-gradient(direction, color, color, color)
- gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
- predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
- no color or no color value -> use "unset"
- arrow icons
- files have to be downloaded from https://github.com/Aris-t2/CustomJSforFx/tree/master/icons
- files have to be placed inside 'icons' (sub)folder --> 'chrome\icons'
- own svg files can also be used, if they are named up.svg, down.svg, left.svg, right.svg


*/


(function() {




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


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


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


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


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


// 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_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 = "#DDDDDD";


// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


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


// default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
let cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)";


// default: cs_thumb_color = "#33CCFF" / thumb/slider
const cs_thumb_color = "#33CCFF";


// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_hover_color = "#66FFFF"
const cs_thumb_hover_color = "#66FFFF";


// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_border_color = "#33CCFF"
const cs_thumb_border_color = "#33CCFF";


// default: cs_buttons_color = "#66FFFF" / 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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_hover_color = "#33CCFF";


// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


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




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


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




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




let custom_scrollbars_code='';
let custom_scrollbar_arrows_code='';
let hide_scrollbar_buttons_code='';
let custom_scrollbar_opacity_code='';
let hide_scrollbars_code='';
let thin_scrollbars_code='';


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


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


if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar scrollbarbutton {
opacity: 0 !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
min-width: 1px !important;
width: 1px !important;
max-width: 1px !important;
}
`;


if(custom_scrollbar_opacity === true)
custom_scrollbar_opacity_code=`
scrollbar {
opacity: ${custom_opacity_value} !important;
}
`;


if(hide_scrollbars === true)
hide_scrollbars_code=`
scrollbar, scrollcorner {
display: none !important;
visibility: collapse !important;
}
`;


if(thin_scrollbars === true)
thin_scrollbars_code=`
:root{
scrollbar-width: thin !important;
}
scrollbar[orient="vertical"] scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[orient="horizontal"] scrollbarbutton {
height: 7px !important;
width: 14px !important;
}
`;


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




})();

Alles anzeigen

Ich wäre echt froh, wenn mir jemand helfen könnte.

Firefox_94.0.1 · 14. April 2023

Zitat von 2002Andreas

Weil es in dem Popup auch 2 Menüs gibt.
Da, wo rechts ein kleiner Pfeil ist.

Hallo,

ich habe noch eine ergänzende Frage:

wie muss ich den Code anpassen, damit er auch bei den unterpunkten "Kürzlich geschlossene Fenster" und "Kürzlich geschlossene Tabs" funktioniert?

Firefox_94.0.1 · 15. Februar 2023

Zitat von Max

Würde gerne nur das Icon des privaten Modus ändern.

Geht wie folgt: Erstelle eine Verknüpfung von "Firefox-Privater Modus" auf dem Desktop. Dann klickst du mit der rechten Maustaste auf dieses Icon und wählst Eigenschaften (evtl. im neuen Win 11 Startmenü unter "Erweitert" versteckt). In dem Fenster, welches sich nun öffnet, hast du den Button "anderes Symbol". Auf diesen klickst du und kannst nun in deinem normalen Dateiverzeichnis die gewünschte .ico Datei auswählen. Dann alles mit OK bestätigen. Nun hast du das geänderte Icon auf dem Desktop. Um es auch in der Taskleiste zu haben, muss du jetzt noch die Desktopverknüpfung zum anheften auf die Taskleiste ziehen und schon hast du dein Wunschicon für den Privaten Modus in der Taskleiste. Die Verknüpfung auf dem Desktop kannst du jetzt wieder löschen. Die wird nicht mehr benötigt.

Firefox_94.0.1 · 7. Februar 2023

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

die Hintergrundfarbe und die Schriftfarbe anpassen.

Teste bitte:
CSS
@-moz-document url-prefix("chrome://browser/content/places/bookmarkProperties/.xhtml") {

#bookmarkpropertiesdialog #editBookmarkPanelContent > input {
  background: red !important;
}

::selection {
background: red !important;
color: #fff !important;
}
}
Alles anzeigen

Funktioniert leider sowohl bei der Deaktivierung des restlichen css-codes als auch im leeren Testprofil leider nicht.

Firefox_94.0.1 · 7. Februar 2023

Hallo,

ich meine das Fenster, dass sich wie folgt öffnent:

klick mit rechter Maustaste in Lesezeichenleiste > Ordner hinzufügen...

In dem Fenster gibt es die Leiste, in die man den Namen des neuen Ordners eingeben muss. Hier möchte ich gerne die Hintergrundfarbe und die Schriftfarbe anpassen.

Hier mein erfolgloser Versuch:

CSS

@-moz-document url-prefix("chrome://browser/content/places/bookmarkProperties/.xhtml") {


#bookmarkpropertiesdialog #editBookmarkPanelContent > input, #bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, #bookmarkpropertiesdialog #editBMPanel_folderMenuList {
margin: 0;
color: #fff !important;
background-color: #00016e !important;
}


::selection {
background: red !important;
color: #fff !important;
}


}

Alles anzeigen

Firefox_94.0.1 · 24. Januar 2023

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

ich meine das gleiche Menü.

Eben nicht.

Du meinst dieses Popup:

Und nicht das aus der Menüleiste oben unter Chronik.
Man sollte schon ganz genau beschreiben was man wo will.

Teste bitte.
CSS
 #PanelUI-history .subviewbutton {
    max-height: 22px !important;
}
Alles anzeigen

Danke. Der passst.

Ich hatte einfach nicht auf dem Schirm, dass es in der Leiste ganz oben auch noch einen Reiter "Chronik" gibt (hab die immer eingeklappt).

Firefox_94.0.1 · 24. Januar 2023

Zitat von milupo

Zitat von Firefox_94.0.1

Bei mir sieht es mit dem Code wie folgt aus:

Bitte mache den Screenshot größer, damit man auch lesen kann, was da steht. Es scheint aber so, dass du da deinen bisherigen Code hast und nicht den, den wir die ganze Zeit testen.

Ich habe da einen anderen Code ( Link zum Post) getestet, den ich selber gefunden habe. Leider wirkt der sich auch noch auf andere Menüs aus und ist daher auch nix. Der Code, den andere hier gepostet haben funktioniert bei mir nicht einmal in einem vollständig leeren Testprofil.

Firefox_94.0.1 · 24. Januar 2023

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Bei mir sieht es mit dem Code wie folgt aus:

Und wie sieht es aus, wenn du den Code mal löschst in den Browser-Werkzeugen?

Sieht ohne den Code so aus.

Beiträge von Firefox_94.0.1

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Skript für benutzerdefinierte Scrollbar funktioniert nicht richtig

Skript für benutzerdefinierte Scrollbar funktioniert nicht richtig

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Chronik-drop down Zeilengröße verkleinern

Privater Modus Icon und Theme änderbar?

Eingabefeld in Menüfenster für die Erstellung eines neuen Ordners in der Lesezeichenleiste anpassen

Eingabefeld in Menüfenster für die Erstellung eines neuen Ordners in der Lesezeichenleiste anpassen

Chronik-drop down Zeilengröße verkleinern

Chronik-drop down Zeilengröße verkleinern

Chronik-drop down Zeilengröße verkleinern