Firefox-Scrollbar

Fearen54s

Hallo Zusammen,

Ist es möglich, mithilfe eines CSS-Befehls die Scrollbar-Ecken in Firefox oben und unten abzurunden? Das eckige gefällt mir nicht so gut.

Hoffe auf Eure Hilfe.

Danke vorab.

Speravir

Meines Erachtens nach ist es allein mit CSS nicht möglich. Erlaubt sind nur Änderungen der Farbe und der Breite (letztere auch nur sehr eingeschränkt), vergleiche CSS Scrollbars (MDN). Du könntest dir aber das UserChrome-Skript custom_scrollbars.uc.js von Aris (hier als ArisCTR bekannt) ansehen.

KatzenCrafter

Ich glaube ebenfalls man kann nur

scrollbar-color: <VORDERGRUND> <HINTERGRUND>;

scrollbar-width: <BREITE>;

in Firefox verändern, jedoch sind auch bei scrollbar-width: thin; die Ecken nicht abgerundet. (Man kann aber die Hintergrundfarbe anpassen und diese Ecken somit unsichtbar machen.)

Fearen54s

Hi.

Vielen Dank. Das Script schau ich mir auf jeden Fall mal an. :-))

AngelOfDarkness

Das Script ist auch bei mir im Einsatz. Wenn ich mir die Einstellungen per Variablen dazu mal wieder flüchtig anschaue, dann steh da allerdings was von

Code

var cs_buttons_roundness = 10; /* default = 0 // in px */

daraus würde ich schliessen, dass es runde "Ecken" geben könnte.

Habe es zwar gestern mal ausprobiert, allerdings hat sich da bei mir nix getan. Da müsste ArisCTR mal was zu sagen können.

2002Andreas

Ist das damit gemeint!?

Wenn ja, dann in Zeile 57 den Wert anpassen:

var cs_thumb_roundness = 80; /* Standard = 0 (in px) */

JavaScript

"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 = 23; /* 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 = "#CCCCCC"; /* 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 = "#33CCFF"; /* 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 = "red"; /* 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 = "#33CCFF"; /* 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 = 0; /* 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

Fearen54s

Hi,

ich danke Euch. Wird nachher direkt getestet.

VG

Alex

FuchsFan

Zitat von 2002Andreas

Ist das damit gemeint!?

Hallo, Andreas, ich nutze für die Scrollbar nur diesen css-Code. Hast du noch eine Idee, was hinzugefügt werden muss, dass der gleiche Effekt mit runden Ecken entsteht.

Code

/**************************************************************************************************************/
/**** ändert die Farben der Scrollbar ****** gleicher Eintrag in die userContent.css **************************/
/********* In der userChrome.css eingetragen ändert er die Farbe der Scrollbar innerhalb vom Firefox **********/
/********* In der userContent.css eingetragen ändert er die Farbe der Scrollbar auf Webseiten* ****************/

:root{
  
  /* background color [1. color] // thumb/slider color [2. color] (Firefox 64+) *********/
  scrollbar-color: #1c86ee #b0e2ff;
  
}

Alles anzeigen

Fearen54s

Hi Zusammen,

hab versucht, das Javascript anzuwenden, jedoch bin ich gescheitert. Wie muss ich das Script anwenden? Muss dies in den Chrome-Ordner des Profils rein? Ich bräuchte nur die von Andreas erwähnte Zeile 57, da ich die Farben wie Fuchsfan bereits per CSS nach meinen Wünschen anpassen konnte.

Bin für jede Hilfe dankbar.

VG

Fearen54s

2002Andreas

Dazu bedarf es erst diverser Vorbereitungen, siehe bitte dazu hier:

#1

Hier mit Bildern einer Beschreibung ,wie das dann gemacht werden muss.

https://github.com/Endor8/userChrome.js ... userChrome

Fearen54s

Hi,

dafür fehlt mir einfach das technische Knowhow. Bekomme ich nicht hin.

Trotzdem vielen Dank für die Mühe

2002Andreas

Mach es einfach gaaaanz in Ruhe, das sieht nur so kompliziert aus

milupo

Zitat von Fearen54s

Hi,
dafür fehlt mir einfach das technische Knowhow. Bekomme ich nicht hin.

Ja, so war das bei vielen, die jetzt viele von diesen Skripten nutzen.

Fearen54s

Hallo,

habe jetzt wie beschrieben die entsprechenden Dateien in die beschriebenen Ordner kopiert. Wie muss denn dann das Script aussehen, damit die Eckern der Scrollbar abgerundet werden und wie muss die Datei dann genau heissen? Das habe ich nicht so verstanden. Wie gesagt, ich brauche nur die Zeile 57 aus dem Beispiel, also var cs_thumb_roundness = 80;

Oder muss ich dies einfach nur in userchrome.js reinkopieren?

Fearen54s

Hi,

habs hinbekommen. Jetzt muss ich die Werte nur noch meinen Wünschen anpassen. Vielen, lieben Dank an alle für Eure Hilfe

milupo

Zitat von Fearen54s

Oder muss ich dies einfach nur in userchrome.js reinkopieren?

Bitte niemals etwas in die userChrome.js hineinschreiben. Sie muss so bleiben, wie du sie heruntergeladen hast.

Fearen54s

Und so sieht mein Füchschen jetzt aus:

2002Andreas

Zitat von Fearen54s

habs hinbekommen.

Na siehste

Niemals gleich aufgeben, dann ist die Freude hinterher doppelt so schön.

Freut mich, wenn ich einen kleinen Teil dazu beigetragen hatte.

Speravir

Zitat von Fearen54s

habs hinbekommen.

Schick. Ich hatte schon wegen der Rundung überlegt. Mir ist so, das man dieses „Buttons as arrows" ~~deaktivieren~~ deaktiviert lassen müsste, war mir dessen aber überhaupt nicht sicher. Du scheinst es ja aber allein geschafft zu haben.

harff182

Zitat von FuchsFan

Hallo, Andreas, ich nutze für die Scrollbar nur diesen css-Code

FuchsFan:

Wo(mit) benutzt Du den denn?

Weder in der userChrome.css als letztes noch als Import-File tut der was.