Ansicht "Erweiterungen verwalten"

FuchsFan

Hier hatte ich ja schon ein Bild von meiner zweiten Version gezeigt RE: Ansicht "Erweiterungen verwalten" , die ich hier auch schon einmal veröffentlicht habe. RE: Add-ons-Erweiterungen

Die Version habe ich jetzt noch mal überarbeitet, und stelle sie hier zur Verfügung. Der Nachteil zu der Version aus #412 besteht darin, dass bei Veränderung der Container die Button wieder an die richtige Stelle gebracht werden müssen. Für eine Auflösung 1920x1080 ist es eigentlich gut eingestellt, mit einer Länge der Container von 1100 Pixel.

In den Code ist ein Block für die großen Button auf der linken Seite eingearbeitet. Auch enthalten ist der Code von Endor als einzelner Block für die Icons des Menüs hinter dem Zahnrad.

Damit ist dann dieses Thema vorerst abgeschlossen, solange es keine neuen Baustellen gibt. So, wer möchte, langt zu.

CSS

/*======================== Addon-Manager / about:addons ==================*/

/*  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;  /* Schriftgröße rechte Seite */
    } 
 }

@-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 / nicht unterschreiten */
    } 
}    
    
/***************** 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: 70px !important;
      width: 700px !important;  /* Länge der Grafiken */
      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 */
    }  
        
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/********* Versionsnummer wird angezeigt ************************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    
    /*restore version number */
    div:not([current-view="updates"]) .addon-name-link[title]:not([data-l10n-args])::after,
    div:not([current-view="updates"]) .addon-name[title]:not([data-l10n-args])::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 3px !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;
      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: dodgerblue !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 Aktivieren/Deaktivieren bei Hover */    
    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;
    }
    
/**** Hintergrund der Box automatisches Update ****/
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: greenyellow !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 ****/
    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/******************* 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: 520px !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: -38px !important;
    }
        
/*** Button Deaktivieren/Aktivieren (kleiner blauer) bei Erweiterungen ***/
    input[type="checkbox"].toggle-button {
      margin-left: 280px !important; /* Abstand vom linken Rand */
      margin-bottom: 10px !important; /* Lage vertikal */
    }

/* unter Verwalten das sich öffnende Menü verbreitern */    
    html body div#full div#content div#main div addon-card div.card.addon{
      min-width: 1000px !important; /* Breite in px */
    }        

/**** 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: 700px!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;
    }
    
/***************************************************************************/

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

/***** 2 Button links unten unter Add-ons ******/

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

    .category {
      -moz-margin-end: -4px !important;
    }
    
    .sidebar-footer-list {
      margin-inline: 0px !important;
    }
        
    #preferencesButton {  /* Einstellungen unten links */
      fill: #8b8b8b !important;
      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; /* innerer Schatten */
      width: 180px !important; /* länge des Button */
    }
    
    #help-button {  /* Hilfe für Add-ons unten links */
      fill: #ff0000 !important;
      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; /* innerer Schatten */
      width: 180px !important; /* länge des Button */
    }
    
    #preferencesButton:hover,
    #help-button:hover {
      color: white !important;
      background-color: blue !important;
    }
}    
    
/**** Die großen Button auf der linken Seite unter Addons und Extras/Einstellungen ****/

/* Abstand der Button zum linken Rand */
    #categories > .category, #generalButton, #homeButton, #searchButton, #privacyButton, #syncButton, #addonsButton, #helpButton {
      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]),
    #addonsButton,
    #helpButton {
      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, #generalButton:hover, #homeButton:hover, #searchButton:hover, #privacyButton:hover, #syncButton:hover, #addonsButton:hover, #helpButton:hover {
      color: white !important;
      background-color: blue !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }
    
/**********************************************************************************************************/

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

Büssen

Moin,

ich habe zugelangt. Musste in der Darstellung noch Anpassungen vornehmen, da ich sicher eine andere Auflösung verwende.

Sieht nunmehr so aus (Firefox 76.01):

Ich hoffe, dass ich alles richtig dargestellt habe.

laubenpieper

Hallo FuchsFan , ich habe auch auf deine Add-On Erweiterung zugegriffen und etwas für mich angepasst.

Wo es aber mir nicht gelingt das zu ändern ist im Screenshot zwei zu sehen, den Hintergrund wollte ich ebenfalls in black haben.

Ist das machbar?

Danke für deine Arbeit

Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

den Hintergrund wollte ich ebenfalls in black

Teste bitte mal:

CSS

#page-options > panel-list:nth-child(1) {
    background: black !important;
}

div.arrow:nth-child(3){
    fill: black !important;
}

Boersenfeger

Nun ich auch nochmal.... Ich nutze einen zusammengestellten Code für den Addons-Manager im Nightly

unter anderem auch ein Teil von FuchsFan´s Code für den Bereich des Zahnrads..

In der oberen Zeile sollte ja eigentlich "Auf UpDates überprüfen" oder ähnlich erscheinen..

Wo ist der Auslöser/Fehler?

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:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 6px 20px !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 :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      box-shadow: unset !important;
      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:-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;
    }
    
    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:-moz-any([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 {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      box-shadow: none !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: 45px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

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

/*  Höhe der Container */
    
    addon-list[type="extension"]{ --card-padding: 15px }
    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:-moz-any([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: -50px !important;
    }

/*  Abstand der Button vom oberen Rand bei Themes */
    
    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -20px !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 */

    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: red !important;
    font-weight: bold !important;
    counter-increment: section;                 
    content: counter(section)": ";
    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: 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; 
    }

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

/*  Hintergrund bei Hover auf das Zahnrad-Symbol ausblenden */
    
    button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
    }    
    button:focus,
    button:enabled:hover {
    background-color: blue !important;
    border-radius: 15px !important;
    color: white ! important;
    box-shadow: inset 0 0 5px 5px lightgrey;
    }
         
/*  Optionen-Button */

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

    position: absolute !important;
    left: 19% !important;
    margin-top: 28px !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;
    }

 /* Addons-Verwaltung: Hintergrundfarben und vom Container für about:preferences */

     /*#nav-header,
    #category-box {
    background-color:darkkhaki !important;
    }
    #discover-view,
    #view-port,
    #react-view {
    background:blanchedalmond !important;
    font-size: 15px!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;
    }

/* Einstellungenfenster verbreitern */
    
    @-moz-document url-prefix(about:preferences){
    .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(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;
    }
    
    /* 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:-moz-any([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:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
    }        

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

    addon-page-options panel-list panel-item {
      width: 425px !important; /* Länge der aktivierten Menü-Leiste */
      background: none ! 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: 430px !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-image: url('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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: 'Nicht die';
    font-size: 14px;
    padding-left: 22px !important;
    padding-right: 35px !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    display: block;
    width: 16px;
    height: 16px;
    background: url('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/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('file:///c:/Users/Martin/AppData/Roaming/Mozilla/Firefox/Profiles/5p31hc0i.Nightly/chrome/Icons/Bild67.png');
    background-size: 16px 16px !important;
    margin-left: 15px;
    margin-right: -31px;
    }
    }

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

"Auf UpDates überprüfen" oder ähnlich erscheinen.

Meinst du das so?

Dazu habe ich diesen Teil vom Code ab Zeile 391 bis einschl. Zeile 400 entfernt:

CSS

link:-moz-any([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:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
    }

Teste es bitte mal.

Boersenfeger

Supi... allerdings muss der Text nach rechts, damit die Icons freistehen...

2002Andreas

Ich habe das ja ohne Icons getestet, sorry.

Also muss das so wieder rein dann ab Zeile 391.

CSS

link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      margin-left: 6% ! important;
      min-width: 390px !important;
      width: 390px !important; /* Länge der einzelnen Felder */
      background: white ! important; /* Farbe des Hintergrundes */
      color: black !important;
    }
    
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
    }

Alles anzeigen

Boersenfeger

... noch nicht so ganz...

2002Andreas

Ändere bitte mal die beiden Werte wieder auf:

CSS

      min-width: 350px !important;
      width: 375px !important;

laubenpieper

Hallo Andreas, nein die css es hat den Hintergrund geändert.

Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

die css es hat den Hintergrund geändert.

Zitat von laubenpieper

den Hintergrund wollte ich ebenfalls in black haben.

Boersenfeger

So passt es, allerdings habe ich nun noch die Erscheinung, das ja bereits eine Farbe (Grün) beim Hovern definiert ist und auf dem Screen auch sichtbar, das Dunkelblaue also stört. Könnte man das noch eliminieren?

laubenpieper

Entschuldige Andreas, dein Code geht ich hatte den bloß in den falschen Ordner verfrachtet.

danke für deine Hilfe

Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

Entschuldige Andreas,

Alles ist gut...freut mich wenn du zufrieden bist

Zitat von Boersenfeger

das Dunkelblaue also stört

Das kommt durch diesen Teil vom Code Zeile 238:

CSS

    button:focus,
    button:enabled:hover {
    background-color: blue !important;
    border-radius: 15px !important;
    color: white ! important;
    box-shadow: inset 0 0 5px 5px lightgrey;
    }

Das bezieht sich auf alle Buttons, wenn du hier den background-color änderst.

Boersenfeger

Danke! Die Lösung ist einfach..

Ich habe diesen Code-Teil entfernt

CSS

/*  Hintergrund bei Hover auf das Zahnrad-Symbol ausblenden */
    
    button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
    }    
    button:focus,
    button:enabled:hover {
    background-color: blue !important;
    border-radius: 15px !important;
    color: white ! important;
    box-shadow: inset 0 0 5px 5px lightgrey;
    }

Alles anzeigen

Vielen Dank, Andreas, damit ist für mich die Sache geklärt...

FuchsFan

Zitat von Büssen

Ich hoffe, dass ich alles richtig dargestellt habe.

Na, sieht doch so aus, als dass du alles richtig positioniert hast.

FuchsFan

Ja, das Menü hinter dem Zahnrad, da habe ich eine Menge Zeit dran verbracht. Jede Fox-Version bei gleichem Code ein anderes Erscheinungsbild. Im Moment habe ich zwei Codes dafür, die wohl bei einigen Nutzern geändert werden müssen, weil es eventuell mit der Auflösung nicht harmoniert.

2002Andreas

In dem Zusammenhang (weil mich das schon immer gestört hat), lässt sich der Hintergrund der ersten Zeile (lightgrey) ausblenden ( siehe Bild 1)?

Dieses ist die eine Version, bei der bei eingeschaltetem autom. Update das Feld grün hinterlegt ist.

Bei Abschaltung gleicht die Zeile den anderen. Sieht dann so aus:

Boersenfeger

Du hast autom. Update abgeschaltet (roter Punkt), aber wenn ich das richtig erkenne auf dem Bild von hier RE: Ansicht "Erweiterungen verwalten", dann geht der Zeilenhintergrund über die recht Begrenzung hinaus (oder nicht?) Müsste eigentlich so aussehen :

Für alle die einen Ordner Icons (z.B. von Endor) in chrome haben, für die habe ich mal den Code von Endor für das Zahnrad-Menü umgeschrieben, so dass die Icons aus dem entsprechenden Ordner geladen werden ( ohne Internet). Sie müssen natürlich vorhanden sein, in dem Code ist angegeben welche Bilddateien es sein müssen. Ansonsten gibt es die bei Endor (kostenlos ). So hier der Code dafür:

CSS

#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//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("..//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("..//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("..//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("..//icons/Bild62.png");
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: 13px !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: 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("..//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("..//icons/Bild67.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

Alles anzeigen

edvoldi

Ich habe auch noch zwei Baustellen wo ich nicht weiter komme.

Ich möchte gerne, wenn ich im Themenbereich beim Hovern über Deaktivieren/Aktiveren fahre,für Deaktivieren rot und Aktivieren grün als Hintergrund habe, leider schaffe ich das nicht.
Hat jemand eine Idee?
Diese Code verwende ich zur Zeit.

CSS

    .theme-enable-button {
    border-radius: 15px !important; 
    border: 1px solid grey !important;
    background: #dddddd !important;
    }
    .theme-enable-button:hover {
    border: 1px solid grey !important;
    background: skyblue !important;
    }

Gruß
EDV-Oldi

2002Andreas

Zitat von FuchsFan

lässt sich der Hintergrund der ersten Zeile (lightgrey) ausblenden

Teste bitte:

CSS

 button:focus {
     background: none !important;
 }