Beiträge von FuchsFan

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

FuchsFan

Zitat von 2002Andreas

wenn alles funktioniert, dann lass ihn auch so

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

Grüße

FuchsFan

FuchsFan

Zitat von 2002Andreas

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

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

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

CSS

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

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

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

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  
    
    /*restore version number */
    div:not([current-view="updates"]) .addon-name-link[title]::after,
    div:not([current-view="updates"]) .addon-name[title]::after {
    display: block !important;
    content: attr(title) !important;
    margin-top: -22px !important;
    }



/***** Hintergrund der Button auf der rechten Seite *********/    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: gold !important;
      color: black !important;
      
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") {
      @media (prefers-color-scheme: dark) {
        addon-list addon-card:not([expanded="true"]) panel-list *,
        .more-options-menu panel-item {
          background: black !important;
          color: white !important;
      }
    }}
    
    addon-list panel-item{
      margin: 0 1px !important;
      box-shadow: inset 0 0 3px 3px grey;
    }
    
   
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 5px 25px !important; /* 5px ist die Höhe der rechten Button */
    }
    
/* Entfernt den Drei-Punkte-Button aus dem Container */
    addon-card .more-options-button {
      display: none !important;
    }

    /* remove button icon */
    addon-list panel-item {
      --icon: unset !important;
    }
    
    /* restore buttons */
    addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
      position: relative !important;
      display: block !important;
      overflow: hidden !important;
      margin-top: -25px;
      box-shadow: unset !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      
    }

    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }

    panel-item[action="preferences"] {
      order: -1;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }
    
    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 300px !important;
      z-index: 1000 !important;
      
    }
    
    addon-page-options panel-list panel-item {
      min-width: 280px !important;
      width: 280px !important;
      
    }
    
    .sticky-container {
      z-index: 1000 !important;
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-inline-start: 30px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: 290px !important;
      width: 290px !important;
      
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
    
    
    addon-list addon-card:not([expanded="true"]) panel-list {
      position: absolute !important;
      display: block !important;
      overflow: hidden !important;
      box-shadow: none !important;
      background: unset !important;
      border: none !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      left: unset !important;
      top: unset !important;
      right: 40px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
      bottom: unset !important;
    }

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

/****** Höhe der Container ****/
    addon-list[type="extension"]{ --card-padding: 25px }
    addon-card .addon-card-collapsed{ margin-bottom: 2px !important; /* Button rechts Abstand vom oberen Rand */
    
    }    

/**** Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw. *****/
    addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 47px !important; 
    }

/**** Abstand der Button vom oberen Rand bei  Plugins, Wörterbücher, usw. *****/
    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -60px !important;
    }

/**** Abstand der Button vom oberen Rand bei Themes *****/
    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      margin-top: -130px !important;
    }

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

    input[type="checkbox"].toggle-button {
      margin-right: 500px !important; /* blauer Button -Deaktivieren/Aktivieren- Abstand vom rechten Rand */
    }
    
    body {
      counter-reset: section;                     
    }

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section)".) ";
      padding-right: 20px !important; 
      margin-top:-12px!important;
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  

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

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

    #categories > .category:not([disabled]){
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      margin-top: 1px !important; /*Abstand zum Button darüber*/
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 5px 5px #888;
    }
    

/*** Aktiver Button rot, Schrift weiß ****/
    #categories > .category[selected]{
      color: white !important;
      background-color: red !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }

/* Hintergrund der Button blau, Schrift weiß bei hover mit der Maus*/
    #categories > .category:hover, #preferencesButton:hover, #helpButton:hover, #addonsButton:hover {
      color: white !important;
      background-color: blue !important;
      margin-top: 1px !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 5px 5px #888; 
    }
    
    .addon-badge-private-browsing-allowed::after {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 20px !important;
    }     
}

Alles anzeigen

Grüße

FuchsFan

FuchsFan

Zitat von milupo

hast du die Katze aus dem Sack gelassen

Nun wird doch der Hund in der Pfanne verrückt, ich rede die ganze Zeit nur von der einen Sache.

Zitat von milupo

um den Code wolltest du dich anfangs auch drücken

Ich drücke mich um gar nichts, den kann jeder haben, wenn er möchte. Den habe ich nun schon etliche Male veröffentlicht (nicht in diesem Thread), und bin deshalb davon ausgegangen, weil wir beide darüber genügend Zeit verbracht haben, dass du wüsstest wovon ich spreche.

Zitat von milupo

Ansetzen könnte man bei den Regeln, die für die Schaltflächen gelten, also wo steht: [action="toggle-disbled], [action="remove"] usw.

Das ist doch schon mal der erste Ansatz.

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

FuchsFan

Zitat von milupo

Meinst du den:

Ansicht "Erweiterungen verwalten"

Du hast dort gelesen, dass der Code dort nicht komplett ist?

Ja, den meinte ich. Hat aber rein gar nichts mit dem Code aus #41 zu tun, es war nur zur Demo gedacht.

FuchsFan

Du willst mich nicht verstehen, der Mensch fragt auch danach Addons Manager Nightly, und hier

Zitat von Boersenfeger

Kann jemand noch was zu #27 sagen?