Addons-Manager anpassen

Dharkness

Meine Variante dazu sieht so ↓ aus, die Zählung geschieht vorne im jeweils gelisteten Add-on.

CSS

#main > addon-list:nth-child(1) > section > addon-card:nth-child(n+1) > div:nth-child(1) > div:nth-child(2)::before {
    font-size: 18px !important;
    color: yellow !important; /* Farbe nach Wahl anpassen. */
    font-weight: bold !important;
    counter-increment: section;
    content: counter(section, decimal-leading-zero)".) ";
    margin-left: -8px !important;
    padding-right: 8px !important;
    margin-top: 4px !important;
}

P.S.: In meinem primären Profil ist die Anpassung dafür noch deutlich aufwändiger, denn da sind die aktiven und inaktiven Add-ons deutlich unterschiedlich im Aussehen.

FuchsFan

Dharkness

Zitat von Dharkness

Meine Variante dazu sieht so ↓ aus, die Zählung geschieht vorne im jeweils gelisteten Add-on.

Danke, das funktioniert soweit auch, mit einer kleinen Einschränkung, denn unter Farbgebung gibt es keine Anzeige. Das klappt aber mit meiner Spielerei.

Zitat von Dharkness

P.S.: In meinem primären Profil ist die Anpassung dafür noch deutlich aufwändiger, denn da sind die aktiven und inaktiven Add-ons deutlich unterschiedlich im Aussehen.

Ja, ist mir bekannt, weil ich das auch nutze.

Dharkness

Zitat von FuchsFan

denn unter Farbgebung gibt es keine Anzeige

Das ist hier bei mir ja auch so gewollt.

Ich würde das dann auch wieder separat anpassen ↓, denn die Farben müssen dem Part ja auch wieder angepasst werden.

CSS

.monochromatic-addon-list > section > addon-card > div > div > div > div:nth-child(1) .addon-name-link:before {
    font-weight: bold !important;
    text-decoration: underline !important;
    counter-increment: section;
    content: counter(section, decimal-leading-zero)".";
    border: 2px solid #0082FC !important;
    color: #C72F2E !important;
    padding: 2px 5px !important;
    margin-top: 0px !important;
}

FuchsFan

Zitat von Dharkness

Ich würde das dann auch wieder separat anpassen ↓, denn die Farben müssen dem Part ja auch wieder angepasst werden.

Das gibt Ärger, denn der Titel wird dann doppelt angezeigt.

Zitat von Dharkness

Das ist hier bei mir ja auch so gewollt.

Du hast mich überzeugt, was soll es da auch. Gut, dass wir darüber sprechen, ich habe nämlich dadurch gemerkt, mit meinem Code werden die beiden Button (Aktivieren/ Dreipunkte) auch nicht mehr angezeigt. Nicht gut!

Nun versuche ich schon Farbgebungen da raus zu nehmen, aber das will einfach nicht gelingen. Kannst du bitte mal meinen Code-Schnipsel begutachten, eventuell lässt sich da was machen.

Edit:

Jetzt habe ich doch noch eine Möglichkeit gefunden, Code hier RE: Addons-Manager anpassen geändert.

Dharkness

Zitat von FuchsFan

Das gibt Ärger, denn der Titel wird dann doppelt angezeigt.

Hm, hier nicht.

Heinrich

Hi

Wie bekommt man in about:addons die Butten wieder nebeneinander

War in Version 96 noch so und ist nun in 97 untereinander.

Ich verwende den Code der about:addons von hier aus dem Forum !

Ich bitte mal um Hilfe !

Mira_Belle

Zitat von Heinrich

Ich verwende den Code der about:addons von hier aus dem Forum !
Ich bitte mal um Hilfe !

Servus.

Auch wenn Du den Code von "hier" verwendest, wäre es doch von Vorteil,

wenn Du "Deinen" Code hier einstellen könntest.

Es gibt hier mehrere Versionen von Code für about:addons.

Von daher, so denke ich, kann es schwer werden.

Gruß

Mira

Heinrich

CSS

/**** Anordnung der Button rechte Seite ****/         
div.arrow.top + div.list {      
display: flex !important;      
flex-flow: row wrap !important;      
justify-content: flex-start !important;   
 }

Mit diesem Code hat es bis zur Version 96.0.3 noch funktioniert !

Mira_Belle

Mh, jetzt bin ich leider auch nicht so fitt in CSS,

aber was mich etwas irritiert ist das div !

Ich ruf mal um Hilfe.

Andreas, Hilfe, bitte.

Gruß

Mira

Sören Hentzschel

Wenn es sich bei dem Element um ein div handelt, kann man auch explizit ein div ansprechen. Allerdings kann das unmöglich der vollständige Code sein, denn nur mit den paar Zeilen CSS wird das Dreipunkte-Menü nicht durch Buttons ersetzt.

Heinrich

Hier dann mal mehr davon !

CSS

/*============ Button (Felder) auf der rechten Seite ==============*/


/* <some> locales require adjustments */
html[lang="de"] {
--addon-page-options-width: 370px;
}


/* Anpasung der rechten Button */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
.addon.card panel-item:not([badged]){
border: 2px solid grey !important; /* Umrandung */
border-radius: 25px !important; /* Ecken abgerundet */
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid white !important;
}


:-moz-any(addon-list,panel-list) panel-item{
margin: 0 5px !important; /* Abstand zwischen den Button */
}


/* reduce size of default buttons */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 2px 20px !important; /* Ausdehnung der Button */
}


/* entfernt den Dreipunkte-Button*/ 
addon-card .more-options-button {
display: none !important;
}


/* remove button icon (z.B. Papierkorb)*/
:host([checked]),
panel-item[checked],
:-moz-any(addon-list,panel-list) panel-item {
--icon: unset !important;
} 
/* ordnet die Button horizontal an */ 
div.arrow.top + div.list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
}

/*========== zusätzliche Anpassungen für die Button ===========*/


/* blendet den Hintergrund aus / auch bei Hover */
/* Wirkung auch auf erste Zeile des Menü hinter dem Zahnrad */
panel-list > panel-item,
panel-list > panel-item:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* Button Einstellungen */
panel-item[action="preferences"] {
order: -1;
}


/* Button Einstellungen bei Hover */
panel-item[action="preferences"]:hover {
order: -1;
background: #008000 !important;
color: white !important;
}

/* Button Entfernen bei Hover */
panel-item[action="remove"]:hover{
background: red !important;
color: white !important;
}


/* Button Melden bei Hover */
panel-item[action="report"]:hover{
color: white !important;
background: #8a2be2 !important;
}


/* Button Verwalten bei Hover */
panel-item[action="expand"]:hover {
color: white !important;
background: blue /* #008000 */ !important;
}


/* Button -Immer aktivieren- bei Hover */
panel-item[action="always-activate"]:hover {
background: #6f00ff !important;
color: white !important;
}


/* Button -Nie aktivieren- bei Hover */
panel-item[action="never-activate"]:hover {
background: red !important;
color: white !important;
}


/* Addons - Button Aktualisieren */
panel-item[badged] {
background: yellow !important;
border: 2px solid red !important;
/* border-radius: 20px !important; */
box-shadow: inset 0 0 2px 2px grey !important; /* innerer Schatten */
}


/* Button Aktualisieren bei Hover */
panel-item[badged]:hover {
background: lime !important;
}


/* blendet den Hintergrund Verfügbare Updates aus / auch bei Hover */
#updates-message,
#updates-message:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* Button Verfügbare Updates anzeigen */
#updates-message{
background: gainsboro !important;
color: blue !important;
border: 2px solid grey !important;
padding-right: 15px !important;
padding-left: 15px !important;
}


/* Button Verfügbare Updates anzeigen bei Hover */
#updates-message:hover{
background: blue !important;
color: white !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
border: 2px solid dodgerblue !important;
}


/* rechte Button Lage und Ausblendungen */
addon-card panel-list {
position: relative !important;
display: flex !important;
overflow: hidden !important;
background: unset !important;
border: unset !important;
box-shadow: unset !important;
min-width: unset !important;
width: unset !important;
float: right !important;
right: 36px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
}


/* Button vertikal verlagern */
addon-card panel-list {
margin-top: -50px !important;
}


/* Abstand der Button vom rechten Rand bei Plugins und Wörterbücher */
addon-list:-moz-any([type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
right: 5px !important;
}


/* Abstand der Button vom rechten Rand bei Themes */
addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
right: 55px !important;
margin-top: -75px !important; /* Abstand vom oberen Rand */
}






/*======= Button Aktivieren/Deaktivieren bei Themes ==========*/


/* blendet den Hintergrund aus / auch bei Hover */
addon-card .addon.card[active="true"] .theme-enable-button,
addon-card .addon.card[active="true"] .theme-enable-button:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* bei aktivem Theme */
addon-card .addon.card[active="true"] .theme-enable-button {
background: #03c03c !important;
color: white !important;
margin-right: 450px !important;
margin-top: 3px !important;
height: 25px !important;
padding-left: 15px !important;
padding-right: 15px !important;
border: 2px solid red !important;
border-radius: 50px !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


/* bei inaktivem Theme */
addon-card .addon.card[active="false"] .theme-enable-button {
background: lightblue !important;
margin-right: 450px !important;
margin-top: 3px !important;
height: 25px !important;
padding-left: 15px !important;
padding-right: 15px !important;
border: 2px solid grey !important;
border-radius: 50px !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-card:hover .addon.card[active="true"] .theme-enable-button {
background: red !important;
color: white !important;
/* border: 2px solid green !important */
}


addon-card:hover .addon.card[active="false"] .theme-enable-button {
background: #03c03c !important;
color: white !important;
border: 2px solid red !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
cursor: pointer !important;
opacity: 1.0 !important;
filter: brightness(2.00) !important;
}


addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
background: Highlight !important;
}


addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
background: red !important;
}


addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
background: green !important;
color: blue !important;
}


/* Abstand Button Aktivieren/Deaktivieren vom rechten Rand */
addon-card .addon.card .theme-enable-button,
input[type="checkbox"].toggle-button {
-moz-margin-end: 450px !important;
}
}


@supports -moz-bool-pref("browser.in-content.dark-mode"){
@media (prefers-color-scheme: dark) {
addon-list addon-card panel-list *,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: black !important;
color: white !important;
}





}

Alles anzeigen

2002Andreas

Zitat von Heinrich

Mit diesem Code hat es bis zur Version 96.0.3 noch funktioniert !

Das sieht hier so mit deinem Code aus:

Also hat es auch in der alten Version schon nicht mehr richtig funktioniert

Gedulde dich bitte etwas, evtl. nutzen ja andere User auch einen Code dafür, und können dir dann den passenden dafür geben.

Heinrich

Ich habe das in mehreren Versionen getestet !

In allen Versionen vor 97 hat das geklappt mit

CSS

/**** Anordnung der Button rechte Seite ****/         
div.arrow.top + div.list {      
display: flex !important;      
flex-flow: row wrap !important;      
justify-content: flex-start !important;   
 }

Wenn ich diesen Teil auskommentiert hatte wurde es so wie auf deinem Bild dargestellt

2002Andreas

Zitat von Heinrich

In allen Versionen vor 97 hat das geklappt mit

Bei mir weder in Fx 96 noch ESR 91

Fx 96:

ESR 91:

Heinrich

Bei mir hat es durchgehend funktioniert schon seit den 80er Versionen.

Nach dem Update auf die 97 trat der Fehler auf !!

Innerhalb dieses Themas wird mehrfach ähnlicher Code verwendet, keiner davon stellt laut aktuellem Test bei mir die Butten nebeneinander dar, warum auch immer !

Boersenfeger

Vielleicht haben andere verwendete Codes darauf Einfluß. Welche sind denn noch aktiv?

Zum Vergleich hier mal mein kompletter Code für about:addons, vielleicht kannst du davon etwas verwenden!?

CSS

/*  Addons-Manager Nightly */

/*  Versionsnummer der Addons wird angezeigt */

     @-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
    url-prefix(chrome://mozapps/content/extensions/extensions.xhtml), url-prefix(about:addons) {
        
    div:not([current-view="updates"]) .addon-name-link[title]::after,
    div:not([current-view="updates"]) .addon-name[title]::after {
    display: block !important;
    content: attr(title) !important;
    margin-top: -22px !important;
    }

/*  Hintergrund der Button auf der rechten Seite */

    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: antiquewhite !important;
      color: black !important;
      font-weight: bold !important;
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") 
     @media (prefers-color-scheme: dark) 
     addon-list addon-card:not([expanded="true"]) panel-list *,
     .more-options-menu panel-item {
     background: black !important;
     color: white !important;
    
    }
    
    
    addon-list panel-item {
      margin: 0 1px !important;
      box-shadow: inset 0 0 3px 3px grey;
    }
    
   
/*  Reduce Size of default Buttons */

    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 10px 24px !important; /* 5px ist die Höhe der rechten Button */
     
    }
    
/*  Entfernt den Drei-Punkte-Button aus dem Container */

    addon-card .more-options-button {
      display: none !important;
    }

/*  Remove Button Icon */

    addon-list panel-item {
      --icon: unset !important;
    
    }
    
/*  Restore Buttons */
    
    addon-list .more-options-menu :is(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;     
    }

    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }

    panel-item[action="preferences"] {
      order: -1;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    panel-item[badged]::after,
    :host([badged]) button::after,
    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :is(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }
    
    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 300px !important;
      z-index: 1000 !important;      
    }
    
    addon-page-options panel-list panel-item {
      min-width: 280px !important;
      width: 280px !important;     
    }
    
    .sticky-container {
      z-index: 1000 !important;
    }
    
    link:-is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-inline-start: 0px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 260px !important;
      width: 260px !important;      
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
        
    addon-list addon-card:not([expanded="true"]) panel-list {     
      display: block !important;   
      box-shadow: none !important; 
      border: none !important;
      right: 45px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */     
    }

/*  Abstand zwischen den Containern */  
    
    addon-card .addon { 
    margin: 5px !important; 
    }

/*  Höhe der Container */
    
    addon-list[type="extension"]{ 
    --card-padding: 19px }
    addon-card .addon-card-collapsed { 
    margin-bottom: 2px !important; /* Button rechts Abstand vom oberen Rand */   
    }    

/*  Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw.*/
    
    addon-list:is([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
    right: 55px !important; 
    
    }

/*  Abstand der Button vom oberen Rand bei Plugins, Wörterbücher, usw. */
    
    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -60px !important;
    }

/*  Abstand der Button vom oberen Rand bei Themes */
    
    addon-list:is([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -60px !important;
      margin-left: -100px !important;
    }

/*  Ausdehnung der Container zum rechten Rand */    

    .addon.card {
    width: 1560px;
    }

    input[type="checkbox"].toggle-button {
      margin-right: 430px !important; /* blauer Button -Deaktivieren/Aktivieren- Abstand vom rechten Rand */
    }
    
/*  Nummerierung der installierten Erweiterungen im AddonsManager */

    body {
    counter-reset: section !important;                   
    }
    #main > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+1) > div:nth-child(1) > div:nth-child(2)::before {
    font-size:18px!important;  
    color: red !important;
    font-weight: bold !important;
    counter-increment: section;                 
    content: counter(section, decimal-leading-zero)". ";
    margin-left: -8px !important;
    padding-right: 8px !important; 
    margin-top:4px!important;
    }
    
/*  Abstand der Button zum linken Rand */
    
    #categories > .category, #preferencesButton, #helpButton, #addonsButton {
      margin-left: 5px !important; 
    }

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 2px !important; /*Abstand zum Button darüber*/
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 5px 5px #888;
    }
    
/*  Aktiver Button rot, Schrift weiß */
    
    #categories > .category[selected]{
      color: white !important;
      background-color: red !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }

/*  Hintergrund der Button blau, Schrift weiß bei hover mit der Maus */
    
    #categories > .category:hover, #preferencesButton:hover, #helpButton:hover, #addonsButton:hover {
      color: white !important;
      background-color: blue !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888;      
    }
        
/*  Optionen-Button */

    button.more-options-button:nth-child(1) {

    position: absolute !important;
    left: 19% !important;
    margin-top: -10px !important;
    }

/*  Bei "Themes" die Grafiken ausblenden */
    
    .card-heading-image {
    display: none !important;
    }
      
    
/*  Erweiterungssuche ausblenden */

    .main-search {
    display: none !important;
    }
    
/*  Ausblenden Firefox Optionen */

    #preferencesButton,
    #help-button {
    display: none !important;
}
    
/*  Kategorien in abgerundeten Buttons */

    #preferencesButton,
    #addonsButton,
    #helpButton,
    #category-availableUpdates {
    background-color: red !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }    

/*  Add-ons entdecken entfernt */

    .category[name="discover"] {
    display:none!important;
    }
    
/*  Privatmodus und empfohlene Erweiterungen Icons entfernen */

    .addon-badge-recommended,
    .addon-badge-private-browsing-allowed {
    display:none !important; 
    }


/*  Umrandung bei Hover breiter Rand und andere Farbe */

    :root {
    --card-outline-color: LimeGreen !important;
    }
    
    @-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
    url-prefix(about:addons) {

   #sidebar {
    background: darkkhaki !important;
    }
    
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
    background: blanchedalmond !important;
    font-size: 15px !important;
    }
    richlistbox.list > richlistitem.addon {
    background:white!important;
    margin-left:-20px !important;
    margin-top:  7px !important;
    }
    #list-view > #addon-list .description-container {
    margin-left: 350px !important;
    margin-top: -10px !important;
    border-radius:60px !important;
    padding: 5px 8px 2px 7px !important; 
    }    
    #list-view > #addon-list .addon.addon-view {
    padding: 5px 80px 2px 7px !important;
    border-radius:60px !important;
    }

/*    Kategorien nicht angeklickt, Text dunkelrot */

    *|*.category {
    color:darkred!important;
    }

/*    Kategorien hover Hintergrund + Schrift */

    *|*.category:hover {
    color:white!important;
    background:red!important;
    }

/*   Einstellungen-Fenster verbreitern */
    
    @-moz-document url-prefix(aboutpreferences){
    .pane-container{
    width: 900px !important;
    }                      
    
/*   Unter Plugins Nachfragen ob aktiviert werden soll entfernt */

    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(5) > panel-list:nth-child(1) > panel-item:nth-child(1),
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(5) > panel-list:nth-child(1) > panel-item:nth-child(1) {
    display: none !important;
    }
    
/*    Button mit dem Zahnrad */

    .page-options-menu > .more-options-button {
      fill: red !important; /* rotes Zahnrad */ 
      border: 1px solid grey !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 60px !important; /* Länge des Button */
      height: 30px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
    } 
    
/*   Button oben mit dem Zahnrad bei Hover */

    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/*   Aussehen des Menü hinter dem Zahnrad */

    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      margin-left: 6% ! important;
      min-width: 350px !important;
      width: 375px !important; /* Länge der einzelnen Felder */
      background: white ! important; /* Farbe des Hintergrundes */
    }
    
    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
    }  
    .sticky-container {
      z-index: 1000 !important;
    }

     button:focus {
     background: none !important;
 }
 
    addon-page-options panel-list panel-item {
      width: 425px !important; /* Länge der aktivierten Menü-Leiste */
      background: none ! important;
      padding-right: 15px !important;
    }
    
    addon-page-options panel-list panel-item:hover {
      width: 425px !important; 
      background: lime ! important;
      color: red !important;
    }    

    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 450px !important; /* Ausdehnung der Felder nach rechts */ 
      background: #f8f8ff ! important; /* farbiger Hintergrund des Feldes */
      padding-left: 8px !important; /* Ausdehnung nach links */
      padding-right: 3px !important; /* Ausdehnung nach rechts */
      z-index: 1000 !important;
    }
    
/*  Hintergrund der Box Updates automatisch aktualisieren */
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: gold !important;
    }           
    
/*  Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
    .back-button {
      background-color: silver !important;/*Hintergrundfarbe vom Button*/
      width: 60px !important;
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 3px 3px #888;
    }
    
    .back-button:hover {
      color: white !important;
      background-color: dodgerblue !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 3px 3px #888;
    }    

/*  Icons des Stern-Kontextmenü */

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild5.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild61.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}
 
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
      content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild3.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild66.ico") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
     fill: transparent !important;}
     
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild62.png") no-repeat !important;
     background-size: 18px 18px !important;
     margin-left: 16px;
     margin-right: -32px;
     margin-bottom: 3px;}
    
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
     content: '';
     font-size: 14px;
     padding-left: 0px !important;
     padding-top: 1px !important;
     padding-bottom: 2px !important;
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild63.png") no-repeat !important;
     background-size: 18px 18px !important;
     margin-left: 15px;
     margin-right: -32px;
     margin-bottom: 3px;}
    
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild64.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild67.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}    
     }
     
/*        About:addons  - Optionen Schaltfläche */
    
    @-moz-document url("about:addons"){
    
    #utils-updateNow{
    appearance: none !important;
    background: url("..//icons/Bild5.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-updateNow:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild5.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-viewUpdates{
    appearance: none !important;
    background: url("..//icons/Bild61.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-viewUpdates:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild61.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-installFromFile{
    appearance: none !important;
    background: url("..//icons/Bild3.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-installFromFile:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild3.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="true"]>.menu-iconic-left{
    appearance: none !important;
    background: url("..//icons/Bild62.png")no-repeat !important;
    height:15px!important;
    padding-top:1px!important;
    margin-left:5px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="true"]>.menu-iconic-text {
    padding-left: 12px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="false"]>.menu-iconic-left{
    appearance: none !important;
    background: url("..//icons/Bild63.png")no-repeat !important;
    height:15px!important;
    padding-top:1px!important;
    margin-left:7px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="false"]>.menu-iconic-text{
    padding-left: 10px !important;}

    #utils-resetAddonUpdatesToAutomatic{
    appearance: none !important;
    background: url("..//icons/Bild64.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToAutomatic:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild64.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToManual{
    appearance: none !important;
    background: url("..//icons/Bild65.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToManual:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild65.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}    

    #utils-debugAddons{
    appearance: none !important;
    background: url("..//icons/Bild66.ico") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-debugAddons:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild66.ico") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}    

    #manage-shortcuts{
    appearance: none !important;
    background: url("..//icons/Bild67.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #manage-shortcuts:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild67.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}
    
    #empty-addons-message {
    display: none !important;
    }
    }

Alles anzeigen

Heinrich

Es hat ja vorher immer funktioniert mit all den anderen Änderungen und erst seit dem Update nicht mehr !

In deiner Abbildung sind die Butten ja auch untereinander und nicht nebeneinander !

Boersenfeger

Zitat von Heinrich

Es hat ja vorher immer funktioniert mit all den anderen Änderungen und erst seit dem Update nicht mehr !

Da dein Code bei 2002Andreas auch mit vorherigen Versionen nicht funktioniert, liegt der Verdacht nahe, und ich wiederhole mich hier, das du noch weitere Codes verwendest, die es bisher möglich machten, nun aber ggf. nach dem UpDate nicht mehr. Dann muss also Hand angelegt werden. Du solltest alle anderen Codes zunächst mal entfernen und testest dann nach einem Firefoxneustart, ob es bei dir funktioniert. Das Beharren auf deiner Aussage bringt dich nicht weiter.

BTW: Mein Code war eine Draufgabe und kein Lösungsvorschlag..

Heinrich

Ich habe gerade mal alles andere komplett entfernt und nur noch die geänderte about:addons gelassen und es ist immer noch UNTEREINANDER

Ich habe zum Gegentest mal eine 96 komplett neu installiert und siehe da es funktioniert NEBENEINANDER

Ich habe nun noch Deinen Code aus Beitrag 96 in eine 96 er eigefügt , Ergebnis NEBENEINANDER

in der 97 wie auf deinem Bild ja auch zu sehen UNTEREINANDER

Dein Code in Version Firefox 96

Dein Code in Version Firefox 97

und das völlig egal ob mein kompletter anderer Code noch vorhanden ist oder nicht

2002Andreas

Zitat von Heinrich

Ergebnis NEBENEINANDER

Teste bitte mal, Abstände etc. musst/kannst du dir ja noch anpassen wenn nötig:

CSS

    /*============ Button (Felder) auf der rechten Seite ==============*/


/* <some> locales require adjustments */
html[lang="de"] {
--addon-page-options-width: 370px;
}


/* Anpasung der rechten Button */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
.addon.card panel-item:not([badged]){
border: 2px solid grey !important; /* Umrandung */
border-radius: 25px !important; /* Ecken abgerundet */
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid white !important;
}


:-moz-any(addon-list,panel-list) panel-item{
margin: 0 5px !important; /* Abstand zwischen den Button */
}


/* reduce size of default buttons */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 2px 20px !important; /* Ausdehnung der Button */
}


/* entfernt den Dreipunkte-Button*/ 
addon-card .more-options-button {
display: none !important;
}


/* remove button icon (z.B. Papierkorb)*/
:host([checked]),
panel-item[checked],
:-moz-any(addon-list,panel-list) panel-item {
--icon: unset !important;
} 

/* ordnet die Button horizontal an */ 
/* div.arrow.top + div.list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
} */

div[role="presentation"].list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
}

/*========== zusätzliche Anpassungen für die Button ===========*/


/* blendet den Hintergrund aus / auch bei Hover */
/* Wirkung auch auf erste Zeile des Menü hinter dem Zahnrad */
panel-list > panel-item,
panel-list > panel-item:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* Button Einstellungen */
panel-item[action="preferences"] {
order: -1;
}


/* Button Einstellungen bei Hover */
panel-item[action="preferences"]:hover {
order: -1;
background: #008000 !important;
color: white !important;
}

/* Button Entfernen bei Hover */
panel-item[action="remove"]:hover{
background: red !important;
color: white !important;
}


/* Button Melden bei Hover */
panel-item[action="report"]:hover{
color: white !important;
background: #8a2be2 !important;
}


/* Button Verwalten bei Hover */
panel-item[action="expand"]:hover {
color: white !important;
background: blue /* #008000 */ !important;
}


/* Button -Immer aktivieren- bei Hover */
panel-item[action="always-activate"]:hover {
background: #6f00ff !important;
color: white !important;
}


/* Button -Nie aktivieren- bei Hover */
panel-item[action="never-activate"]:hover {
background: red !important;
color: white !important;
}


/* Addons - Button Aktualisieren */
panel-item[badged] {
background: yellow !important;
border: 2px solid red !important;
/* border-radius: 20px !important; */
box-shadow: inset 0 0 2px 2px grey !important; /* innerer Schatten */
}


/* Button Aktualisieren bei Hover */
panel-item[badged]:hover {
background: lime !important;
}


/* blendet den Hintergrund Verfügbare Updates aus / auch bei Hover */
#updates-message,
#updates-message:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* Button Verfügbare Updates anzeigen */
#updates-message{
background: gainsboro !important;
color: blue !important;
border: 2px solid grey !important;
padding-right: 15px !important;
padding-left: 15px !important;
}


/* Button Verfügbare Updates anzeigen bei Hover */
#updates-message:hover{
background: blue !important;
color: white !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
border: 2px solid dodgerblue !important;
}


/* rechte Button Lage und Ausblendungen */
addon-card panel-list {
position: relative !important;
display: flex !important;
overflow: hidden !important;
background: unset !important;
border: unset !important;
box-shadow: unset !important;
min-width: unset !important;
width: unset !important;
float: right !important;
right: 36px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
}


/* Button vertikal verlagern */
addon-card panel-list {
margin-top: -50px !important;
}


/* Abstand der Button vom rechten Rand bei Plugins und Wörterbücher */
addon-list:-moz-any([type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
right: 5px !important;
}


/* Abstand der Button vom rechten Rand bei Themes */
addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
right: 55px !important;
margin-top: -75px !important; /* Abstand vom oberen Rand */
}






/*======= Button Aktivieren/Deaktivieren bei Themes ==========*/


/* blendet den Hintergrund aus / auch bei Hover */
addon-card .addon.card[active="true"] .theme-enable-button,
addon-card .addon.card[active="true"] .theme-enable-button:hover {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
}


/* bei aktivem Theme */
addon-card .addon.card[active="true"] .theme-enable-button {
background: #03c03c !important;
color: white !important;
margin-right: 450px !important;
margin-top: 3px !important;
height: 25px !important;
padding-left: 15px !important;
padding-right: 15px !important;
border: 2px solid red !important;
border-radius: 50px !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


/* bei inaktivem Theme */
addon-card .addon.card[active="false"] .theme-enable-button {
background: lightblue !important;
margin-right: 450px !important;
margin-top: 3px !important;
height: 25px !important;
padding-left: 15px !important;
padding-right: 15px !important;
border: 2px solid grey !important;
border-radius: 50px !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-card:hover .addon.card[active="true"] .theme-enable-button {
background: red !important;
color: white !important;
/* border: 2px solid green !important */
}


addon-card:hover .addon.card[active="false"] .theme-enable-button {
background: #03c03c !important;
color: white !important;
border: 2px solid red !important;
box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
}


addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
cursor: pointer !important;
opacity: 1.0 !important;
filter: brightness(2.00) !important;
}


addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
background: Highlight !important;
}


addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
background: red !important;
}


addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
background: green !important;
color: blue !important;
}


/* Abstand Button Aktivieren/Deaktivieren vom rechten Rand */
addon-card .addon.card .theme-enable-button,
input[type="checkbox"].toggle-button {
-moz-margin-end: 450px !important;
}
}


@supports -moz-bool-pref("browser.in-content.dark-mode"){
@media (prefers-color-scheme: dark) {
addon-list addon-card panel-list *,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: black !important;
color: white !important;
}
}

Alles anzeigen

Zitat von Boersenfeger

hier mal mein kompletter Code für about:addons

Wenn du magst, dann teste bitte auch:

CSS

    /*  Addons-Manager Nightly */

/*  Versionsnummer der Addons wird angezeigt */

     @-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
    url-prefix(chrome://mozapps/content/extensions/extensions.xhtml), url-prefix(about:addons) {
        
    div:not([current-view="updates"]) .addon-name-link[title]::after,
    div:not([current-view="updates"]) .addon-name[title]::after {
    display: block !important;
    content: attr(title) !important;
    margin-top: -22px !important;
    }

/*  Hintergrund der Button auf der rechten Seite */

    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: antiquewhite !important;
      color: black !important;
      font-weight: bold !important;
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") 
     @media (prefers-color-scheme: dark) 
     addon-list addon-card:not([expanded="true"]) panel-list *,
     .more-options-menu panel-item {
     background: black !important;
     color: white !important;
    
    }
    
    
    addon-list panel-item {
      margin: 0 1px !important;
      box-shadow: inset 0 0 3px 3px grey;
    }
    
   
/*  Reduce Size of default Buttons */

    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 10px 24px !important; /* 5px ist die Höhe der rechten Button */
     
    }
    
/*  Entfernt den Drei-Punkte-Button aus dem Container */

    addon-card .more-options-button {
      display: none !important;
    }

/*  Remove Button Icon */

    addon-list panel-item {
      --icon: unset !important;
    
    }
    
/*  Restore Buttons */
    
    addon-list .more-options-menu :is(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;     
    }

/*     div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    } */
    
     div[role="presentation"].list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }

    panel-item[action="preferences"] {
      order: -1;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    panel-item[badged]::after,
    :host([badged]) button::after,
    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :is(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }
    
    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 300px !important;
      z-index: 1000 !important;      
    }
    
    addon-page-options panel-list panel-item {
      min-width: 280px !important;
      width: 280px !important;     
    }
    
    .sticky-container {
      z-index: 1000 !important;
    }
    
    link:-is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-inline-start: 0px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 260px !important;
      width: 260px !important;      
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
        
    addon-list addon-card:not([expanded="true"]) panel-list {     
      display: block !important;   
      box-shadow: none !important; 
      border: none !important;
      right: 45px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */     
    }

/*  Abstand zwischen den Containern */  
    
    addon-card .addon { 
    margin: 5px !important; 
    }

/*  Höhe der Container */
    
    addon-list[type="extension"]{ 
    --card-padding: 19px }
    addon-card .addon-card-collapsed { 
    margin-bottom: 2px !important; /* Button rechts Abstand vom oberen Rand */   
    }    

/*  Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw.*/
    
    addon-list:is([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
    right: 55px !important; 
    
    }

/*  Abstand der Button vom oberen Rand bei Plugins, Wörterbücher, usw. */
    
    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -60px !important;
    }

/*  Abstand der Button vom oberen Rand bei Themes */
    
    addon-list:is([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -60px !important;
      margin-left: -100px !important;
    }

/*  Ausdehnung der Container zum rechten Rand */    

    .addon.card {
    width: 1560px;
    }

    input[type="checkbox"].toggle-button {
      margin-right: 430px !important; /* blauer Button -Deaktivieren/Aktivieren- Abstand vom rechten Rand */
    }
    
/*  Nummerierung der installierten Erweiterungen im AddonsManager */

    body {
    counter-reset: section !important;                   
    }
    #main > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+1) > div:nth-child(1) > div:nth-child(2)::before {
    font-size:18px!important;  
    color: red !important;
    font-weight: bold !important;
    counter-increment: section;                 
    content: counter(section, decimal-leading-zero)". ";
    margin-left: -8px !important;
    padding-right: 8px !important; 
    margin-top:4px!important;
    }
    
/*  Abstand der Button zum linken Rand */
    
    #categories > .category, #preferencesButton, #helpButton, #addonsButton {
      margin-left: 5px !important; 
    }

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 2px !important; /*Abstand zum Button darüber*/
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 5px 5px #888;
    }
    
/*  Aktiver Button rot, Schrift weiß */
    
    #categories > .category[selected]{
      color: white !important;
      background-color: red !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }

/*  Hintergrund der Button blau, Schrift weiß bei hover mit der Maus */
    
    #categories > .category:hover, #preferencesButton:hover, #helpButton:hover, #addonsButton:hover {
      color: white !important;
      background-color: blue !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888;      
    }
        
/*  Optionen-Button */

    button.more-options-button:nth-child(1) {

    position: absolute !important;
    left: 19% !important;
    margin-top: -10px !important;
    }

/*  Bei "Themes" die Grafiken ausblenden */
    
    .card-heading-image {
    display: none !important;
    }
      
    
/*  Erweiterungssuche ausblenden */

    .main-search {
    display: none !important;
    }
    
/*  Ausblenden Firefox Optionen */

    #preferencesButton,
    #help-button {
    display: none !important;
}
    
/*  Kategorien in abgerundeten Buttons */

    #preferencesButton,
    #addonsButton,
    #helpButton,
    #category-availableUpdates {
    background-color: red !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }    

/*  Add-ons entdecken entfernt */

    .category[name="discover"] {
    display:none!important;
    }
    
/*  Privatmodus und empfohlene Erweiterungen Icons entfernen */

    .addon-badge-recommended,
    .addon-badge-private-browsing-allowed {
    display:none !important; 
    }


/*  Umrandung bei Hover breiter Rand und andere Farbe */

    :root {
    --card-outline-color: LimeGreen !important;
    }
    
    @-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
    url-prefix(about:addons) {

   #sidebar {
    background: darkkhaki !important;
    }
    
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
    background: blanchedalmond !important;
    font-size: 15px !important;
    }
    richlistbox.list > richlistitem.addon {
    background:white!important;
    margin-left:-20px !important;
    margin-top:  7px !important;
    }
    #list-view > #addon-list .description-container {
    margin-left: 350px !important;
    margin-top: -10px !important;
    border-radius:60px !important;
    padding: 5px 8px 2px 7px !important; 
    }    
    #list-view > #addon-list .addon.addon-view {
    padding: 5px 80px 2px 7px !important;
    border-radius:60px !important;
    }

/*    Kategorien nicht angeklickt, Text dunkelrot */

    *|*.category {
    color:darkred!important;
    }

/*    Kategorien hover Hintergrund + Schrift */

    *|*.category:hover {
    color:white!important;
    background:red!important;
    }

/*   Einstellungen-Fenster verbreitern */
    
    @-moz-document url-prefix(aboutpreferences){
    .pane-container{
    width: 900px !important;
    }                      
    
/*   Unter Plugins Nachfragen ob aktiviert werden soll entfernt */

    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(5) > panel-list:nth-child(1) > panel-item:nth-child(1),
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(5) > panel-list:nth-child(1) > panel-item:nth-child(1) {
    display: none !important;
    }
    
/*    Button mit dem Zahnrad */

    .page-options-menu > .more-options-button {
      fill: red !important; /* rotes Zahnrad */ 
      border: 1px solid grey !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 60px !important; /* Länge des Button */
      height: 30px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
    } 
    
/*   Button oben mit dem Zahnrad bei Hover */

    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/*   Aussehen des Menü hinter dem Zahnrad */

    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      margin-left: 6% ! important;
      min-width: 350px !important;
      width: 375px !important; /* Länge der einzelnen Felder */
      background: white ! important; /* Farbe des Hintergrundes */
    }
    
    link:is([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
    }  
    .sticky-container {
      z-index: 1000 !important;
    }

     button:focus {
     background: none !important;
 }
 
    addon-page-options panel-list panel-item {
      width: 425px !important; /* Länge der aktivierten Menü-Leiste */
      background: none ! important;
      padding-right: 15px !important;
    }
    
    addon-page-options panel-list panel-item:hover {
      width: 425px !important; 
      background: lime ! important;
      color: red !important;
    }    

    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 450px !important; /* Ausdehnung der Felder nach rechts */ 
      background: #f8f8ff ! important; /* farbiger Hintergrund des Feldes */
      padding-left: 8px !important; /* Ausdehnung nach links */
      padding-right: 3px !important; /* Ausdehnung nach rechts */
      z-index: 1000 !important;
    }
    
/*  Hintergrund der Box Updates automatisch aktualisieren */
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: gold !important;
    }           
    
/*  Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
    .back-button {
      background-color: silver !important;/*Hintergrundfarbe vom Button*/
      width: 60px !important;
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 3px 3px #888;
    }
    
    .back-button:hover {
      color: white !important;
      background-color: dodgerblue !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 3px 3px #888;
    }    

/*  Icons des Stern-Kontextmenü */

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild5.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild61.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}
 
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
      content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild3.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild66.ico") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
     fill: transparent !important;}
     
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild62.png") no-repeat !important;
     background-size: 18px 18px !important;
     margin-left: 16px;
     margin-right: -32px;
     margin-bottom: 3px;}
    
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
     content: '';
     font-size: 14px;
     padding-left: 0px !important;
     padding-top: 1px !important;
     padding-bottom: 2px !important;
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild63.png") no-repeat !important;
     background-size: 18px 18px !important;
     margin-left: 15px;
     margin-right: -32px;
     margin-bottom: 3px;}
    
    #page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild64.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}

    #page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
     background: url("..//icons/Bild67.png") no-repeat !important;
     background-size: 16px 16px !important;
     margin-left: 15px;
     margin-right: -31px;}    
     }
     
/*        About:addons  - Optionen Schaltfläche */
    
    @-moz-document url("about:addons"){
    
    #utils-updateNow{
    appearance: none !important;
    background: url("..//icons/Bild5.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-updateNow:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild5.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-viewUpdates{
    appearance: none !important;
    background: url("..//icons/Bild61.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-viewUpdates:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild61.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-installFromFile{
    appearance: none !important;
    background: url("..//icons/Bild3.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-installFromFile:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild3.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="true"]>.menu-iconic-left{
    appearance: none !important;
    background: url("..//icons/Bild62.png")no-repeat !important;
    height:15px!important;
    padding-top:1px!important;
    margin-left:5px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="true"]>.menu-iconic-text {
    padding-left: 12px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="false"]>.menu-iconic-left{
    appearance: none !important;
    background: url("..//icons/Bild63.png")no-repeat !important;
    height:15px!important;
    padding-top:1px!important;
    margin-left:7px !important;}

    #utils-autoUpdateDefault[type="checkbox"][checked="false"]>.menu-iconic-text{
    padding-left: 10px !important;}

    #utils-resetAddonUpdatesToAutomatic{
    appearance: none !important;
    background: url("..//icons/Bild64.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToAutomatic:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild64.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToManual{
    appearance: none !important;
    background: url("..//icons/Bild65.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-resetAddonUpdatesToManual:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild65.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}    

    #utils-debugAddons{
    appearance: none !important;
    background: url("..//icons/Bild66.ico") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #utils-debugAddons:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild66.ico") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}    

    #manage-shortcuts{
    appearance: none !important;
    background: url("..//icons/Bild67.png") no-repeat !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}

    #manage-shortcuts:hover{
    appearance: none !important;
    margin-right: -1px !important;
    background: #ecf0f6 url("..//icons/Bild67.png") no-repeat !important;    
    border-width: thin !important;
    border-radius: 4px !important;
    border-color: #aecff7 !important;
    border-style: solid !important;
    min-height: 24px!important;
    padding-top: 5px! important;
    padding-left:28px!important;
    background-position:6px 5px!important;}
    
    #empty-addons-message {
    display: none !important;
    }
    }

Alles anzeigen