CSS Code für hover neu?

Mira_Belle

Achherjeh, da hab ich was angefangen.

Also, --panel-border-radius ist jetzt auskommentiert!

Es funktioniert auch ohne.

Bei dem Code von Dir =>

CSS

menupopup > menu[disabled="true"]:hover,
menupopup > menuitem[disabled="true"]:hover {
        background-color: #3d3d3d !important;    /* Hintergrundfarbe */
        border-radius: 4px !important;
        color: #818181 !important;                /* Schriftfarbe */
    }

menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;    * Hintergrundfarbe */
        border-radius: 4px !important;
        color: #E0E0E0 !important;                /* Schriftfarbe */
    }

Alles anzeigen

und

diesem =>

CSS

    menupopup {
        appearance: none !important;
        --panel-color: #E0E0E0 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #2B2B2B !important;                                /* Hintergrund, innen */    
        --panel-border-color:transparent !important;                        /* Rahmenfarbe */
/*        --panel-border-radius: 4px !important;    */                                /* Rahmenradius */
        background-color: #2B2B2B !important;                                /* Hintergrund, außen */
        border: 3px solid #FFA500 !important;
        border-radius: 8px !important;
    }

sehe ich keinen Widerspruch.

Den unteren Code ausgeblendet

sieht das Popup der Adresszeile so aus!

Mit dem Code so.

In beiden Fällen Kopieren gehovert.

--panel-background ist für den gesammten Hintergrund.

background-color für den Bereich zwischen Rahmen und Panel!

ABER, es geht um die Schriftfarbe des inaktiven Feldes!

Es ist mit

CSS

menupopup > menu[disabled="true"]:hover,
menupopup > menuitem[disabled="true"]:hover {
        color: #818181 !important;    }

definiert.

Wenn ich jedoch schnell zwischen den Feldern hin und her zwitsche, blitzt ganz kurz die Schrift auf! #E0E0E0

Das ist auch in anderen Popups mit inaktifen Felder der Fall.

Z.B. hier =>

Mira_Belle

Also der Code schaut nun so aus:

CSS

    menupopup > menu[_moz-menuactive="true"],
    menupopup > menuitem[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;        /* Hintergrundfarbe */
        border-radius: 4px !important;        
        color: #E0E0E0 !important;                    /* Schriftfarbe */
    }
    
    menupopup > menu[disabled="true"]:hover,
    menupopup > menuitem[disabled="true"]:hover {
        background-color: #3d3d3d !important;        /* Hintergrundfarbe */
        color: #818181 !important;                    /* Schriftfarbe */
    }

Alles anzeigen

Leider habe ich immer noch das Problem, dass inaktive Schriftzüge kurz beim hovern hell aufblitzen.

Werde mich damit wohl arrangieren müssen.

Mira_Belle

Das Aufblitzen, egal welches, ist weg!

Was habe ich gemacht?

Ich habe eine Popup.css erstellt, und den "verteilten" Code zusammengeführt.

Zeilen 3 bis 14 waren in einer anderen CSS

und

der Rest stand direkt in der userChrome.css.

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {

    /* Anpassungen der Popups */

    menupopup {
        appearance: none !important;
        --panel-color: #E0E0E0 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #2B2B2B !important;                                /* Dunkles Grau, Hintergrund */    
        --panel-border-color:transparent !important;                        /* Rahmenfarbe */
        --panel-border-radius: 4px !important;                                /* Rahmenradius */
        background-color: #2B2B2B !important;                                /* Hintergrund */
        border: 3px solid #FFA500 !important;
        border-radius: 8px !important;
    }    
    
    menu[_moz-menuactive="true"],
    menuitem[_moz-menuactive="true"] {
        background-color: #5C5C5C !important; 
        border-radius: 4px !important;
        color: #E0E0E0 !important;        
    }

    menuitem[disabled="true"]:hover,
    menuitem[disabled="true"]:hover,
    menu[_moz-menuactive="true"][disabled="true"],
    menuitem[_moz-menuactive="true"][disabled="true"] {
        color: #818181 !important;     
        background-color: #3d3d3d !important; 
    }
}

Alles anzeigen

In der userChrome.css per

CSS

@import url("Popup.css");

eingebunden, Fehler weg.

Kann mir das jemand erklären?

2002Andreas

Zitat von Mira_Belle

direkt in der userChrome.css.

Ob das etwas damit zu tun hat kann ich nicht sagen.

Aber du solltest nur import Regeln in der userChrome.css haben, und nichts weiter.

Bei Scripten ist manchmal schon die Reihenfolge wichtig für deren einwandfreier Funktion.

lenny2

CSS

/* userChrome.css Firefox */
/* highlight_selected_item_most_menus.css */
/* SELECTED ITEM (Hover) - context menu, bookmarks, hamburger, 3 dots */
popup menu:not([disabled="true"])[_moz-menuactive="true"],
menupopup menu:not([disabled="true"])[_moz-menuactive="true"],
menuitem:not([disabled="true"])[_moz-menuactive="true"],
autorepeatbutton:not([disabled="true"]):hover,
splitmenu-menuitem:not([disabled="true"])[_moz-menuactive="true"],
panel[type="arrow"] .subviewbutton:not([disabled="true"]):hover,
panel[type="arrow"] toolbarbutton:not([disabled="true"]):hover,
panel[type="arrow"] button:not([disabled="true"]):hover {
background: red !important; /* set your own color here */
color: white !important;
border-radius: 5px !important; /* corner rounding (0px without rounding) */
}

Alles anzeigen

2002Andreas

Zitat von lenny2

CSS

Das entspricht aber nicht dem, um was es hier geht

Die inaktiven Einträge werden damit gar nicht angesprochen.

lenny2

Zitat von 2002Andreas

Das entspricht aber nicht dem, um was es hier geht

Hm, mein Wissen ist zu begrenzt, um die Ursache herauszufinden. Aber durch den Export funktioniert es für mich hervorragend. Ich werde versuchen, einen Screenshot oder ein Gif zu machen.

2002Andreas

Zitat von lenny2

funktioniert es für mich hervorragend.

Das mag ja sein, aber inaktive Einträge werden damit nicht angesprochen, und genau um die ging es bei den Beiträgen auch.

lenny2

Zitat von 2002Andreas

Das mag ja sein, aber inaktive Einträge werden damit nicht angesprochen, und genau um die ging es bei den Beiträgen auch.

Vielleicht verstehe ich Sie falsch, aber im Allgemeinen habe ich Folgendes

2002Andreas

Zitat von lenny2

aber im Allgemeinen

Es geht um die inaktiven Einträge:

Z.B. diese:

Der Code deckt nur die aktiven ab, hier die roten:

Und so sieht das mit einem anderen Code für die inaktiven Einträge aus:

Und oben im Kontetextmenü passt es auch nicht. Der Hg hat 2 Farben.

2002Andreas

So sieht das mit den Codes aus Beitrag Nr. 17 hier aus:

Mira_Belle

Zitat von 2002Andreas

Ob das etwas damit zu tun hat kann ich nicht sagen.
Aber du solltest nur import Regeln in der userChrome.css haben, und nichts weiter.
Bei Scripten ist manchmal schon die Reihenfolge wichtig für deren einwandfreier Funktion.

Sorry, wenn ich mich jetzt erst melde!

Danke für die Info.

Dann wird einige Arbeit auf mich zukommen, denn "meine" userChrome.css beinhaltet schon

ein wenig Code.

Manches kann ich zuordnen, anderes muss ich erst noch ein Mal schauen,

und wieder anderes kann dort aber verbleiben!

Z.B.

CSS

    /*-------------------------------------------------------*/
    /****  Übersetzungsleiste an den unteren Fensterrand  ****/
    /*-------------------------------------------------------*/
   
    #tab-notification-deck {
        position: fixed;
        z-index: 1;
        bottom: 0;
        width: 100%;
    }

oder

CSS

    /*-----------------------------------------------------------------------*/
    /* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
    /*-----------------------------------------------------------------------*/
    #context-openlinkinusercontext-menu {
        display: none !important;
      }
    /*-----------------------------------------------------------------------*/
    /* Ausblenden des Meüs "Einfügen ohne Formatierung" ---------------------*/
    /*-----------------------------------------------------------------------*/
   
    #context-paste-no-formatting {
        display: none !important;
    }

Alles anzeigen

Das war es aber dann auch schon.

CSS Code für hover neu?

Ähnliche Themen

CSS Code für "Geschlossenen Tab wiederherstellen" Addon

CSS Code für FoxTab & SingleFile

Aussehen wiederherstellen mittels CSS

Nach Update auf Firefox 96: Code für Hintergrundfarbe in Tableiste funktioniert nicht mehr so, wie er soll

Addons Manager Code anpassen

Übersetzung meiner CSS-Styles für die userChrome.css und userContent.css