Beiträge von Firefox_94.0.1

Firefox_94.0.1

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.

Firefox_94.0.1

Ich verwende folgenden Code für about:logins

CSS

/* 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;
}

}

Alles anzeigen

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?

Firefox_94.0.1

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).

Firefox_94.0.1

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.

Firefox_94.0.1

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...

Firefox_94.0.1

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:

CSS

/*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;
}


}

Alles anzeigen

Firefox_94.0.1

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...

Firefox_94.0.1

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

CSS

"use strict";


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


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


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


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


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


*/


(function() {




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


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




})();

Alles anzeigen

Die Einstellung

Code

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...

Firefox_94.0.1

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.

Firefox_94.0.1

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).

Firefox_94.0.1

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.

CSS

"use strict";


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


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


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


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


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


*/


(function() {




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


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




})();

Alles anzeigen

Wenn du mir jetzt noch helfen könntest, dass #2b2c86 als hover-Farbe funktioniert. Daran scheitere ich jetzt.

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

aber bei Skripten hört es bei mir auf.

Was hat denn die Bezeichnung einer Farbe mit Skripten zu tun
Da steht z.B.:
Code
 const cs_background_color = "#DDDDDD";       
Also die Farbe vom Hintergrund.
In diesem Fall Hellgrau.
Du musst doch nur dort die Farbe ändern, wo du eine andere möchtest.
Alles anzeigen

Wenns nur die Farbe wäre. Ich habe hier mal 2 Bilder angefügt. Auf dem oberen sieht man, wie ich den Balken früher hatte und unten, wie er jetzt mit dem neuen Skript ausschaut. Da ist nicht nur die Farbe geändert...

Ich brauche die Einstellung für:

- das Entfernen der Pfeile oben und unten

- die Rundung der Leistenenden

- der Breite der Leiste

- für die Farbe der Leiste (hier auch noch die hover-Einstellung).

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

keine so schönen Erklärungen

Ab Zeile 72 wird doch alles erklärt

Ich versteh das leider nicht. CSS und html kann ich so irgendwie noch, aber bei Skripten hört es bei mir auf...

Edit: Und wenn du das mit den Pfeilen meinst: Ich hatte beim alten Skript gar keine Pfeile eingestellt.

Firefox_94.0.1

Zitat von Mira_Belle

Zitat von Firefox_94.0.1

Ich brauche auch hilfe bei dem Scrollbar-Skript. Oben die Version mit meinen bisherigen Einstellungen, welche aber nicht mehr funktioniert, unten die aktuelle Version von GitHub, in welche meine Änderungen eingefügt werden müssten. Ich bekomme das irgendwie nicht hin.
...
Ich wäre echt froh, wenn mir jemand helfen könnte.

Was genau sind denn Deine Änderungen?

Und teste doch einmal dieses Skript:

JavaScript

// Scrollbar.uc.js

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

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

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

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

(function() {

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

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

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

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

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

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

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

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

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

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

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

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

    /* hover */

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

    `;

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

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

})()

Alles anzeigen

Ich habe im oberen Skript bei den Punkten unter "Allgemeine Einstellungen" die Werte / Farben so angepasst, dass es bei mir gepasst hat. Jetzt weiß ich nicht, wie ich diese in das neue Skript übernehmen kann, da sich teils die Bezeichnungen geändert haben und auch keine so schönen Erklärungen, für was die Einstellung jetzt genau ist, dabei stehen.

Das neue Skript funktioniert ja, aber der Scrollbalken ist halt nicht so schön angepasst, wie in der alten Version. Und eben diese Anpassungen möchte ich gerne im neuen Skript haben.

Firefox_94.0.1

Ich brauche auch hilfe bei dem Scrollbar-Skript. Oben die Version mit meinen bisherigen Einstellungen, welche aber nicht mehr funktioniert, unten die aktuelle Version von GitHub, in welche meine Änderungen eingefügt werden müssten. Ich bekomme das irgendwie nicht hin.

CSS

"use strict";




/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js */


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


README


Aktivieren einer Einstellung > var ... auf 'true' setzen
Deaktivieren einer Einstellung > var ... auf 'false' setzen
Anpassungen vornehmen > Aendern von Werten
- Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
- Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit
- Zahlen: 1, 2, 3 ... 10, 11, 12 ...
- Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
- Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
- Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))


- Beispiel 2:
Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)


Info
- Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!


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


// Allgemeine Einstellungen


// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 6; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "transparent"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "red"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "#2b2c86"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 80; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "tranparent"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 5; /* Standard = 0 (in px) */




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




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


var custom_scrollbars = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar, scrollcorner {\
-moz-appearance: none !important;\
background-color: '+cs_background_color+' !important; \
background-image: '+cs_background_image+' !important; \
}\
scrollbar thumb {\
-moz-appearance: none !important;\
background-color: '+cs_thumb_color+' !important;\
background-image: '+cs_thumb_image+' !important;\
border-radius: '+cs_thumb_roundness+'px !important;\
border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
}\
scrollbar thumb:hover, scrollbar thumb:active {\
-moz-appearance: none !important;\
background-color: '+cs_thumb_hover_color+' !important;\
background-image: '+cs_thumb_hover_image+' !important;\
}\
scrollbar scrollbarbutton {\
-moz-appearance: none !important;\
background-color: '+cs_buttons_color+' !important;\
background-image: '+cs_buttons_image+' !important;\
border-radius: '+cs_buttons_roundness+'px !important;\
}\
scrollbar scrollbarbutton:hover {\
-moz-appearance: none !important;\
background-color: '+cs_buttons_hover_color+' !important;\
background-image: '+cs_buttons_hover_image+' !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_buttons = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar scrollbarbutton {\
opacity: 0 !important;\
}\
scrollbar[orient="vertical"] scrollbarbutton {\
min-height: 1px !important;\
height: 1px !important;\
max-height: 1px !important;\
}\
scrollbar[orient="horizontal"] scrollbarbutton {\
min-width: 1px !important;\
width: 1px !important;\
max-width: 1px !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_width = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar[orient="vertical"] scrollbarbutton {\
min-width: 0 !important;\
width: '+custom_scrollbar_width_value+'px !important;\
max-width: '+custom_scrollbar_width_value+'px !important;\
}\
scrollbar[orient="horizontal"] scrollbarbutton {\
min-height: 0 !important;\
height: '+custom_scrollbar_width_value+'px !important;\
max-height: '+custom_scrollbar_width_value+'px !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var floating_scrollbars = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar {\
position: relative !important;\
z-index: 1000000000 !important;\
}\
scrollbar, scrollcorner {\
background-color: transparent !important; \
background-image: unset !important; \
}\
scrollbar[orient="vertical"] {\
-moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
width: '+custom_scrollbar_width_value+'px !important;\
}\
scrollbar[orient="horizontal"] {\
margin-top: -'+custom_scrollbar_width_value+'px !important;\
height: '+custom_scrollbar_width_value+'px !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var scrollbar_opacity = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar {\
opacity: '+custom_opacity_value+' !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


var remove_scrollbars = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
\
@namespace html url("http://www.w3.org/1999/xhtml");\
\
scrollbar, scrollcorner {\
display: none !important;\
visibility: collapse !important;\
}\
\
'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}
};


// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

CSS

"use strict";


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


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


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


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


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


*/


(function() {




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


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


// default: hide_scrollbar_buttons = false
const hide_scrollbar_buttons = false;


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


// default: custom_scrollbar_opacity = false
const custom_scrollbar_opacity = false;


// default: custom_opacity_value = "1.0"
const custom_opacity_value = "1.0";




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


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


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


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


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


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


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


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


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


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




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


// default: cs_background_color = "#DDDDDD"
const cs_background_color = "#DDDDDD";


// default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


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


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


// default: cs_thumb_color = "#33CCFF" / thumb/slider
const cs_thumb_color = "#33CCFF";


// default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_hover_color = "#66FFFF"
const cs_thumb_hover_color = "#66FFFF";


// default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_thumb_border_color = "#33CCFF"
const cs_thumb_border_color = "#33CCFF";


// default: cs_buttons_color = "#66FFFF" / buttons
const cs_buttons_color = "#66FFFF";


// default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_hover_color = "#33CCFF"
const cs_buttons_hover_color = "#33CCFF";


// default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";


// default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";


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




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


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




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




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


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


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


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


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


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


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


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




})();

Alles anzeigen

Ich wäre echt froh, wenn mir jemand helfen könnte.

Firefox_94.0.1

Zitat von 2002Andreas

Weil es in dem Popup auch 2 Menüs gibt.
Da, wo rechts ein kleiner Pfeil ist.

Hallo,

ich habe noch eine ergänzende Frage:

wie muss ich den Code anpassen, damit er auch bei den unterpunkten "Kürzlich geschlossene Fenster" und "Kürzlich geschlossene Tabs" funktioniert?

Firefox_94.0.1

Zitat von Max

Würde gerne nur das Icon des privaten Modus ändern.

Geht wie folgt: Erstelle eine Verknüpfung von "Firefox-Privater Modus" auf dem Desktop. Dann klickst du mit der rechten Maustaste auf dieses Icon und wählst Eigenschaften (evtl. im neuen Win 11 Startmenü unter "Erweitert" versteckt). In dem Fenster, welches sich nun öffnet, hast du den Button "anderes Symbol". Auf diesen klickst du und kannst nun in deinem normalen Dateiverzeichnis die gewünschte .ico Datei auswählen. Dann alles mit OK bestätigen. Nun hast du das geänderte Icon auf dem Desktop. Um es auch in der Taskleiste zu haben, muss du jetzt noch die Desktopverknüpfung zum anheften auf die Taskleiste ziehen und schon hast du dein Wunschicon für den Privaten Modus in der Taskleiste. Die Verknüpfung auf dem Desktop kannst du jetzt wieder löschen. Die wird nicht mehr benötigt.

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

die Hintergrundfarbe und die Schriftfarbe anpassen.

Teste bitte:
CSS
@-moz-document url-prefix("chrome://browser/content/places/bookmarkProperties/.xhtml") {

#bookmarkpropertiesdialog #editBookmarkPanelContent > input {
  background: red !important;
}

::selection {
background: red !important;
color: #fff !important;
}
}
Alles anzeigen

Funktioniert leider sowohl bei der Deaktivierung des restlichen css-codes als auch im leeren Testprofil leider nicht.

Firefox_94.0.1

Hallo,

ich meine das Fenster, dass sich wie folgt öffnent:

klick mit rechter Maustaste in Lesezeichenleiste > Ordner hinzufügen...

In dem Fenster gibt es die Leiste, in die man den Namen des neuen Ordners eingeben muss. Hier möchte ich gerne die Hintergrundfarbe und die Schriftfarbe anpassen.

Hier mein erfolgloser Versuch:

CSS

@-moz-document url-prefix("chrome://browser/content/places/bookmarkProperties/.xhtml") {


#bookmarkpropertiesdialog #editBookmarkPanelContent > input, #bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input, #bookmarkpropertiesdialog #editBMPanel_folderMenuList {
margin: 0;
color: #fff !important;
background-color: #00016e !important;
}


::selection {
background: red !important;
color: #fff !important;
}


}

Alles anzeigen

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

ich meine das gleiche Menü.

Eben nicht.
Du meinst dieses Popup:
Und nicht das aus der Menüleiste oben unter Chronik.
Man sollte schon ganz genau beschreiben was man wo will.
Teste bitte.
CSS
 #PanelUI-history .subviewbutton {
    max-height: 22px !important;
}
Alles anzeigen

Danke. Der passst.

Ich hatte einfach nicht auf dem Schirm, dass es in der Leiste ganz oben auch noch einen Reiter "Chronik" gibt (hab die immer eingeklappt).

Beiträge von Firefox_94.0.1

Buttons unter about:logins

Buttons unter about:logins

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Schriftgröße auf winfuture.de anpassen

Skript für benutzerdefinierte Scrollbar funktioniert nicht richtig

Skript für benutzerdefinierte Scrollbar funktioniert nicht richtig

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Firefox 113 Änderungen

Chronik-drop down Zeilengröße verkleinern

Privater Modus Icon und Theme änderbar?

Eingabefeld in Menüfenster für die Erstellung eines neuen Ordners in der Lesezeichenleiste anpassen

Eingabefeld in Menüfenster für die Erstellung eines neuen Ordners in der Lesezeichenleiste anpassen

Chronik-drop down Zeilengröße verkleinern