Addons Manager Nightly

2002Andreas

Ich habe den Code von Aris dazu etwas erweitert, ab Zeile 145.

CSS

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


@-moz-document  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    .more-options-menu panel-item {
      background: white !important;
      color: black !important;
      margin: 0 1px !important;
      border: 1px solid lightgrey !important;
    }
    
    addon-list panel-item:not([badged]){
      border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: white !important;
      color: black !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;
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 5px !important; 
    }
    
    /* remove three dots button */
    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: none !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: 20px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !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: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 46px !important;
      bottom: unset !important;
    }

    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 15px !important;
    }

    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -48px !important;
    }

    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -80px !important;
    }
    
    .addon.card {
       width: 1200px;
}

input[type="checkbox"].toggle-button {
    
    margin-right: 300px !important;
}

}

Alles anzeigen

milupo

Zitat von FuchsFan

Und dann bitte ich dich um einen Gefallen, steigere dich bitte nicht in diese Sache hinein, das ist es nicht wert. Ich schätze deine Hilfe sehr, habe ich immer betont, und wir sollten uns hier keine Schuldzuweisungen aufzwingen. Locker bleiben!!

Ich steigere mich da nicht hinein. Ich wollte dir nur klar machen, dass du von Anfang an die Sache sofort auf den richtigen Punkt bringst. Alles Andere ist vergeudete Zeit. Auch andere Mitglieder warten auf Hilfe. Stelle dir vor, du müsstest dann warten.

2002Andreas

Mit kleinen Anpassungen funktioniert der Code aus Beitrag Nr. 61 auch in Fx 70.

CSS

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


@-moz-document  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    .more-options-menu panel-item {
      background: white !important;
      color: black !important;
      margin: 0 1px !important;
      border: 1px solid lightgrey !important;
    }
    
    addon-list panel-item:not([badged]){
      border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: white !important;
      color: black !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;
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 5px !important; 
    }
    
    /* remove three dots button */
    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: none !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: 20px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !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: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 46px !important;
      bottom: unset !important;
    }

    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 15px !important;
    }

    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -48px !important;
    }

    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: 10px !important;
    }
    
    .addon.card {
       width: 1200px;
}

input[type="checkbox"].toggle-button {
        margin-right: 300px !important;
}

.more-options-menu {
    position: relative;
    margin-top: 29px!important;
    margin-inline-end: -8px;
}
}

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Ich habe den Code von Aris dazu etwas erweitert, ab Zeile 145.

Ja, Andreas, da gibt dir keiner mehr Antwort. Die Aufregung war einfach zu groß, um nichts, ich musste auch erst mal ein Bier zu mir nehmen. Lecker !!

Danke, für den Code, habe da noch mal reingeschaut, und ihn dann für die Auflösung 1920x1080 für mich auf Probe eingerichtet. Ich betone hier ausdrücklich für Nightly. Hier dann der Code, wer möchte langt zu. milupo und dich Andreas bitte ich den Code noch mal unter die Lupe zu nehmen, denn ich habe den Eindruck, dass da noch was überflüssig ist.

CSS

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

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
:root {
    --card-outline-color: green !important;
    }

/**************** Versionsnummer der Addons wird angezeigt *************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  
    
    /*restore version number */
    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: gold !important;
      color: black !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: 5px 25px !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: 30px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !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: 40px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

/*** Abstand zwischen den Containern ********/    
addon-card .addon { margin: 10px !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 */
    
    }    

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

/* Ausdehnung der Container zum rechten Rand ****/    
    .addon.card {
       width: 1567px;
    }

    input[type="checkbox"].toggle-button {
      margin-right: 500px !important; /* blauer Button -Deaktivieren/Aktivieren- Abstand vom rechten Rand */
    }
    
    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)".) ";
      padding-right: 20px !important; 
      margin-top:-12px!important;
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  

    button:-moz-focusring {
      box-shadow: none !important;
      outline: 2px dotted !important;
      outline-offset: 10px !important;
    }

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

/* 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; 
    }
    
    .addon-badge-private-browsing-allowed::after {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
    }     
}

Alles anzeigen

Grüße

FuchsFan

2002Andreas

Freut mich wenn zu zufrieden bist, der Dank gebührt Aris für den neuen Code

Zitat von FuchsFan

dass da noch was überflüssig ist.

So auf die Schnelle sehe ich da nichts, und wenn alles funktioniert, dann lass ihn auch so.

Boersenfeger

Auf der Basis von FuchsFan :

habe ich nun meinen Code nochmal überarbeitet und finde es jetzt supi:

Wer mag, hier ist der Code... ich hoffe fehlerfrei:

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.xul), 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: 5px 25px !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: 30px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !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: 40px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

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

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

/*  Ausdehnung der Container zum rechten Rand */    
    .addon.card {
       width: 1550px;
    }

    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; 
    }
    
    .addon-badge-private-browsing-allowed::after {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
    }     
    }

/*  Hintergrund bei Hover auf das Zahnrad-Symbol ausblenden */
    
    button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
    }    

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

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

    #header-inner,
    .sidebar-footer-button,
    .message-bar    {
    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-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;
    }
    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;
    }
    }

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

wenn alles funktioniert, dann lass ihn auch so

Ich hatte aus dem Code fünf Blöcke entfernt (probehalber), wurde trotzdem normal alles angezeigt. Nun habe ich sie aber wieder eingefügt, lasse es so.

Grüße

FuchsFan

FuchsFan

Zitat von Boersenfeger

habe ich nun meinen Code nochmal überarbeitet und finde es jetzt supi:

Schön, dann sind wir bei Nightly schon Zwei. Ich möchte dich aber noch darauf hinweisen, dass ich das Menü hinter dem Zahnrad neu einrichten musste, da stimmte so einiges nicht. Dann habe ich versucht die Button auf der rechten Seite wieder abzurunden, der Nachteil dabei, bei Mauskontakt ist wie im Addon-Manager im 70er der Hintergrund leicht zu erkennen. Das abzuändern, dazu bin ich nicht in der Lage, eventuell unterstützt uns Andreas wieder dabei. So sind wir dem alten Aussehen schon ein ganzes Stück näher gekommen.

So, hier dann Bild und Code:

CSS

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

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

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
:root {
    --card-outline-color: DarkOrange !important;
    }
    
/**************** Versionsnummer der Addons wird angezeigt *************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  
    
    /*restore version number */
    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: gold !important;
      color: black !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 5px !important; /* 5px Abstand zwischen den Button rechte Seite */
      box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten der rechten Button */
      border-radius: 15px !important; /* Abrundung der 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 */
      
    }
    
/* 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;
    }

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

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

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

    addon-page-options panel-list panel-item {
      min-width: 290px !important;
      width: 300px !important; /* Höhe des Menü-Feldes */
      
    }

    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 395px !important; /* Ausdehnung der Felder nach rechts */ 
      z-index: 1000 !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: 40px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

/*** Abstand zwischen den Containern ********/    
    addon-card .addon { margin: 8px !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 */
    
    }    

/**** 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: 47px !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;
    }
        
/* Ausdehnung der Container zum rechten Rand hin ****/    
    .addon.card {
       width: 1567px;
    }

/*** Button Deaktivieren/Aktivieren ( Blau ) ***/
    input[type="checkbox"].toggle-button {
      margin-right: 500px !important; /* Abstand vom rechten Rand */
    }
    
/****** 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)".) ";
      padding-right: 20px !important; 
      margin-top:5px!important; /* Lage im Container */
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  

    button:-moz-focusring {
      box-shadow: none !important;
      outline: 2px dotted !important;
      outline-offset: 10px !important;
    }

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

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

Alles anzeigen

2002Andreas

Zitat von FuchsFan

auf der rechten Seite wieder abzurunden

Die sind doch rund in deinem Screenshot

Zitat von FuchsFan

der Hintergrund leicht zu erkennen

Teste bitte:

CSS

button:focus,
button:enabled:hover {
  background-color: transparent !important;
 }

Kleiner Nachteil bei dem Code, wenn du oben mit der Maus auf das Zahnrad gehst, dann fehlt bei hover der Hintergrund.

Bis jetzt habe ich leider keine Lösung dafür gefunden.

2002Andreas

Für das Zahnrad habe ich mir erstmal damit geholfen

CSS

/* Button oben mit dem Zahnrad */
.page-options-menu > .more-options-button {
    fill: red !important;
}

/* Button oben mit dem Zahnrad bei hover blau */
.page-options-menu > .more-options-button:hover {
    fill: green !important;
    border: 1px solid red !important;
}

FuchsFan

Zitat von 2002Andreas

Die sind doch rund in deinem Screenshot

Ich schrieb versucht, natürlich habe ich es gemacht.

Zitat von 2002Andreas

Teste bitte:

Der Hintergrund ist weg, aber Hover funktioniert dann auch nicht mehr. Das hatte ich auch schon versucht

background: transparent !important;

mit dem gleichen Ergebnis.

Zitat von 2002Andreas

dann fehlt bei hover der Hintergrund.

Ja Andreas, so ist es. Wenn man auf eine Leiste klickt, dann erscheint vom linken zum rechten Rand ein Hintergrund in hellgrauer Farbe.

Grüße

FuchsFan

FuchsFan

Zitat von 2002Andreas

Für das Zahnrad habe ich mir erstmal damit geholfen

Na, das sieht doch schon mal gut aus.

Danke!

2002Andreas

Zitat von FuchsFan

aber Hover funktioniert dann auch nicht mehr

Mein Code ist etwas anders als deiner bezüglich dem Hintergrund der rechten Button.

Bei hover sieht das hier so aus:

Der graue Hintergrund ist mit dem Code weg, und hover funktioniert trotzdem.

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

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
:root {
    --card-outline-color: yellow !important;
    }
    
/**************** Versionsnummer der Addons wird angezeigt *************************************/
    
    /*restore version number */
    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;
    }
    
    addon-list section addon-card div.card.addon addon-options panel-list panel-item {
      background: green !important;
        color: white !important;
        border-radius: 80px!important;
    }
    
    addon-list section addon-card div.card.addon addon-options panel-list panel-item:hover {
      background: red !important;
    }
    
    .more-options-menu panel-item {
      background: white !important;
      color: black !important;
      margin: 0 1px !important;
      border: 1px solid lightgrey !important;
    }
    
    addon-list panel-item:not([badged]){
        border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: red !important;
        color: white !important;
    }
    
       
    addon-list panel-item{
      margin: 0 1px !important;
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 5px !important; 
    }
    
    /* remove three dots button */
    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: none !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: 20px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !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: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 46px !important;
      bottom: unset !important;
    }

    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 15px !important;
    }

    addon-list addon-card:not([expanded="true"]) panel-list {
         margin-top: -48px !important;
    }

    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: 10px !important;
    }
    
    .addon.card {
       width: 1200px;
    }

    input[type="checkbox"].toggle-button {
      margin-right: 300px !important;
    }

    .more-options-menu {
      position: relative;
      margin-top: 29px!important;
      margin-inline-end: -8px;
    }
   
    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)": ";
      padding-right: 20px !important; 
      margin-top:2px!important;
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  

    button:-moz-focusring {
      box-shadow: none !important;
      outline: 2px dotted !important;
      outline-offset: 10px !important;
    }
    
    /* Button oben mit dem Zahnrad */
.page-options-menu > .more-options-button {
    fill: red!important;
}

/* Button oben mit dem Zahnrad bei hover blau */
.page-options-menu > .more-options-button:hover {
   fill: green!important;
   border: 1px solid red !important;
    }
    
button:focus,
button:enabled:hover {
  background-color: transparent !important;
 }
 
 .toggle-button:hover,
 button{
    cursor: pointer !important;
}
    
/*************** 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: silver !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; 
    }
    
    .addon-badge-private-browsing-allowed::after {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
    }    

    
}

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Teste bitte:

So, Andreas, ich habe deinen Code leicht angepasst, nun bin ich zufrieden.

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

Danke !!

2002Andreas

Zitat von FuchsFan

nun bin ich zufrieden.

Nur das zählt

FuchsFan

Zitat von 2002Andreas

Nur das zählt

Wenn ich jetzt auf das Zahnrad gehe, so verändert sich dort auch der Hintergrund. So auch bei dem Zurück-Button unter Verwalten.

2002Andreas

Der wird dann auch blau, weil:

button:focus,

button:enabled:hover {

background-color: blue !important;

FuchsFan

Zitat von 2002Andreas

Der wird dann auch blau, weil:

Gilt dann für alle Button, außer auf der rechten Seite. Prima !!

FuchsFan

Zitat von 2002Andreas

Der graue Hintergrund ist mit dem Code weg, und hover funktioniert trotzdem.

Das ist natürlich auch eine Möglichkeit, werde den Code studieren. Danke !

Noch eine Sache, gebe ich den Code dazu, dann wird unter Erweiterungen der Text auch richtig angezeigt. Gehe ich dann bei einer Erw. auf Verwalten , so ist der Text dort senkrecht aufgeführt.

CSS

.addon-badge-private-browsing-allowed::after {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
    }

2002Andreas

Dein Edit habe ich eben erst gelesen, besser wäre immer ein neuer Beitrag

Teste bitte:

CSS

    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
      
    }  
    
    .addon-badge-private-browsing-allowed {
      min-width: 500px !important;
    }

Addons Manager Nightly

Ähnliche Themen

Anpassungen der css-Codes ab Firefox 68, bzw. 69 - Diskussion

extras_config_menu funktioniert im Nightly nicht mehr

Erweiterungen Fenster [gelöst]

Addons-Manager in Nightly bereinigen