Addons-Manager anpassen

Heinrich

Ja läuft, Super !!

Wie ich ja von Anfang an vermutet hatte lag es nur an dem von mir zu Anfang geposteten Teil, Ich hatte also auch mal recht

CSS

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

Alles anzeigen

Mit dieser Änderung alleine läuft mein Style wie vorher nur jetzt mit den Butten NEBENEINANDER

Schwere Geburt aber nun Danke ich Dir !!

2002Andreas

Zitat von Heinrich

Schwere Geburt aber nun Danke ich Dir !!

Gerne doch

Nur mal so als Hinweis.

Ich hatte das erst in den Entwickler-Werkzeugen getestet, da funktioniert es nicht.

Erst in der userContent.css.

Heinrich

Deine neue Version funktioniert sogar in der 96er Version und sogar besser als die vorherige , da gab es immer einen optischen Fehler in der Plugin Ansicht !

Ich habs auch schon immer über die userContent.css inkludiert !

Das Ergebnis zählt

Du schaffst es ja immer zu einem guten Ende zu kommen Danke

Dharkness

Zitat von 2002Andreas

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

Hallo Andreas,

was wäre das minimale CSS-Schnipsel, um die Button so darzustellen?

Heinrich

CSS

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

Alles anzeigen

nur das Ändern

2002Andreas

Zitat von Dharkness

um die Button so darzustellen?

Teste bitte mal

CSS

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

:-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;
} 

div[role="presentation"].list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !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: -60px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
}

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

Alles anzeigen

Die Abstände musst du dir dann noch anpassen.

FuchsFan

Zitat von 2002Andreas

Teste bitte mal

Ich habe den Code auch mal so komplett eingefügt, wird alles angezeigt, nur die Button hinter dem Zahnrad sind davon dann auch betroffen. Oder ist das nur hier so?

Dharkness

Zitat von 2002Andreas

Teste bitte mal

So weit so gut, aber kann man das auf das 3-Punkte-Menü bei den Addons beschränken? Den Zahnradbutton möchte ich nicht mit angepasst haben, den möchte ich als Menü behalten.

milupo

2002Andreas Ich möchte bloß mal etwas klugscheißen. :-moz-any() ist ja jetzt :is(), vielleicht kannst du das bei Gelegenheit ändern.

2002Andreas

Zitat von milupo

ist ja jetzt

Ich hatte den Code nicht weiter auf evtl. Fehler etc. überprüft.

Zitat von FuchsFan

die Button hinter dem Zahnrad

Ja, kann ich bestätigen.

Mal sehen ob ich das ändern kann

milupo

Zitat von 2002Andreas

Ich hatte den Code nicht weiter auf evtl. Fehler etc. überprüft.

Wird ja auch erst ein Fehler, wenn :-moz-any ganz abgeschafft ist.

Boersenfeger

Ich habe nun meinen Code aus #96 am Ende mit dem Teilcode aus #105 Zeile 8-12 ergänzt.

Jetzt habe ich diese Erscheinung:

Wie kann ich diesen entfernen?

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;
    }
    
/*  Ordnet die Button horizontal an */ 

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

Alles anzeigen

milupo

Zitat von Boersenfeger

Teilcode aus #108 Zeile 8-12 ergänzt.

In Beitrag #108 ist aber kein Code.

2002Andreas

Zitat von Dharkness

Den Zahnradbutton

Zitat von FuchsFan

die Button hinter dem Zahnrad sind davon dann auch betroffen.

Auch bitte wieder testen:

CSS

    /*============ Button (Felder) auf der rechten Seite ==============*/
    
    
addon-page-options panel-list {
min-width: unset !important;
width: auto !important;
max-width: var(--addon-page-options-width) !important;
z-index: 1000 !important;
}
    
addon-page-options panel-list panel-item {
min-width: calc(var(--addon-page-options-width) - 20px) !important;
width: 320px !important;
}

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

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

/* reduce size of default buttons */
link:is([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],
:is(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:is([type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
right: 5px !important;
}

/* Abstand der Button vom rechten Rand bei Themes */
addon-list:is([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

nun meinen Code aus #96 am Ende mit dem Teilcode aus #108 Zeile 8-12 ergänzt.

Ich habe doch extra den kompl. Code gepostet, da brauchst du doch selber nicht mehr ändern

Dharkness

Zitat von 2002Andreas

Auch bitte wieder testen:

Öhm,

welcher Teil ist denn jetzt dafür zuständig, das nur die 3-Punkte-Menüs verändert werden und nicht auch das Zahnrad-Menü?

2002Andreas

Zitat von Dharkness

welcher Teil

Das habe ich noch zusätzlich in den Code eingefügt.

CSS

addon-page-options panel-list {
min-width: unset !important;
width: auto !important;
max-width: var(--addon-page-options-width) !important;
z-index: 1000 !important;
}
    
addon-page-options panel-list panel-item {
min-width: calc(var(--addon-page-options-width) - 20px) !important;
width: 320px !important;
}

Alles anzeigen

Dharkness

Zitat von 2002Andreas

Das habe ich noch zusätzlich in den Code eingefügt.

Jupp, habe ich gerade separat eingefügt, nun sieht es schon besser aus, nun noch ein paar kleine Anpassungen und gut ist, Dankeschön.

2002Andreas

Zitat von Dharkness

Dankeschön.

Gerne doch

Der Code für die Seite ist eine Fummelei, passt es links...dann fehlt es rechts usw. usw.

Dharkness

Zitat von 2002Andreas

Zitat von Dharkness

Dankeschön.

Gerne doch
Der Code für die Seite ist eine Fummelei, passt es links...dann fehlt es rechts usw. usw.

Was meinst Du, was ich noch alles anpassen musste, mein CSS-Voodoo für den die 3-Punkt-Button war ja vorher schon sehr speziell, aber Dein CSS-Voodoo musste noch einmal deutlich für meine Gegebenheiten verändert werden, speziell die Ausrichtung war eine echte Fummelarbeit.

2002Andreas

Zitat von Dharkness

war eine echte Fummelarbeit.

Naja, wir haben ja eh nichts besseres zu tun

Zitat von Dharkness

für meine Gegebenheiten verändert werden

Ist aber toll geworden