Add-ons-Erweiterungen

BarbaraZ-

Moin,

In der Addonsverwaltung gibt es die Empfehlungen, dieses Fenster ist noch nicht angepasst.

Bei den Erweiterungen sind die einzelnen Container bildfüllend, wie ich es gerne haben möchte.

Der Code für den Add-ons-Manager habe ich hier eingestellt:

CSS

/*Addons-Manager*/

/*** Versionsnummer des Addons wird angezeigt ***/
      
    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;
    }


/*** Nummerierung der installierten Erweiterungen ***/

body {
  counter-reset: section;                      
  }

#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
  font-size: 18px !important;  
  color: magenta !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;
  } 
  
addon-list addon-card > .addon.card {
  width: 700px;
  }

/*** Ansicht-Erweiterungen-Verwalten ***/

addon-card:not([expanded]) .card-contents {
    white-space: normal !important;
    }

.addon-description {
    max-width: 1150px !important;
    }
    
button:hover {    
    cursor: pointer !important;
    }
    
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] { /* Deaktivieren */
    margin-left: -10px !important;
    padding-right: 20px !important;
    background: powderblue !important;
    border-radius: 60px !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]:hover {
    background: magenta !important;
    color: white !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="remove"] {  /* Entfernen */
    margin-left: 8px !important;
    padding-right: 13px !important;
    background: powderblue !important;
    border-radius: 60px !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="remove"]:hover {
    background: red !important;
    color: white !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="preferences"] {  /* Einstellungen */
    margin-left: 32px !important;
    padding-right: 18px !important;
    background: powderblue !important;
    border-radius: 60px !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="preferences"]:hover {
    background: blue !important;
    color: white !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="expand"] {  /* Verwalten */
    margin-left: 60px !important;
    padding-right: 20px !important;
    background: powderblue !important;
    border-radius: 60px !important;
    }
  
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="expand"]:hover {
    background: green !important;
    color: white !important;
    }
    
    
/*** hiermit wird der Hintergrund bei Klick auf das Zahnrad-Symbol ausgeblendet ***/
button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
}    

/*** Rahmen um Container farbig ***/

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) { 

.main-search,
.sticky-container,
.main-heading,
html{
    background: cadetblue !important;
    }
}

/*** Farben der Container anpassen ***/
addon-list addon-card > .addon.card {
   background: beige !important;
   border: none !important;
   }

/*** hiermit wird der Hintergrund bei Klick auf Buttons auf der rechten Seite ausgeblendet ***/
button.more-options-button:focus, button.more-options-button:enabled:hover {
    background-color: transparent !important;
    border: none !important;
}

/*** hiermit werden unter Themes die Grafiken ausgeblendet ****/
.card-heading-image {
    display: none !important;
}


addon-list addon-card > .addon.card
{
    width: 94vw !important;  /* bringt die Container bis zum rechten Rand */
    margin-bottom: 5px !important;
    height: 65px !important; /* Höhe der Container */
    border: 1px solid black !important; /* Umrandung */
    /*border: 5px solid black !important;*/ /* Umrandung */
    
}
/*** Umrandung bei Hover breiter Rand und andere Farbe ****/ 
:root {
    --card-outline-color: red !important;
    }


addon-list section addon-card,
addon-list section addon-card .card.addon
{
    cursor: default !important;
}

addon-list section addon-card .card.addon .addon-card-collapsed
{
    cursor: pointer !important;
}

#addons-page #heading hbox.heading-inner #heading-name.header-name
{
    -moz-box-ordinal-group: 2 !important;
    padding-left: 10px !important;
}

.addon-badge-private-browsing-allowed {
    width: 230px !important;
    background-position: left !important;
}
.addon-badge-private-browsing-allowed::after
{
    content: "(privates Fenster erlaubt)" !important;
    margin-left: 20px !important;
    
} 

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu
{
    position:absolute !important;
    margin: 0 !important;
    margin-inline-end: 0 !important;
    left: 120px !important;
    
}

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options
{
    margin-left: 0 !important;
    margin-inline-end: 0 !important;
}

/*** die drei Punkte werden im Container-Feld ausgeblendet *****/
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu button.more-options-button.ghost-button
{
    display: none !important;
    
}

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list
{
    display:block !important;
    visibility: visible !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    --in-content-button-background: none !important;
    top: -25px !important;
}

.arrow, .arrow.top, .arrow.bottom,
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item-separator
{
    display: none !important;
}

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] /* Deaktivieren */
{
    position:absolute !important;
    top: 16px !important;
    left: 565px !important; /* Lage des Button Deaktivieren in Pixel vom linken Rand */
    box-shadow: inset 0 0 4px 4px #888;
    }

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="remove"] /* Entfernen */
{
    position:absolute !important;
    top: 16px !important;
    left: 700px !important; /* Lage des Button Entfernen in Pixel vom linken Rand */
    box-shadow: inset 0 0 4px 4px #888;
}


addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="preferences"] /* Einstellungen */
{
    position:absolute !important;
    top: 16px !important;
    left: 800px !important; /* Lage des Button Einstellungen in Pixel vom linken Rand */
    box-shadow: inset 0 0 4px 4px #888; 
}

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="report"]
{
    display: none !important;
}

addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="expand"] /* Verwalten */
{
    position:absolute !important;
    top: 16px !important;
    left: 925px !important; /* Lage des Button Verwalten in Pixel vom linken Rand */
    box-shadow: inset 0 0 4px 4px #888; 
}


.message-bar{
    display:none;
}


/* Hintergrundfarbe auf allen Seiten hellgrau*/
#headered-views,
#category-box,
.App,
.DiscoPane,
.Footer{
    background: lightgrey !important;
    }

/* Die Button auf der linken Seite */
#categories > .category,
#preferencesButton,
#helpButton,
#addonsButton{
    margin-left: 1px !important; /*Abstand der Button zum linken Rand*/
    }

#categories > .category:not([disabled]){
    background-color: cadetblue !important; /*Hintergrundfarbe vom Button*/
    margin-top: 1px !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;
    }
    
    
/* Die Breite der Felder unter Add-ons entdecken im rechten Fensterteil */
.App,           
.DiscoPane,
.Footer{
    max-width:initial !important;
    }
    
/* Kleiner Pfeil nach unten in einem Button, bei hover weiß */
.addon-control:hover .menulist-dropmarker{
    fill: white !important;
    }
    
/* Button oben mit dem Zahnrad */
#header-utils-btn{
    background-color: cornflowerblue !important; /*Hintergrundfarbe vom Button*/
    border-radius: 60px !important; /*Rundung vom Button*/
    box-shadow: inset 0 0 3px 3px #888; 
    }

/* Button oben mit dem Zahnrad bei hover blau */
#header-utils-btn:hover{
    color: white ! important;
    background-color: lime !important;
    border-radius: 60px !important;
    box-shadow: inset 0 0 3px 3px #888; 
    }
    
/* Zurückbutton bei geöffneter Einstellung einer Erweiterung */
#go-back{
    background-color: cornflowerblue !important; /*Hintergrundfarbe vom Button*/
    border-radius: 60px !important; /*Rundung vom Button*/
    box-shadow: inset 0 0 3px 3px #888; 
    }
    
#go-back:hover{
    color: white !important;
    background-color: lime !important;
    border-radius: 60px !important;
    box-shadow: inset 0 0 3px 3px #888;
    }
    
/* Kleiner Pfeil nach unten in einem Button unter Plugins, bei hover weiß */
#detail-state-menulist:hover .menulist-dropmarker{
    fill: white !important;
    }

Alles anzeigen

Meine Frage, ist dieses schon im Code vorhanden, wenn ja, was muss ich einsetzen oder muss dieses neu eingefügt werden?

Über Hilfe bin ich dankbar.

2002Andreas

Meinst du das so?

Wenn ja füg diesen Code bitte in deinen noch ein, Werte evtl. noch anpassen für dich.

CSS

.card {
   width: 1200px!important;
   background: beige !important;
   border-radius: 60px !important;
   }
   
.disco-cta-button {
   margin-inline-end: 10px !important;
   }

Und wenn oben der Text breiter sein soll:

CSS

:root {
    --section-width: 1200px!important;
   }

2002Andreas

Die Felder schmaler müsste dann so aussehen:

CSS

.card {
   height: 70px !important;
   width: 1200px!important;
   background: beige !important;
   border-radius: 60px !important;
   }
   
.disco-description-statistics {
    margin-top: 0px !important;
   }

BarbaraZ-

Wie immer:

Herzlichen Dank.

2002Andreas

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

BarbaraZ-

Ich bin gerade dabei, mir dieses Script neu anzupassen.

Einiges läuft dort noch unrund.

CSS

/* Firefox Quantum userChrome.css tweaks **************/
/* Github: https://github.com/aris-t2/customcssforfx **/
/******************************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), 
url-prefix(about:addons) { 

       
/**** Versionsnummer der Addons wird angezeigt ****/
    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;
    }

/**** fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. ****/    
    body {
      counter-reset: section;                     
    }

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section, decimal-leading-zero)".) ";
      padding-right: 20px !important; 
      margin-top:5px!important; /* Lage im Container */
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  

/**** Feld hinter den Containern Farbe anpassen ****/

    .sticky-container,
    .main-heading, html{
      background: lightgrey !important; 
    }

/*** Hintergrund der Container bei Hover andere Farbe ****/ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: grey !important;
      border: 1px solid green ! important;
    }

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
    :root {
      --card-outline-color: DarkOrange !important;
    }
    
/***** weitere Einstellungen für die Container der rechten Seite *****/

/**** Ausdehnung der Container zum rechten Rand hin / alle Rubriken **** von BrokenHeart ****/     
    :root {
      --section-width: -1 !important; /* nicht verändern */
    }
    .card-heading-image {
      height: 100px !important; /* ist für Rubrik Themes angepasst */
    }  
    
/*** Abstand zwischen den Containern ********/    
    addon-card .addon { 
      margin: 5px !important;
      border: 1px solid grey !important;
      border-radius: 20px !important;      
    }
    
/**** unter Themes die Grafiken versetzt ****/    
    .card-heading-image {
       margin: -6px -6px 16px !important;
    }    

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

    
/**** Hintergrund der Button auf der rechten Seite ****/    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: #ffefd5 !important; /* oder: / gold / #fffff0 / #fff68f */
      color: black !important; /* Schrift Farbe */
    }
    
    @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 10px !important; /* 10px Abstand zwischen den Button rechte Seite */
      /*box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten der rechten Button */
      border-radius: 80px !important; /* Abrundung der Button */
      box-shadow: 5px 5px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten / Farbe / der rechten Button */
    
    }
   
/**** Größenänderung der Button rechte Seite ****/
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 5px 25px !important; /* 5px ist die Höhe und 25px die Länge der rechten Button */
    }
    
/**** Anordnung der Button rechte Seite ****/     
    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }
    
/**** Hintergrund bei Hover rechte Button (außer bei Themes )****/    
    button:focus,
    button:enabled:hover {
      background-color: #1e90ff  !important; /* beliebige Farbe eintragen */
      border-radius: 80px !important;
      color: white ! important;
      box-shadow: inset 0 0 3px 3px lightgrey;
    }

/**** Button Aktivieren/Deaktivieren unter Themes ****/
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button {
      background: #ffefd5 !important; /* beliebige Farbe eintragen */
      border: 1px solid #888 !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 105px !important; /* Länge des Button */
      height: 29px ! important; /* Höhe des Button */
      box-shadow: 4px 4px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten */ 
    } 

/* Veränderung des Hintergrundes bei Mouseover */    
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button:hover {
      background-color: #1e90ff  !important; /* beliebige Farbe eintragen */
      border-radius: 80px !important;
      color: white ! important;
      box-shadow: 4px 4px grey, inset 0 0 3px 3px lightgrey; /* äußerer und innerer Schatten */
    }          
    
/******************** Aussehen des Menü hinter dem Zahnrad **************************************/    

    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-top: 8px !important; /* Ausdehnung nach oben */
      padding-bottom: 8px !important; /* Ausdehnung nach unten */
      min-width: 340px !important;
      width: 400px !important; /* Länge der einzelnen Felder */
      /*background: gold ! important; /* Farbe des Hintergrundes */
      margin-left: 11% ! important; /** Schrift ausrichten ab linkem Rand **/
    }

    .sticky-container {
      z-index: 1000 !important;
    }

    addon-page-options panel-list panel-item {
      min-width: 340px !important;
      width: 448px !important; /* Länge der aktivierten Menü-Leiste */
      border-radius: 20px !important;
      box-shadow: 4px 4px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten */ 
    }

    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 */
      z-index: 1000 !important;
        
    }

/**** Button oben 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: 70px !important; /* Länge des Button */
      height: 30px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten */
    } 

/**** Optionen-Button (Zahnrad) ****/
    button.more-options-button:nth-child(1) {
     position: absolute !important; 
     left: 17% !important; /* Abstand zum linken Rand */
     margin-top: 18px !important; /* Abstand vom oberen Rand */
    }        
      
/**** Button oben mit dem Zahnrad bei hover blau ****/
    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/**** Hintergrund der einzelnen Boxen ****/
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: unset !important;
    }    
    
/**** Hintergrund Container und Umrandung ****/    
    addon-list addon-card > .addon.card {
      background: #F8F8FF !important;
      border: 2px solid #EEAD0E !important;
      border-radius: 20px !important;
    }            


/******************* Button auf der rechten Seite ****************************************************/

/**** Einsstellungen für den Block der rechten Button ****/
    addon-list addon-card:not([expanded="true"]) panel-list {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      background: unset !important;
      border: none !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 20px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }
    
/**** Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw. *****/
    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 12px !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:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -130px !important;
    }
        
/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
    input[type="checkbox"].toggle-button {
      margin-right: 520px !important; /* Abstand vom rechten Rand */
    }    

/************************* Die großen Button auf der linken Seite **************************/

/**** Abstand der Button zum linken Rand ****/
    #categories > .category, #preferencesButton, #helpButton, #addonsButton {
      margin-left: 1px !important; 
    }

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 1px !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; 
    }
    
/**** Inaktive Button ****/
    #categories > .category:not([selected]),
    #preferencesButton,
    #helpButton,
    #addonsButton {
      background-color: gainsboro !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; 
    }

/**** restore buttons ****/
    addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      box-shadow: 0 0 5px 5px blue !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important; 
    }
    
panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }

panel-item[action="preferences"] {
      order: -1;
    }

/**** blendet den Text für privates Browsing ein ****/    
    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 10px !important; /* Entfernung nach rechts */
    }  
    
    .addon-badge-private-browsing-allowed {
      min-width: 440px !important; /* lila Icon Entfernung nach rechts */
    }

/**** Detailanzeige unter Verwalten ****/
    addon-card[expanded] .addon.card {
      margin-top: 3% ! important; /* Zahnrad-Button nach unten verlagern */
    }

/**** manuelle Update-Suche Benachrichtigung (Text) nach links verlagern ****/    
    #updates-message {
      margin-right: 60% ! important;    
      margin-top: 2% ! important; /* senkrechte Lage */
      color: #00cd00 ! important; /* Farbe der Schrift */
      font-weight: bold !important; /* fette Schrift */
      margin-bottom: -3% ! important;
    }
    
/**** unter - Tastenkombination für Erweiterungen verwalten - den Zahnrad-Button senkrecht verlagern ****/
    .shortcut.card {
      margin-top: 50px !important;
    }    
    
/**** Suchfeld für Erweiterungen wird ausgeblendet ****/
    .main-search {
      display: none !important;
    }

/**** Schrift und Abstand unter Plugins ****/
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container {        
     margin-left: -9px !important;
    }

html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container h3.addon-name a.addon-name-link {
    font-size: 13px !important; /* Schriftgröße */
    }
    
/**** 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(4) > 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(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
      display: none !important;
    }    

}/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/**** Feld hinter den Containern Farbe anpassen ****/
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) { 

    .sticky-container,
    .main-heading, html{
      background: #eee8cd !important; 
    }
}

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  


/*** Hintergrund der Container bei Hover andere Farbe ****/ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: #76ee00 !important;
      border: 1px solid green ! important;
    }

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
    :root {
      --card-outline-color: DarkOrange !important;
    }
    
/***************** weitere Einstellungen für die Container der rechten Seite ********************/

/**** Ausdehnung der Container zum rechten Rand hin / alle Rubriken **** von BrokenHeart ****/     
    :root {
      --section-width: -1 !important; /* nicht verändern */
    }
    .card-heading-image {
      height: 100px !important; /* ist für Rubrik Themes angepasst */
    }  
    
/*** Abstand zwischen den Containern ********/    
    addon-card .addon { 
      margin: 5px !important;
      border: 1px solid grey !important;
      border-radius: 20px !important;      
    }
    
/**** unter Themes die Grafiken versetzt ****/    
    .card-heading-image {
       margin: -6px -6px 16px !important;
    }    

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

/**** fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. ****/    
    body {
      counter-reset: section;                     
    }

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section, decimal-leading-zero)".) ";
      padding-right: 20px !important; 
      margin-top:5px!important; /* Lage im Container */
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  
        
/**** Versionsnummer der Addons wird angezeigt ****/
    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: #ffefd5 !important; /* oder: / gold / #fffff0 / #fff68f */
      color: black !important; /* Schrift Farbe */
    }
    
    @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 10px !important; /* 10px Abstand zwischen den Button rechte Seite */
      /*box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten der rechten Button */
      border-radius: 80px !important; /* Abrundung der Button */
      box-shadow: 5px 5px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten / Farbe / der rechten Button */
    
    }
   
/**** Größenänderung der Button rechte Seite ****/
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 5px 25px !important; /* 5px ist die Höhe und 25px die Länge der rechten Button */
    }
    
/**** Anordnung der Button rechte Seite ****/     
    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }
    
/**** Hintergrund bei Hover rechte Button (außer bei Themes )****/    
    button:focus,
    button:enabled:hover {
      background-color: #1e90ff  !important; /* beliebige Farbe eintragen */
      border-radius: 80px !important;
      color: white ! important;
      box-shadow: inset 0 0 3px 3px lightgrey;
    }

/**** Button Aktivieren/Deaktivieren unter Themes ****/
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button {
      background: #ffefd5 !important; /* beliebige Farbe eintragen */
      border: 1px solid #888 !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 105px !important; /* Länge des Button */
      height: 29px ! important; /* Höhe des Button */
      box-shadow: 4px 4px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten */ 
    } 

/* Veränderung des Hintergrundes bei Mouseover */    
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button:hover {
      background-color: #1e90ff  !important; /* beliebige Farbe eintragen */
      border-radius: 80px !important;
      color: white ! important;
      box-shadow: 4px 4px grey, inset 0 0 3px 3px lightgrey; /* äußerer und innerer Schatten */
    }          
    
/******************** Aussehen des Menü hinter dem Zahnrad **************************************/    

    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-top: 8px !important; /* Ausdehnung nach oben */
      padding-bottom: 8px !important; /* Ausdehnung nach unten */
      min-width: 340px !important;
      width: 400px !important; /* Länge der einzelnen Felder */
      /*background: gold ! important; /* Farbe des Hintergrundes */
      margin-left: 11% ! important; /** Schrift ausrichten ab linkem Rand **/
    }

    .sticky-container {
      z-index: 1000 !important;
    }

    addon-page-options panel-list panel-item {
      min-width: 340px !important;
      width: 448px !important; /* Länge der aktivierten Menü-Leiste */
      border-radius: 20px !important;
      box-shadow: 4px 4px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten */ 
    }

    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 */
      z-index: 1000 !important;
        
    }

/**** Button oben 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: 70px !important; /* Länge des Button */
      height: 30px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten */
    } 

/**** Optionen-Button (Zahnrad) ****/
    button.more-options-button:nth-child(1) {
     position: absolute !important; 
     left: 17% !important; /* Abstand zum linken Rand */
     margin-top: 18px !important; /* Abstand vom oberen Rand */
    }        
      
/**** Button oben mit dem Zahnrad bei hover blau ****/
    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/**** Hintergrund der einzelnen Boxen ****/
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: unset !important;
    }    
    
/**** Hintergrund Container und Umrandung ****/    
    addon-list addon-card > .addon.card {
      background: #F8F8FF !important;
      border: 2px solid #EEAD0E !important;
      border-radius: 20px !important;
    }            


/******************* Button auf der rechten Seite ****************************************************/

/**** Einsstellungen für den Block der rechten Button ****/
    addon-list addon-card:not([expanded="true"]) panel-list {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      background: unset !important;
      border: none !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 20px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }
    
/**** Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw. *****/
    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 12px !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:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -130px !important;
    }
        
/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
    input[type="checkbox"].toggle-button {
      margin-right: 520px !important; /* Abstand vom rechten Rand */
    }    

/************************* Die großen Button auf der linken Seite **************************/

/**** Abstand der Button zum linken Rand ****/
    #categories > .category, #preferencesButton, #helpButton, #addonsButton {
      margin-left: 1px !important; 
    }

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 1px !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; 
    }
    
/**** Inaktive Button ****/
    #categories > .category:not([selected]),
    #preferencesButton,
    #helpButton,
    #addonsButton {
      background-color: gainsboro !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; 
    }

/**** restore buttons ****/
    addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      box-shadow: 0 0 5px 5px blue !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important; 
    }
    
panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }

panel-item[action="preferences"] {
      order: -1;
    }

/**** blendet den Text für privates Browsing ein ****/    
    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 10px !important; /* Entfernung nach rechts */
    }  
    
    .addon-badge-private-browsing-allowed {
      min-width: 440px !important; /* lila Icon Entfernung nach rechts */
    }

/**** Detailanzeige unter Verwalten ****/
    addon-card[expanded] .addon.card {
      margin-top: 3% ! important; /* Zahnrad-Button nach unten verlagern */
    }

/**** manuelle Update-Suche Benachrichtigung (Text) nach links verlagern ****/    
    #updates-message {
      margin-right: 60% ! important;    
      margin-top: 2% ! important; /* senkrechte Lage */
      color: #00cd00 ! important; /* Farbe der Schrift */
      font-weight: bold !important; /* fette Schrift */
      margin-bottom: -3% ! important;
    }
    
/**** unter - Tastenkombination für Erweiterungen verwalten - den Zahnrad-Button senkrecht verlagern ****/
    .shortcut.card {
      margin-top: 50px !important;
    }    
    
/**** Suchfeld für Erweiterungen wird ausgeblendet ****/
    .main-search {
      display: none !important;
    }

/**** Schrift und Abstand unter Plugins ****/
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container {        
     margin-left: -9px !important;
    }

html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container h3.addon-name a.addon-name-link {
    font-size: 13px !important; /* Schriftgröße */
    }
    
/**** 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(4) > 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(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
      display: none !important;
    }    

}

Alles anzeigen

Meine Frage: Womit kann ich überprüfen, ob alle Klammern richtig gesetzt sind oder ob welche fehlen bzw. zu viel sind?

Am liebsten mit Notepad++

Dann habe ich hier:

hinter den abgerundeten Buttons Schatten. Meine Vermutung, diese Schatten werden auch in der Schrift angezeigt.

Hätte ich gerne weg.

Boersenfeger

Nutze doch den Hersteller...

https://github.com/Aris-t2/Custom…css/aboutaddons

FuchsFan

Zitat von BarbaraZ-

diese Schatten werden auch in der Schrift angezeigt.

Unter Einstellungen wirst du vermutlich den Zoom erhöht haben , was dann zu der unreinen Schrift führt. 100% , dann sollte es wieder normal sein.

Dann solltest du das Icon (private Browsing) etwas nach rechts versetzen, damit es nicht die Schrift überlagert. Dafür gibt es in dem Code diesen Abschnitt:

CSS

.addon-badge-private-browsing-allowed {
      min-width: 440px !important; /* lila Icon Entfernung nach rechts */
    }

Die px erhöhen!

2002Andreas

Zitat von BarbaraZ-

diese Schatten

Ich habe mal die Zeile 486 und 488 geändert, sieht dann so aus:

BarbaraZ-

FuchsFan und andreas,

Danke für Eure Hinweise.

Genau das, was ich suchte. Die Feinanpassung, was Farben etc. betrifft ist jetzt Fleißarbeit.

Eine allerletzte Sache noch:

Die für mich überdiemnsionierten Icons bei den Themes ist noch störend.

grisu2099

Die kannst du dir ausblenden:

CSS

    /*** hiermit werden unter Themes die Grafiken ausgeblendet ***/
.card-heading-image {
    display: none !important;
    }

milupo

Zitat von BarbaraZ-

Meine Frage: Womit kann ich überprüfen, ob alle Klammern richtig gesetzt sind oder ob welche fehlen bzw. zu viel sind?
Am liebsten mit Notepad++

Klicke vor eine vorhandene Klammer. Gehe in Notepad++ in das Menü Suchen und wähle entweder Zugehörige Klammer suchen oder Alles zwischen Klammern auswählen. Alternativ kannst du die Tastenkombinationen Strg+B bzw. Strg+Alt+B verwenden. Mit Zugehörige Klammer suchen bzw. Strg+B springst du zur zugehörigen Klammer. Mit Alles zwischen Klammern auswählen bzw. Strg+Alt+B wird der Bereich zwischen öffnender und schließender Klammer markiert. In dem Moment weißt du, dass die Klammern korrekt gesetzt sind. Wenn eine Klammer schwarz bleibt und weder gesprungen noch markiert wird, weißt du, dass die zugehörige Klammer fehlt. Wenn du vor die erste Klammer nach der @-moz-document-Anweisung klickst und nach der zugehörigen Klammer suchst, springt Notepad++ in der Regel an das Ende deiner CSS-Datei, es sei denn, da sind noch mehr @-moz-document-Anweisungen enthalten.

FuchsFan

Zitat von BarbaraZ-

Die für mich überdiemnsionierten Icons bei den Themes ist noch störend.

Das wird aber nicht so einfach sein, denn es muss unter Themes alles angepasst werden, die Größe der Grafiken, Größe der rechten Button, die Lage der Button, usw.

Ich habe mal probehalber den Code etwas dazu verändert, aber ich bekomme es auch nicht hin, dass z.B. die Button rechts gleichmäßig verteilt sind. Auch die Höhe der Container verändert sich immer, wenn noch zusätzlicher Text (links) dazu kommt.

Hier mal ein Bild dazu:

FuchsFan

Zitat von BarbaraZ-

Die für mich überdiemnsionierten Icons bei den Themes ist noch störend.

Hallo BarbaraZ-!

Jetzt habe ich mich noch mal daran gemacht, den bisherigen Code vollständig zu überarbeiten. Meines Erachtens nach müsste alles sauber laufen , die Container bei Themes sind in der Höhe reduziert, mehr geht wohl nicht.

Eine Sache konnte ich nicht erledigen, und zwar unter Verwalten bei Themes gibt es noch einen Button "Deaktivieren bzw. Aktivieren", hierfür habe ich keinen Code mehr. Bestimmt wird Andreas uns hierzu noch etwas liefern .

So, wenn du möchtest, dann der vollständige Code hier nachfolgend zur Verfügung (die Icons für das Menü hinter den Zahnrad sind in dem Code enthalten).

CSS

/*  Addons-Verwaltung: Hintergrundfarben */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
 url-prefix(about:addons) { 

   #sidebar {
      background: #CDC8B1 !important; /* Hintergrund linke Seite */
    }
    
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
      background: #EEEED1 !important; /* Hintergrund rechte Seite */
      font-size: 15px !important;
    } }

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  

/* Hintergrund der Container bei Hover andere Farbe */ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: #9bf86c /* #76ee00 */ !important;
    }
    
/* Abstand zwischen den Containern */    
    addon-card .addon { 
      margin: 7px !important;
    }    
    
/* Umrandung der Container bei Hover breiter Rand und andere Farbe */ 
    :root {
      --card-outline-color: DarkOrange !important;
    }
    
/* Hintergrund der Container mit anderer Farbe */ 
    addon-card:not([expanded="true"]) .addon.card {
      background: #F1F7FC !important; /* Hintergrundfarbe */
      border: 2px solid grey !important;  /* Umrandung */
      border-radius: 15px !important;  /* Ecken abgerundet */
      width: 1100px !important;  /* Länge der Container */
      max-height: 120px !important; /* Höhe der Container bei Themes */
    } }
    
/***************** weitere Einstellungen für die Container der rechten Seite ********************/

/* Abstand zwischen den Containern */    
    addon-card .addon { 
      margin: 8px !important;
      border: 1px solid grey !important;
      border-radius: 20px !important;      
    }
    
/* Höhe der Container bei Erweiterungen */
    addon-list[type="extension"]{ --card-padding: 18px } /* Höhe in px */
    addon-card .addon-card-collapsed{ margin-bottom: 5px !important; /* Button rechts Abstand vom oberen Rand */
    } 

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

/* Höhe der Grafiken unter Themes */
    .card-heading-image {
      height: 60px !important;
      margin: -6px -6px 16px !important; /* unter Themes die Grafiken versetzt */          
    }  
    
/* fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. */    
    body {
      counter-reset: section;                     
    }

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section, decimal-leading-zero)".) ";
      padding-right: 20px !important; 
      margin-top: 1px!important; /* Lage im Container */
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  
        
/* Versionsnummer der Addons wird angezeigt */
    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: #ffefd5 !important; 
      color: black !important; /* Schrift Farbe */
    }
    
    @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 8px !important; /* Abstand zwischen den Button rechte Seite */
      border-radius: 80px !important; /* Abrundung der Button */
      box-shadow: inset 0 0 2px 2px forestgreen; /* innerer Schatten / Farbe / der rechten Button */
    
    }
   
/**** Größenänderung der Button rechte Seite ****/
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 5px 25px !important; /* 5px ist die Höhe und 25px die Länge der rechten Button */
    }
    
/**** Anordnung der Button rechte Seite ****/     
    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }
    
/* Umrandung und Hintergrund der Button rechte Seite */    
    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: 1px solid grey !important;
      background: lightyellow !important;
      /* border-radius: 50px !important; */
      margin-top: -3px !important;
    }
    
/* Umrandung und Hintergrund der Button rechte Seite bei Hover */        
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]):hover,
    .addon.card panel-item:not([badged]):hover{
      border: 1px solid red !important;
      background: blue !important;
      color: white !important;
    }    

/**** Button Aktivieren/Deaktivieren unter Themes ****/
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button {
      background: #ffefd5 !important; /* beliebige Farbe eintragen */
      border: 1px solid #888 !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 105px !important; /* Länge des Button */
      height: 29px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px coral !important; /* innerer Schatten */ 
      margin-right: 440px ! important; /* Button ausrichten ab rechtem Rand */
    } 
    
/* Veränderung des Hintergrundes bei Mouseover */    
    html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button:hover {
      background-color: #1e90ff  !important; /* beliebige Farbe eintragen */
      border-radius: 80px !important;
      color: white ! important;
      
    }          
    
/******************** Aussehen des Menü hinter dem Zahnrad **************************************/    

    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-top: 8px !important; /* Ausdehnung nach oben */
      padding-bottom: 8px !important; /* Ausdehnung nach unten */
      min-width: 340px !important;
      width: 400px !important; /* Länge der einzelnen Felder */
      margin-left: 5% ! important; /** Schrift ausrichten ab linkem Rand **/
      
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
      color: red !important;
      font-size:  13px !important;    
      max-height: 32px !important; 
      padding-left: 15px !important;
    }    

    .sticky-container {
      z-index: 1000 !important;
    }

    addon-page-options panel-list panel-item {
      min-width: 340px !important;
      width: 448px !important; /* Länge der aktivierten Menü-Leiste */
      /* border-radius: 20px !important; */
      border: 1px solid grey!important;
    }
    
addon-page-options panel-list panel-item:hover {
      min-width: 340px !important;
      width: 448px !important; /* Länge der aktivierten Menü-Leiste */
      /* border-radius: 20px !important; */
      border: 1px solid red!important;
      background: lime !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 */
      z-index: 1000 !important;
    }
    
/**** Button oben 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 3px 3px grey; /* innerer Schatten */
    } 
      
/**** Button oben mit dem Zahnrad bei hover blau ****/
    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
      font-weight: bold !important;
    }

/**** Hintergrund der einzelnen Boxen ****/
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: unset !important;
    }    

/******************* Button auf der rechten Seite ****************************************************/

/**** Einsstellungen für den Block der rechten Button ****/
    addon-list addon-card:not([expanded="true"]) panel-list {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      background: unset !important;
      border: none !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 545px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }
    
/**** Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw. *****/
    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 515px !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:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -100px !important;
    }
        
/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
    input[type="checkbox"].toggle-button {
      margin-left: 280px !important; /* Abstand vom rechten Rand */
      margin-bottom: 7px !important; /* Lage vertikal */
    }

/* unter Verwalten das sich öffnende Menü verbreitern */    
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
 url-prefix(about:addons) {      
       
    html body div#full div#content div#main div addon-card div.card.addon{
      min-width: 1100px !important; /* Breite in px */
    } }        

/************************* Die großen Button auf der linken Seite **************************/

/**** Abstand der Button zum linken Rand ****/
    #categories > .category, #preferencesButton, #helpButton, #addonsButton {
      margin-left: 1px !important; 
      margin-right: 5px !important; 
    }

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 1px !important; /*Abstand zum Button darüber*/
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 4px 4px #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;
      font-weight: bold !important;    
      font-family: "Verdana, Helvetica", serif !important;
      font-style: italic !important; /* Schriftstil */
      font-size:   19px !important;      
    }
    
/**** Inaktive Button ****/
    #categories > .category:not([selected]),
    #preferencesButton,
    #help-button,
    #addonsButton {
      background-color: gainsboro !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, #help-button: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; 
    }

/**** restore buttons ****/
    addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px !important;
      box-shadow: 0 0 3px 3px blue !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important; 
    }
    
panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }

panel-item[action="preferences"] {
      order: -1;
    }

/**** blendet den Text für privates Browsing ein ****/    
    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 10px !important; /* Entfernung nach rechts */
    }  
    
    .addon-badge-private-browsing-allowed {
      min-width: 440px !important; /* lila Icon Entfernung nach rechts */
    }
    
/* Länge der Container unter Empfehlungen */    
    .card {
      width: 650px!important; /* Länge */
      background: #F2F4F7 !important;  /* Hintergrund */
    }    

/**** Schrift und Abstand unter Plugins ****/
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container {        
     margin-left: -9px !important;
    }

html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container h3.addon-name a.addon-name-link {
    font-size: 13px !important; /* Schriftgröße */
    }
    
/**** 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(4) > 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(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
      display: none !important;
    }    

/* Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
    .back-button {
      background-color: gainsboro !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;
    }    

/* Aktiviert/Deaktiviert - Farbe */
    .list-section-heading[data-l10n-id="extension-enabled-heading"],
    .list-section-heading[data-l10n-id="theme-enabled-heading"],
    .list-section-heading[data-l10n-id="plugin-enabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-enabled-heading"] {
    font-weight: bold !important;
    color: forestgreen !important;
    text-indent: 15px;
    }
    .list-section-heading[data-l10n-id="extension-disabled-heading"],
    .list-section-heading[data-l10n-id="theme-disabled-heading"],
    .list-section-heading[data-l10n-id="plugin-disabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-disabled-heading"] {
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px;
    }
    
/***************************************************************************/

/* Icons für Addon-Manager *** Menü hinter dem Zahnrad */
/*********** von Endor *********************************/

#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild5.png');
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-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild61.png');
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-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild3.png');
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-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild66.ico');
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('https://raw.githubusercontent.com/Endor8/CSS/master//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: 12px !important;
padding-right: -6px !important;
padding-top: 1px !important;
padding-bottom: 2px !important;
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild63.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 18px;
margin-right: -32px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild64.png');
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-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild67.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

Alles anzeigen

Viel Erfolg damit!