Verlauf über gesamte Navigator Toolbox ?

Momentan habe ich separate Schattenverläufe und Hintergrungfarben für die einzelnen Leisten für Nav-bar , PersonalToolbar ( bookmarks ) , und Tabs und TabsToolbar .

Ist es möglich einen Verlauf / Schatten oder ähnliches über die gesamte Navigator-toolbox zu legen, vorzugsweise hinter die Inhalte der Leisten wie Text, Schaltbuttons etc. ( s. Bild ) ?

Ich habe schon viel gegoogelt und im Browserwerkzeug rumgesucht, werde aber nicht ganz schlau aus der Sache .

Wenn ich zB etwas wie das hier in die userChrome.css einfüge, passiert gar nichts :

#navigator-toolbox {
background-color: red !important;
color: green !important;
}

Die Tableiste sitzt übrigens unten bei mir .

Wer es sich antun will, kann sich meine Anfänger userChrome.css hier anschauen .

Danke schonmal vorab !

Zitat von Dharkness

teste mal das ↓ in der userChrome.css.

Vielen Dank, das funktioniert !

Der Haken dabei ist dass ich halt die Basis-Hintergrundfarbe verliere , die bisher für die einzelnen Leisten auf ein helles Grau gesetzt war .

Dieser Teil CSS ändert nur die Schriftfarben :

Zitat

CSS

#navigator-toolbox-background .browser-toolbar {  color: blue !important;
}

Zitat von 2002Andreas

Meinst du so oder ähnlich?

Danke, das ist ein guter Tip für andere Anwendungen ; aber ich meinte einen Verlauf über den gesamten Bereich, nicht die einzelnen Leisten .

Zitat von Dharkness

Zitat von Horstmann

Der Haken dabei ist dass ich halt die Basis-Hintergrundfarbe verliere , die bisher für die einzelnen Leisten auf ein helles Grau gesetzt war .

Natürlich, mit der Basis-Hintergrundfarbe für die einzelnen Leisten würdest Du den Gesamtverlauf wieder überdecken.

Eben, das hatte ich dann auch probiert und gemerkt , als ich als background statt 'none' eine Farbe eingetragen habe .

Ich werd wohl mal mit Gradienten experimentieren, mal schauen wie das dann rendert .

Lässt sich denn die Grundfarbe des UI evtl. anderweitig festlegen ?

Ich würde wahrscheinlich nur weiche box-shadows für den Verlauf benutzen, die sind ja transparent .

Was mir aber sehr weiterhilft ist, dass ich dank Dir und Andreas jetzt weiss wie ich die gesamte Oberfläche auf einmal manipulieren kann, das hatte ich bisher noch nicht kapiert .

Zitat von Dharkness

Hm, wenn ich Dich richtig verstanden habe, passt doch nur die Farbe nicht, was ist damit ↓?

Vielen Dank, funktioniert !

Mit Ausnahme der selektierten Tab , aber die Macke finde ich auch noch .

Ich hatte versucht einen box-shadow zusammen mit einer vordefinierten Hintergrundfarbe zu benutzen, das lässt sich für mich leichter anpassen und kontrollieren .

Zum Beispiel benutze ich, für das Ergebnis im Screenshot in der ersten Post, u.a. einen hellen Verlauf von oben nach unten innerhalb der URL Leiste, mit Hintergrundfarbe :

/*   URL Leiste color, shadow hell top down  */
#nav-bar {
background-color: #DCDCDC !important;
border-bottom: 1px solid !important;
border-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: inset 0px 20px 32px -12px rgba(255, 255, 255, 0.5) !important;
}

Und einen Schatten nach oben, ausgehend von Oberkante Tableleiste, ebenfalls mit definierter Hintergrundfarbe :

/*  Shadow nach oben für boomarks  */
#TabsToolbar {
background-color: #B2B2B2 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
filter: drop-shadow(0px -6px 12px rgba(0, 0, 0, 0.05)) !important;
}

Das scheint wohl in der Form nicht für die gesamte Toolbox zu funktionieren , mit einem Gradient klappt's aber .