Beiträge von FuchsFan

FuchsFan

Zitat von edvoldi

passt Danke

Wenn du die nicht aktiven auch noch mit Hitergrund haben möchtest, dann das noch dazu:

CSS

addon-card .addon.card[active="false"] .theme-enable-button {
      background: dodgerblue!important;
    }

FuchsFan

Zitat von FuchsFan

Da kann ich dir auch nicht weiter helfen.

Na, eventuell doch. Probiere mal:

CSS

addon-card .addon.card[active="true"] .theme-enable-button {
      background: yellow!important;
    }
    
    addon-card:hover .addon.card[active="true"] .theme-enable-button {
      background: red  !important;
    }
    
    addon-card:hover .addon.card[active="false"] .theme-enable-button {
      background: green  !important;
    }

Alles anzeigen

FuchsFan

Zitat von edvoldi

zwei unterschiedliche Farben beim Hovern erscheinen

Das ist richtig, das kann nicht funktionieren. Da kann ich dir auch nicht weiter helfen.

FuchsFan

Zitat von 2002Andreas

Teste bitte:

Danke, Andreas, das passt.

Zitat von edvoldi

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

Teste bitte:

Farben habe ich mal testweise geändert.

CSS

button.theme-enable-button {

border-radius: 15px !important;

border: 1px solid grey !important;

background: yellow !important;

}

button.theme-enable-button:hover {

border: 1px solid grey !important;

background: red!important;

}

Alles anzeigen

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

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

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

FuchsFan

Zitat von BrokenHeart

Oder hast du noch einen Dokument-Filter weiter oben/in der aufrufenden Datei verwendet?

Nein.

FuchsFan

Zitat von Sören Hentzschel

Das komplett wegzulassen wäre daher eine furchtbare Idee.

Dann habe ich da doch was missverstanden.

Zitat von BrokenHeart

Nein. Lass einfach den Code so, wie Aris ihn geschrieben hat (wie in #412), auch wenn bestimmte Filter redundant sind...

Ja, das werde ich so beibehalten, war ja bisher immer gut.

FuchsFan

Zitat von BrokenHeart

Das heißt, wenn irgendwo die gleichen Bezeichner verwendet werden, werden diese durch deine 'Addon-Regeln' mitverändert.

Du bist also der Meinung, dass es doch besser wäre, die Adressen mit xhtml anzusprechen (nach der jeweiligen Fox-Version).

FuchsFan

Wenn ich alles dazu lösche und nur das verwende, dann wird alles sauber dargestellt:

CSS

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

/*  Addons-Verwaltung: Hintergrundfarben */
   #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 */
    }

Alles anzeigen

FuchsFan

Zitat von BrokenHeart

Bist du sicher? Bei mir funktioniert nichts mehr, wenn ich chrome://mozapps/content/extensions/aboutaddons.html im Dokumenten-Filter weglasse.

Ich habe alle diese Adressen (und die zweite Klammer ) aus meinem Code ( zwei unterschiedliche) entfernt, läuft tadellos.

FuchsFan

Zitat von Büssen

Bei Kick auf "Zahnrad" waren z.B. immer Icons im Klappfenster drin.**

In dem Code sind auch keine Icons enthalten, da musst du mal schauen, was ich hier geschrieben habe: RE: Ansicht "Erweiterungen verwalten"

1., 2. und 3. zusammen, dann ist der Manager vollständig. Aber du verwendest ja wohl für die Button eigenen Code, wie ich das erkennen konnte. Da musst du dann überprüfen, ob du alle Dateien zur Verfügung hast.

Zitat von Büssen

Du siehst aber auch alles (uBlock).!!

Meine Zirbeldrüse arbeitet immer noch auf Hochleistung.

Zitat von Büssen

So passt es gut, die überdeckten Zeilen bei "Plugins" sind nicht schlimm.

Plugins ist nicht so wichtig, aber die Nummerierung ( links rote Zahlen) ist teilweise verdeckt. In dem Code von hier: RE: Ansicht "Erweiterungen verwalten" die Zeilen 320 und 322 , mit den Werten mal probieren, dass die Zahlen vollständig zu sehen sind.

FuchsFan

Zitat von Büssen

ich wollte mit meinem Anliegen eigentlich nicht so viel Staub aufwirbeln

Hallo Büssen!

Hier wird nur in ganz seltenen Fällen Staub aufgewirbelt, war nur eine weitere Lernstunde für alle. Wäre es nicht zu deinem Anliegen gekommen, dann hätte uns Sören wohl kaum diesen entscheidenden Hinweis gegeben.

So, Hauptsache du bist zufrieden. Der Code könnte noch geändert werden, die Thematik dazu hast du ja mitbekommen. Wenn du ihn bereinigt haben möchtest, so sag an.

Nachtrag:

Du müsstest mal uBlock aktualisieren, Version 1.27.6 ist schon dran.

FuchsFan

Zitat von Sören Hentzschel

das ist beides völlig überflüssig und kann weggelassen werden, weil about:addons von der entsprechenden @-Regel auch ohne das bereits abgedeckt wird.

Das habe ich jetzt probiert, alles komplett raus, und es geht auch so. Danke, Sören, wieder was gelernt.

FuchsFan

Zitat von milupo

Bei den meisten Dateien ist die letzte Aktualisierung Monate oder sogar Jahre her und manchmal ist die Versionsnummer im Dateinamen enthalten.

Ja, das stimmt. Aber du hast nicht gesagt, wieso trotzdem alles funktioniert.

FuchsFan

Zitat von milupo

Ich bin mir ziemlich sicher, dass das nicht neu für dich ist.

Genau, da habe ich schon von gehört. Aris aktualisiert seine Dateien fortlaufend, da bin ich immer der Meinung , dass alles gut ist.

Aber komischerweise arbeitet alles sauber, wie kommt das denn?

FuchsFan

Zitat von milupo

Also ich sehe schon mal in den Zeilen 23, 35 und 72 immer den gleichen Fehler.

Dann musst du mal Aris ansprechen. Ich wusste nicht genau, ob da nun auch xhtml hin kommt, aber du wirst mir das bestimmt gleich erzählen.

FuchsFan

So, Büssen, hier wird nicht aufgegeben, soweit kommt das noch.

Du nimmst jetzt mal für den kleinen Bildschirm diesen Code (kannst für jeden nehmen mit Anpassungen), die Breite der Container ist auf 800 Pixel eingestellt. Das kannst du verändern in Zeile 55 . Die Grafiken unter Themes haben auch diese Länge , dann passt es, können aber auch angepasst werden. Kann aber auch so bleiben, auch wenn du die Container verkürzen solltest, so schneiden die Grafiken mit dem rechten Rand ab.

Aus dem Code habe ich noch die blaue Schrift für das private Browsing enfernt, weil die Button eventuell alles überdecken. Richtet sich immer danach, wie lang die Container sind.

Was nicht so schön ist, dass bei Plugins die Button die Schrift überlagern, aber Kompromisse muss man hierbei schon eingehen.

So dann bitte Testen!

CSS

/*============================= Addon-Manager ================================*/

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

/* 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;
    } }
    
/***************** Container anpassen **************************************************/
@-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;
    }
    
/* 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 */
      width: 800px !important;  /* Länge aller  Container */
      max-height: 120px !important; /* Höhe der Container bei Themes / nicht unterschreiten */
    } }    
    
/* unter Verwalten das sich öffnende Menü verbreitern */    
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
 url-prefix(about:addons) {      
       
    html body div#full div#content div#main div addon-card div.card.addon{
      border: 2px solid grey !important; /* Umrandung auch bei allen Containern wirksam */
      border-radius: 15px !important; /* Ecken abgerundet */
    } }            

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/************Button (Felder) auf der rechten Seite **************************************/

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

    html {
      --addon-page-options-width: 340px;
    }
    
    /* <some> locales require adjustments */
    html[lang="de"] {
      --addon-page-options-width: 370px;
    }
    
    html:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
      --addon-page-options-width: 440px;
    }
    
    html[lang*="es-"] {
      --addon-page-options-width: 460px;
    }
    /**/
    
/* 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: blue !important;
      color: white !important;
    }    
    
    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 lightgrey !important;
    }
    
    addon-list addon-card panel-list * {
      background: white !important;
      color: black !important;
    }
    
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
      border: 1px solid black !important;
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") {
      @media (prefers-color-scheme: dark) {
        addon-list addon-card panel-list *,
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
        .more-options-menu panel-item {
          background: black !important;
          color: white !important;
        }
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
          border: 1px solid white !important;
        }
    } }
    
    :-moz-any(addon-list,panel-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 */
    :host([checked]),
    panel-item[checked],
    :-moz-any(addon-list,panel-list) panel-item {
      --icon: unset !important;
    }
    
    /* restore buttons */
    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: var(--addon-page-options-width) !important;
      z-index: 1000 !important;
    }
    
    addon-page-options panel-list panel-item {
      min-width: calc(var(--addon-page-options-width) - 20px) !important;
      width: 320px !important;
    }
        
    .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: calc(var(--addon-page-options-width) - 10px) !important;
      width: calc(var(--addon-page-options-width) - 10px) !important;
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
    
    addon-card panel-list {
      position: relative !important;
      display: flex !important;
      overflow: hidden !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      float: right !important;
      right: 36px !important;
    }
    
    addon-card panel-list {
      margin-top: -48px !important;
    }

    addon-card .addon.card .theme-enable-button {
      -moz-appearance: none !important;
      min-width: 20px !important;
      width: 20px !important;
      max-width: 20px !important;
      height: 20px !important;
      font-size: 0 !important;
      border: 1px solid !important;
      border-top: 3px solid !important;
      -moz-margin-end: 1px !important;
      opacity: 0.9 !important;
    }
    
    addon-card .addon.card .theme-enable-button:hover {
      cursor: pointer !important;
      opacity: 1.0 !important;
      filter: brightness(2.00) !important;
    }
    
    addon-card .addon.card[active="true"] .theme-enable-button {
      background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-card:hover .addon.card[active="true"] .theme-enable-button {
      background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
    }
    
    addon-card:hover .addon.card[active="false"] .theme-enable-button {
      background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }

    addon-card .card-contents {
      display: block !important;
      height: 40px !important;
    }
    
    addon-card .card-contents .addon-description {
      display: block !important;
      mask-image: linear-gradient(to left, transparent, black 10px) !important;
    }

    addon-card .addon.card .theme-enable-button,
    input[type="checkbox"].toggle-button {
      -moz-margin-end: 8px !important;
    }
    
    .card-contents input[type="checkbox"].toggle-button {
      -moz-margin-end: 0px !important;
    }
    
    addon-card > .addon.card,
    addon-card > .addon.card * {
      overflow: hidden !important;
    } }

/****************** sonstige Anpassungen ***************************/

/* unter Themes die Grafik anpassen */    
.card-heading-image {
      min-width: 800px !important; /* Länge der Grafik */
      height: 80px !important; /* Höhe der Grafik */
      margin-left: -4px !important; /* Abstand vom linken Rand */
      margin-top: -6px !important;  /* Abstand vom oberen Rand */
    } 
    
/* 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: 430px !important; /* lila Icon Entfernung nach rechts */
    }
    
/* Unter Plugins - Nachfragen ob aktiviert werden soll - entfernt */
    .card > 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(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;
    }     

/* 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: 5px !important; 
      margin-top: -2px!important; /* Lage im Container */
      margin-left: 1px !important; /* Abstand vom linken Rand */
    }  

/* Größenänderung der Button rechte Seite */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 3px 20px !important; /* 3px ist die Höhe und 22px die Länge der rechten Button */
      border: 1px solid grey !important;  /* Umrandung */
    }    

/* Länge der Container unter Empfehlungen */    
.card {
      width: 800px!important; /* Länge */
      background: white !important;  /* Hintergrund */
    }
    
/* 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;
    }        
/*** ENDE - Aussehen des Menü hinter dem Zahnrad ***/    
    
/* 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;
    }    

/* 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;
    }
/* Aktiviert/Deaktiviert - Farbe - ENDE */

Alles anzeigen

FuchsFan

Zitat von Büssen

Natürlich kann ich warten - es eilt nicht!

Hallo Büssen!

Schlechte Nachrichten, denn ich kann dir keinen Code anbieten, der auf der rechten Seite Button hat (nur die drei Punkte).

Den alten Code, den wir mal für die Button genutzt haben, der funktioniert nicht mehr. Die Codes von Aris mit den Button lassen sich nicht verkürzen (bzw. ich weiß nicht wie), verlängern schon.