Passwort Popup Schatten

  • Ist das über die userChrome möglich?

    Wenn du magst, dann teste bitte.

    Ich kann dir so einen Rahmen anbieten:


    CSS
    dialog#commonDialog {
      border: 3px solid rgba(0,0,0,.4) !important;
      margin-top: 0 !important;
    }

    Einzutragen ist der Code in die userChrome.css

    PS:

    Die Farbe musst du dir dann anpassen.

    Für schwarz einfach black schreiben, oder rgba(0,0,0)

  • Weil dein Tag vermutlich nicht die Fensterzeile erfassen kann. Du hast ja nicht umsonst gefragt, wo der Schatten sein soll. In diesem Fall dürfte es doch eher ein Rand (border) sein wie in deinem Beispiel.

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!

    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich. Das Netz wird dominiert von Goof:ienen:ies und Dullek:innen:s vom Dienst. Schlabokka!

  • K.A. wie der Code für einen Schatten dazu dann genau lauten müsste. :/

    Ich vermute, dass das nicht funktioniert, da es sich bei dem Dialog um ein ganz normales Windows/MacOS-Fenster handelt. Es existiert (zumindest unter Windows) ja schon auf Betriebssystemebene ein kaum sichtbarer Schatten. Ich habe den Effekt mal per Bildverarbeitung etwas verstärkt.

    Den Inhalt kann man, so wie du es gemacht hast, beliebig anpassen, aber alles was sich außerhalb des Dialogs befindet, wird vom OS gesteuert. Zumindest ist das nach meinem Verständnis so - bin aber auch nicht der große CSS-Fachmann. ;)

    Vielleicht könnte man das ganze "Faken", indem man den gesamten Inhalt des Dialogs um ein paar Pixel nach links/oben verschiebt und dann innerhalb des Dialogs so was wie einen 'Drop-Shadow' platziert. Laut dem Screenshot vom TE hat ja der Dialog unter MacOS keinen eigenen Rahmen (oder es liegt daran, dass der Dialog keinen Fokus hat :/) und es müsste eigentlich ganz "seamless" aussehen.

  • Das könnte hinkommen. Ich hab was von nsIPrompt:_prompot gefunden und laut Info ist das ein modales Fenster.
    https://searchfox.org/mozilla-centra…rompter.sys.mjs
    https://searchfox.org/mozilla-centra…logs.properties

    PromptPassword3=Password Required - %S

    Und hat folglich eine Titelzeile, die, wie schreibst, vom System bereitgestellt wird.

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!

    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich. Das Netz wird dominiert von Goof:ienen:ies und Dullek:innen:s vom Dienst. Schlabokka!

  • Zumindest ist das nach meinem Verständnis so - bin aber auch nicht der große CSS-Fachmann. ;)

    Dein Verständnis ist absolut korrekt. ;)

    Vielleicht könnte man das ganze "Faken", indem man den gesamten Inhalt des Dialogs um ein paar Pixel nach links/oben verschiebt und dann innerhalb des Dialogs so was wie einen 'Drop-Shadow' platziert.

    Das wird nicht funktionieren, weil nur der „Inhaltsbereich“ (der dunkle Bereich unter der Titelzeile) von Firefox kommt. Über Firefox-CSS kommt man nicht um den gesamten Dialog herum.

    Laut dem Screenshot vom TE hat ja der Dialog unter MacOS keinen eigenen Rahmen

    Unter macOS gibt es einen Schatten, der Themenstarter verwendet Linux. Für mich sieht das ehrlich gesagt nach einem Fehler in der verwendeten Linux-Oberfläche aus. Wenn diesem Dialog der Schatten oder Rahmen fehlt, jedenfalls eine Abgrenzung irgendeiner Art, dürfte das alle Dialoge betreffen. Ich meine, das kann ja durchaus auch Absicht sein. Ich weiß nicht, wie der Ersteller der Oberfläche sich das gedacht hat. Für mich sieht das aber falsch aus und ist auch nicht das, was ich kenne, weder von macOS noch von Windows noch von GNOME (was Ubuntu standardmäßig verwendet).

  • ich habe einen anderen Compositor benutzt, bei dem ich firefox ausnehmen musste, da sonst der gesamte Schatten fehlerhaft dargestellt wurde.

    Schade, dass das so nicht funktioniert...

    Ich danke euch allen sehr für die Hilfe

  • Unter macOS gibt es einen Schatten, der Themenstarter verwendet Linux.

    Oops, stimmt - nicht richtig hingeschaut. Habe mich wohl von dem Screenshot (runde Fensterdekorationen) täuschen lassen...

    Das wird nicht funktionieren, weil nur der „Inhaltsbereich“ (der dunkle Bereich unter der Titelzeile) von Firefox kommt. Über Firefox-CSS kommt man nicht um den gesamten Dialog herum.

    Die Titelzeile ist natürlich außen vor, gehört ja auch nicht zum Inhaltsbereich...das ist klar. Aber ein Schatten für ein Fenster ist für mich ein nach unten/rechts rausgezogener Rahmen, nicht um das ganze Fenster herum. Ich denke, was 2002Andreas gemacht hat, ist schon der richtige Weg, auch wenn ich den Rahmen, zwecks echter Schattensimulation, ausschließlich unten und rechts machen würde. Das funktioniert auf jeden Fall, da sich das ja innerhalb des Inhaltsbereichs abspielt (wie gesagt Fake-Schatten).

  • Ein Dialog-Schatten umschließt normalerweise alle vier und nicht nur zwei Seiten. Es geht dabei ja darum, eine Abgrenzung zu den dahinter liegenden Elementen zu schaffen, wobei ein Schatten halt „sanfter“ ist als eine durchgezogene Linie. Wieso eine Abgrenzung notwendig ist, sieht man im Screenshot vom Themenstarter sehr gut. Dort ist zwischen Dialog und Hintergrund auf der linken Seite, wo du darauf verzichten würdest, kaum Kontrast vorhanden. Man sieht also nur mit Mühe, wo der Dialog beginnt. Genau dagegen wirkt der Schatten oder Rahmen.

  • Ich denke auch, dass der TE irgendetwas an seinem Linux-Fenstermanager so angepasst hat, dass jetzt die Abgrenzung zum Hintergrund nicht mehr gegeben ist oder dies der Standard für den gewählten Desktop ist, was auf jeden Fall nicht gut gelöst ist.

    Ein Dialog-Schatten umschließt normalerweise alle vier und nicht nur zwei Seiten. Es geht dabei ja darum, eine Abgrenzung zu den dahinter liegenden Elementen zu schaffen, wobei ein Schatten halt „sanfter“ ist als eine durchgezogene Linie.

    Unter Windows 10 ist der umlaufende Schatten bei Fenstern und Dialogen so transparent, dass ich es hier als reines Designelement betrachte. Zumal die Sichtbarkeit des Schattens bei einem Hintergrund, der eine etwas dunklere Farbe hat, gegen Null geht. Jedes Fenster unter Windows hat einen dünnen Rahmen (1px) in der gewählten Akzentfarbe. Dieser sorgt letztendlich für die notwendige Abgrenzung zum Hintergrund. Genauso ist es auch bei Menü-Popups (dort ist auch ein recht kräftiger Schatten unten/rechts) und anderen "schwebenden" Elementen. Unter MacOS ist der Schatteneffekt bei Dialogen größer, dort würde ich auch davon ausgehen, dass es in erster Linie als Hervorhebung und Abgrenzung fungiert.

    Es ist ja sowieso müßig darüber zu diskutieren, wie ein Schatten um den Dialog aussehen müsste, da es sich eben nur mittels innen liegenden Rahmen lösen lässt. Aber auch hier könnte man wohl ohne größeren Aufwand einen Transparenz-Gradienten in den Rahmen einbauen, sodass das Ergebnis wie eine sanfter Schatten aussieht.:/

    Einmal editiert, zuletzt von BrokenHeart (29. Dezember 2023 um 23:19)

  • ich habe einen anderen Compositor benutzt, bei dem ich firefox ausnehmen musste, da sonst der gesamte Schatten fehlerhaft dargestellt wurde.

    Wenn da gar nichts ist vom OS aus, evtl. mal sowas probieren?

    Ist im Prinzip etwas wie von BrokenHeart vorgeschlagen.

    Auf meinem Mac gibt es damit einen Doppelschatten, weil das OS halt selber einen generiert, aber vielleicht klappt's ja bei dir.


    Oder besser so?:/

    2 Mal editiert, zuletzt von Horstmann (30. Dezember 2023 um 12:42)

  • Wenn da gar nichts ist vom OS aus, evtl. mal sowas probieren?

    Gute Idee, den umgebenden Fensterrahmen "wegzuschmeißen", also transparent zu machen. :thumbup:

    Es gibt unter Windows 10 (nur da kann ich es testen -> mag für den TE nicht relevant sein!) damit zwei "Probleme", die ich aber gar nicht so schlimm finde:

    1.) Der Hintergrund verschwindet auch für den Inhaltsbereich. Je nach gewähltem Theme bzw. Anpassungen und dem Webseiten-Hintergrund, auf dem der Dialog angezeigt wird, kann es dann passieren, dass die Schrift nicht mehr lesbar ist. Aber ich denke, dass man das durch entsprechende Farbwahl der Dialog-Elemente anpassen kann.

    2.) Das Fenster lässt sich jetzt nicht mehr verschieben. Finde ich jetzt nicht so schlimm, da es ja zentriert angezeigt wird und mir kein Anwendungsfall einfällt, wo das zum Problem werde könnte...

    Mal abwarten was der TE dazu sagt...:)

    Screenshots Windows 10:

  • Gute Idee, den umgebenden Fensterrahmen "wegzuschmeißen", also transparent zu machen. :thumbup:

    Es gibt unter Windows 10 (nur da kann ich es testen -> mag für den TE nicht relevant sein!) damit zwei "Probleme", die ich aber gar nicht so schlimm finde:

    1.) Der Hintergrund verschwindet auch für den Inhaltsbereich. Je nach gewähltem Theme bzw. Anpassungen und dem Webseiten-Hintergrund, auf dem der Dialog angezeigt wird, kann es dann passieren, dass die Schrift nicht mehr lesbar ist. Aber ich denke, dass man das durch entsprechende Farbwahl der Dialog-Elemente anpassen kann.

    2.) Das Fenster lässt sich jetzt nicht mehr verschieben. Finde ich jetzt nicht so schlimm, da es ja zentriert angezeigt wird und mir kein Anwendungsfall einfällt, wo das zum Problem werde könnte...


    Danke für's Testen. :)

    Welchen Code hast du denn probiert, den ersten oder den zweiten?

    Zu 1), den Hintergrund kann man füllen, zu 2), da schau ich nochmal.

    Ist halt wie gesagt etwas schwer zu testen auf meiner Seite, auf dem Mac.

  • Welchen Code hast du denn probiert, den ersten oder den zweiten?

    Beide, verhalten sich hier exakt gleich... :/

    Hmm, interessant; ich kann auf searchfox die ID #commonDialogWindow nicht mehr finden, dachte nur der zweite Code könnte klappen im aktuellen Fx.

    Da muss jetzt wohl tatsächlich mal aalbani was zu sagen, das alles scheint schon sehr OS spezifisch zu sein.

    Übrigens zu 2), ich kann hier am Mac dieses Fenster auch ohne extra Codes nicht verschieben (mit der gedrückten Maustaste).:/

    Hat einmal ganz kurz geklappt, seltsamerweise, sonst hängt das Fenster fest unter der Navigations Toolbox.

    Zu 1), für beide Codes könnte es klappen den Hintergrund innen so einzufärben - geht bestimmt auch eleganter, aber bei mir am Mac bekomme ich den Basishintergrund (und äusseren Schatten) nicht weg, um's besser zu testen.


    Nachtrag, funktionierender Code:

    #1


    #2

    Sieht am Mac dann so aus, #1, #2, ohne CSS.


    3 Mal editiert, zuletzt von Horstmann (2. Januar 2024 um 11:25)