Beiträge von FuchsFan

FuchsFan

Zitat von Büssen

Im Moment weiß ich noch nicht , wo der Unterschied herkommt - habe nur eine Anpassung (Card-Länge) von 65 auf 67vw vorgenommen.

Das hat sicherlich nicht damit zu tun, denn alles weitere funktioniert ja, wie du sagst. Das gleiche Bild habe ich heute in der 78Beta, kann auch nicht sagen, wieso die Grafiken nicht geladen werden. In allen anderen Versionen i.M. keine Probleme.

Hier 77.0.1:

und 78Beta:

Edit:

In der Beta habe ich mal den Wert für Länge der Container hin und her gestellt, auf einmal waren die Grafiken wieder da. Ob das jetz das Problem beseitigt hat, das weiß der Fuchs.

FuchsFan

Nachdem ich unter Hilfe von 2002Andreas und Dharkness die letzten Hindernisse aus dem Weg räumen konnte, hier nun der überarbeitete Addon-Manager. Die Basis bildet dabei der Code von Aris, und weiter für die icons der Code von Endor.

Für die Icons einen Ordner icons im Ordner chrome anlegen, und die folgenden Icons (von Endor gekapert) dort hinein kopieren.

Bild66.ico.png

Bei Bild66.ico das .png nach dem Einfügen entfernen (konnte das ico nicht so hochladen ).

Der Code für die Icons ist dann weiter unten zu haben. Den Code für die großen Button auf der linken Seite gibt es hier: RE: Ansicht "Erweiterungen verwalten"

So, dann hier der neue (alte) Addon-Manager:

CSS

 /*=================== AGENT_SHEET =============================*/

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

/* Add-ons-Manager linke Seite (Sidebar) Hintergrund */
    #sidebar {
      background: linear-gradient(to bottom right, white,#acacac,#f2f3f4,#acacac) !important;
    }

/* Add-ons-Manager rechte Seite Hintergrund */
    #content,
    .sticky-container,
    .main-search,
    .main-heading {
      background: #bfc1c2 !important;
    } }  

/*=============== Container rechte Seite anpassen ==================*/    
    
/* für alle Elemente rechte Seite die Länge einstellen */
    .card,
    addon-list addon-card > .addon.card,
    addon-card[expanded] >.addon.card {
      width: 65vw !important;  /* Länge aller Elemente */
      border: 2px solid grey !important;
      border-radius: 10px !important; 
    }
    
/* Add-on Manager - Hintergrundfarbe für alle Elemente anpassen */
    .addon.card {
      background: gainsboro !important;
      max-width: initial !important;
    }    
    
/* Hintergrund der Container bei Hover andere Farbe */ 
    addon-list addon-card > .addon.card:hover {
      background: lightblue !important;
    }

/* Umrandung der Container bei Hover breiter Rand und andere Farbe */ 
    :root {
      --card-outline-color: royalblue !important;
    }
    
/* vertikaler Abstand zwischen den Containern */    
    addon-card .addon { 
      margin: 7px !important;
    }

/*Höhe der Container */ 
    addon-card:not([expanded="true"]) .addon.card {
      max-height: 115px !important;  /* maximale Höhe der Container / hauptsächlich für Theme gedacht */
    } 

/* Schrift in den Containern / erlaubte Ausdehnung nach rechts */
    .addon-description {
      max-width: 750px !important; 
    }

/* verhindert die Ausweitung der Schrift über den rechten Rand der Container */
    addon-card > .addon.card,
    addon-card > .addon.card * {
      overflow: hidden !important;
    }     

/*============== sonstige Anpassungen =====================*/    
    
/* Hintergrund Menü Verwalten bei Hover */    
    .card:hover,
    addon-list addon-card > .addon.card:hover,
    addon-card[expanded] >.addon.card:hover {
      background: lightblue !important;
    }

/* Name für Erweiterungen, Themes, usw. in erster Zeile */
/* unter content beliebiger Name verwendbar */
    .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;
    color: blue !important;
    content: 'Erweiterungen verwalten' !important;
    }
    .header-name[data-l10n-id="theme-heading"]::after    {
    font-size:18px !important;
    font-weight: bold !important;
    color: blue !important;
    content: 'Themen verwalten' !important;
    }
    .header-name[data-l10n-id="plugin-heading"]::after    {
    font-size:18px !important;
    font-weight: bold !important;
    color: blue !important;
    content: 'Plugins verwalten' !important;
    }
    .header-name[data-l10n-id="dictionary-heading"]::after    {
    font-size:18px !important;
    font-weight: bold !important;
    color: blue !important;
    content: 'Wörterbücher verwalten' !important;
    }

/* Versionsnummer wird angezeigt */
    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;
    } 
    
/* unter Themes die Grafik anpassen */    
    .card-heading-image {
      min-width: 800px !important; /* Länge der Grafik */
      height: 70px !important; /* Höhe der Grafik */
      margin-left: -4px !important; /* Abstand vom linken Rand */
      margin-top: -8px !important;  /* Abstand vom oberen Rand */
      border: 2px solid grey !important;  /* Umrandung */
      border-radius: 8px !important;
    } 

/* blendet den Text für privates Browsing ein */
/* bei kurzen Containern empfiehlt sich die Deaktivierung */    
    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 10px !important; /* Entfernung nach rechts */
    }

/* lila Icon -In privatem fenster erlaubt- Entfernung nach rechts */
    .addon-badge-private-browsing-allowed {
      min-width: 430px !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 */
    } 

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

/* oben die Suche / Schrift und Text-Box anpassen */
    .search-label {
      color: dodgerblue !important;
      font-size: 13px !important;
    }

    search-addons > search-textbox {
      background: #ececec !important;
      color: grey !important;
      min-height: 22px !important;  /* Höhe der Box */
      width: 200px !important;  /* Länge der Box */
      font-size: 12px !important;  /* Schriftgrösse */
    }
    
    .main-search {
      margin-left: 270px !important;  /* Suche nach rechts verlagert */    
    }  

/*================= Toggle-Button ============================*/

    /* Toggle-Button aktiv/inaktiv Farbe anpassen (auch bei Hover) */ 
    addon-card .addon.card[active="true"] .toggle-button { 
      background: lime !important;
      width: 32px !important;
      border: 2px solid dodgerblue !important;
      padding-left: 3px !important;
      padding-right: 3px !important;
    }

    addon-card .addon.card[active="true"] .toggle-button:hover { 
      background: red !important;
      border: 2px solid green !important;
    }    
   
    addon-card .addon.card[active="false"] .toggle-button { 
      background: red !important;
      width: 32px !important;
      border: 2px solid green !important;
    }    
   
   addon-card .addon.card[active="false"] .toggle-button:hover { 
      background: lime !important;
      border: 2px solid dodgerblue !important;
    }

    /* Toggle-Button eventuell ausblenden */
    .card-contents input[type="checkbox"].toggle-button {
      -moz-margin-end: 2px !important;  /* Abstand vom rechten Rand */
      /* display: none !important; */   /* aktiviert = Button ausblenden */
    }    
    
/*====================  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: 50px !important; /* Länge des Button */
      height: 24px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
    } 
    
    .page-options-menu .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
      opacity: 1.0 !important;
      border: 2px solid forestgreen !important;
      box-shadow: inset 0 0 5px 5px greenyellow !important; /* innerer Schatten */
    }    
    
    /* Optionen-Button verlagern */
    button.more-options-button:nth-child(1) {
      position: absolute !important;
      left: 19% !important;
      margin-top: -13px !important;
    }    

/*============== Aussehen des Menü hinter dem Zahnrad ===================*/    
    
    /* Feld hinter dem Zahnrad-Button */    
    #page-options > panel-list:nth-child(1) {
      background: gainsboro ! important; /* farbiger Hintergrund des Feldes */
      border: 3px solid dodgerblue !important;
      border-radius: 9px !important;
      max-width: 445px !important; /* Ausdehnung der Felder nach rechts */ 
    }  

    div.arrow:nth-child(3){
      fill: dodgerblue !important; /* kleine Spitze Richtung Zahnrad */
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      margin-left: 10% ! important; /* Abstand der Leisten vom linken Rand */
      width: 377px !important; /* Länge der einzelnen Felder */
      background: #f8f8ff ! important; /* Farbe des Hintergrundes */
      max-width: 395px !important; /* Länge der aktivierten Menü-Leiste */
      margin-right:10px ! important;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      border:1px solid grey !important;
      padding-left: 25px !important;  /* bringt die Schrift nach rechts */ 
    }
    
    /* Schrift und felder bei Hover */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;
      color: red !important;      
    }        

    .sticky-container {
      z-index: 1000 !important;
    }

    addon-page-options panel-list panel-item {
      width: 430px !important; /* Länge der aktivierten Menü-Leiste */
      background: none ! important;
    }
    
    addon-page-options panel-list panel-item:hover {
      width: 440px !important; 
      background: #00df00 ! important;
      max-width: 435px !important; /* Ausdehnung der Felder nach rechts */ 
    }    

    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 450px !important; /* Ausdehnung der Felder nach rechts */ 
      padding-left: -8px !important; /* Ausdehnung nach links */
      z-index: 1000 !important;
    }
    
/* Hintergrund der Box Updates automatisch aktualisieren */
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: greenyellow !important;
      min-width: 436px !important; /* Ausdehnung der Felder nach rechts */ 
    }

/* Hintergrund der Box Updates automatisch aktualisieren bei Hover */
    addon-page-options panel-list panel-item[accesskey][checked]:hover {
      background: #ff2800 !important;
      max-width: 435px !important; /* Ausdehnung der Felder nach rechts */ 
    }

/* blendet Icons aus (Papierkorb, usw.) */
    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;
    }
    
/*====== Zurück-Button bei geöffnetem Menü Einstellung/Verwalten =========*/    

    .back-button {
      background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
      width: 50px !important;
      height: 24px ! important; /* Höhe des Button */
      border-radius: 25px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 4px 4px grey !important;
    }
    
    .back-button:hover {
      color: white !important;
      background-color: dodgerblue !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 3px 3px lightblue !important;
    }

/*=========== 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: #03c03c !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;
    }

/*============ Button (Felder) auf der rechten Seite ==============*/

    /* <some> locales require adjustments */
    html[lang="de"] {
      --addon-page-options-width: 370px;
    }
    
    /* Anpasung der rechten Button */
    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: 2px solid grey !important; /* Umrandung */
      border-radius: 25px !important;  /* Ecken abgerundet */
      box-shadow: inset 0 0 2px 2px white !important;  /* innerer Schatten */
    }
    
    @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 5px !important; /* Abstand zwischen den Button */
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 20px !important; /* Ausdehnung der Button */
    }
    
    /* entfernt den Dreipunkte-Button */
    addon-card .more-options-button {
      display: none !important;
    }

    /* remove button icon (z.B. Papierkorb) */
    :host([checked]),
    panel-item[checked],
    :-moz-any(addon-list,panel-list) panel-item {
      --icon: unset !important;
    }
    
    /* ordnet die Button horizontal an */
    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }
    
/*========== zusätzliche Anpassungen für die Button ===========*/    

/* blendet den Hintergrund aus / auch bei Hover */
/* Wirkung auch auf erste Zeile des Menü hinter dem Zahnrad */
    panel-list > panel-item,
    panel-list > panel-item:hover {
      --in-content-button-background: none !important;
      --in-content-button-background-hover: none !important;
      --in-content-button-background-active: none !important;
    }
    
    /* Button Einstellungen */
    panel-item[action="preferences"] {
      order: -1;
    }
    /* Button Einstellungen bei Hover */
    panel-item[action="preferences"]:hover {
      order: -1;
      background: #008000  !important;
      color: white !important;
    }
    
    /* Button Entfernen bei Hover */
    panel-item[action="remove"]:hover{
      background: red !important;
      color: white !important;
    }

    /* Button Melden bei Hover */
    panel-item[action="report"]:hover{
      color: white !important;
      background: #8a2be2 !important;
    }

    /* Button Verwalten bei Hover */
    panel-item[action="expand"]:hover {
      color: white !important;
      background: blue /* #008000 */ !important;
    }    
    
    /* Button -Immer aktivieren- bei Hover */
    panel-item[action="always-activate"]:hover {
      background: #6f00ff !important;
      color: white !important;
    }
    
    /* Button -Nie aktivieren- bei Hover */
    panel-item[action="never-activate"]:hover {
      background: red !important;
      color: white !important;
    }

    /* Addons - Button Aktualisieren */    
    panel-item[badged] {
      background: yellow !important;    
      border: 2px solid red !important;
      /* border-radius: 20px !important; */
      box-shadow: inset 0 0 2px 2px grey !important; /* innerer Schatten */
    }
    /* Button Aktualisieren bei Hover */
    panel-item[badged]:hover {
      background: lime !important;
    }

    /* blendet den Hintergrund Verfügbare Updates aus / auch bei Hover */
    #updates-message,
    #updates-message:hover {
      --in-content-button-background: none !important;
      --in-content-button-background-hover: none !important;
      --in-content-button-background-active: none !important;
    }    
    /* Button Verfügbare Updates anzeigen */ 
    #updates-message{
       background: gainsboro !important;
       color: blue !important;
       border: 2px solid grey !important;
       padding-right: 15px !important;
       padding-left: 15px !important;
    }
    /* Button Verfügbare Updates anzeigen bei Hover */ 
    #updates-message:hover{
       background: blue !important;
       color: white !important;
       box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */
       border: 2px solid dodgerblue !important;
    }     
        
    
    /* rechte Button Lage und Ausblendungen */
    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;  /* Abstand der Button bei Erweiterungen vom rechten Rand */
    }
    
    /* Button vertikal verlagern */
    addon-card panel-list {
      margin-top: -50px !important;
    }
    
    /* Abstand der Button vom rechten Rand bei Plugins und Wörterbücher */
    addon-list:-moz-any([type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
      right: 5px !important; 
    }
    
    /* Abstand der Button vom rechten Rand bei Themes */
    addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
      right: 55px !important; 
      margin-top: -75px !important;  /* Abstand vom oberen Rand */
    }    
    
    
    
/*======= Button Aktivieren/Deaktivieren bei Themes ==========*/
    
    /* blendet den Hintergrund aus / auch bei Hover */
    addon-card .addon.card[active="true"] .theme-enable-button,
    addon-card .addon.card[active="true"] .theme-enable-button:hover {
      --in-content-button-background: none !important;
      --in-content-button-background-hover: none !important;
      --in-content-button-background-active: none !important;
    }
    
    /* bei aktivem Theme */
    addon-card .addon.card[active="true"] .theme-enable-button {
      background:  #03c03c  !important;
      color: white !important;
      margin-right: 450px !important;
      margin-top: 3px !important;
      height: 25px !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      border: 2px solid red !important;
      border-radius: 50px !important;
      box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */ 
    }
    
    /* bei inaktivem Theme */    
    addon-card .addon.card[active="false"] .theme-enable-button {
      background:  lightblue  !important;
      margin-right: 450px !important;
      margin-top: 3px !important;
      height: 25px !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      border: 2px solid grey !important;
      border-radius: 50px !important;
      box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */ 
    }
    
    addon-card:hover .addon.card[active="true"] .theme-enable-button {
      background: red !important;
      color: white !important;
      /* border: 2px solid green !important */
      
    }
    
    addon-card:hover .addon.card[active="false"] .theme-enable-button {
      background: #03c03c !important;
      color: white !important;
      border: 2px solid red !important;
      box-shadow: inset 0 0 2px 2px white !important; /* innerer Schatten */ 
    }
    
    
    
    addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
      cursor: pointer !important;
      opacity: 1.0 !important;
      filter: brightness(2.00) !important;
    }
    
    addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
      background: Highlight  !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
      background: red  !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
      background: green  !important;
      color: blue !important;
    }
    
    /* Abstand Button Aktivieren/Deaktivieren vom rechten Rand */
    addon-card .addon.card .theme-enable-button,
    input[type="checkbox"].toggle-button {
      -moz-margin-end: 450px !important;
    }

/***************************************************************************************/

Alles anzeigen

Hier dann der Code für die Icons, entweder eine css-Datei anlegen, oder wie auch der des Addon-Managers in die userContent.css :

CSS

#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild5.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild61.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild3.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild66.ico");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
fill: transparent !important;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: url("..//icons/Bild62.png");
background-size: 18px 18px !important;
margin-left: 16px;
margin-right: -32px;
margin-bottom: 3px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
content: '';
font-size: 14px;
padding-left: -1px !important;
padding-top: 1px !important;
padding-bottom: 2px !important;
display: block;
width: 16px;
height: 16px;
background: url("..//icons/Bild63.png") no-repeat !important;
background-size: 18px 18px !important;
margin-left: 18px;
margin-right: -32px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild64.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

#page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url("..//icons/Bild67.png");
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}

Alles anzeigen

So, wer Lust und Laune hat, der probiert.

Und noch Bilderchen für den ersten Ausblick:

Der Code für den Addon-Manager ist fehlerhaft! Mit Hilfe von Endor gibt es den fehlerfreien Code jetzt hier:

RE: About Seiten mit CSS Codes anpassen

FuchsFan

Zitat von 2002Andreas

Teste wieder:

Funktioniert super, Andreas. Ich bedanke mich!

Schönes Wochenende!

FuchsFan

Zitat von 2002Andreas

Dann kann ja Wochenende werden

Langsam, langsam, immer mit der Ruhe.

Also, mit der Umbauerei habe ich mir das doch einfacher vorgestellt. Durch dieses Vorhaben muss nun fast jeder Button einzeln angesprochen werden. Jetzt fehlen mir bei Plugins noch die beiden Button:

Kannst du mir bitte noch mitteilen, wie ich diese ansprechen muss. Dann ist aber Feierabend!

FuchsFan

Zitat von 2002Andreas

Teste bitte:

Danke, Andreas, das funktioniert auch.

FuchsFan

Zitat von 2002Andreas

So passt es besser als in meinem anderen Code:

Danke, Andreas, passt alles wunderbar.

Hast du noch einen Code-Schnipsel für diesen Button: Verfügbare Updates anzeigen

FuchsFan

Zitat von 2002Andreas

Ich bin mir nicht sicher was genau du meinst

Bei meinen bisherigen Basteleien habe ich ja generell bei Hover für alle die gleiche Farbe eingefügt, was ja kein Problem war.

Mein Wunsch jetzt wie früher jeden einzeln bei Hover anzusprechen.

Zitat von 2002Andreas

dazu habe ich erst den Text ab Zeile 96 bis 101 auskommentiert, und dann diesen eingefügt:

Hier lieferst du mir ganz wichtige Anhaltspunkte, damit kann ich jetzt arbeiten.

Ich melde mich später wieder, meine Enkelin ruft.

FuchsFan

2002Andreas

Hallo, Andreas!

Der alte Code, in dem die rechten Button (Entfernen, usw.) einzeln ansprechbar waren , funktioniert ja nicht mehr. Nun versuche ich das schon eine ganze Weile in dem Code von Aris zu realisieren. Das ist mir bei Einstellungen und bei Aktualisieren (manuelle Suche) gelungen, ist im Code speziell gekennzeichnet. Nun habe ich es mit den restlichen Versucht, aber es will mir nicht gelingen. Hast du eine Idee dazu ?

CSS

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


@-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:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
      --addon-page-options-width: 440px;
    }
    
    html[lang*="es-"] {
      --addon-page-options-width: 460px;
    }
        /**/
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
    .more-options-menu panel-item {
      background: white !important;
      color: black !important;
      margin: 0 1px !important;
      border: 1px solid lightgrey !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
    addon-list panel-item:not([badged]){
      border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: white !important;
      color: black !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
    addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) panel-list *,
        addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
        addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
          border: 1px solid white !important;
        }
    }}
    
    addon-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],
    addon-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;
    }
    
    
/*===========================================================================*/    

/* blendet den Hintergrund aus bei Hover */
/* ursprüngliche Version abgeändert / jetzt bei den Button auch der Hintergrund bei Hover weg */
/* Wirkung auf das Menü hinter dem Zahnrad bleibt bestehen */
    panel-list > panel-item,
    panel-list > panel-item:hover {
      --in-content-button-background: none !important;
      --in-content-button-background-hover: none !important;
      --in-content-button-background-active: none !important;
    }

/*======== Button Einstellungen ===============*/
    panel-item[action="preferences"] {
      order: -1;
    }
    
    /* Button Einstellungen bei Hover */
    panel-item[action="preferences"]:hover {
      order: -1;
      background: dodgerblue !important;
    }
            
    
/*====== Button Aktualisieren =========*/    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    /* Button Aktualisieren bei Hover */
    panel-item[badged]:hover {
      background: lime !important;
    } 

/* das ist einer von vielen Versuchen den Button Entfernen zu aktivieren */    
    panel-item[action="delete"]:hover{
        order: -1;
      background: red !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-list addon-card:not([expanded="true"]) 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-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"],[type="all"]) addon-card:not([expanded="true"]) panel-list {
      right: 1px !important;
    }*/

    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -48px !important;
    }

    /*addon-list[type="theme"] addon-card:not([expanded="true"]) panel-list {
      -moz-margin-end: 22px !important;
    }*/
    
    addon-list addon-card:not([expanded="true"]) .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-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
      cursor: pointer !important;
      opacity: 1.0 !important;
      filter: brightness(2.00) !important;
    }
    
    addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
      background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
      background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
      background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) .card-contents{
      height: 40px !important;
    }
    
    /*input[type="checkbox"].toggle-button {
      margin: 0 8px !important;
    }*/
    
    addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button,
    input[type="checkbox"].toggle-button {
      -moz-margin-end: 8px !important;
    }
    
    addon-card:not([expanded]) > .addon.card,
    addon-card:not([expanded]) > .addon.card * {
      overflow: hidden !important;
    }
    
    

}

Alles anzeigen

FuchsFan

Zitat von Kira95

Kann man das ändern?

Hallo Kira95!

Ja, man kann. Dazu bedarf es aber einiger Vorarbeiten, damit das auch funktioniert. Dringend zu empfehlen ist, dass du dir erst einmal die Informationen dazu durchliest und verstehst. Die bekommst du hier:

Firefox-Anpassungen: die Basis

Dort ist gleich oben auch ein Link, der dich zu dem Download der benötigten Dateien führt. Diese musst du dann gemäß der Erklärung in die betreffenden Verzeichnisse (immer die richtigen auswählen) einfügen. Das ist die Grundvoraussetzung, dass du dein Vorhaben verwirklichen kannst.

Weitere Informationen bekommst du hier: Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css

Wenn du dann diese Vorbereitungen erledigt hast, dann gibst du oben in die Adressleiste about:config ein, dann Enter. Den Warnhinweis, der danach erscheint, bestätigen. Jetzt in die Leiste oben folgendes eingeben , bzw. dieses markieren, kopieren und dann einfügen:

toolkit.legacyUserProfileCustomizations.stylesheets und den Wert auf true stellen.

Wenn du das alles vorbereitet hast, dann melde dich bitte wieder, dann erfährst du wie das Hintergrundbild eingefügt werden kann.

So kann es dann eventuell aussehen:

FuchsFan

Dharkness / 2002Andreas

Alles hat ein Ende, nur ........

Und weil das so gut geklappt hat, dann gleich noch die passende Sache dazu. Beim Hovern über die einzelnen Zeilen kommt ja auch immer der Hintergrund wie in der ersten Zeile (wurde ja schon gesagt), findet ihr dazu auch noch den passenden Code.

Hat sich erledigt!!!!

FuchsFan

Zitat von 2002Andreas

Ja, weil sie über dem alten grauen Hintergrund liegt, und ihn somit verdeckt.

Das ist so, denn ich wollte die Farbe des Hintergrundes nutzen (gainsboro), da ist dann wieder vorbei.

FuchsFan

Zitat von 2002Andreas

background white...das funktioniert nicht.

Aber in anderer Farbe!

FuchsFan

Zitat von 2002Andreas

Da muss ich leider passen, sorry, ich finde keine eindeutige Bezeichnung nur für diesen einen Eintrag.

Alles kein Beinbruch, Andreas.

Nun habe ich mich notgedrungen für eine andere Lösung entschieden, bei grün Updates automatisch, ansonsten Farben insgesamt darauf abgestimmt. Damit kann ich gut leben. Nochmals danke!

FuchsFan

Zitat von 2002Andreas

Wenn es an anderer Stelle jetzt ein Problem geben sollet, dann melde dich bitte wieder.

Ja, da bin ich schon wieder.

Alles funktioniert soweit, bis auf den Button Erweiterungen (links oben), dort fehlt das Icon ganz. Alle anderen werden angezeigt und arbeiten normal.

Ändere ich im Code child in 1 oder 3, dann werden entsprechen andere Icons nicht angezeigt.

FuchsFan

Zitat von 2002Andreas

Teste bitte mal mit diesem Code:

Super, Andreas, das sieht schon viel besser aus. Dankeschön!!

FuchsFan

2002Andreas

Hallo, Andreas!

Ich brauche mal wieder deine Hilfe. Es gibt nämlich Probleme mit dem Code von hier RE: Ansicht "Erweiterungen verwalten".

Er macht was er soll, nur, es kommt bei einem Klick auf den Button das Menü, bei erneutem Klick auf den Button (Menü noch geöffnet) schließt das Menü , aber es ist dann das Icon im Button nicht zu sehen. Erst wenn irgendwo ein Klick erfolgt, dann ist das rote Zahnrad wieder zu sehen.

Das Problem betrifft auch alle Icon in den Button auf der linken Seite. Wenn ich den Code für diese Button raus nehme, so bleibt es beim Zahnrad-Button weiter bestehen.

Kannst du bitte mal den Code für das Menü überprüfen, ob da was kontraproduktiv arbeitet.

CSS

/*=========== Button mit dem Zahnrad / MENUE dahinter ===================*/
    
/* Feld hinter dem Zahnrad-Button */    
    #page-options > panel-list:nth-child(1) {
      background: lightgrey !important;  /* Hintergrund */
      min-width: 394px !important;  /* Mindestbreite */
      border: 3px solid dodgerblue !important;
      padding: 2px !important;
    }

    div.arrow:nth-child(3){
      fill: dodgerblue !important; /* kleine Spitze Richtung Zahnrad */
    }
    
    /* erste Zeile im Menü Hintergrund wird ausgeblendet */    
     button:focus {
     background: none !important;
 }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-top: 5px !important; /* Ausdehnung nach oben */
      padding-bottom: 5px !important; /* Ausdehnung nach unten */
      min-width: 345px !important;
      /* width: 300px !important; */ /* Länge der einzelnen Felder */
      margin-left: 12% ! important; /** Schrift ausrichten ab linkem Rand **/
      border: 1px solid dodgerblue !important;
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
      background: lightyellow !important;    
      color: red !important;
      font-size:  13px !important;    
      max-height: 32px !important; 
      padding-left: 20px !important;
    }    

    
    /* Zeilenhintergrund bei Hover */
    addon-page-options panel-list panel-item:hover {
      background: dodgerblue ! important;  /* Farbe */
      min-width: 395px !important;  /* Zeilenlänge */
    }
    
    .sticky-container {
      z-index: 1000 !important;
    }
    
    /* Hintergrund der Box automatisches Update */
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: greenyellow !important;
      min-width: 394px !important;  /* Zeilenlänge */
    }
    
    /* Hintergrund der Box automatisches Update bei Hover */
    addon-page-options panel-list panel-item[accesskey][checked]:hover {
      background: dodgerblue !important;
      min-width: 395px !important;  /* Zeilenlänge */
    }

Alles anzeigen

Und der Code für den Zahnrad-Button:

CSS

/*====================  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: 50px !important; /* Länge des Button */
      height: 25px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
    } 
    
    .page-options-menu .more-options-button:hover {
      fill: forestgreen !important; /* Farbe des Zahnrades */
      opacity: 1.0 !important;
      border: 2px solid forestgreen !important;
      box-shadow: inset 0 0 7px 7px greenyellow !important; /* innerer Schatten */
    }

Alles anzeigen

FuchsFan

Zitat von ^L^

Wie sieht der Code dafür aus? Ginge das auch ohne die Text-Umrahmungen?

Das geht, aber es ist immer der Geschmack, der bei allen immer unterschiedlich ist. Also hast du dann noch ein wenig Arbeit vor dir. Das Grundgerüst ist im folgenden Code enthalten (größtenteils von Aris).

CSS

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


@-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:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
      --addon-page-options-width: 440px;
    }
    
    html[lang*="es-"] {
      --addon-page-options-width: 460px;
    }
        /**/
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
    .more-options-menu panel-item {
      background: white !important;
      color: black !important;
      margin: 0 1px !important;
      border: 1px solid lightgrey !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
    addon-list panel-item:not([badged]){
      border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card:not([expanded="true"]) panel-list * {
      background: white !important;
      color: black !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
    addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) panel-list *,
        addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
        addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
          border: 1px solid white !important;
        }
    }}
    
    addon-list panel-item{
      margin: 0 1px !important;
    }
    
    /* Button rechte Seite */ 
    addon-list panel-item:not([badged]){
      border: none !important; /* Umrahmung / none = nicht gesetzt */
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 5px !important;
      color: red !important;  /* Schriftfarbe */
      font-weight: bold !important;  /* fette Schrift */      
    }
    
    /* remove three dots button */
    addon-card .more-options-button {
      display: none !important;
    }

    /* remove button icon */
    :host([checked]),
    panel-item[checked],
    addon-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;
      color: red !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-list addon-card:not([expanded="true"]) 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-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"],[type="all"]) addon-card:not([expanded="true"]) panel-list {
      right: 1px !important;
    }*/

    addon-list addon-card:not([expanded="true"]) panel-list {
      margin-top: -48px !important;
    }

    /*addon-list[type="theme"] addon-card:not([expanded="true"]) panel-list {
      -moz-margin-end: 22px !important;
    }*/
    
    addon-list addon-card:not([expanded="true"]) .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-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
      cursor: pointer !important;
      opacity: 1.0 !important;
      filter: brightness(2.00) !important;
    }
    
    addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
      background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
      background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
    }
    
    addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
      background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-list[type="theme"] addon-card:not([expanded="true"]) .card-contents{
      height: 40px !important;
    }
    
    /*input[type="checkbox"].toggle-button {
      margin: 0 8px !important;
    }*/
    
    addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button,
    input[type="checkbox"].toggle-button {
      -moz-margin-end: 8px !important;
    }
    
    addon-card:not([expanded]) > .addon.card,
    addon-card:not([expanded]) > .addon.card * {
      overflow: hidden !important;
    }

}

Alles anzeigen

Zeile 65 entfernt die Umrandung, und die Zeilen 72/73 legen Werte für die Schrift fest.

FuchsFan

Zitat von ^L^

Hi, ich meinte die Breite (den Code) des Addon-Feldes

Das soll nun einer erraten. Teste bitte:

CSS

/* Länge aller Container */ 
    addon-card:not([expanded="true"]) .addon.card {
      width: 1500px !important;  /* Länge der Container */
    }

px-Wert nach Wunsch anpassen

FuchsFan

Zitat von ^L^

ehm, das ieht gehört auch dazu?

Hoppla, wie kommt denn das da hin? Code ist geändert. Danke für den Hinweis.

Zitat von ^L^

Wie bekommst du die Breite hin?

Da sind padding-Werte , die immer gleichmäßig änden (kleiner/größer). Außerdem ist der Wert width: 50px !important; vorhanden, der die Länge vorgibt.

FuchsFan

Zitat von ^L^

Daanke für deine Mühe - herzlichen Dank!

Hauptsache du bist zufrieden.

Der "Blaue Punkt" bei Erweiterungen erfüllt seinen Zweck, aber ein Punkt, an dem wir wohl noch nicht gebastelt haben (oder ???).

Nun habe ich mal gewagt da was zu machen, probiert es bitte mal aus, wenn ihr möchtet. Verbesserungen sind immer willkommen!!

So, hier dann der Code:

CSS

/* Toggle-Button aktiv/inaktiv Farbe anpassen (auch bei Hover) */ 
    addon-card .addon.card[active="true"] .toggle-button { 
        background: lime !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        width: 50px !important;
        border: 2px solid dodgerblue !important;
   }    
   
   addon-card .addon.card[active="true"] .toggle-button:hover { 
        background: red !important;
        border: 2px solid green !important;
   }    
   
   addon-card .addon.card[active="false"] .toggle-button { 
        background: red !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        width: 50px !important;
        border: 2px solid green !important;
   }    
   
   addon-card .addon.card[active="false"] .toggle-button:hover { 
        background: lime !important;
        border: 2px solid dodgerblue !important;
   }

Alles anzeigen

Sieht dann so aus: