Beiträge von FuchsFan

FuchsFan

Zitat von Sören Hentzschel

Nö, hatte ich nicht.

Genau, Sören, da habe ich gepennt.

Grüße

FuchsFan

FuchsFan

Zitat von BarbaraZ-

content: counter(section, decimal-leading-zero)":) ";

Das ist die Zeile 21, zum Test entfernen. Sören hatte geschrieben, dass diese Zeile ersetzt werden sollte:

content: counter(section)".)";

Das ist die Zeile 11. Nummerierung der Erweiterungen

Grüße

FuchsFan

Edit:

Boooaaahh, da habe ich mich geirrt, aber trotzdem den alten Eintrag wieder zum testen einfügen.

FuchsFan

Guten Morgen!

Nach einem erneuten Update sieht es bei den Erweiterungen (nur hier) unter der Rubrik "Verwalten" so aus:

Dieses lässt sich mit dem folgenden Eintrag in den Code bereinigen: Addons Detailansicht verbreitern

Bei meiner Bildschirmauflösung von 1920x1080 war die Mindestweite 1150px, dann wurde es wieder normal angezeigt.

Danke, Andreas, für den Code.

Grüße

FuchsFan

FuchsFan

Zitat von BrokenHeart

Bitte mal testen: so sollte es jetzt funktionieren....

Sehr gut, beide eingefügt als gemeinsamer Block, keine Beanstandungen.

Was jetzt für mich nicht weiter schlimm ist, aber eventuell findest du ja noch einen Weg um das zu beheben. Wenn du in die rechte obere Ecke im Bild schaust, dann siehst du dort das Zahnrad-Symbol. Es wäre schön, wenn es auch hier oben in der Mitte erscheinen würde. Hast du noch eine Idee?

Wer dann damit leben kann , bei Mauskontakt sieht es so aus wenn ich den Eintrag ergänze. In dem Code bei /* Button oben mit dem Zahnrad */ das hinzufügen:

padding-right: 100px !important;

Die Breite des Button sind dann über die 100px zu verändern.

FuchsFan

Zitat von BrokenHeart

mit folgendem Hack auf die Gesamtbreite ausdehnen

Super, da braucht man nicht lange probieren, passt haargenau. Danke !

Zitat von BrokenHeart

gibt noch ein paar Seiteneffekte

Stimmt, habe ich auch bei Themes entdeckt.

FuchsFan

Zitat von scorpie

Naja ich mag das kompakte Layout,

Aber ja doch, akzeptiert, jeder hat seinen eigenen Geschmack.

FuchsFan

Zitat von scorpie

Aber plugins geht leider gar ned

Ist ja mein Reden, nicht so gut. Dann kannst du den folgenden Code nehmen,wenn du Wert darauf legst, da sind dann wenigstens die drei Punkte, von denen ich sprach. Ist gemacht für Bildschirmauflösung 1920x1080.

CSS

/******************** Addon-Manager Aussehen anpassen *************************************/

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

/************************************************************************************************************************/
/*****  Code neu von hier: https://www.camp-firefox.de/forum/thema/128571-ansicht-erweiterungen-verwalten/?pageNo=1 *****/

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

.addon-description {
    max-width: 1150px !important; /** Schrift in den Containern/ erlaubte Ausdehnung nach rechts in Pixel **/
    }
    
button:hover {    
    cursor: pointer !important;
    }

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

/**** Button  Deaktivieren ****/    
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] { 
    margin-left: -10px !important;
    padding-right: 20px !important;
    background: gainsboro !important; /* Hintergrundfarbe */
    border-radius: 60px !important;
    }

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]:hover {
    background: magenta !important; /* Farbe bei Mauskontakt */
    color: white !important; /* Schriftfarbe bei Mauskontakt */
    }
    
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] {
    position: absolute !important;
    top: 16px !important; /* Abstand vom oberen Rand */
    left: 780px !important; /* Entfernung zum rechten Rand hin */
    box-shadow: inset 0 0 4px 4px #888; /* innerer Schatten im Button/ 4px die Breite/ #888 die Farbe */
    }    

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

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="remove"]:hover {
    background: red !important;
    color: white !important;
    }
    
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="remove"] {
    position: absolute !important;
    top: 16px !important;
    left: 950px !important;
    box-shadow: inset 0 0 4px 4px #888;
    }    

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

addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="preferences"]:hover {
    background: blue !important;
    color: white !important;
    }
    
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="preferences"] {
    position: absolute !important;
    top: 16px !important;
    left: 550px !important;
    box-shadow: inset 0 0 4px 4px #888; 
    }    

/**** Button  Aktualisieren ****/    
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"] {
    margin-left: 60px !important;
    padding-right: 17px !important;
    background: gainsboro !important;
    border-radius: 60px !important;
    }
    
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"]:hover {
    background: lime !important;
    color: white !important;
    }
    
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="install-update"] {
    position: absolute !important;
    top: 72px !important;
    left: 900px !important;
    box-shadow: inset 0 0 4px 4px #888;
    }    
    

/**** Button  Verwalten ausgeblendet ****/
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="expand"] {  
    display: none !important;
    }

/*** Button Melden wird ausgeblendet ****/
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="report"] {
    display: none !important;
    }
    
/*** hiermit wird der Hintergrund bei Klick auf das Zahnrad-Symbol ausgeblendet ***/
button:-moz-focusring {
    box-shadow: none !important;
    outline: 0px dotted !important;
    outline-offset: 0px !important;
    }    

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

/*** hiermit werden unter Themes die Grafiken ausgeblendet ****/
.card-heading-image {
    display: none !important;
    }
    
/******** Suchfeld für Erweiterungen wird ausgeblendet *****/
#header-search,#search-label {
    display: none !important;
    }

/*** Text Suche nach Erweiterungen wird ausgeblendet ******/
#search-label {
    display: none !important;
    }

#header-search input.textbox-input::placeholder {
    color: transparent !important;
    }    

/***********************************************************************************************/
/****************** 70er Nightly Addon Manager by @.DeJaVu *************************************/

addon-list addon-card > .addon.card {
    width: 94vw  !important;  /* Ausdehnung der Container (weiße Boxen) zum rechten Rand hin */
    margin-bottom: 5px !important;  /* Abstand zwischen den Containern */
    height: 65px !important;  /* Höhe der Container */
    border: 1px solid grey !important; /* Umrandung der Container mit Farbauswahl */
    }

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

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

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

.addon-badge-private-browsing-allowed {
    width: 230px !important;
    background-position: left !important;
    }

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

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

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

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

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

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

.message-bar {
    display:none;
    }

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

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

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

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

/* Button Nach Updates suchen */
#updates-view.view-pane vbox#updates-list-empty.alert-container vbox.alert button {
    background-color: silver !important;
    border-radius:60px!important;
    }
    
#updates-view.view-pane vbox#updates-list-empty.alert-container vbox.alert button:hover {
    color: white !important;
    background-color: blue !important;
    border-radius: 60px !important;
    }

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

Alles anzeigen

FuchsFan

Der Code ist für Zurück ( ist in deinem Code aber enthalten):

CSS

/* Zurückbutton bei geöffneter Einstellung einer Erweiterung */
#go-back {
    background-color: silver !important;/*Hintergrundfarbe vom Button*/
    border-radius: 60px !important;/*Rundung vom Button*/
    box-shadow: inset 0 0 3px 3px #888; 
    }
    
#go-back:hover {
    color: white !important;
    background-color: lime !important;
    border-radius: 60px !important;
    box-shadow: inset 0 0 3px 3px #888;
    }

Alles anzeigen

Leider ist in dem Code für Plugins keine Möglichkeit dafür vorgegeben. Ein Klick in das Feld öffnet die Verwaltung, rechts oben die drei Punkte anklicken, und auswählen.

Grüße

FuchsFan

Edit:

Wenn du den Code von hier hast Ansicht "Erweiterungen verwalten", dann funktioniert auch der Zurück-Button. Was aber darin auch nicht geht ist die Sache mit den Plugins. Der von mir eingefügte Code gehört zu einer ganz anderen Zusammenstellung, und kann deshalb nicht laufen. Du hast gemischt, dass sich einige Sachen wohl nicht vertragen.

FuchsFan

@Büssen

Ich kann hier den letzten Stand des Codes anbieten. Hierin sind alle Änderungen enthalten, die ich heute mit Andreas Hilfe ausgearbeitet habe.

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


/*** 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 *************************************/
    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;
    }
    
/** Hintergrund bei Hover rechte Button **/    
    button:focus,
    button:enabled:hover {
      background-color: blue !important;
      border-radius: 20px !important;
      color: white ! important;
      box-shadow: inset 0 0 3px 3px lightgrey;
    }    
    
/******************** 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;
    }

/* Button oben mit dem Zahnrad */
    .page-options-menu > .more-options-button {
      fill: red !important;
      border: 1px solid green !important;
      border-radius: 15px !important;
    }
/* Button oben mit dem Zahnrad bei hover blau */
    .page-options-menu > .more-options-button:hover {
      fill: lime !important;
      border: 1px solid red !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-list addon-card > .addon.card {
      width: 1567px !important;
    }

/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
    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;
    }

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

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Und damit?

Zumindest macht er es bei meinem Code.

FuchsFan

Zitat von Büssen

von 1567 habe ich schon ohne Wirkung auf 2567px erhöht.

Wenn ich den Wert auf 2000 erhöhe, dann erweitert sich der Container so weit, dass ich die rechte Umrandung nicht mehr sehen kann. Und achte mal drauf im Bild, die blauen Button gehen auch mit nach rechts (sind fas nicht mehr zu erkennen).

FuchsFan

Zitat von Büssen

Diese 94 vw habe ich für die Verbreiterung angesprochen!

Hier im Nigtly mit dem neuen Code dieses:

Code

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

Für Hover und Umrandung verwende ich das Paket:

CSS

/*** Hintergrund der Container bei Hover andere Farbe ****/ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: #76ee00 !important;                       wenn der grüne Hintergrund stört auskommentieren
      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;
    }

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

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

Teste bitte:

Ja, beweist mal wieder, schnelle Truppe hier unterwegs.

Andreas, der Code behebt das Problem. Danke !!

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

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

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.

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 !!

FuchsFan

Zitat von 2002Andreas

Für das Zahnrad habe ich mir erstmal damit geholfen

Na, das sieht doch schon mal gut aus.

Danke!

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

Beiträge von FuchsFan

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly

Addons Manager Nightly