Passwort Popup Schatten

aalbani · Firefox-Version 121.0 (64-Bit) Betriebssystem Arch Linux 6.1.69-1-lts

Hallo,

wie bekomm ich denn einen Schatten unter die Passwort-popups?

2002Andreas

Zitat von aalbani

einen Schatten unter die Passwort-popups?

Hallo und Willkommen hier im Forum. 😊
Was genau meinst du damit?

Wo genau soll der Schatten sein, welche Farbe soll er haben?

aalbani

unter diesem Menü ist kein Schatten, er soll möglichst schwarz sein.

Ist das über die userChrome möglich?

2002Andreas

Zitat von aalbani

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)

.DeJaVu

Schatten sähe bei mir so aus
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

zB box-shadow: 2px 2px red, -0.2em -2px 2px orange !important;

2002Andreas

Zitat von .DeJaVu

Schatten sähe bei mir so aus

Problem zumindest für mich:

Das funktioniert so nicht.

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

.DeJaVu

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.

BrokenHeart

Zitat von 2002Andreas

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.

2002Andreas

Zitat von BrokenHeart

Ich vermute

Danke für dein Interesse und die Unterstützung

Warten wir ab, ob der TE damit etwas anfangen kann.

.DeJaVu

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.

Sören Hentzschel

Zitat von BrokenHeart

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

Dein Verständnis ist absolut korrekt.

Zitat von BrokenHeart

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.

Zitat von BrokenHeart

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).

aalbani

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

BrokenHeart

Zitat von Sören Hentzschel

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...

Zitat von Sören Hentzschel

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).

Sören Hentzschel

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.

BrokenHeart

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.

Zitat von Sören Hentzschel

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.

Horstmann

Zitat von aalbani

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.

CSS

dialog#commonDialog {
    appearance: none !important;
    border: 1px solid red !important;
    box-shadow: 1px 2px 12px 6px orange !important;
}

window#commonDialogWindow {
    appearance: none !important;
    background-color: transparent !important;
    border: 12px solid transparent !important;
}

Alles anzeigen

Oder besser so?

CSS

#commonDialog {
    appearance: none !important;
    background-color: transparent !important;
    /*background-clip: padding-box !important;*/
    border: 14px solid transparent !important; 
}

window#commonDialogWindow {
    appearance: none !important;
    background-color: transparent !important;
}

#commonDialog::after {
    content: "";
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    position: absolute;
    pointer-events: none;
    top: 14px;
    left:14px;
    outline: 1px solid red;
    outline-offset: -1px;
    background: transparent;
    box-shadow: 1px 2px 12px 6px orange;
}

Alles anzeigen

BrokenHeart

Zitat von Horstmann

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

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

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:

Horstmann

Zitat von BrokenHeart

Gute Idee, den umgebenden Fensterrahmen "wegzuschmeißen", also transparent zu machen.
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.

BrokenHeart

Zitat von Horstmann

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

Beide, verhalten sich hier exakt gleich...

Horstmann

Zitat von BrokenHeart

Zitat von Horstmann

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

CSS

/* test 1a */

dialog#commonDialog {
    appearance: none !important;
    border: 1px solid red !important;
    box-shadow: 1px 2px 12px 6px orange !important;
    background-color: lightblue !important;
}

window#commonDialogWindow {
    appearance: none !important;
    background-color: transparent !important;
    border: 12px solid transparent !important;
}

Alles anzeigen

#2

CSS

/* test 2a */

dialog#commonDialog {
    appearance: none !important;
    background-color: lightblue !important;
    border: 14px solid transparent !important;
    background-clip: padding-box !important;
}

dialog#commonDialog::after {
    content: "";
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    position: absolute;
    pointer-events: none;
    top: 14px;
    left:14px;
    outline: 1px solid red;
    outline-offset: -1px;
    background: transparent;
    box-shadow: 1px 2px 12px 6px orange;
}

/* notwendig ? */
/*
window#commonDialogWindow {
    appearance: none !important;
    background-color: transparent !important;
}
*/

Alles anzeigen

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