Beiträge von harff182

harff182

Zitat von .DeJaVu

Nur so gefragt. Hast du ne monochromatische Sehschwäche? Das Gelb ist schon ziemlich knallig hier, da gehen die Pastelltöne halb unter.

Vor vielen Jahren hat man beim Bund mal festgestellt, daß ich ein Rot/Grün-Problem habe.

Andererseits komme ich mit dunklen "Themes", die viele verwenden, nicht zurecht - ich seh nich genug.

Deswegen hab ich nach und nach dieses "Harribo-Design" für meinen Fux entwickelt.

harff182

Dharkness :

Danke für Deine Codes und Deine Inspiration:

Ich habs so hinbekommen, daß es mir gefällt:

harff182

Dharkness :

Das ist aber was anderes, wie das aus #2

Jetzt ist das im Tab wieder bunt, aber im Fenster tut sich nix...

Ich geb für heute auf, die Dörfer sind mir zu böhmisch...

Guuts nächtle...

harff182

Zitat von Dharkness

Ich habe das in einer Datei zusammengefasst

Was hast Du zusammengefasst?

Wenn ich das in das .css einsetze:

CSS

/*    about:downloads anpassen*/

/*    ACHTUNG !!! das ist für wenns im TAB auftaucht */
/*                und das gehört in den content-Bereich */

/*    211217    Nachfragen/Antworten/Einbau:
    https://www.camp-firefox.de/forum/thema/133984/?postID=1192861#post1192861
*/

/*    220922 für ALLE Fenster */
@-moz-document url(chrome://browser/content/places/places.xhtml),
url-prefix("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url-prefix("chrome://browser/content/downloads/contentAreaDownloadsView.xhtml") {
    /*     Hier kommt dann Dein CSS-Voodoo hin. 
        sagt Dharkness: https://www.camp-firefox.de/forum/thema/135293
    */

    button.downloadButton.downloadIconShow {
        color: white !important;    
        border: 2px solid black !important;
        border-radius: 5px !important;
        background: lightgreen!important;
        margin: 2px !important;
    }
    button.downloadButton.downloadIconShow:hover {
        color: black!important;
        border: 2px solid black !important;
        border-radius: 5px !important;
        background: coral!important;
        margin: 2px !important;
    }    

/*    211230:    about:downloads den Leerbereich anpassen*/
    #downloadsRichListBox{
        border: 4px solid black !important;
        background-color: gold !important;
    }

/*    211231:    Fortschritt bunt*/
/*    Andy:    https://www.camp-firefox.de/forum/thema/134010/?postID=1193247#post1193247 */
    .downloadProgress {
        appearance: none !important;
        height: 10px !important;
        background-color: yellow !important;
    }

    .downloadProgress::-moz-progress-bar {
        background-color: red !important;
        height: 10px !important;
    }

    .downloadProgress[paused]::-moz-progress-bar {
        background-color: green !important;
    }

}

Alles anzeigen

erhalte ich folgendes:

Was hab ich falsch gemacht/verstanden?

harff182

'nabend...

Ich habe mit diesem .css das TAb für about:downloads etwas bunter und für meine Augen angenehmer gestaltet:

CSS

/*    about:downloads anpassen*/

/*    ACHTUNG !!! das ist für wenns im TAB auftaucht */
/*                und das gehört in den content-Bereich */

/*    211217    Nachfragen/Antworten/Einbau:
    https://www.camp-firefox.de/forum/thema/133984/?postID=1192861#post1192861
*/
button.downloadButton.downloadIconShow {
    color: white !important;    
    border: 2px solid black !important;
    border-radius: 5px !important;
    background: lightgreen!important;
    margin: 2px !important;
}
button.downloadButton.downloadIconShow:hover {
    color: black!important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    background: coral!important;
    margin: 2px !important;
}    

/*    211230:    about:downloads den Leerbereich anpassen*/
#downloadsRichListBox{
    border: 4px solid black !important;
    background-color: gold !important;
}

/*    211231:    Fortschritt bunt*/
/*    Andy:    https://www.camp-firefox.de/forum/thema/134010/?postID=1193247#post1193247 */
.downloadProgress {
    appearance: none !important;
    height: 10px !important;
    background-color: yellow !important;
}

.downloadProgress::-moz-progress-bar {
    background-color: red !important;
    height: 10px !important;
}

.downloadProgress[paused]::-moz-progress-bar {
    background-color: green !important;
}

Alles anzeigen

Das ganze sieht dann so aus:

Das zusätzliche Fenster wird über den Pfeil-Button erzeugt, des Script dazu:

JavaScript

//  Downloadbutton.uc.js
//    Fenster automatisch auf...
//    https://www.camp-firefox.de/forum/thema/134677 + aborix in #18
//
//    220820:    base64 => berechnetes PNG
//
  
  
  (function() {

       if (location != 'chrome://browser/content/browser.xhtml') return;
       
       var DLFBProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
       
       try {
          CustomizableUI.createWidget({
             id: 'Download-button',
             type: 'custom',
             defaultArea: CustomizableUI.AREA_NAVBAR,
             onBuild: function(aDocument) {         
                var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                   id: 'Download-button',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: true,
                   label: 'Download Fenster öffnen',
                   accesskey: 'D',
                   tooltiptext: 'Download Fenster öffnen',
//                   style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAC7klEQVR42mJgAIL3K2X+AwQQy9VMzf+cIooMAAHE8H6i2n+QKEAAsbCrSjJ8vST4HyCAQByG13Mc/n+/D5EBCCAWsMByBQa2bz/BkgABxAAz5f1aYbAKgAACo6+XJP///OQFFgAIIJbvd23//z/NyPD/NQPDg8uS/wECiIlT+TDjr5/sDK9ZrjMo6D5nBAgguLYPC13/f7nN+v/bQ7H/P77awM0DCCAWGOPLp58MfE80GFiE+RiYOCXhGgECiAlE3PZI/i8iL8bAchMocV2C4d/+fwyPj2qBTQEIIBR02S7+/4N1AigSAAHECPcLyB9/OBkY/rMxMLxkYRDMvwWWAwggJpgCDidZBlazzwzsVg8ZGAXU4SYABBDckYy/2BmYvgsyMLLxMPz+g7AFIIAQCr6zA+0B+oCLn+HHV0Q4AgQQ48MTUv8FvwszsLwUhHhLlIeBkQ+oT+IXw8Pa3wwAAcQkb/GM8f2fbwwMr4CO+8ABDBABBua3wgzP8qQY1BbsZQQIILAj5V3vMj6Tv8Dw8/VbBqZ/nxjuT2BiUFw/D+wLgABCQXeX8v+/5pyAEg4AAYSh6v0il/+cMeIM/9+/YGBgZmNgZOSGKOSTYvi25A6DYOw2FD0AAcSCbsCfX38Y/n+4x/D37R0GZiY2hn/sQN//+8LAzGgClGPCcBVAAGEa8O8/A9MnVoZ/77gZ/gH5zHwCDP//czAwcnID5T5jGAAQQCx3o0L/s/znBXP+/fvD8E/sGgPjJ14GxrdCDAxszMBwBQYrAz8DAx8TA7P8d4anaXH/mf8yMfz/y87w6/9zBoAAYoSlJrbiAwzi7wwY/r38CNSIcCqTFB+E/wvonu//GVj4+Rie855k+NtjzaCwfjYjQAChBMhNt5T/7IV7GaTf6jD8fAZx7h9xXgZ2RmYGVjFBsMYfzZYMqjvmwvUBBBBWBIqqW2t5/n+eo/X/6zKj//d38v4HuRKbWoAAwouOher8Pxmtg1cjQIABAFbt8Z32Ai5RAAAAAElFTkSuQmCC)',
//                   oncommand: "window.open('chrome://browser/content/downloads/contentAreaDownloadsView.xhtml', 'Downloads', 'chrome,resizable=yes,width=600,height=750,left=1220,top=100');"
                   style: 'list-style-image: url("' + ("file:" + DLFBProfileDirectory + "/chrome/icons/download16.png") + '")',
                   oncommand: "window.open('chrome://browser/content/downloads/contentAreaDownloadsView.xhtml', 'Downloads', 'chrome,resizable=yes,width=600,height=750,left=120,top=0');"
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };
    
    Downloads.getList(Downloads.ALL)
    .then(list => list.addView({
      onDownloadAdded: () => document.getElementById('Download-button').click()
    }));     
   
})();

Alles anzeigen

Nun möchte ich in dem Fenster dieselbe Farbgestaltung haben, wie in dem TAB.

Wie mach ich das?

harff182

Ich hätt da auch noch was vorzuzeigen:

Ohne ESR, Nightly, etc, da ich nur eine Version installiert habe...

harff182

Zitat von lenny2

Jetzt frage ich mich, wie Ihr Post mir helfen wird, diese beiden Probleme zu löse

Zitat von lenny2

Die erste zeigt nicht den Versionstyp ESR, Beta... Die zweite zeigt nicht 32-Bit, 64-Bit.

Ist aus meiner Sicht nicht notwendig, denn so wie es aussieht, haben drüben sowohl milupo als auch @Bastler das übernommen, was ihnen genehm war.

Selbiges git für meinereiner

harff182

Hallo, lenny2

Ich benutze bisher eine anderes Script, das ich mir hier im CFF abgeguckt habe, um Version etc in der Menüzeile anzeigen zu lassen. Ein zusätzliches .css brauch ich dabei nicht.

Dummerweise kann ich nur abgucken und versteh nich viel/nix von JS.

Magst Du mal über mein Script drübergucken, wo/wie die von Deinem Script bereitgestellten Infos eingebaut werden müssten?

Ich würde dann dafür nen neuen Thread aufmachen...

2 Stunden Später: Hat sich erledigt: Lösung übers TB-Forum gefunden

harff182

Danke für die beiden Vorschläge, brauch ich mir keinen Knoten ins Mauskabel zu machen

harff182

Zitat von 2002Andreas

Und bitte nie etwas von der Seite Softonic downloaden

Da ich das schon mehrfach hier im CFF gelesen habe:

Kann ich irgendwie/irgendwomit meinem FF sagen, daß das eine "böse" Seite ist und er sie nicht laden soll?

harff182

Zitat von Mira_Belle

Den hier?

Nein, aber ich werd mir Deine SVG-Icons auch mal angucken...

Zitat von Mira_Belle

Oder eher Endors Icons?

Nein, ich meinte einen Thread hier im CFF.

Aber beim Stichwort "Endor" hats bei mir geklingelt und ich hab den Thread gefunden.

Ab hier gibts jede Menge Icons für mich zum angucken und abspeichern.

Danke für Deinen Schubs...

harff182

moin, moin...

Ich komme nach meinem Rechner-Crash neulich nicht mehr an alle meine Backups

Was mir noch fehlt, ist der "Icon-Pool", den ich mir irgendwo angelegt hatte.

Fast alle hatte ich aus irgendeinem Thread hier, den ich nicht wiederfinde.

Da wurde zu jedem Ergänzungs-/Änderungscode das/die verwendeten Icon(s) mitgeliefert.

Irgendwer hatte dort auch ein Zip-Archiv referenziert, wo er sich regelmäßig bedient(e).

Mag mich jemand zu diesem Thread leiten?

mDv...

harff182

harff182

Zitat von Mira_Belle

Siehst Du den Fehler? Blöde Frage, bist ja nicht blind.

Zitat von Mira_Belle

Echt klasse! Danke dafür.

Das "Verfahren" hab ich vor 3 Jahren bei jemandem im TB-Forum abgeguckt und nutze es seitdem.

Durch diesen Thread hier hab ich gut dazugelernt.

War mal wieder ne nette "Lehrstunde" hier im Thread.

Ich werde nach und nach meine Scripte mal checken, wo ich jetzt was verbessern kann.

Schönes/trockenes/unwetterfreies Wochenende für alle Beteiligten...

harff182

Zitat von Mira_Belle

Na dann lass sehen!

Tja, war wieder 'n Satz mit X , weil ich mit Deinem Neuen Code nicht zurechtkomme und isn bischen spät für mich heute/jetzt noch was zu testen...

Das ist mein Versuch mit Deinem aktuellen Code, wo es nicht funzt:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* Original by Aris (aris-addons@gmx.net)****************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* Customized by Mira************************************************************************** */
/* version 3 nach (ECMAScript 2015) *********************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ *********** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Wichtig !!!

 Die Einstellungen müssen auf 'false' gesetzt werden, damit dies auf aktuellen Firefox-Builds (102+) funktioniert

 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

 [!] 'Methode 2' ist erforderlich, um Firefox für benutzerdefinierte JavaScript-Dateien vorzubereiten
 [!] Die Datei 'custom_scrollbars.uc.js' gehört in den Firefox-Profilordner 'chrome'!
 -> Profilordner finden: Adressleiste > about:profiles > Wurzelordner > Ordner öffnen
 -> Datei zum Ordner \chrome\ hinzufügen (ggf. einen Ordner mit Namen "chrome" erstellen)

 [!] 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

 Aktivieren einer Einstellung > let ... auf 'true' setzen
 Deaktivieren einer Einstellung > let ... auf 'false' setzen
 Anpassungen vornehmen > Werte ändern
 - 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 (transparenz)
 - 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))

 HINWEIS
 - Zu kleine Werte für die Scrollbar-Breite werden sich negativ auf einige Oberflaechenelemente auswirken!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
let scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");


// GENERAL SCROLLBAR SETTINGS
let custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
let cs_thumb_border = 1; // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
let cs_thumb_roundness = 7; // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
let cs_thumb_minimal_size = 200; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
let cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
let cs_corner_background_color = "beige"; // default: cs_corner_background_color = "#DDDDDD"
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
let cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
let cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
let cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons

let cs_color_arrow = "white";
let cs_color_arrow_hover = "orange";
let cs_width = 16;
let cs_height = 16;

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

// Scrollbar code

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

let custom_scrollbars = {

  init: function() {

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
      
      @namespace html url("http://www.w3.org/1999/xhtml");
      
      scrollbar, scrollcorner, scrollbar thumb, 
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"], 
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        -moz-appearance: none !important;
        appearance: none !important;
      }
      scrollbar {
        background-color: ${cs_background_color} !important;
      }
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] {
        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;
        border: ${cs_thumb_border}px solid ${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,
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/Chevron-left,_12.svg") !important;
      }
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: ${cs_color_arrow};
        width: ${cs_width}px !important;
        height: ${cs_height}px !important;
      }
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {
        background-color: ${cs_color_arrow_hover} !important;
      }
      
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
        height: ${custom_scrollbar_size_value}px !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/resizer.svg") !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
    `), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configured above
custom_scrollbars.init();

Alles anzeigen

Mit Deinem älteren Code klappt es:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
  
 [!] 'Method 2' is required to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)
 [!] STARTUP CACHE HAS TO BE DEconstED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> deconste 'startupCache' folders content
 ENABLING options > set const to true
 DISABLING options > set const to false
 Modifying appearance > change values
 - color - name: red, fuchsia, transparent / hex code: #33CCFF, #FFF
 - color - 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, fuchsia, #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
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
const scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");

// GENERAL SCROLLBAR SETTINGS
const hide_scrollbars = false; // default: hide_scrollbars = false
const hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
const custom_scrollbar_size = true; // default: custom_scrollbar_size = false
const custom_scrollbar_size_value = 22; // in px // default: custom_scrollbar_size_value = 17
const custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false

// floating scrollbars
const enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code

// custom scrollbars
const enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const cs_thumb_border = 3; // in px // default: cs_thumb_border = 0
const cs_thumb_roundness = 80; // in px // default: cs_thumb_roundness = 0
const cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0
const cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
const cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code

// button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow
const cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5

// 'flat' scrollbars
// const cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false
const cs_thumb_minimal_size = 12; // in px

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "yellow"; // default: cs_background_color = "#DDDDDD"
const cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
const cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"

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

// - thumb/slider
const cs_thumb_color = "cornflowerblue"; // default: cs_thumb_color = "#33CCFF"            //von mir ?
const cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset"
const cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset"
const cs_thumb_hover_color = "coral"; // default: cs_thumb_hover_color = "#66FFFF"        //von mir ?
const cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset"
const cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset"
const cs_thumb_border_color = "black"; // default: cs_thumb_border_color = "#33CCFF"        //von mir ?

// - buttons
const cs_buttons_color = "yellow"; // default: cs_buttons_color = "#66FFFF"                //von mir ?
//const cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"
//const cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"
const cs_buttons_hover_color = "gainsboro"; // default: cs_buttons_hover_color = "#33CCFF"    //von mir ?
//const cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"
//const cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"

// 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";

/* ******************************************************************************************** */
/* scrollcornerimage von harff **************************************************************** */
/* ******************************************************************************************** */
// Scrollbar code
Components.utils.import("resource://gre/modules/Services.jsm");
const ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
const custom_scrollbars = {
  init: function() {

    
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton[type="increment"], scrollbar scrollbarbutton[type="decrement"] {\
        -moz-appearance: none !important;\
        appearance: none !important;\
      }\
      scrollbar {\
        background-color: '+cs_background_color+' !important;\
      }\
      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
        height: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/fux2.svg") + '"); !important;\
      }\
      scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+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[orient="vertical"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_scrollbar_button_arrows = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: unset !important;\
        background-image: unset !important;\
        border-radius: 0px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]{\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_arrows_on_buttons = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        border-radius: 0px !important;\
      }\
      \
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_buttons = {
  init: function() {
    const 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[type="increment"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_size = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const floating_scrollbars = {
  init: function() {
    const 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[orient="vertical"],\
      scrollbar[orient="horizontal"],\
      scrollbar, scrollcorner {\
        background-color: transparent !important; \
        background-image: unset !important; \
      }\
      scrollbar[orient="vertical"] {\
        margin-inline-start: -0px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        margin-top: -0px !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_opacity = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        opacity: 0.5 !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const remove_scrollbars = {
  init: function() {
    const 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);
  }
};
// enable settings as configured above
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_size==true) scrollbar_size.init();
if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Schade... aber jezz bin ich und muß

bis mogghän...

harff182

Huch

Was geht denn hier ab?

Wieder mal Weiterbildung a la Sören Hentzschel .

Danke dafür, auch wenn ichs zum Verstehen ersma bookmarken muß.

Mira_Belle:

(Wo) Gibts einen aktuellen Code?

Ich glaube nämlich (mal wieder), einen Weg ohne absolute Pfade gefunden zu haben und würde den mit Deinem Code gerne mal testen und dann beisteuern...

harff182

Antwort (30 Minuten später):

CSS

      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
        height: '+custom_scrollbar_size_value+'px !important;\
      }\

Und so bekommt man unten rechts inne Ecke was rein:

CSS

      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: url("file:///D:/01_gfx/scroller/doppelpfeil.svg") !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\

Sieht bei mir hier b.a.w. so aus:

harff182

Frage:

(Wie) kamm man die Scrollbars breiter bzw höher machen?

Das hier:

var custom_scrollbar_size_value = 17; // in px // default: custom_scrollbar_size_value = 17

führt bei Wertänderungen zu nix, weil die Variable nirgendwo mehr auftaucht...

harff182

Mira_Belle :

Hattu fein macht

Danke fürs Teilen.

Jezz habbich die Qual der Wahl , welches Layout mit welchen Funktionen mir mehr zusagt .

harff182

Zitat von Mira_Belle

Aber DAS ist das fehlende Puzzle.

Wo kommt denn der Schnipsel her?

Vielleicht kann man aus dem Zusammenhang erkennen/ableiten, was zu tun ist...

Mira_Belle:

Frage:

Interessiert es Dich, daß statt den von Dir benutzten Pfaden wie:

url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg")

auch sowas funktionieren könnte:

url("file:///../icons/Chevron-down,_Web_Fundamentals.svg")

Ich bevorzuge letzteren, den relativen Pfad, und bei mir hier funktionuckelt es...

harff182

Hab das eben nochmal über den FF versucht - keine Änderung wurde gespeichert

Ich werd das aber nicht weiterverfolgen, denn:

Dann hab ich mir mal in Wikipedia anguckt, was SVG überhaupt ist.

Beim Stichwort "XML" drängelte sich mein Editor (Notepad++) in den Vordergrund.

Damit waren die Änderungen problemlos möglich.

Viele Wege führen nach Rom - und ich bin auf diesem Weg angekommen:

Beiträge von harff182

about:downloads-Fenster bunter machen

about:downloads-Fenster bunter machen

about:downloads-Fenster bunter machen

about:downloads-Fenster bunter machen

about:downloads-Fenster bunter machen

Anwendungsname und Version in der Menüleiste

Anwendungsname und Version in der Menüleiste

Anwendungsname und Version in der Menüleiste

Zugangsdaten verschwunden

Zugangsdaten verschwunden

Thread mit Icons gesucht

Thread mit Icons gesucht

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern