Farbanpassungen in den Popups, Untermenüs der Menüs (Datei, Bearbeiten, usw. )

Mira_Belle

Es ist etwas schwer für mich das Problem zu beschreiben!

Mit diesem Code habe ich das Aussehen der Menüleiste festgelegt.

CSS

    menu[id="file-menu"],
    menu[id="edit-menu"],
    menu[id="view-menu"],
    menu[id="history-menu"],
    menu[id="bookmarksMenu"],
    menu[id="tools-menu"],
    menu[id="helpMenu"]  {
        appearance: none !important; 
        background:transparent !important;    
        color: ##E0E0E0  !important;                                        /* Hellgrau, Schrift */
        border-radius: 3px  !important;
    }
    menu[id="file-menu"]:hover,
    menu[id="edit-menu"]:hover,
    menu[id="view-menu"]:hover,
    menu[id="history-menu"]:hover,
    menu[id="bookmarksMenu"]:hover,
    menu[id="tools-menu"]:hover,
    menu[id="helpMenu"]:hover {
        appearance: none !important;
        background: rgba(224, 224, 224, 0.2) !important;                    /* Hellgrau, Feld */
    }

Alles anzeigen

So weit, so gut.

Nun sind aber in einigen Popups, sowie auch in den Untermenüs

die Hintergrundfarben beim Hovern nicht so, wie ich sie gerne hätte.

Also habe ich diesen Code versucht zu verwenden.

CSS

    menu[_moz-menuactive="true"]:not([disabled="true"]),
    menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
        background-color: #5C5C5C !important;
        border-radius: 3px !important;
    }

Aber dadurch wird auch der Code der Menüleiste überschrieben.

So möchte ich das aber nicht!

Wie gehe ich am besten vor?

2002Andreas

Zitat von Mira_Belle

Wie gehe ich am besten vor?

Teste bitte mal:

CSS

#main-menubar > menu  {
        background: transparent !important;    
        color: #E0E0E0 !important;                                        /* Hellgrau, Schrift */
        border-radius: 3px  !important;
    }
#main-menubar > menu:is(:hover,[open],[_moz-menuactive])  {
        background: rgba(224, 224, 224, 0.2) !important;                    /* Hellgrau, Feld */
    }

Und was genau möchtest du mit dem anderen Code erreichen?

milupo

Mira_Belle Warum verwendest du eigentlich die Notation mit dem Attribut id? #file-menu, #edit-menu, #view-menu usw. ohne Voranstellung von menu ist doch viel kürzer.

Mira_Belle

Danke Andreas.

Mit Deinem und mit meinem zweiten Code funktioniert es!

CSS

#main-menubar > menu  {
        background: transparent !important;    
        color: #E0E0E0 !important;                                            /* Hellgrau, Schrift */
        border-radius: 3px  !important;
    }
#main-menubar > menu:is(:hover,[open],[_moz-menuactive])  {
        background: rgba(224, 224, 224, 0.2) !important;                    /* Hellgrau, Feld */
    }

    menu[_moz-menuactive="true"]:not([disabled="true"]),
    menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
        background-color: #5C5C5C !important;
        border-radius: 3px !important;
    }
}

Alles anzeigen

Das Problem war, dass z.B. im Menü zu den Lesezeichen die Ordner eine andere Hintergrundfarbe hatten als die Links!

Oder wenn ich ein Popup öffnete, dass beim drüberstreichen die Hintergrundfarbe eben nicht #5C5C5C war

und die "Felder" auch keine abgerundeten Ecken hatten.

Wie es ohne den Code aussah.

Und so jetzt, mit Code

2002Andreas

Zitat von Mira_Belle

funktioniert es!

Sören Hentzschel

Zitat von milupo

Warum verwendest du eigentlich die Notation mit dem Attribut id? #file-menu, #edit-menu, #view-menu usw. ohne Voranstellung von menu ist doch viel kürzer.

Nicht nur kürzer: Ein ID-Selektor ist auch sehr viel effizienter als ein Attribut-Selektor, was den Aufwand betrifft, den Firefox hat, und die Spezifität beim Attribut-Selektor ist ebenfalls geringer, was beim Überschreiben von bestehenden Stilen ein Thema sein kann. Das mag in diesem Fall alles nicht spürbar ins Gewicht fallen. Auf der anderen Seite fällt mir kein Grund ein, wieso man zur unkonventionellen Schreibweise mit dem Attribut-Selektor greifen sollte, weil's halt wirklich gar keinen Vorteil hat.

2002Andreas

Zitat von Mira_Belle

Wie sollte es denn mit ID-Selektoren aussehen?

Statt:

menu[id="file-menu"]

so:

#file-menu

Mira_Belle

Danke Andreas.

Habe diese Frage gelöscht, weil ich kurz danach auch darauf gekommen bin.

Und alles zusammen gefasst, so:

CSS

    #file-menu,
    #edit-menu,
    #view-menu,
    #history-menu,
    #bookmarksMenu,
    #tools-menu,
    #helpMenu {

Besser und zielführender, und vor allem noch kürzer, war aber der Code von Dir!

CSS

    #main-menubar > menu  {

Nochmals vielen Dank.

Farbanpassungen in den Popups, Untermenüs der Menüs (Datei, Bearbeiten, usw. )

Ähnliche Themen

Bibliothek-Fenster & Darstellung Menüs in der Menüleiste