Firefox 113 Änderungen

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.

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.

Horstmann

Zitat von Dharkness
Hallo zusammen,
das * funktioniert natürlich auch nicht mehr, eine Änderung dahingehend zeigt aber nicht das gewünschte Bild, wer hat ein Idee?
*
CSS
/* Tabinhalt zentrieren. */
.tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"])
.tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container{
  margin-inline-end: 7px
}
.tab-content:not([pinned])::before{
  display: -moz-box;
  content: "";
  -moz-box-flex: 1;
}
Alles anzeigen

Alternativ zum CSS von 2002Andreas kannst du auch das hier mal antesten, das hat den obigen alten Code ersetzt.

Horstmann

Zitat von 2002Andreas

Zitat von Dharkness

funktioniert natürlich auch nicht mehr,

Teste bitte:

CSS

/*Tabtext zentriert*/
.tab-label-container {
  margin: auto !important; /*nur wenn Tabs schmaler gemacht sind, sonst auskommentieren*/
  height: unset !important;
  display: grid !important;
  justify-items: safe center !important;
  justify-content: safe center !important;
}

.tab-label {
  justify-content: center !important;
  overflow: hidden !important;
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 7px !important;
  width: unset !important;
}

Alles anzeigen

Mal kurz angetestet: das zentriert nur den Tab Text innerhalb der Tab, das Tab Icon bleibt am linken Rand.

Der alte Code von Dharkness hat Text und Icon zentriert, daher würde ich die andere Lösung vorschlagen.

Die gleiche Frage hatte neulich jemand woanders gestellt, für den jungen Mann hat es so funktioniert.

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

^L^

HOWTO: ''Tabs in der Mitte'' Welcher Code ist für FFX 113 geeignet? Danke.

Bisheriger Code in meiner UserChrome.css ...

CSS

/*Tabs in Tableiste mittig*/
scrollbox:not(#PlacesToolbarItems) {
-moz-box-pack: center !important;
}

2002Andreas

Zitat von ^L^

Welcher Code ist für FFX 113 geeignet?

Teste bitte:

CSS

scrollbox[smoothscroll="true"] {
  display: flex !important;
  justify-content: center !important ;
}

AdminFox

Ich habe das Update bekommen in Linux Mint 21.1 Firefox 113.0 musste nach dem neu Start von Firefox Festellen das nur diese Code Betroffen ist, kann mir bitte da Weiter Helfen.

CSS

/* Tab-Breite ändern */

.tabbrowser-tab{
-moz-box-flex: 0!important;
width: 130px!important;}

Sören Hentzschel

Zitat von AdminFox

kann mir bitte da Weiter Helfen

Siehe Beitrag #1: Ersetze -moz-box-flex durch flex-grow.

2002Andreas

Zitat von AdminFox

kann mir bitte da Weiter Helfen.

Teste bitte:

CSS

/*Tabbreite schmaler*/
.tabbrowser-tab:not([pinned]) {
  min-width: 130px !important;
  max-width: 130px !important;
}

AdminFox

2002Andreas Leider Funktioniert der Code nicht

^L^

Zitat von 2002Andreas
Spoiler anzeigen
Teste bitte:
CSS
scrollbox[smoothscroll="true"] {
  display: flex !important;
  justify-content: center !important ;
}

Hat funktioniert, herzlichen Dank!

Sören Hentzschel

Zitat von AdminFox

2002Andreas Leider Funktioniert der Code nicht

Zitat von Sören Hentzschel

Siehe Beitrag #1: Ersetze -moz-box-flex durch flex-grow.

2002Andreas

Zitat von AdminFox

Leider Funktioniert der Code nicht

Ansonsten:

CSS

/* Tab-Breite ändern */

.tabbrowser-tab {
   flex-grow: 0 !important;
   width: 130px !important;
}

Zitat von ^L^

Hat funktioniert, herzlichen Dank!

Gern geschehen

AdminFox

Zitat von Sören Hentzschel

Siehe Beitrag #1: Ersetze -moz-box-flex durch flex-grow.

CSS

/* Tab-Breite ändern */

..tabbrowser-tab:not([pinned]) {
  min-width: 120px !important;
  max-width: 130px !important;
}

In diesem Code gibt es kein moz-box-flex

2002Andreas

Zitat von AdminFox

In diesem Code gibt es kein moz-box-flex

Aber in deinem alten Code.

AdminFox

Zitat von 2002Andreas
Zitat von AdminFox

Leider Funktioniert der Code nicht

Ansonsten:
CSS
/* Tab-Breite ändern */

.tabbrowser-tab {
   flex-grow: 0 !important;
   width: 130px !important;
}

Ich habe eben Getestet der Funktioniert nicht richtig und zwar wenn ich dort die 0 durch einen anderen Wert ändere dann haben die Tabs wieder die Standard Breite.

Im alten Code hatte ich den Wert 120

Fehler gefunden es war der Doppelpunkt bei tabbrowser.-tab

Danke noch ml für die Hilfe.

AdminFox

Jetzt habe ich zwischen den Tabs eine Lücke.

BrokenHeart

Zitat von AdminFox

Jetzt habe ich zwischen den Tabs eine Lücke.

Suche in dem Script 'MultiRowTabs.uc.js' nach folgendem Eintrag

.tabbrowser-tab:not([pinned]) {

und füge folgende Zeile ein:

flex-grow: 0 !important;

also so:

CSS

 .tabbrowser-tab:not([pinned]) {
      flex-grow: 0 !important;
      min-width: nTabWidthpx !important;             
 }

Die Lösung mit 'flex-grow' stammt von 2002Andreas ...

AdminFox

Broadhead In meiner user.Chrome.css Datei befindet sich kein Eintrag von MultiRowTabs.uc.js

Wenn ich diesen Eintrag in der user.Chrome.css einfüge.

Dann sehen Tabs so aus zu schmal.

Davor hatten die richtige Breite gehabt mit diese Werten 120, 130

CSS

/* Tab-Breite ändern */

.tabbrowser-tab:not([pinned]) {
      flex-grow: 0 !important;
      min-width: 130px !important;             
 }

Bis jetzt Funktioniert dieser Code ohne zwischen Raum bei den Tabs habe es getestet mit den Werten.

BrokenHeart

Zitat von AdminFox

In meiner user.Chrome.css Datei befindet sich kein Eintrag von MultiRowTabs.uc.js

Nutzt du nicht das Skript MultiRowTabs.uc.js?

Falls nein, dann vergiss das, was ich geschrieben habe. Es kann sein, dass ich dich dann wohl mit GermanFreme82 verwechselt habe, sorry (ihr habt beide so 'übergewichtige' Avatare ) . Wer allerdings das obige Skript nutzt und beim Schließen der Tabs feststellt, dass der Platz nicht wieder freigegeben wird, der muss diese Änderung durchführen. Gibt dazu auch ein Update ....

Firefox 113 Änderungen

Ähnliche Themen

Lesezeichen scrollen funktioniert nicht mehr