Beiträge von Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Mira_Belle

Ich kann nicht einmal erahnen, wie die Seite aussehen soll!

So sieht die mit dem Code von ihm aus

Genau so ist es auch bei mir. Warum funktioniert bei manchen buttons der css-Code noch und bei anderen sieht es ganz komisch aus? Und: Was muss ich anpassen?

2002Andreas  Sören Hentzschel kann mir einer von euch weiterhelfen?

Zitat von Mira_Belle

Zitat von Firefox_94.0.1

Der passt halt leider ganz und gar nicht zu meinen sonstigen Design. Ich möchte einfach nur den Code für die Buttons anpassen...

---

Was hast du bei den Buttons wie geändert? Vielleicht hilft mir das, damit ich das bei mir auch entsprechend anpassen kann.

Kannst Du mit den Browserwerkzeugen umgehen?

Wenn ja, dann pass Dir doch Fuchsfans oder meinen Code ganz einfach Deinen Bedürfnissen an.

Hast Du noch einen Screenshot Deiner alten Anpassung?

Welcher Teil von deinem Code ist denn für die Buttons? Und: was wurde da Firefox-Seitig bei den Buttons genau geändert, so dass manche Anpassungen noch funktionieren, und manche nicht?

Ich finde mit den Browser-Werkzeugen auch mit deinem Code nicht die (neuen) Werte für die Buttons.

Zitat von FuchsFan

Wenn Du möchtest, dann probiere mal diesen Code.

CSS

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(about:logins) {
        
    html {
        background: black !important;
    }    
     
    .no-logins.initialized body login-intro{     
        scrollbar-width: none !important;
    }
    
    /* alle Button der originale graue HG weg */
    button,    
    button:hover {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
}
    
    .column:before {
        content: "Design by FuchsFan ... 07.2023";
        margin-top: 15px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: grey !important;
    }        
    
    /* oben der Text "Zugangsdaten" */
    .count {
        color: #0f6acc !important; 
        font-size: 15px !important; 
        font-weight: bold !important;
        padding-right: 20px !important;
    }
    
       /* Einträge in der Liste Abstand von links */
    li[class="login-list-item"],
    li[class="login-list-item selected"]{
        padding-left: 25px !important;
    }
        
    /* erstes Feld linke Seite (bei Name u. Zugangsdaten) */
    div.meta {
        padding-left: 35px !important;
        padding-top: 10px !important;
        margin-top: -1px !important;
        background-color: #fffff0 !important;
        border-bottom: 2px solid orange !important; 
        border-top: 2px solid orange !important;
    }    
    
    /* Hintergrundbox bei Button mit + Zeichen */
    div.listHeader div.create-login-button-container {
        background-color: lightblue !important;
        margin: 3px 0 0 0 !important; 
        border: 2px solid coral !important;
        box-shadow: none !important; 
    }
    div.listHeader div.create-login-button-container:hover {
        background-color: lightyellow !important;
        margin: 3px 0 0 0 !important; 
        border: 2px solid blue !important;
        box-shadow: none !important; 
    }
    
    /* rechts die Box über der blauen Linie */
    .header {
        margin-top: 20px!important;
    }
        
    .header, li {
        border-bottom: none !important;
        box-shadow: none !important;        
    }
        
    /* linke Seite unter den Einträgen Border */
    div.container ol li#new-login-list-item.login-list-item.selected,
    div.container ol section.login-list-section{
        border-bottom: 1px solid silver !important; 
        box-shadow: none !important;
    }
        
    
    /* HG für das obere rechte Feld */
    .initialized body header,
    .login-selected.initialized body header{
        border-bottom: 2px solid orange !important;
        background: #fbe8d2 !important;
        height: 52px !important;
    }
        
    /* HG für das linke obere Feld */
    div.listHeader{
        background-color: #fbe8d2 !important;
    }
    
    /* Suchfeld oben */  
    .filter,
    login-filter {
        appearance: none !important; 
        border-radius:24px !important;
        margin-left: 5px  !important;
        margin-top: 2px  !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
    
    /* HG des Suchfeldes */
    input.filter{
        background:#fffff0 !important;
    }    
        
    body {
        max-width: 1400px !important;
        max-height: 800px !important;
        margin-left: auto /* 350px */ !important;
        margin-right: auto /* 350px */ !important;
        border: 5px solid dodgerblue !important; 
        margin-top: 30px !important;
    }
    
    /* rechte Seite großes Feld */
    html.official-branding.no-logins.initialized body section login-intro,
    div.container {
        max-height: 728px !important;
    }
        
    .time-created,
    body > login-list:nth-child(2), li, .header, header,
    .meta{
        box-shadow: none !important;
    }
    
    /* rechte Seite großes Feld */
    div.container {
        background: conic-gradient(at 0% 30%,  silver 10%, #fcfcfc 32%, lightgrey 45% ) !important;
        border-left: 2px solid silver !important;
    }
    
    /* links oben das erste Feld */
    .meta {
        background: conic-gradient(at 50% 0%,  silver 10%, #fcfcfc 32%, lightgrey 45% ) !important;
    }
    .meta:hover {
        background: #ffe680 !important;
    }
    
    /* linke Seite die untere Box */
    div.container ol{
        background: conic-gradient(at 0% 30%,  silver 10%, #fcfcfc 32%, lightgrey 45% ) !important;
    }
    
    #login-sort label {
        padding-left: 25px !important;
    }    
    
    .login-list-item.selected {
        background: #fff0b3 !important; 
        border-left: 2px!important;
    }
    .login-list-item.selected:hover {
        background: #ffdb4d !important;        
    }
    
    /* rechts die große Box */
    html.initialized body login-item,
    .login-selected.initialized body login-item {
        margin-left: 30px !important;
    }
    
    /* links die große Box */
    html.initialized body login-list.initialized.create-login-selected,
    .login-selected.initialized body login-list.initialized {
        margin-right: -40px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        border: 0px !important;
    }

    .login-list-item{
    border: 1px solid #B2B2B2 !important;
    background-color: #ffefdb !important;
    color: #000 !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item:hover {
    border: 1px solid #B2B2B2 !important;
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    .login-list-item.selected {
    border: 1px solid #B2B2B2 !important;
    background-color: #6f4e37 !important;
    color: #FFF !important;
    padding: 1px 5px 5px 15px !important;
    margin: 3px 6px 0 3px !important;
    }
    .login-list-item.selected:hover {
    background-color: #f0ffff !important;
    color: #000 !important;
    }

    
    /* .login-list-item {
        background-color: #FFFFF0 !important;
    }
    .login-list-item:hover {
        background-color: #ffe680 !important;
    }
        
    .login-item-title {
        color: #0066cc !important;
    } */
    
    .favicon-wrapper,
    .login-item-favicon-wrapper {
        fill: #e69500 !important;
    }
    
    /* rechts blaue horizontale Linie */
    div.container div.column div.header {
        border-bottom: 2px solid dodgerblue !important;
        margin-right: -200px !important;
    }
    
    /* Popup "Neue Zugangsdaten hinzufügen" Border-Radius bei den drei Boxen */
    div.container div.column form div.detail-row label.detail-cell input{
        border-radius: 24px !important;
    }

    /* Button links oben "Name" */
    #login-sort {
    background: #F0F0F0 url("..//icons/Bild86.png")no-repeat !important;
    padding-left:40px !important;
    padding-right: 5px !important;
    padding-top:  4px!important; 
    padding-bottom: 0px!important; 
    background-position:10px 7px!important;
    font-size:14.0px!important;
    border-style: outset !important;
    border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-width:2px !important;
    color:black !important;
    margin-left: -15px !important;
    max-width: 160px  !important;
    }
    
    #login-sort:hover {
    background: #B2EDFA url("..//icons/Bild86.png")no-repeat !important;
    padding-left:40px!important ;
    border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important;
    background-position:10px 5px!important;
    }
    
    /* Button bearbeiten */
    .edit-button {
    appearance:none!important;
    height: 32px !important;
    background: #F0F0F0 url("..//icons/Bild67.png")no-repeat !important;
    margin-right: 20px !important;
    padding: 0 5px 0 25px !important;
    background-position:14px 7px!important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px !important;
    color:black !important; 
    }

    .edit-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild67.png")no-repeat !important;
    border: 1px solid coral !important;
    background-position:14px 7px!important;
    padding: 0 5px 0 25px !important;
    }
    /* Text im Button verlagert */
    button.ghost-button span {
    margin-top: -3px !important;
    }

    /* Button "Entfernen" */
    .delete-button {
    appearance:none!important;
    height: 32px !important;
    background: #F0F0F0 url("..//icons/Bild8.gif")no-repeat !important;
    padding: 0 5px 0 25px !important;
    background-position:14px 7px!important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px !important;
    color:black !important; 
    }
    
    .delete-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild8.gif")no-repeat !important;
    border: 1px solid coral !important;
    background-position:14px 7px!important;
    padding: 0 5px 0 25px !important;
    }    

    /* Button "Kopieren" (Namen) */
    div.detail-row login-command-button.copy-button.copy-username-button {
    appearance:none!important;
    height: 30px !important;
    background: #F0F0F0 url("..//icons/Bild73.png")no-repeat !important;
    padding: 0 5px 0 35px !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    div.detail-row login-command-button.copy-button.copy-username-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild73.png")no-repeat !important;
    padding: 0 5px 0 35px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    }
    
    /* originale Icons in den Button ausgeblendet */
    .ghost-button > img:nth-child(1) {
    display: none !important;
    }

    /* Button "Kopieren" (Passwort) */
    div.detail-row login-command-button.copy-button.copy-password-button {
    appearance:none!important;
    height: 30px !important;
    background: #F0F0F0 url("..//icons/Bild74.png")no-repeat !important;
    padding: 0 5px 0 35px !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    div.detail-row login-command-button.copy-button.copy-password-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild74.png")no-repeat !important;
    padding: 0 5px 0 35px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 18px 18px !important;
    }
    /* Text im Button verlagert */
    button:nth-child(3) > span:nth-child(1){    
    margin-top: -3px !important;
    }        
        
    /* für Button "Kopieren" die Länge */    
    div.detail-row login-command-button.copy-button.copy-username-button,
    div.detail-row login-command-button.copy-button.copy-password-button {
    min-width: 120px !important;
    }

    
    /* Button "Adresse der Website" */
    .origin-input {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild75.png")no-repeat !important;
    padding: 2px 40px 6px 45px !important;
    background-position:15px 5px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }

    .origin-input:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild75.png")no-repeat !important;
    padding: 2px 40px 6px 45px !important;
    background-position:15px 5px!important;
    background-size: 18px 18px !important;
    font-size:14.0px!important;
    border: 1px solid coral !important;
    border-radius:16px!important;
    color:black !important; 
    }    
    
    .fxaccounts-enable-button {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild83.png")no-repeat !important;
    padding-left:35px!important;
    padding-top:  2px!important; 
    padding-bottom: 4px!important; 
    background-position:10px 6px!important;
    color:black!important;
    font-size:14px!important;
    text-decoration:none!important;
    padding-right:25px!important;
    border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-style: outset !important;
    border-width:2px !important;
    border-radius:16px!important;
    }

    .fxaccounts-enable-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild83.png")no-repeat !important;
    background-position:10px 6px!important;
    border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important;
    }    

    /* Button "Speichern" im Menü "Neu" */
    .save-changes-button {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild87.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }
    
    .save-changes-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild87.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    }
        
    /* Button "Abbrechen" im Menü "Neu" */
    .cancel-button {
    appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild88.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    font-size:14.0px!important;
    border: 1px solid dodgerblue !important;
    border-radius:16px!important;
    color:black !important; 
    }
    
    .cancel-button:hover {
    appearance:none!important;
    background: #B2EDFA url("..//icons/Bild88.png")no-repeat !important;
    padding: 0 25px 0 45px !important;
    border: 1px solid coral !important;
    background-position:15px 6px!important;
    background-size: 17px 17px !important;
    }        
    
    /* Auge vor Passwort kopieren */
    .reveal-password-checkbox {
        fill: #0070ff !important;
    }
    .reveal-password-checkbox:hover {
        fill: #c32148 !important;
    }
    
    /* Web-Adresse im Menü "Neu" linker Abstand */
    div.container div.column form div.detail-row label.detail-cell input{
    padding-left: 15px !important;
    }
    
    /* Überschrift im Menü "Neu" */
    div.container div.column div.header h2.title span.new-login-title {
    color: #006b3c !important;
    }
    /* das Welt-Icon davor */ 
    div.container div.column div.header img.login-item-favicon {
    fill: brown !important;
    }

    /* Drei-Punkte-Button oben rechts */
    button.menu-button.ghost-button {
        background-color: lightblue !important;
        border: 2px solid orange !important;
        border-radius: 0 !important;
        fill: green !important;        
    }
    button.menu-button.ghost-button:hover {
        background-color: greenyellow !important;
        border: 2px solid crimson !important;
        fill: red !important;        
    }
    /* Menü hinter Drei-Punkte-Button */
    ul.menu button.menuitem-button {
        background-color: beige !important;
        border: 1px solid silver !important;
        margin-top: 2px !important;
    }
    ul.menu button.menuitem-button:hover {
        background-color: greenyellow !important;
        border: 1px solid coral !important;
    }    
    
    .meta-info:first-of-type::before {
        border-top: none  !important;
    }    
    
    /* Popup-Menü hinter Dreipunkte-Button - die Button */
    .menu {
        border: 3px solid dodgerblue !important;
        padding: 5px !important;
    }

    .menuitem-import-browser {
        width: 100% !important;
        height: 24px !important;
        fill:  green !important;
        color: black!important;
    }
    
    .menuitem-export {
        width: 100% !important;
        height: 24px !important;
        fill:  orange !important;
        color: black !important;
    }
    
    .menuitem-import {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
    }
    
    .menuitem-import-file {
        width: 100% !important;
        height: 24px !important;
        fill:  blue !important;
        color: black !important;
    }
    
    .menuitem-remove-all-logins {
        width: 100% !important;
        height: 24px !important;
        fill:  #cc3300!important;
        color: black !important;
        margin-left: -1px !important;
    }
    
    .menuitem-help {
        width: 100% !important;
        height: 24px !important;
        fill: blue!important;
        color: black !important;
    }
    
    .menuitem-preferences {
        width: 100% !important;
        height: 24px !important;
        fill: dodgerblue!important;
        color: blue !important;
        font-weight: 600 !important;
    }    
    
    .menuitem-mobile[data-l10n-id="menu-menuitem-android-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #33cc33!important;
        color: black!important;
    }

    .menuitem-mobile[data-l10n-id="menu-menuitem-iphone-app"] {
        width: 100% !important;
        height: 24px !important;
        fill: #9900ff!important;
        color: black!important;
    }    
    }

Alles anzeigen

Der passt halt leider ganz und gar nicht zu meinen sonstigen Design. Ich möchte einfach nur den Code für die Buttons anpassen...

Zitat von Mira_Belle

Himmel, was für eine schwierige Geburt!

Musste auch meinen Code dafür anpassen, hier das Ergebnis:

CSS

@-moz-document url-prefix(about:logins)     {

    html {
        background: #292c2f !important;
    } 

    /* alle Button der originale graue HG weg */
    button,    
    button:hover {
        --in-content-button-background: none !important;
        --in-content-button-background-hover: none !important;
        --in-content-button-background-active: none !important;
    }
    button {
        color: #e1e1e1 !important;                        /* Schriftfarbe alles Schaltflächen    */
    }
    button:hover {
        color: #292c2f !important;
    }

    /*------------------------------*/
    /********** Loginliste **********/
    /*------------------------------*/    

    div.meta {
        background-color: #292c2f !important;            /* Hintergrundfarbe links in der Kopfzeile der Loginliste    */
        color: #e1e1e1 !important;                        /* Text links in der Kopfzeile der Loginliste    */
    }
    #login-sort {
        color: #e1e1e1 !important;                        /* Text links (Name (A-Z))in der Loginliste    */
    }
    .count {
        color: #e1e1e1 !important;                        /* Farbe des Textes "Zugangsdaten" */
        font-size: 15px !important; 
/*        font-weight: bold !important; */
        padding-right: 20px !important;
    }

    .list-item.selected {    
/*    .login-list-item.selected { */
        background-color: #5b5b66 !important;            /* Hintergrundfarbe des ausgewählten Feldes in der Loginliste    */
        border-inline-start-color: #ff9600 !important;    /* Linker Rahmen des ausgewählten Feldes in der Loginliste    */
        color: #e1e1e1 !important;                        /* Textfarbe des ausgewählten Feldes in der Loginliste    */
    }
    .list-item {
        /*    .login-list-item {    */
        background-color: #292c2f !important;            /* Hintergrundfarbe der Loginliste    */
    }    
    .list-item:hover {    
        /*    .login-list-item:hover {    */
        background: #5b5b66 !important;                    /* Hintergrundfarbe der Loginliste    */
    }    
    .list-item:not(.selected):hover {        
        /*    .login-list-item:not(.selected):hover {    */
        color: #e1e1e1 !important;                        /* Textfarbe in der Loginliste    */
    }

    .title{
        color: #e1e1e1 !important;                        /* Textfarbe Überschriften (IPs & Urls)    */
    }
    .subtitle {
        color: #e1e1e1 !important;                        /* Textfarbe "Namen" */
    }
    .icon {
        fill: #e1e1e1 !important;                        /* Farbe der kleinen "Weltkugeln"    */
        fill-opacity: 0.8 !important;
    }

    .empty-search-message {
        color: #e1e1e1 !important;
        background: #292c2f !important;
    }

    .empty-search-message span {
        color: #e1e1e1 !important;
    }

    ol {
        background: #292c2f !important;
    }

    /*----------------------------*/
    /********** Suchfeld **********/
    /*----------------------------*/

    /* Keinen blauen Rahmen mehr */
    input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus {
        outline: none !important;
    }

    div.listHeader {
        background-color: #292c2f !important;            /* Hintergrundfarbe um das Suchfeld    */
    }

    .filter,
    login-filter {
        appearance: none !important; 
        background-color: #5b5b66 !important;        
        color: #e1e1e1 !important;
        border-color: #e1e1e1 !important;
        border-width:3px !important;
        border-radius: 8px !important;
    }
        
    .filter:focus {
        appearance: none !important;
        background-color: #e1e1e1 !important;
        color: #000000 !important;
        border-color: #ff9600 !important;
        border-width:3px !important;
        border-radius: 8px !important;
    }

        /* HG des Suchfeldes */
    input.filter{
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
    }    

    /*-----------------------------------*/
    /** Button "Zugansdaten hinzufügen" **/
    /*-----------------------------------*/

    div.listHeader div.create-login-button-container {
        background-color: #5b5b66 !important;                /* Hintergrundfarbe des Zugansdaten hinzufügen-Button*/         
        color: #e1e1e1 !important;                        /* Textfarbe des Zugansdaten hinzufügen-Button*/    
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;
        box-shadow: none !important; 
    }
    div.listHeader div.create-login-button-container:hover {
        background-color: #e1e1e1 !important;                /* Textfarbe des gehoverten Zugansdaten hinzufügen-Button    */
        color: #292c2f !important;                        /* Hintergrundfarbe des gehoverten Zugansdaten hinzufügen-Button*/
    }

    /*-----------------------------------*/
    /********* Feld rechts oben **********/
    /*-----------------------------------*/

    header {
        background-color: #292c2f !important;            /* Hintergrundfarbe um das Suchfeld    */
    }
    .fxaccounts-extra-text {
        color: #e1e1e1 !important;                        /* Farbe des Textes vor dem Syncronisieren-Button    */
        padding-right: 20px !important;    
    }

    /*-------------------------------*/
    /**** Button "Syncronisieren" ****/
    /*-------------------------------*/
    
    .fxaccounts-enable-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Syncronisieren-Button    */  
        color: #e1e1e1 !important;                        /* Textfarbe des Syncronisieren-Button    */
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;
    }
    .fxaccounts-enable-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Syncronisieren-Button    */
        color: #292c2f !important;                        /* Hintergrundfarbe des gehoverten Syncronisieren-Button    */    
    }

    /*-------------------------------*/
    /********* Button "..." **********/
    /*-------------------------------*/

    .menu-button {
        background-color: #5b5b66 !important;        /* Hintergrundfarbe des "..."-Button    */  
        color: #e1e1e1 !important;                    /* Textfarbe des "..."-Button    */
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 3px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;
    }    
    .menu-button:hover {    
        background-color: #e1e1e1 !important;        /* Textfarbe des gehoverten "..."-Button    */
        color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten "..."-Button    */    
    }


    /*-----------------------------*/
    /************ Mitte ************/
    /*-----------------------------*/

    div.container {
        background-color: #292c2f !important;         /* Hintergrundfarbe des Mittelfeldes    */
    }    
    .field-label {
        color: #e1e1e1 !important;                    /* Text im Mittelfeld */
    }
    div.container div.column div.header {
        border-bottom: 2px solid #ff9600 !important;    /* Trennlinie (Seperator) */

        margin-right: -200px !important;
        color: #ff9600 !important;                        /* Farbe der Wltkugel    */
    }


    /*---------------------------*/
    /**** Button "Bearbeiten" ****/
    /*---------------------------*/
    
    .edit-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Bearbeiten-Button    */
        color: #e1e1e1 !important;                        /* Textfarbe des Bearbeiten-Button    */    
        margin-right: 10px !important;
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;    
    }
    .edit-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Syncronisieren-Button    */
        color: #292c2f !important;                        /* Hintergrundfarbe des gehoverten Bearbeiten-Button    */
    }

    /*--------------------------*/
    /**** Button "Entfernen" ****/
    /*--------------------------*/
    
    .delete-button {
        background: #5b5b66 !important;                /* Hintergrundfarbe des Entfernen-Button    */         
        color: #e1e1e1 !important;                        /* Textfarbe des Entfernen-Button    */             
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;
    }
    .delete-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Entfernen-Button    */
        color: #292c2f !important;                        /* Hintergrundfarbe des gehoverten Entfernen-Button    */
    }

    /*------------------------------*/
    /*** Button zur Url, bzw Page ***/
    /*------------------------------*/

    .origin-input{
        background: #5b5b66 !important;
        color: #e1e1e1 !important;
        margin-left: 1px !important;
        margin-right: 10px !important;
        margin-top: 3px !important;
        margin-bottom: 5px !important;
        padding-top: 3px!important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 3px !important;     
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius:8px!important;
    }
    .origin-input:hover{
        background: #e1e1e1 !important;
        color: #292c2f !important;   
    }
    a:hover {
        text-decoration: none !important;                 /* Links nicht unterstichen    */
    }

    /* "Benutzer"    */
    input[type="text"]:read-only {
    color: #e1e1e1 !important;                            /* Farbe des "Benutzer"    */    
    }

    /*---------------------------------------*/
    /**** Button "Kopieren Benutzernamen" ****/
    /*---------------------------------------*/
    
    div.detail-row login-command-button.copy-button.copy-username-button {
        appearance:none!important;
        background: #5b5b66 !important;                /* Hintergrundfarbe des Kopieren-Button    */         
        color: #e1e1e1 !important;                        /* Textfarbe des Kopieren-Button    */            
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;
        }
    
        div.detail-row login-command-button.copy-button.copy-username-button:hover {
            background: #e1e1e1 !important;            /* Textfarbe des gehoverten Kopieren-Button    */
            color: #292c2f !important;                    /* Hintergrundfarbe des gehoverten Kopieren-Button    */
        }    
    
    /* "Dots"    */
    .password-display {
        color: #e1e1e1 !important;                    /* Farbe der "Dots"    */    
    }            
    .reveal-password-checkbox {
        color: #ff9600 !important;                    /* Farbe des "Auges"    */    
    }

    /*----------------------------------*/
    /**** Button "Kopieren Passwort" ****/
    /*----------------------------------*/
    
    div.detail-row login-command-button.copy-button.copy-password-button {
        appearance:none!important;
        background: #5b5b66 !important;                /* Hintergrundfarbe des Kopieren-Button    */         
        color: #e1e1e1 !important;                        /* Textfarbe des Kopieren-Button    */            
        border-color: #ff9600 !important;
        border-style: outset !important;
        border-width:3px !important;
        border-radius: 8px !important;        
    }        

    div.detail-row login-command-button.copy-button.copy-password-button:hover {
        background: #e1e1e1 !important;                /* Textfarbe des gehoverten Kopieren-Button    */
        color: #292c2f !important;                        /* Hintergrundfarbe des gehoverten Kopieren-Button    */
    }

    /*----------------------------------*/
    /************* Timeline *************/
    /*----------------------------------*/

    .timeline > .line {      
        background-color: #e1e1e1 !important;
    }

    .timeline > .point {
        stroke: #ff9600 !important;            /* Farbe des Rings */
        stroke-width: 30px !important;             /* Größe der Punkte */
    }
    .timeline > svg {
        fill: #ff9600 !important;                /* Farbe des Punktes */
    }
    div.date {
        color: #e1e1e1 !important;                /* Farbe des Datums */
    }
    div.action {
        color: #e1e1e1 !important;                /* Farbe des Komentars */
    }
}

Alles anzeigen

Und Danke FuchsFan für Deinen Code!

Nur durch ihn wurde mir klar, warum so mancher Selektor in meinem alten Code nicht mehr funktionierte.

Was hast du bei den Buttons wie geändert? Vielleicht hilft mir das, damit ich das bei mir auch entsprechend anpassen kann.

Ich verwende folgenden Code für about:logins

/* 02. about:logins */


@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(about:logins) {


/* Hintergrund */


.container {
overflow: auto;
padding: 40px;
box-sizing: border-box;
height: 100%;
background-color: #ffd700 !important;
color: #00016e !important;
}


header {
display: flex;
align-items: center;
background-color: #ffd700 !important;
border-bottom: 1px solid #ffd700 !important;
padding-block: 9px;
padding-inline-start: 16px;
padding-inline-end: 23px;
}


.header {
display: flex;
align-items: center;
border-bottom: 1px solid #ffd700 !important;
margin-bottom: 40px;
}


.meta {
display: flex;
align-items: center;
padding: 9px 16px;
border-bottom: 1px solid #ffd700 !important;
background-color: #ffd700 !important;
color: #00016e !important;
font-size: 0.8em;
}


.meta-info {
font-size: 13px !important;
color: #00016e !important;
margin-block: 0 8px;
}


.fxaccounts-extra-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: #00016e !important;
text-align: end;
}


.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
border-radius: 5px !important;
}




/*Suchfeld*/


.filter[type="text"] {
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.4;
background-image: url("chrome://global/skin/icons/search-glass.svg");
background-position: 8px center;
background-repeat: no-repeat;
background-size: 16px;
text-align: match-parent;
width: 100%;
margin: 0;
box-sizing: border-box;
padding-block: 6px;
background-color: #00016e !important;
color: #afbde1 !important;
font-size: 17px !important;
}


/* Überschiften */


.login-item-title {
white-space: nowrap;
font-weight: 800 !important;
color: #00016e !important;
background-color: #ffd !important;
text-align: center !important;
border-radius: 15px !important;
margin-right: 80px !important;
display: block !important;
}


.field-label {
display: block;
font-size: smaller;
color: #ffd700 !important;
margin-bottom: 8px;
background-color: #00016e !important;
width: 150px !important;
text-align: center !important;
font-size: 15px !important;
border-radius: 15px !important;
}




/*Buttons*/


.edit-button {
background-image: url("chrome://global/skin/icons/edit.svg");
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.edit-button:hover {
background-image: url("chrome://global/skin/icons/edit.svg");
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.delete-button {
background-image: url("chrome://global/skin/icons/edit.svg");
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.delete-button:hover {
background-image: url("chrome://global/skin/icons/edit.svg");
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.copy-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.copy-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}




.create-login-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.create-login-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


#login-sort {
background-color: transparent;
margin: 0;
padding-inline: 0 16px;
min-height: initial;
font: inherit;
font-weight: inherit;
font-weight: 600;
color: #ffd700 !important;
background-color: #9c1818 !important;
text-align: center !important;
}


#login-sort:hover:not([disabled]) {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
text-align: center !important;
}


.fxaccounts-enable-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
}


.fxaccounts-enable-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #ffd700 !important;
}


/* Symbole */


.login-item-favicon {
margin-inline-end: 12px;
height: 24px;
width: 24px;
flex-shrink: 0;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.75;
color: #9c1818 !important;
}


.menu-button {
background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0;
background-color: #9c1818 !important;
fill: #ffd700 !important;
}


.menu-button:hover {
background-image: url("chrome://global/skin/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
width: 30px;
min-width: 30px;
margin-inline: 0;
background-color: #ffd700 !important;
fill: #9c1818 !important;
}




/* linke Menüleiste*/


.login-list-item {
display: flex;
align-items: center;
padding-block: 10px;
padding-inline: 12px 18px;
border-inline-start: 4px solid transparent;
border-inline-start-color: transparent;
user-select: none;
background-color: #9c1818 !important;
color: #ffd700 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item:hover {
display: flex;
align-items: center;
padding-block: 10px;
padding-inline: 12px 18px;
border-inline-start: 4px solid transparent;
border-inline-start-color: transparent;
user-select: none;
background-color: #ffd700 !important;
border-color: #9c1818 !important;
color: #9c1818 !important;
font-size: 15px !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected {
border-inline-start-color: var(--in-content-accent-color);
background-color: #9c1818 !important;
color: #afbde1 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}


.login-list-item.selected:hover {
border-inline-start-color: var(--in-content-accent-color);
background-color: #ffd700 !important;
color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
border-color: #9c1818 !important;
}


.username {
font-size: 0.85em;
color: #ffd !important;
}


.login-selected .initialized {
background-color: #ffd700 !important;
}




/* Zugangsdaten hinzufügen*/






.login-list-section {
background-color: #ffd700 !important;
}


.create-login-button-container {
border-top: 1px solid var(--in-content-border-color);
display: flex;
flex-direction: column;
background-color: #ffd700 !important;
}


.detail-cell:dir(ltr) input:not([type="checkbox"]) {
margin-left: 0;
background-color: #ffd !important;
border: none !important;
color: #00016e !important;
}


.save-changes-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.save-changes-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button {
padding-inline-start: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.cancel-button:hover {
padding-inline-start: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 20px !important;
}


.arrow-box {
background-color: #00016e !important;
color: #ffd700 !important;
}


/*drop-down*/


.menu {
position: absolute;
top: 30px;
inset-inline-end: 0;
margin: 0;
padding: 5px 0;
background-color: #00016e !important;
color: #ffd700 !important;
border: none !important;
border-radius: 4px;
box-shadow: var(--shadow-30);
min-width: max-content;
list-style-type: none;
display: flex;
flex-direction: column;
z-index: 1;
font: menu;
}


.menuitem-button {
color: #ffd700 !important;
}


.menuitem-button:hover {
padding: 4px 8px;
padding-inline-start: 32px;
background-repeat: no-repeat;
background-position: left 8px center;
background-size: 16px;
-moz-context-properties: fill;
fill: currentColor;
margin: 0;
border: 0;
border-radius: 0;
text-align: start;
min-height: initial;
font: inherit;
background-color: #ffd700 !important;
color: #9c1818 !important;
}

}

Seit geraumer Zeit passen hier aber die Buttons nicht mehr.

Hat das was hiermit zu tun? Was muss ich ändern, damit der Code wieder vollständig funktioniert?

Zitat von .DeJaVu

Zitat

Win 11 23h1

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

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

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Hier meine Datei:

Teste bitte:

CSS

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

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


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


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


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


}

Alles anzeigen

---

Nicht so:

Code

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

Sondern so:

Code

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

Danke. Jetzt funktioniert es.

Zitat von .DeJaVu

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

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

Zitat von .DeJaVu

Zeit für eine Namensänderung.

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

Hallo,

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

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


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


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


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


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


}

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Gibt es eine Lösung

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

Und so bei einem längeren Antwortbeitrag:

Also immer ganz schmal

Alles anzeigen

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

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

"use strict";


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


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


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


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


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


*/


(function() {




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


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


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


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


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


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


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


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


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


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


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


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


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


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


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




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


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




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


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




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




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


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


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


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


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


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


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


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




})();

Die Einstellung

const thin_scrollbars = true;

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

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

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

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

mit welcher ich seit Beginn teste

Es gab nicht ohne Grund ein Update auf das Skript.

Also hat es keinen Sinn, am alten Skrpit zu basteln, und das auch nur wegen der Farben etc., das lässt sich auch alles im neuen Skript anpassen.

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

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

weiter rumgetestet

Was hast du denn aus dem Skript gemacht

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

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Ich brauche die Einstellung für:

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

Was anderes können wir doch auch nicht machen.

Etwas mehr Einsatz/Willen von dir kann nicht schaden

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

JavaScript

// Scrollbar.uc.js

"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133/?postID=1216934#post1216934************************************************* */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1223062#post1223062************************************************* */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.2 for Firefox 111+ ******************************************************************************************* */
/* ******************************************************************************************************************************

   HINWEIS: "nicht kompatible Optionen" aus früheren Versionen wurden entfernt

   README
  
   about:config >
       widget.windows.overlay-scrollbars.enabled > false (Windows)
       widget.gtk.overlay-scrollbars.enabled > false (Linux)
   [!] The above preferences have to be set to 'false' for this code to work
 
  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen

  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
 
   Anpassungen vornehmen > Werte ändern
   - - Optionen aktivieren/deaktivieren: true <-> false
   - Farbe
     - Name: red, blue, transparent 
     - Hexcode: #33CCFF, #FFF
     - rgb(a): rgba(0,0,255,0.8)
     - hsl(a): hsla(240,100%,50%,0.8)
   - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
   - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
   - Farbverläufe: linear-gradient(direction, color, color, color)
   - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
   - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
   - keine Farbe oder keine Farbwerte -> verwende "unset"
 
*/

(function() {

  /* Profile path "calculate" **************************************************************************************************/

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

// GENERAL SCROLLBAR SETTINGS
 
  const custom_opacity_value = "1.0";             // default: custom_opacity_value = "1.0"

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_") 

  const custom_scrollbars = true;                       // default: custom_scrollbars = true
  const custom_scrollbar_arrows = false;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 0;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 80;                         // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 20;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars

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

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

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

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

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

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

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

    /* hover */

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

    `;

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

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

})()

Alles anzeigen

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

"use strict";


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


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


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


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


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


*/


(function() {




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


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


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


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


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








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


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


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


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


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


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


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


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


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


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




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


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




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


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






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




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








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




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




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


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




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


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




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




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


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


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


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


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


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


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


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




})();