Beiträge von Büssen

Büssen

Moin edvoldi,

nachdem ich o.g. Code installiert habe, sieht es nunmehr so aus:

In Themes sieht es noch nicht so aus, wie im #498 dargestellt. Vielleicht fällt dir noch was ein?

Zitat von edvoldi

Ich habe da einen Code der auf mehrere Seiten wirkt und ich weiß noch nicht wo der ist.

den habe ich vorher auch schon nutzen können, z.B. für dieses Forum:

Diese Darstellung war vorher nicht so.

Daher fand ich es ganz praktisch, hervorgerufen durch deinen (versteckten) Code.

Übrigens bin ich auch ein Fan von "Silvermel" - genutzt seinerzeit im Firefox und Thunderbird.

Erst mal Danke für die Bemühungen!

Büssen

Hallo edvoldi,

Habe den Code mal mit Einstellung 90% laufen - sieht so aus:

Der zeigt sich noch nicht im richtigen Gewand. In der Card fehlt (s.a.'#498) der richtige Inhalt für das "Theme" "charamel 25".

Im oberen Bereich hakt es auch noch?

PS: ich mache erst mal eine Pause!

Büssen

Zitat von edvoldi

habe ich schon

Gruß
EDV-Oldi

Hallo edvoldi ,

habe mal von dir diesen Code übernommen:

CSS

/*   AGENT_SHEET **********************/
/*   Geändert von EDV-Oldie ***********/
/*   Letzte Änderung am 02.04.2020 ****/


 
/*   FF - Add-ons-Manager - checkbox   */

    menuitem[checked="true"] > .menu-iconic-left{
    -moz-appearance: menuimage !important;
    }
    menuitem[type="checkbox"] .menu-iconic-icon {
    display:block  !important;
    }

    menuitem[type="checkbox"] {
    -moz-appearance:none !important;
    margin-bottom: 4px !important;
    background: url("../../../Icons/blocked.png") no-repeat !important;
    padding-left:5px!important;
    background-position:5px 1px !important;} 


    menuitem[type="checkbox"][checked="true"] {
    -moz-appearance:none !important;
    margin-bottom: 4px !important;
    background: url("../../../Icons/V_grün.png") no-repeat !important;
    padding-left:5px!important;
    background-position:5px 1px !important;}


/*   FF - Add-ons-Manager linke Spalte   */

    #sidebar {
    background-color: darkgray !important;
    }

    #categories {
    margin-top:-1px !important;
    }
    #categories > .category,
    #preferencesButton,
    #addonsButton,
    #help-button {
    margin-left:1px!important;
    }
    #categories > .category:not([disabled]) {
    border-radius:60px!important;
    }
    

    
    #category-availableUpdates {
    color:red !important;
    }
    
    #category-discover .category-icon {
    background: silver url("../../../Icons/Add-ons-Web.png") !important;
    -moz-image-region: auto !important;}
    #category-discover[selected="true"] {
    background-color: silver !important;
    color: white !important; }
    
     
    #category-extension .category-icon {
    list-style-image: url("../../../Icons/addon_grün_32.png") !important;
    -moz-image-region: auto !important;}
    #category-extension[selected="true"] {
    background-color: silver !important;
    color: white !important;
    }
    
     
    #category-theme .category-icon {
    list-style-image: url("../../../Icons/themen_36.png") !important;
    -moz-image-region: auto !important;}
    #category-theme[selected="true"] {
    background-color: silver !important;
    color: white !important; }
     
     
    #category-plugin .category-icon {
    list-style-image: url("../../../Icons/plugin.png") !important;
    -moz-image-region: auto !important;}    
    #category-plugin[selected="true"] {
    background-color: silver !important;
    color: white !important; }
     
     
    #category-dictionary .category-icon {
    list-style-image: url("../../../Icons/wörterbücher_32.png") !important;
    -moz-image-region: auto !important;}
    #category-dictionary[selected="true"] {
    background-color: silver !important;
    color: white !important; }

    #preferencesButton,
    #addonsButton,
    #help-button,
    #category-availableUpdates {
    background-color: silver !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }
    #preferencesButton:hover,
    #addonsButton:hover,
    #help-button:hover {
    color:white !important;
    background-color: gray !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }
    
    #preferencesButton .sidebar-footer-link.preferences-icon {
    list-style-image: url("../../../Icons/config.png") !important;
    -moz-image-region: rect(0px 0px 0px 0px) !important; }
    

    #addonsButton {
    list-style-image: url("../../../Icons/addons.png") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important; }
    
    
    #help-button .sidebar-footer-link {
    list-style-image: url("../../../Icons/hilfe.png") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important; }



/*   FF - Add-ons-Manager rechte Spalte   */

/*   Rechte Spalte Breite einstellen      */
/*   Farbe   */
    html[dir="ltr"],
    .sticky-container,
    .main-search,
    .main-heading {
    background: silver !important;
    }    
    
    
/*   Name für Erweiterungen & erste Zeile   */
    .header-name {
    font-size:0px !important;
    margin-top: 17px !important; 
    }
    .header-name[data-l10n-id="extension-heading"]:after{
    font-size:18px !important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldi' !important;
    }
    .main-search {
    max-height: 10px !important;
    }    
/*   Name für Erweiterungen Ende   */    
    .search-label{display: none !important; }
    .header-name{margin-top: -35px !important; }
    .page-options-menu{margin-top: -70px !important; margin-right: 100px !important;}
    .main-search{margin-left: 500px !important;}
/*   Name für Erweiterungen & erste Zeile Ende   */


/*   Rechte Spalte Breite einstellen   */
    addon-list addon-card > .addon.card,
    addon-card[expanded] >.addon.card {
    width: 72vw !important; }
  

/*   Aktiv-Passiv 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"] {
    background: gainsboro !important;
    font-weight: bold !important;
    color: green !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"] {
    background: gainsboro !important;
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px;
    }
    
/*   Aktiv-Passiv Farbe Ende   */


/*   Add-on Manager - Farbe der Elemente anpassen   */
    .addon.card {
    background: gainsboro !important;
    max-width: initial !important;
    }

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

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

/**** fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. ****/    
    body {
      counter-reset: section;                     
    }

/**** Hintergrund Container und Umrandung ****/    
  /*   addon-list addon-card > .addon.card {
      background: #F8F8FF !important;
      border: 2px solid #EEAD0E !important;
      border-radius: 20px !important;
    }                 */

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


/*   Add-on Manager - Farbe der Elemente anpassen Ende   */

    
    #list-view > #addon-list .date-updated {
    display: block  !important; }
    
    
/*   Add-ons-update   */ 
    panel-list {
    background: gainsboro !important;
    }
    .more-options-button[action="page-options"] {
    background: url("../../../Icons/update.png") no-repeat !important;
    border: 1px solid blue !important;
    padding-left:5px!important;
    background-position:5px 5px !important; 
    }
    .more-options-button[action="page-options"]:hover {
    background: gray url("../../../Icons/update.png") no-repeat !important;
    border: 1px solid blue !important;
    padding-left:5px!important;
    background-position:5px 5px !important;
    }
    

    panel-item[action="check-for-updates"][data-l10n-id="addon-updates-check-for-updates"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/updates_prüfen.png") !important; }
    
    
    panel-item[action="view-recent-updates"][data-l10n-id="addon-updates-view-updates"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update_1.png") !important; }


    panel-item[action="install-from-file"][data-l10n-id="addon-install-from-file"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update_2.png") !important; }


    panel-item[action="debug-addons"][data-l10n-id="addon-open-about-debugging"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_debuggen.png") !important; }
    
    
    panel-item[action="set-update-automatically"][data-l10n-id="addon-updates-update-addons-automatically"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/V_grün.png") !important;
    }    
/*    panel-item[action="set-update-automatically"][data-l10n-id="addon-updates-update-addons-automatically"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/blocked.png") !important; }    */    
    
    
    panel-item[action="reset-update-states"][data-l10n-id="addon-updates-reset-updates-to-automatic"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_auto.png") !important;
    }    
    panel-item[action="reset-update-states"][data-l10n-id="addon-updates-reset-updates-to-manual"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_manuell.png") !important; }
    
    
    panel-item[action="manage-shortcuts"][data-l10n-id="addon-manage-extensions-shortcuts"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/keybord.png") !important; }

    
    
/*   Ghost Button Erweiterungen   */

/*  panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/deaktivieren.png") !important; }
    
    panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons.png") !important; }
*/    
    
    panel-item[action="remove"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/papierkorb_rot.png") !important; }
    
    panel-item[action="install-update"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update.png") !important; }
    
    panel-item[action="preferences"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/config.png") !important; }
    
    panel-item[action="report"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/warnung.png") !important; }
    

    panel-item[action="expand"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/V_grün.png") !important; }
    
    
/*   Ghost Button Plugins   */

    panel-item[data-l10n-id="manage-addon-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/addon_verwalten.png") !important; }
    
    
    panel-item[data-l10n-id="ask-to-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/info_1.png") !important }
    
    
    panel-item[data-l10n-id="always-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/always-activate.png") !important; }
    
    
    panel-item[data-l10n-id="never-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/never-activate.png") !important; }
    
    
/*   Ghost Button weitere Einstellungen   */
    named-deck-button[data-l10n-id="permissions-addon-button"] {
    background: red !important;
    color: green !important; } 
    
    
    
    
    
     
     


     /*   Add-ons-Manager Ende   */

Alles anzeigen

Leider bekomme ich z.B. bei "Themes" nicht das angezeigt wie auf deinem Beispielbild.

Kannst du da mal reinschauen.

Büssen

Moin,

ich habe zugelangt. Musste in der Darstellung noch Anpassungen vornehmen, da ich sicher eine andere Auflösung verwende.

Sieht nunmehr so aus (Firefox 76.01):

Ich hoffe, dass ich alles richtig dargestellt habe.

Büssen

Zitat von FuchsFan

Hallo Büssen!
.............................................
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.

Ich werde erstmal weiter testen. diese Version unterscheidet sich im Design ein wenig von der Vorversion.

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

Du siehst aber auch alles (uBlock).!!

Mein Hauptgerät ist und bleibt immer noch der PC - da ist die richtige Version drauf.

**Nachtrag: die neue Version auf dem PC zeigt die Icons an! Aufgrund des größeren Bildschirms natürlich auch nicht mehr die verdeckten Schriften bei "Plugins."

Büssen

Zitat von 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 .

Moin FuchsFan,

ich wollte mit meinem Anliegen eigentlich nicht so viel Staub aufwirbeln - inzwischen ist ja einiges passiert.

Habe den anhängenden Code installiert:

Diese Einstellung bei 80 % vorgenommen - und den Wert in Zeile 55 dabei herauf gesetzt.

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

Werde weiter testen - vielen Dank für deinen Einsatz!

Büssen

Zitat von FuchsFan

Ich werde jetzt einen neuen aufbauen, in dem dann auch die Breite einstellbar ist. Bis dahin musst du dich in Geduld üben. Kannst du das ?

FuchsFan

In Corona-Zeiten gibt es keinen Zeitfaktor - sondern nur den "Geduld-Faktor"

Natürlich kann ich warten - es eilt nicht!

Büssen

Hier nun mein Code für den "Addon-Manager"

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 ************************************/
/******** Button (kleine Quadrate)  einrichten - farbliche Anpassung ********************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    
    panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }
    
    panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
      -moz-context-properties: fill !important;
      fill: green !important;
    }
    
    panel-item[data-l10n-id="remove-addon-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }

    panel-item[data-l10n-id="install-update-button"] {
      -moz-context-properties: fill !important;
      fill: blue !important;
    }
    
    panel-item[data-l10n-id="preferences-addon-button"] {
      -moz-context-properties: fill !important;
      fill: grey !important;
    }
    
    panel-item[data-l10n-id="report-addon-button"] {
      -moz-context-properties: fill !important;
      fill: orange !important;
    }
    
    panel-item[data-l10n-id="expand-addon-button"],
    panel-item[data-l10n-id="manage-addon-button"] {
      -moz-context-properties: fill !important;
      fill: blue !important;
    }
    
    panel-item[data-l10n-id="ask-to-activate-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }
    
    panel-item[data-l10n-id="always-activate-button"] {
      -moz-context-properties: fill !important;
      fill: green !important;
    }
    
    panel-item[data-l10n-id="never-activate-button"] {
      -moz-context-properties: fill !important;
      fill: red !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;
    } }

/* 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;
      /* border-radius: 50px !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;
      /* border-radius: 50px !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;
    } }

/***************** Container anpassen **************************************************/

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

/* Container in der Breite anpassen*/

message-bar-stacks + #main:not([class="site-main"]) div[current-view="list"] {
max-width: 100% !important;
}



/* 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 */
      border: 2px solid grey !important;  /* Umrandung */
      border-radius: 15px !important;  /* Ecken abgerundet */
      width: 1200px !important;  /* Länge der Container */
      max-height: 120px !important; /* Höhe der Container bei Themes */
    } }

/****************** 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 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{
      min-width: 1100px !important; /* Breite in px */
    } }    
    
/* 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: 20px !important; 
      margin-top: -2px!important; /* Lage im Container */
      margin-left: 5px !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: 4px 25px !important; /* 4px ist die Höhe und 25px 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 */
    }

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

Mit Notepad++ geöffnet:

in Zeile 311 hinzugefügt "Container in der Breite anpassen"

in Zeile 313 >> obigen Code eingefügt - geändert z.B. auf 100 %

Bei Aufruf tut sich aber nichts!

Büssen

Zitat von FuchsFan

Hallo, Büssen!
.............................................
Wenn es dir besonders wichtig ist, dann muss ich mich nochmal bei Aris umschauen, er hat ja einiges zu bieten.

Moin FuchsFan,

es wäre mir schon wichtig, den Container in der Breite an zu passen, denn auch auf dem PC würden 90 % schon wieder rechts nicht passen.

Ich fand den Addon-Manager (so wie er ist) richtig gut.

Hier nun die 80% Lösung auf dem PC. Beim Notebook würden gerade 67% passen. Dann wäre die Schrift wieder zu klein.

Die Container sollten aber schon die ganze Breite ausfüllen!

Sehe gerade, dass Dharkness einen Code eingestellt hat. Als Code separat ausgeführt, kann ich momentan keine Änderung sehen.

Büssen

Zitat von Büssen

Moin
Habe diese Dateien alle in einem portablen Firefox 76.01 installiert. Da bei mir alles vergrößert dargestellt wurde, bin ich auf 80 % gegangen.
Nun passt alles wie in den Beispielbildern dargestellt!

Moin,

das war die passende Geschichte (#399) auf meinem PC. Dort ist alles OK.

Auf dem Notebook passt die Darstellung allerdings nicht mit 80%.

Gibt es eine Stelle im Code, wo ich die Container noch etwas verkürzen kann - gesucht, aber nicht gefunden?

Büssen

Moin,

hier oben ist aber Feiertag angesagt (Himmelfahrt/Vatertag)

Mein Beispiel aus #210 war nicht vom FX 76 - sondern von Beta 77.

Mit diesem Code - neuer Versuch:

CSS

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:about") {

html {background: #FFFFFF !important;}

body{
background-color: #fffff0 !important;
max-width: 1020px !important;
margin-top: 25px !important;
margin-bottom: 30px !important;
margin-left: 210px !important;
padding-top: 25px !important;
padding-left: 25px !important;
padding-right: 25px !important;
padding-bottom: 25px !important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-radius: 20px !important;
border-width: 4px !important;
border-style: outset !important;}

.container > h1:nth-child(1){
margin-left: 80px !important;
color: blue !important;
font-size: 24px !important;
font-weight: bold !important;}

ul { list-style: none !important;}

#abouts{
background-color: #fffffF !important;
margin-left: -10px !important;
margin-top: 25px !important;
padding-top: 25px !important;
padding-left: 25px !important;
padding-right: 25px !important;
padding-bottom: 25px !important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-radius: 20px !important;
border-width: 4px !important;
border-style: outset !important;}

p {margin-left: 90px !important; font-size:15px!important;}

h1::before {content: "Endors Firefox: "; font-weight:bold !important; color:red !important; margin-left: 80px !important;}

a{color:black!important;}

a{
text-decoration:none!important;
color:black!important;}

/* Die ersten 18 */

#abouts > li:nth-child(-n+19){
appearance:none!important;
background: gainsboro url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
text-decoration:none!important;
margin-top:3px!important;
margin-bottom: 5px !important;
margin-right:55px!important;
margin-left: 25px !important;
padding-right: 15px !important;
padding-left:35px!important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die ersten 18 hover */

#abouts > li:nth-child(-n+19):hover{
appearance:none!important;
background: #B2EDFA url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
text-decoration:none!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #bbddff !important;
border-top-color: #bbddff !important;
border-right-color: #11508d !important;
border-bottom-color: #11508d !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die letzten 19 */

#abouts > li:nth-child(n+20){
appearance:none!important;
background: cornsilk url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
margin-left: 25px !important;
margin-top:3px!important;
margin-bottom: 5px !important;
margin-right:30px!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #ffb2b2 !important;
border-top-color: #ffb2b2 !important;
border-right-color: #8d0000 !important;
border-bottom-color: #8d0000 !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die letzten 19 hover */

#abouts > li:nth-child(n+20):hover{
appearance:none!important;
background: #B2EDFA url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
margin-left: 25px !important;
margin-right:30px!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #bbddff !important;
border-top-color: #bbddff !important;
border-right-color: #11508d !important;
border-bottom-color: #11508d !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}
}

Alles anzeigen

Damit könnte ich erst mal leben.

Vielen Dank an die Helfer!

Büssen

Hallo,

habe mir mal den neuesten about about-Code gegönnt und im 76-er-Profil probiert.

Lassen sich die Felder rechte Seite noch anpassen (verkürzen)?

Büssen

Hallo,

sieht im Nightly nun so aus:

rechts unten (Sicherheit) fehlt die Rundung - nach links verschoben.

Büssen

Moin,

trotzdem fehlen im Nightly-Beispiel von Boersenfeger einige Icon (gelb umrahmte Felder).

Darauf bezog sich meine Antwort #138. Bis auf "Save verbose" müssten alle anderen eigentlich da sein.

Büssen

Zitat von Boersenfeger

Imho fehlen einige Icons bzw Code für Buttons.. jeweils gelb markiert!?

Hallo Boersenfeger,

schau mal in den Ordner Icon:

dort müssen die Bilder 16 bis 26.png und 119.png drin sein.

Dann siehst du auch alle Icons im Nightly.

Restliche Icons von # 124 kopieren.

Büssen

Hallo edvoldi,

das war wieder ein guter Kundendienst!

Vielen Dank - nun passt wieder alles. >> zumindest im besagtem Profil.

Habe in einem anderen Profil gleiches Verhalten - geändert: aber hier geht alles zu weit nach rechts raus.

Musste hier auf 90% runter, damit alles sichtbar ist.

Büssen

Moin,

habe ein Problem mit about:debugging.

Wenn ich normal aufrufe:

Links bleibt ein großer Rand - bis Sidebar Lesezeichen

Gehe ich runter auf 90 % Größe, dann sieht es so aus:

Es bleibt links auch noch ein Rand - bis Sidebar.

Bei 80 % passt die Größe, trotzdem bleibt links ein Rand. Das Original scheint 110 % zu haben.

Was müsste ich ändern?

Nachtrag: habe diese Zeile von 200 px auf 30 px geändert

CSS

body{background-color: #ffffff !important; margin-left: 30px !important;

Nun passt es wieder >> es bleibt noch ein ganz kleiner Rand.

Büssen

Habe die border-width auf 4 px erhöht, sieht nun wieder so aus:

Warten wir es ab - alles wird noch gut!

Ich mache nun erst mal fofftein!

Büssen

Zitat von Endor

Jo about:cache knöpfe ich mir auch noch vor.
Im Moment arbeite ich an about:memory.
Melde mich.
Mfg.
Endor

Denn man to

Der Firefox soll ja noch schön bunt werden! Warten wir es ab!

Büssen

Zitat von Boersenfeger

Büssen: Deinen about:cache Code nutze ich erstmal nicht, da er mit den anderen von Endor nicht kumuliert, da hoffe ich mal, das ER noch seine Variante anbietet..

Das ist nicht mein "about:cache Code".

Habe mich nur mal als Tester betätigt und entsprechend mit Antworten reagiert.

Ich werde anscheinend auch nicht alle Codes einsetzen. Also warten wir mal, was die Zukunft noch bringt!

Zitat von edvoldi

richtig, der erste Code ist hell, der zweite dunkel.
Und noch eine kleine Änderung,
table bitte in .aboutPageWideContainer > table ändern.

Gruß
EDV-Oldi

Änderung durchgeführt - hier nun der 2. Code

Soll es so sein?

Beiträge von Büssen

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen