about:addons anpassen

Mira_Belle

Hat zwar etwas gedauert, aber bin nun fast fertig.

CSS

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

    /*---------------------------------*/
    /*********** Hintergrund ***********/
    /*---------------------------------*/

    html {
        background-color: #292c2f !important;
    }

    /*---------------------------------*/
    /*********** Auswahlfeld ***********/
    /*---------------------------------*/

    #sidebar {
        background: #292c2f !important;
    }

    /* Text & Icons */
    #categories > .category {
        color: #e1e1e1 !important;  
    }

    /* Augewähles Element in Auswahlfeld (Text) */
    
    .category[selected] > .category-name, 
    .category.selected > .category-name {
        color: #ff9600 !important;
    }
    /* Augewähles Element in Auswahlfeld (Icon) */
    .category[selected] {
        fill:#ff9600 !important;
    }

    /* Augewähles Element in Auswahlfeld (gedrückt) */
    
    #categories > .category:hover:active {
        background-color: #414446 !important;
    }

    /* Text,Icons & Hintergrund Hover */
    #categories > .category:hover {
        color: #e1e1e1!important;
        background-color: #414446 !important;
        border-radius: 8px !important;
    }

    /* Links unten links */
    
    .sidebar-footer-label {
        color: #e1e1e1 !important;
    }
    
    .sidebar-footer-icon {
        fill: #e1e1e1 !important;
    }
    
    .sidebar-footer-link:hover {
        background-color: #414446 !important;
    }

    /* Hintergründe  */
    
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
        background: #292c2f !important;
        }

    /* Suchfeld */

    search-addons > search-textbox {
        background: #292c2f !important;     /* Hintergrund Eingabefeld */
    }

    search-textbox {
        border: 1px solid #e1e1e1 !important;     /* Rahmen des Eingabefelds  */
        border-radius: 4px;
    }
    
    search-textbox[focused] {
        border-color: transparent !important;     /* Rahmen des Eingabefelds (Aktiv)  */
        outline: 2px solid #ff9600 !important;
    }

     /* Position des Button mit Zahnrad */
    .main-heading {
        max-width: 1045px !important;
    }

    /**** Button oben mit dem Zahnrad ****/
    .page-options-menu > .more-options-button {
        fill: #e1e1e1 !important;                    /* Farbe d. Zahnrades */     
        outline-width: 1px !important;                /* Dicke d. Umrandung */
        outline-style: solid !important;            /* Art d. Umrandung */
        outline-color:  #e1e1e1 !important;            /* Farbe d. Umrandung */
        border-radius: 8px !important;        
        width: 70px !important;                        /* Länge des Button */
/*        height: 30px ! important;                    /* Höhe des Button */
    }
    
    
    .back-button {
        width: 70px !important;
    }
    
    
    /**** Button oben mit dem Zahnrad (hover) ****/
    .page-options-menu > .more-options-button:hover {
        fill: #ff9600 !important;                    /* Farbe des Zahnrades */    
          outline-width: 2px !important; 
        outline-style: solid !important; 
        outline-color:  #ff9600  !important;  
    }

    /**** Updates ****/

    #updates-message {
        outline-width: 1px !important;
        outline-style: solid !important;
        outline-color: #ff9600 !important;
        border-radius: 8px;
        height: 30px !important;
        background: #f2000091;
    }

    /*   Aussehen des Menü hinter dem Zahnrad */

    addon-page-options panel-list panel-item {
        background: none! important;
        fill: #ff9600 !important;
    }
    
    addon-page-options panel-list panel-item:hover {
        background: #292c2f ! important;
    }
 
    addon-page-options panel-list {
        background: #292c2f ! important;             /* farbiger Hintergrund des Menüs */
        border-color: #ff9600 !important;            /* Farbe d. Rahmens */
        border-style: solid !important;                /* Art d. Rahmens */
        border-width: 3px !important;                /* Dicke d. Rahmens */
        border-radius: 8px !important; 
    }
    
/*  Hintergrund der Box Updates automatisch aktualisieren */

    addon-page-options panel-list panel-item[accesskey][checked] {
        background: grey !important;
    } 

     /* Überschriften */
     
    .header-name {
        color: #e1e1e1 !important;
    }

    /*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
    :root {
        --card-outline-color: none !important;
        --card-padding: 18px !important;    /* Abstände innerhalb der Container    */
    }
    
    /* Vorschauen in den Containern    */
    .card-heading-image {
        border-radius: 8px !important;
    }
/*
    addon-card:not([expanded="true"]) .addon.card {
        outline: 3px solid orange;
        outline-offset: 2px;  
}  */

    /*** Button "Mehr Add-ons ansehen" ***/
    button.primary {
        background-color: #292c2f!important;
        color: #e1e1e1 !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        border-style: solid !important;  
        border-color:#e1e1e1 !important;
    }

    button.primary:enabled:hover {
        background-color: #292c2f !important;  
        color: #ff9600 !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        border-style: solid !important;  
        border-color:#ff9600 !important;
    }

    /*************************/
    /**** Empfehlungen ****/
    /*************************/

    /* Textfarbe (Empfehlungen) */
    
    body {
        color: #e1e1e1 !important;
    }

    /* Linkfarbe (Empfehlungen) */

    a {
        color: #ff9600 !important;
    }
    
    a:hover {
        color: #ff9600 !important;
        text-decoration: none !important;
    }

    /* Breite der Container */
    #main {
        max-width: 1050px !important;
    }
    
    /*    Container */

    .card {
        background: #292c2f !important;
/*        border-width: 3px !important; */ 
/*        border-style: solid !important; */  
/*        border-color: #e1e1e1 !important; */  
        border-radius: 8px !important;
/*       outline: 3px solid #e1e1e1; */
        outline-width: 1px !important; 
        outline-style: solid !important; 
        outline-color:  #e1e1e1 !important;
/*      outline-offset: 2px;  */
        width: 1008px;                       /*  Ausdehnung der Container zum rechten Rand */
    }

    .card:hover {
        background: #292c2f !important;
/*        border-width: 3px !important; */
/*        border-style: solid !important; */  
/*        border-color: #ff9600 !important; */  
        border-radius: 8px !important;
        outline-width: 3px !important; 
        outline-style: solid !important;
        outline-color:  #ff9600 !important;
/*      outline-offset: 2px;  */  
    }

    /* Höhe der Container   */
    .addon-description {
        line-height: 25px !important;       
    } 
    
    /* Image in den Container in der Höhe verschoben    */
    addon-card[expanded] .addon.card {
        margin-top: 10px !important;
    }
    /* Image in den Container in der Größe angepasst    */
    .card-heading-image {
        width: 850px !important;
        height: 100px !important;
    }

    /*************************/
    /**** Erweiterungen ****/
    /*************************/

    /* Schieberegler    */
    
    input[type="checkbox"].toggle-button {
        background: #8b8b8b !important;
        border-color: #e1e1e1! important;
    }
    
    input[type="checkbox"].toggle-button:checked {
        background: #ff9600 !important;
        border-color: #ff9600 !important;    
    }

    input[type="checkbox"].toggle-button:hover {
        background: #ff9600 !important;
        border-color: #ff9600 !important;
    }

    /* Sternchen  */
    .disco-description-statistics {
        color: #ff9600 !important;
    }

    /* Sternchen & mehr    */
    .addon-detail-rating {
        color: #ff9600 !important;
    }

/* Überschriften in den Containern */
    recommended-addon-card {
        color: #e1e1e1 !important;
    }
    
    recommended-addon-card:hover {
        color: #e1e1e1 !important;
    } 

    /* Buttons im Allgemeinen    */
    button {
        color: #e1e1e1 !important;
    }
    
    button:enabled:hover {
        color: #ff9600 !important;
    }
    
    button:focus-visible {
        outline-color: transparent !important;
    }

    :root {
      --in-content-accent-color: #ff9600 !important;  /*Farbe der Anzeige der Anzahl v. Updates */
      --main-margin-start: 150px !important;    /* Abstand vom Auswahlfeld   */
      --in-content-button-background: #e1e1e1 !important; /* Hintergrundfarbe in den Buttons  */
      --in-content-button-background-hover: #e1e1e1 !important;
      --in-content-deemphasized-text: #e1e1e1 !important;    /* Textfarbe in den Containern  */
      --in-content-page-color: #ff9600 !important;    /* Textfarbe in den Containern (Überschriften)    */
      --in-content-border-color: #e1e1e1 !important; /* Dir zwei Trennlinien in der Box    */
    }

    /**************************************/
    /****        Container Expand        ***/
    /**************************************/

    /* "Knöpfe"    */
    input[type="radio"]:enabled:checked {
        background-color: #ff9600  !important;
        border-width: 1px !important; 
        border-style: solid !important;
        border-color: #ff9600 !important;
    }
    input[type="radio"]:enabled:checked:hover {
        background-color: #ff9600  !important;
    }
    
    input[type="radio"]:enabled:hover {
        background-color: #ff9600 !important;
    }

    input[type="radio"] {
        border-width: 1px !important; 
        border-style: solid !important;
        border-color: #e1e1e1 !important;
}

    .more-options-button,                                                    /* Button mit den drei Punkten */
    .back-button,                                                            /* Button Zurück */
    .disco-cta-button,                                                        /* Buttons in den Containern unter Empfelungen */
    .theme-enable-button {                                                    /* Buttons in den Containern unter Themes    */
        background-color: #292c2f !important;
        outline-width: 1px !important;
        outline-color: #e1e1e1 !important;
        outline-style: solid !important;
        border-radius: 8px !important;
    }
  
    .more-options-button:hover,                                                /* Button mit den drei Punkten */
    .back-button:hover,                                                        /* Button Zurück */
    .disco-cta-button:hover,                                                /* Buttons in den Containern unter Empfelungen */
    .theme-enable-button:hover {                                            /* Buttons in den Containern unter Themes    */
        outline-width: 2px !important;
        outline-color: #ff9600 !important;
    }

    /*  Icons ausblenden */
/*    panel-item {
        --icon: unset !important;
    }
*/
    /* Menü unter den drei Punkten    */

    addon-list addon-options > panel-list[role="menu"],
    addon-list plugin-options > panel-list[role="menu"] {
        border-radius: 8px !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-color: orange !important;
        background-color: #292c2f !important;
    }

    addon-list addon-options > panel-list > panel-item-separator,
    addon-list plugin-options > panel-list > panel-item-separator {
        background: #e1e1e1 !important;
    }

    panel-list {
        border-radius: 8px !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-color: orange !important;
        background-color: #292c2f !important;
    }
}

Alles anzeigen

Komme nur an EINER Stelle nicht weiter und erbete Hilfe.

Unter Erweiterungen, aber auch unter Themes gibt es da den Button mit den drei Punkten.

Wenn man da drauf klickt öffnet sich ein Menü.

Wie spreche ich den Hover da an? Denn mir ist diese "Markierung einfach zu hell.

Gleiches gilt für das Menü, wenn man Details aktiviert hat,

sowohl unter den Erweiterungen, wie auch unter Themes.

Gruß

Mira

PS.

Wenn Bildchen gebraucht werden, bitte auffordern, dann reiche ich sie nach.

Dharkness

Hallo Mira_Belle,

schau mal, was Du damit ↓ anfangen kannst.

CSS

button[role="menuitem"]:hover,
button[role="menuitem"]:hover > label,
button[role="menuitem"]:hover > label > span {
    fill: #000 !important;
    color: #000 !important;
}

/* Dreipunkte Button für Erweiterungen und Themes. */
addon-list addon-options > panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    opacity: 1.0 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border: 1px solid #B2B2B2 !important;
    background: none !important;
    background-color: #800 !important;
    margin: 2px 2px 0 2px !important;
}
addon-list[type="theme"] addon-options > panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    opacity: 1.0 !important;
    box-shadow: none !important;
    border: 1px solid #B2B2B2 !important;
    background: none !important;
    background-color: #000 !important;
    margin: 2px 2px 0 2px !important;
}

addon-list plugin-options > panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    opacity: 1.0 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border: 1px solid #B2B2B2 !important;
    background: none !important;
    background-color: #4A4A4F !important;
    margin: 2px 2px 0 2px !important;
}
addon-list addon-options > panel-list > panel-item[action="remove"] {
    background-color: #F20 !important;
    color: #FFF !important;
}
addon-list addon-options > panel-list > panel-item[action="expand"],
addon-list plugin-options > panel-list > panel-item[action="manage-addon-button"] {
    background-color: #804628 !important;
    color: #FFF !important;
}
addon-list addon-options > panel-list > panel-item[action="preferences"] {
    background-color: #217B22 !important;
    color: #FFF !important;
}
addon-list addon-options > panel-list > panel-item:hover,
addon-list addon-options > panel-list > panel-item[action="preferences"]:hover,
addon-list addon-options > panel-list > panel-item[action="remove"]:hover,
addon-list addon-list addon-options > panel-list > panel-item[action="expand"]:hover,
addon-list addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item[action="manage-addon-button"]:hover {
    fill: #000 !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

addon-list addon-options > panel-list[role="menu"],
addon-list plugin-options > panel-list[role="menu"] {
    border: 1px solid #B2B2B2 !important;
    background-color: #4A4A4F !important;
    padding: 0 0 2px 0 !important;
    margin-top: -1px !important;
}
addon-list addon-options > panel-list > panel-item-separator,
addon-list plugin-options > panel-list > panel-item-separator {
    background: #B2B2B2 !important;
    margin: 2px 0 0 0 !important;
}

/* Dreipunkte Button in der Detailansicht. */
div#main[current-view="detail"] addon-card panel-list[role="menu"] {
    border: 1px solid #B2B2B2 !important;
    background-color: #4A4A4F !important;
    padding: 0 0 2px 0 !important;
    margin-top: -1px !important;
}
div#main[current-view="detail"] addon-card panel-list panel-item-separator {
    background: #B2B2B2 !important;
    margin: 2px 0 0 0 !important;
}
div#main[current-view="detail"] addon-card panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    border-radius: 4px !important;
    border: 1px solid #B2B2B2 !important;
    background-color: #000 !important;
    color: #FFF !important;
    margin: 2px 2px 0 2px !important;
}
div#main[current-view="detail"] addon-card panel-list > panel-item:hover {
    border: 1px solid #0082FC !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
}

Alles anzeigen

Mira_Belle

Zitat von Dharkness
Hallo Mira_Belle,
schau mal, was Du damit ↓ anfangen kannst.
CSS
...

Vielen Dank Ralf.

Habe mit diesem Code etwas herumexperimentiert und das erwünschte Ergebnis erzielt.

CSS

/* Dreipunkte Button für Erweiterungen und Themes. */

addon-list addon-options > panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    border-radius: 4px !important;
    border: 1px solid #e1e1e1 !important;
    margin: 2px 2px 0 2px !important;
}

    addon-list addon-options > panel-list[role="menu"],
    addon-list plugin-options > panel-list[role="menu"] {
        border-radius: 8px !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-color: orange !important;
        background-color: #292c2f !important;
    }

addon-list addon-options > panel-list > panel-item:hover,
addon-list addon-options > panel-list > panel-item[action="preferences"]:hover,
addon-list addon-options > panel-list > panel-item[action="remove"]:hover,
addon-list addon-list addon-options > panel-list > panel-item[action="expand"]:hover,
addon-list addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item[action="manage-addon-button"]:hover {
    background-color: #414446 !important;
}

/* Dreipunkte Button in der Detailansicht. */

div#main[current-view="detail"] addon-card panel-list panel-item-separator {
    background: #e1e1e1 !important;
    margin: 2px 0 0 0 !important;
}

div#main[current-view="detail"] addon-card panel-list > panel-item {
    --in-content-button-background: none !important;
    --in-content-button-background-hover: none !important;
    --in-content-button-background-active: none !important;
    border-radius: 4px !important;
    border: 1px solid #e1e1e1 !important;
    background-color: #292c2f !important;
    margin: 2px 2px 0 2px !important;
}

div#main[current-view="detail"] addon-card panel-list > panel-item:hover {
    background-color: #414446 !important;
}

    panel-list {
        border-radius: 8px !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-color: orange !important;
        background-color: #292c2f !important;
    }

Alles anzeigen

Das ist dabei heraus gekommen.

Danke.

Gruß

Mira

Dharkness

Zitat von Mira_Belle

Habe mit diesem Code etwas herumexperimentiert und das erwünschte Ergebnis erzielt.

Schön das ich helfen konnte, war gerne geschehen.

about:addons anpassen

Ähnliche Themen

Addons-Manager anpassen

Addons Manager Code anpassen

Addons Manager anpassen