Addons Manager Nightly

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

2002Andreas

Freut mich

Büssen

Guten Abend,

mit Interesse habe ich diesen Thread überflogen.

Eine Frage hätte ich zu dem Bild aus diesem Beitrag: Addons Manager Nightly

Wie spreche ich die Umrandung (im Code) an, die sich bei "Hover" zeigt? Ich möchte den Rahmen noch verbreitern.

Für die Code FX 70 u. 71 war ja diese Zeile zuständig:

CSS

addon-list addon-card > .addon.card
{
    width: 94vw  !important;  /* bringt die Container bis zum rechten Rand */

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

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

2002Andreas

Zitat von Büssen

Wie spreche ich die Umrandung (im Code) an, die sich bei "Hover" zeigt? Ich möchte den Rahmen noch verbreitern.

Im Code aus Beitrag Nr. 73:

CSS

 addon-list section addon-card div.card.addon addon-options panel-list panel-item:hover {
      background: green !important;
        color: white !important;
        border-radius: 80px!important;
    }

Farbe etc. musst du dir dann natürlich anpassen.

2002Andreas

So sieht der kompl. aus:

CSS

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

Büssen

Den Wert aus Beitrag Addons Manager Nightly von 1567 habe ich schon ohne Wirkung auf 2567px erhöht.

Vielleicht habe ich mich unklar ausgedrückt:

Den Code aus dem Vorbeitrag habe ich ausprobiert. Ich möchte den Rahmen um die grüne Füllung nach rechts verschieben (s.a. Pfeil!)

2002Andreas

Und damit?

CSS

addon-list addon-card > .addon.card {
width: 2567px !important;
}

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

Und damit?

Zumindest macht er es bei meinem Code.

2002Andreas

Hier sieht das so aus:

2002Andreas

Zitat von Büssen

Den Code aus dem Vorbeitrag habe ich ausprobiert.

Am besten den kompl. Code wieder hier posten.

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

Büssen

Vielen Dank vorerst für eure Einlassungen.

Mir wird es momentan zu wuselig - scheinbar hat sich durch die diversen Änderungen (bei mir) einiges verbogen.

Ich mache dann mal Feierabend.

Bis dann!

2002Andreas

Zitat von Büssen

durch die diversen Änderungen (bei mir) einiges verbogen.

Darum:

Zitat von 2002Andreas

Am besten den kompl. Code wieder hier posten.

BrokenHeart

Die Breite der Add-on-Liste kann man mit folgendem Hack auf die Gesamtbreite ausdehnen:

CSS

:root {
    --section-width: -1px !important;
}

Dann kann folgender Block entfernt werden:

CSS

/* Ausdehnung der Container zum rechten Rand hin ****/    
   /* addon-list addon-card > .addon.card {
      width: 1567px !important;
    }*/

Edit: Ok, gibt noch ein paar Seiteneffekte , muss nochmal überprüfen...

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.

BrokenHeart

Zitat von FuchsFan

Stimmt, habe ich auch bei Themes entdeckt.

Ja, da passt es (noch) nicht!

BrokenHeart

Das Problem mit der falsch dargestellten Theme-Seite, ergibt sich dadurch, dass die Größe (insbesondere die Höhe) des Theme-Vorschaubildes durch den negativen Wert der Breite falsch berechnet wird und daher nicht dargestellt wird.

In der Entwicklungsumgebung kann ich das Problem mit einer zusätzlichen Regel lösen. Sobald ich aber die gleiche Regel in die userContent.css einfüge, ignoriert er alles. Hängt vielleicht auch irgendwie mit den Frames zusammen...

Die Regel lautet:

CSS

.card-heading-image 
{
    width: -1px;
    height: 100px;
    object-fit: cover;
}

Hier mal ein Screenshot, wo die Darstellung richtig ist:

Vielleicht sieht ja jemand sofort wo der Fehler ist.

Ansonsten war es vielleicht doch zu sehr gehackt...

BrokenHeart

Aarrgh....Ständig füge ich überflüssige '!important'-Anweisung hinzu und genau dann, wenn sie wirklich notwendig wären, lasse ich sie einfach weg

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

CSS

.card-heading-image {
      height: 100px !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