Endor siehe ^ (über Dir)
Ich bleibe mal bei Version Scrollbar.v2.0.7.js
Bitte schick die mir mal per PN.
Endor siehe ^ (über Dir)
Ich bleibe mal bei Version Scrollbar.v2.0.7.js
Bitte schick die mir mal per PN.
Also ich weiß nicht weiter!
Bei mir funktioniert das Skript wie ich es mir gedacht habe!
Bei anderen wohl auch.
Wenn Du Endor die Pfeile nutzen möchtest, nutze Option "1"
und ändere die Farben nach Anleitung.
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
Welche 1.Farbe und welche 2.Farbe?
Die Farbwerte bitte.
// 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 custom_scrollbar_arrows_version = 1; // default: custom_scrollbar_arrows_version = 1
// 1 ==> SVG arrows as code: might not work on some pages
// 2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#1e90ff" // "#7c7c7c" "#bfbfbf"
const cs_scrollbar_arrows_hover_color = "#ffa600"
Alles anzeigen
Also, hier wird die Option ausgewäht!
const custom_scrollbar_arrows_version = 1;
wenn 1
dann hier die Farben =>
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
wenn 2
dann eben hier die Farben =>
Und die Symbole heißen wie?
Und stimmt die Bezeichnung dann auch mit denen im Skript über ein?
Ich habe hier keine Probleme.
Hier noch einmal die Symbole, in denen die Farbe nicht festgelegt ist.
Chevron.zip
und
Pfeile.zip
Ach, und stimmt das nun mit dem Pfad?
// PROFILE PHATH "CALCULATE"
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
oder
Je nachdem, welches SVG Du nutzt.
Und immer daran denken, cache löschen!
Ich bin zu der Überzeugung gekommen, dass das Flüchtigkeitsfehler beim Umbenennen der Dateien,
bei Veränderungen im Skript oder was auch immer sein müssen.
Trag doch einfach die gewünschten Farben in den Zeilen =>
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#bfbfbf" // "#7c7c7c"
const cs_scrollbar_arrows_hover_color = "#ffa600"
ein und ändert auch die Bezeichnungen hier =>
scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
/* Hover */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
Alles anzeigen
Und nutzt diese Symbole => Pfeile.zip
#1e90ff für das Blau
#d3d3d3 für das helle Grau
#ffa500 für Orange
Kannst Du dann auch deine 4 Dateien hier hochladen?
Du meinst die blauen Pfeile?
Warum? Die Farbe kannst Du doch nun in der Konfiguration einstellen!!
Du musst nur die Pfeile.zip von mir runterladen und die richtigen Symbole verwenden!
Ich verstehe das nicht.
Aber wenn Du die Pfeile unbedingt in Blau haben willst, bekommst Du sie!
blau.zip
Und bevor es Kritik gibt, die Farben könnt/müsst ihr Euch anpassen.
Prima.
Schiebst Du mir dann bitte noch die vier orangen farbenen Pfeil Bilder rüber?
Nö.
Es gibt ein Update, da kann man in der Konfiguration die Farben definieren!
Zeilen 86 & 87
// 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/ ****************************************** */
/* Scrollbar.v1.0.6.js https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* Scrollbar.v2.0.7.js https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
/* Scrollbar.v2.0.8.js https://www.camp-firefox.de/forum/thema/139766/?postID=1278349#post1278349************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.8 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************
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"
/* ----------------------------------------------------------------------------------- */
/* Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen */
/* %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons */
/* */
/* Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen */
/* ----------------------------------------------------------------------------------- */
/* *************************************************************************************************************************** */
(function() {
/* **** Konfiguration **** */
// PROFILE PHATH "CALCULATE"
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const hide_scrollbars = false; // default: hide_scrollbars = false
const hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
const thin_scrollbars = false; // default: thin_scrollbars = false / browsers own way to show thin scrollbars
const custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false
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 custom_scrollbar_arrows_version = 2; // default: custom_scrollbar_arrows_version = 1
// 1 ==> SVG arrows as code: might not work on some pages
// 2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
// only for 'custom_scrollbar_arrows_version = 2'
const cs_scrollbar_arrows_color = "#bfbfbf" // "#7c7c7c"
const cs_scrollbar_arrows_hover_color = "#ffa600"
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px 1
const cs_thumb_roundness = 9; // default: cs_thumb_roundness = 0 / in px 9
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 = 17; // default: cs_thumb_minimal_size = 17; / in px
const cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD" / "#AEC5FA"
let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_vertical = "linear-gradient(to right,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_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_background_roundness = 9; // default: cs_background_roundness = 0 / in px / 9
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner / "#CCCCCC"
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_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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "linear-gradient(to right,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_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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,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_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
let cs_button_size = 17; // in px // default: cs_button_size = 17 / 26
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_vertical = "linear-gradient(to right,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_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" / "#bfffff"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF"
let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,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_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* **** Ende Konfiguration **** */
/* *************************************************************************************************************************** */
// 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=`
scrollcorner,
scrollbar > slider,
scrollbar > slider > thumb,
scrollbar > scrollbarbutton {
/* appearance: auto; */
-moz-default-appearance: none !important;
}
scrollbar > slider {
background-color: ${cs_background_color} !important;
background-image: ${cs_background_image_horizontal} !important;
border-radius: ${cs_background_roundness}px !important;
}
scrollbar[vertical] > slider {
background-image: ${cs_background_image_vertical} !important;
border-radius: ${cs_background_roundness}px !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar > slider > 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[vertical] > slider > thumb {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${cs_thumb_minimal_size}px !important;
}
scrollbar > slider > thumb {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${cs_thumb_minimal_size}px !important;
}
scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[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[vertical] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[horizontal] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar > scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[vertical] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[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[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[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 > 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 > 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[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: top !important;
}
scrollbar[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: bottom !important;
}
scrollbar > 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: left !important;
}
scrollbar > 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: right !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[vertical] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar[vertical] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Chevron-down.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Chevron-left.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
scrollbar > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Chevron-right.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_color} !important;
fill-opacity: 1 !important;
}
/* Hover */
scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Chevron-down.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Chevron-left.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Chevron-right.svg") !important;
-moz-context-properties: fill, fill-opacity;
fill: ${cs_scrollbar_arrows_hover_color} !important;
fill-opacity: 1 !important;
}
scrollbar > scrollbarbutton {
min-width: ${cs_button_size}px !important;
min-height: ${cs_button_size}px !important;
}
`;
if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar > scrollbarbutton {
opacity: 0 !important;
}
scrollbar[vertical] > scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[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[vertical] > scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[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
Und hier die passenden Symbole dafür.
Bitte in jedem Skript ergänzen!
/* ----------------------------------------------------------------------------------- */
/* Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen */
/* %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons */
/* */
/* Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen */
/* ----------------------------------------------------------------------------------- */
Hier nochmal das Skript mit der Erklärung zu den Symbolen und wo sie am besten gespeichert werden sollten,
damit man am Skript nichts groß ändern muss.
// 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/ ****************************************** */
/* Scrollbar.v1.0.6.js https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* Scrollbar.v2.0.7.js https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.7 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************
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"
/* ----------------------------------------------------------------------------------- */
/* Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen */
/* %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons */
/* */
/* Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen */
/* ----------------------------------------------------------------------------------- */
/* *************************************************************************************************************************** */
(function() {
/* **** Konfiguration **** */
// PROFILE PHATH "CALCULATE"
let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
const hide_scrollbars = false; // default: hide_scrollbars = false
const hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
const thin_scrollbars = false; // default: thin_scrollbars = false / browsers own way to show thin scrollbars
const custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false
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 custom_scrollbar_arrows_version = 1; // default: custom_scrollbar_arrows_version = 1
// 1 ==> SVG arrows as code: might not work on some pages
// 2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
// only for 'custom_scrollbar_arrows_version = 1'
const custom_scrollbar_arrows_color = "%23bfbfbf"; // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
const custom_scrollbar_arrows_hover_color = "%23ffae00"; // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
const cs_thumb_border = 1; // default: cs_thumb_border = 0 / in px 1
const cs_thumb_roundness = 9; // default: cs_thumb_roundness = 0 / in px 9
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 = 17; // default: cs_thumb_minimal_size = 17; / in px
const cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD" / "#AEC5FA"
let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_vertical = "linear-gradient(to right,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_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
const cs_background_roundness = 9; // default: cs_background_roundness = 0 / in px / 9
// - corner
const cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD" / - corner / "#CCCCCC"
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_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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "linear-gradient(to right,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_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 = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,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_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
let cs_button_size = 17; // in px // default: cs_button_size = 17 / 26
const cs_buttons_color = "#5b5b66"; // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_vertical = "linear-gradient(to right,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_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" / "#bfffff"
const cs_buttons_border_color = "#5b5b66"; // default: cs_buttons_border_color = "#33CCFF"
let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,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_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
/* **** Ende Konfiguration **** */
/* *************************************************************************************************************************** */
// 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=`
scrollcorner,
scrollbar > slider,
scrollbar > slider > thumb,
scrollbar > scrollbarbutton {
/* appearance: auto; */
-moz-default-appearance: none !important;
}
scrollbar > slider {
background-color: ${cs_background_color} !important;
background-image: ${cs_background_image_horizontal} !important;
border-radius: ${cs_background_roundness}px !important;
}
scrollbar[vertical] > slider {
background-image: ${cs_background_image_vertical} !important;
border-radius: ${cs_background_roundness}px !important;
}
scrollcorner {
background-color: ${cs_corner_background_color} !important;
background-image: ${cs_corner_background_image} !important;
}
scrollbar > slider > 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[vertical] > slider > thumb {
background-image: ${cs_thumb_image_vertical} !important;
min-height: ${cs_thumb_minimal_size}px !important;
}
scrollbar > slider > thumb {
background-image: ${cs_thumb_image_horizontal} !important;
min-width: ${cs_thumb_minimal_size}px !important;
}
scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
background-color: ${cs_thumb_hover_color} !important;
}
scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
background-image: ${cs_thumb_hover_image_vertical} !important;
}
scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[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[vertical] scrollbarbutton {
background-image: ${cs_buttons_image_vertical} !important;
}
scrollbar[horizontal] scrollbarbutton {
background-image: ${cs_buttons_image_horizontal} !important;
}
scrollbar > scrollbarbutton:hover {
background-color: ${cs_buttons_hover_color} !important;
}
scrollbar[vertical] scrollbarbutton:hover {
background-image: ${cs_buttons_hover_image_vertical} !important;
}
scrollbar[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[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[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 > 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 > 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[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: top !important;
}
scrollbar[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: bottom !important;
}
scrollbar > 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: left !important;
}
scrollbar > 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: right !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[vertical] > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Chevron-up_hellgrau.svg") !important;
}
scrollbar[vertical] > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Chevron-down_hellgrau.svg") !important;
}
scrollbar > scrollbarbutton[type="decrement"] {
background-image: url("${ProfileDirectory}/Chevron-left_hellgrau.svg") !important;
}
scrollbar > scrollbarbutton[type="increment"] {
background-image: url("${ProfileDirectory}/Chevron-right_hellgrau.svg") !important;
}
/* Hover */
scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Chevron-up_orange.svg") !important;
}
scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Chevron-down_orange.svg") !important;
}
scrollbar > scrollbarbutton[type="decrement"]:hover {
background-image: url("${ProfileDirectory}/Chevron-left_orange.svg") !important;
}
scrollbar > scrollbarbutton[type="increment"]:hover {
background-image: url("${ProfileDirectory}/Chevron-right_orange.svg") !important;
}
scrollbar > scrollbarbutton {
min-width: ${cs_button_size}px !important;
min-height: ${cs_button_size}px !important;
}
`;
if(hide_scrollbar_buttons === true)
hide_scrollbar_buttons_code=`
scrollbar > scrollbarbutton {
opacity: 0 !important;
}
scrollbar[vertical] > scrollbarbutton {
min-height: 1px !important;
height: 1px !important;
max-height: 1px !important;
}
scrollbar[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[vertical] > scrollbarbutton {
height: 14px !important;
width: 7px !important;
}
scrollbar[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
Endor Sorry, wusste nicht, dass ich auch speziell darauf hinweisen muss, dass aus einem Skript aufgerufene Dateien
auch so im Verzeichnis heißen müssen!
Des Rätsels Lösung ist also gefunden?
Endor Nachdem ich nun alle Kommentare gelesen habe, habe ich keine Ahnung wo bei Dir der Fehler liegen könnte.
Es liegt aber sehr wahrscheinlich an dem Rechner, bzw. dessen Installation.
Firefox 143 und 144 nur als portable verfügbar.
Du willst das Skript auf einem Rechner nutzen, auf dem der FF nur als portable verfügbar ist?
Wow, keine Ahnung ob das Skript damit zurecht kommt, wobei auch da ja der Profilpfad genauso
wie bei einer Installation angelegt wird.
Schon komisch.
Trage doch mal den kompletten Pfad in der Zeile ein, wo das Symbol aufgerufen wird.
Also background-image: url("C:/Users/xxxx/AppData/Roaming/Mozilla/Firefox/Profiles/z3osmcsk.Firefox-143/chrome/Icons/up.svg") !important;
Fehler mit dem Slash behoben
Und wenn das auch nicht fruchtet, bitte "Dein" unverändertes Skript![]()
Ich muss das sehen und ausprobieren, Deine Symbole habe ich ja schon.
Die Variabel stimmt!
Wenn Du die Symbole nur in "chrome" gespeichert hast, lösche am Ende
das "icons".
Hast Du die Symbole unter "chrome" in einem anderen Ordner, z.b. "image",
musst Du "icons" eben durch "image" ersetzen.
sie
Merwüdig.
Bitte kopiere doch mal den genauen Pfad.
Natürlich ohe Deinen Benutzernamen, mach da xxxx rein.
Bei einem Klick auf Endors .svg-Dateien öffnen die sich hier im Firefox...
Ja, der Firefox macht das, aber die SVG sollte im Explorer angezeigt werden.
Wobei man diesen unter Windows 10 erst per patch dazu bekommt, dass es auch SVG's anzeigt.
Am besten ist, man schaut mit einem Editor sich den Code an!
Wenn es Probleme gibt, einfach fragen.
Nicht immer ist es so einfach wie bei diesen Symbolen.
Ach ja, die guten SVG's!
Schaut Euch doch mal den Code an!
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<path fill='dodgerblue' fill-opacity='context-fill-opacity' 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'/>
</svg>
Wer viel mit SVG bastelt, sieht warum es nicht funktionieren kann![]()
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='dodgerblue'>
<path 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'/>
</svg>
Seht Ihr den Unterschied?
down.svg up.svg
Und noch etwas Klugscheiß hinterher.
Für "dodgerblue" kann man auch Werte, was ich persönlich besser finde, nemen,
z.B. #1e90ff oder rgb(31, 143, 255).
ABER niemals die " " oder die ' ' vergessen!
Und bleibt bei einem, also entweder " " oder ' '.
Warum ich Werte bevorzuge? Weil man in einem gescheiten Editor die Farben angezeigt bekommt
und es einefunktion gibt, diese per "Schieber" zu verändern.
Also benutze ich immer "#ff8c00" anstatt "orange".