Beiträge von 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.

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.

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;
}

Oder besser so?

#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;
}

Zitat von SuperDAU#0815

@ Horstmann

In der about:config steht der compact mode auf false

Den Screenshot in der ersten Post kann ich hier nur mit Kompaktmodus reproduzieren, was mein Ziel war.

Ansonsten sieht's wie dein Screenshot in Beitrag #16 aus, mit der überlappenden Outline unten, die es unmöglich macht den Screenshot #1 zu erzeugen ohne extra Code oder eben Kompaktmodus.

Meine Vermutung wäre, dass dein anderer CSS Code, der Teil den wir nicht kennen, dann eben den Rest erledigt, um zu dem Style im ersten Screenshot zu kommen - der mit Kompaktmodus simuliert werden kann..

Was aber eh die korrekte Vorgehensweise ist mMn, war halt nur schwer nachzuvollziehen, ohne den kompletten Code zu kennen.

Weshalb es immer gut ist alles einzustellen, solange es kein massiver Moloch an CSS Code ist, damit man den Zusammenhang kennt.

Zitat von .DeJaVu

Zitat von Horstmann

Ein box-shadow kann also nicht semi-transparent sein

Hat niemand behauptet, ich schon gar nicht. Bitte genauer nachlesen.

Hab ich.

Zitat von SuperDAU#0815

Also, Leutz...

... funktioniert.

Prima!

Zitat von .DeJaVu

Zitat von Sören Hentzschel

Wer sagt, dass der Themenersteller kein Theme installiert hat?

Ich hab ja nur geschrieben, dass er "das" nicht installiert hat, so bunt wäre es aufgefallen

Also wäre der Umkehrschluss, dass er ein anderes Theme installiert hat?

Das wäre die Vermutung, weil sonst der Schatten wahrscheinlich entweder nicht vorhanden oder nicht sichtbar wäre; natürlich benutzt er das bunte Theme nicht, das war offensichtlich nur ein Beispiel zum generellen Testen.

Zitat von .DeJaVu

Nur ist das meines Erachtens immer noch an der Fragestellung vorbei, in seinem Bild sind die unteren Border eindeutig verschiedenfarbig, daher fällt box-shadow doch komplett aus.

Ein box-shadow kann also nicht semi-transparent sein, und von den Farben der umgebenden Elemente beeinflusst werden?

Das a in rgba, was im Code steht, wofür steht das nochmal?

Zitat von 2002Andreas

Der andere funktioniert auch:

Danke für's Testen!

Zitat von .DeJaVu

Dennoch ist dort keine Linie, wenn er sie nicht selbst reingeschrieben hat, ...

Wenn du bei dir zB dieses Theme installierst, siehst du dann keine Trennlinie zwischen Tabbar und Navbar?

Ich kann nur bis Fx 120 testen (seltener Franken-Mac Bug in 121...), aber da gibt's den erwähnten Navbar Schatten, der von Firefox in allen Themes ausser meinem Mac System Theme generiert wird; ist in den Browserwerkzeugen auch abzulesen.

Der Code dazu in Fx 121 ist vermutlich dieser, war etwas anders bis 120.

Zitat von SuperDAU#0815

Ja, bei den serienmäßigen Tabs ist keine Linie. Bild hab ich an #1 angehängt.

Alles, was ich zum Ändern des Tab-Aussehens verwende:

CSS

/*eckig*/

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}
/*****************************************************************************************************/

/*Linie über Tab*/

.tabbrowser-tab[selected]
{
    border-top: 1px solid grey !important;

}
/*****************************************************************************************************/

/*Linie zwischen Tabs*/

.tabbrowser-tab:not([visuallyselected])
{
    background-color: #bdc0af!important;
    border-right: 1px solid #92948a !important;
    border-bottom: 1px #92948a !important;
    border-top: 2px solid transparent!important;
}
/*****************************************************************************************************/

/*Aktiver Tab hover HG pink*/

.tabbrowser-tab[visuallyselected]:hover > .tab-stack > .tab-background {
   background: lightpink!important;
}
/*****************************************************************************************************/

/* Abstand ganz vorn*/

.tabbrowser-tab
{
    padding-inline: unset !important;
}
/*****************************************************************************************************/

/* Höhe und Abstand der Tableiste*/

#TabsToolbar {
    height: 36px !important;
}
/*****************************************************************************************************/

/*Tab Inhalt Abstände*/

:root {
   --proton-tab-radius: 0px !important;
   --proton-tab-block-margin: 0px !important;
   --inline-tab-padding: 10px !important;
}
/*****************************************************************************************************/

/*Höhe der Tabs*/

.tabbrowser-tab {
   min-height: 36px !important;
   max-height: 36px !important;
   box-shadow: none !important; 
}
/*****************************************************************************************************/

/*Tabinhalt auf ganze Tabbreite*/

.tab-label-container {
   margin: auto !important;
}

Alles anzeigen

mfg

supi.

Zwei Dinge noch: schreib nächstes Mal bitte dazu dass du Kompaktmodus benutzt, ich dachte ich bin bekloppt den Look nicht hinzubekommen.

Und in Zeile 25 ist ein Fehler: border-bottom: 1px #92948a !important; macht nichts, denn da fehlt der border-style; so klappt's: border-bottom: 1px solid #92948a !important;.

Zitat von SuperDAU#0815

seit kurzem (Fx 121?) habe ich (wieder) die Linie zw. Tableiste und Symbolleiste. War früher (Fx110 ?) schon mal da und wurde dann beseitigt

Probier mal das hier:

#nav-bar:-moz-lwtheme {
  box-shadow: none !important;
}

Hab ich von hier.

Dachte auch da gibt es keine Linie, aber bei Nicht-System Themes ist da ein Schatten nach oben, der sichtbar wird wenn der Theme Author die Schattenfarbe nicht gezielt anpasst (wie es in den offiziellen Standard Fx Themes der Fall ist, wo er deshalb nicht auffällt, aber trotzdem da ist.).

Zitat von Thomas S.

Stimmt absolut, aber andere haben doch auch gute Ideen, die ich doch gerne annehme!

Am Ende zählt nur die Lösung zu finden, die für einen am besten funktioniert - prima dass du eine gefunden hast.

Ich bin selber durch endlose Versuche mit Designs und Funktionen gegangen, die ich dachte unbedingt haben zu müssen - und der Grossteil dessen gammelt in Testprofilen vor sich hin.

Der Rest ist allerdings Gold wert, und ohne Probieren und die Erfahrungen lernt man natürlich nicht dazu.

Zitat von Thomas S.

A) - allerdings gibt es dabei den unschönen Effekt, dass man mit der Maus eine gezielte Bewegung ausführen muss.

B) Und ein zweiter Effekt, der hinzukommt: das Einblenden überlagert die dargestellte Internetseite, die Darstellung wird nicht nach rechts verschoben, weil die Eingeblendete Sidebar keine Platz beansprucht. Dadurch ist mehr "Ruhe" in der Darstellung beim Einblender der Sidebar

Zu A): Das ist klar, hover funktioniert nur, wenn man über den angesprochenen Elementen ... hovert.

Um den Effekt abzumildern, hatte ich die transition eingebaut, so dass man etwas Zeit hat, um mit der Maus von der toolbar zur sidebar zu wechseln, ohne draufbleiben zu müssen - ich hoffe das hast du auch benutzt beim Testen.

Aber generell macht der traditionelle Code, mit der seitlichen hover Leiste, in der praktischen Anwendung auf jeden Fall mehr Sinn - danach hattest du aber ausdrücklich nicht gefragt.

Zu B): Das Verhalten kann man so oder so einbauen, ist aber halt nicht die normale Funktionsweise von Fx.

Zitat von Thomas S.

Horstmann nee, das will einfach nicht. #navigator-toolbox:not(:hover) fuktioniert, aber sobald ich bei #browser #sidebar-box das :not(:hover) ergänze, wird die Sidebar gar nicht mehr ausgeblendet.

Da haben wir beide nicht genau gelesen.

Ich sehe gerade erst, du benutzt 115esr, da musst du - wie erwähnt - für meinen Code #navigator-toolbox-background als ID benutzen, statt #navigator-toolbox.

Also sowas in der Art, falls du das nochmal testen wolltest:

#main-window[sizemode="fullscreen"] #navigator-toolbox-background:not(:hover) ~ #browser #sidebar-box:not(:hover) {
    width: 0px !important;
    min-width: 0px !important;
    transition-delay: 0.7s;
}

#main-window[sizemode="fullscreen"] #sidebar-box {
    transition-property: width, min-width;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

Zitat von Thomas S.

Da die Steuerelemente (das nenne ich so, es sind die URL- und die Tab-Leiste mit den Buttons; oder als ID die #navigator-toolbox) einfach dynamisch vom FF per margin-top: -62px nach oben "ausgeblendet" wird, gibt es dazu wohl keine Eigenschaft zur Auswertung.

Das ist keine originale Firefox Funktion, oder doch?

Könnte keine Auswirkungen haben auf den Code oben, oder halt doch.

Zitat von Thomas S.

Horstmann Das funkt nicht - ist genau das Problem, was ich oben nannte. Geht man mit der Maus von den eingeblendeten Steuerelementen weg, ist es nicht mehr "hover" und die Sidebar ist wieder weg, bevor man da drauf ist...

Die Bedingung muss also so was wie "Steuerelemente oben sichtbar" sein.

Ah, Mist, mal wieder nicht anständig getestet .

Ich glaube nicht dass man das so einfach mit "Steuerelemente oben" (Screenshot evtl.?) umsetzen kann, aber bei mir am Mac sind einige Leisten anders eingebunden, daher kann ich damit vermutlich nicht arbeiten.

Damit die Sidebar nicht gleich wieder verschwindet, evtl. sowas probieren (davon ausgehend dass bei dir #navigator-toolbox funktioniert) :

#main-window[sizemode="fullscreen"] #navigator-toolbox:not(:hover) ~ #browser #sidebar-box:not(:hover) {
    width: 0px !important;
    min-width: 0px !important;
}

Ich kann leider nur raten, weil ich sowohl auf Mac, als auch auf 115esr bin...

Sowas funktioniert in 115esr:

#main-window[sizemode="fullscreen"] #navigator-toolbox-background:not(:hover) ~ #browser #sidebar-box {
    width: 0px !important;
    min-width: 0px !important;
}

Geraten für aktuelles Firefox, weil es da #navigator-toolbox-background nicht mehr gibt:

#main-window[sizemode="fullscreen"] #navigator-toolbox:not(:hover) ~ #browser #sidebar-box {
    width: 0px !important;
    min-width: 0px !important;
}

Zu beachten wäre noch, dass zB Video Vollbild ein etwas anderes Thema ist.

Benutzt du denn schon CSS Modifikationen?

Es sieht fast so aus, und davon hängt es ab was man am besten tun könnte, um eine Markierung für die selektierte Tab zu generieren.

Wie von Sören erwähnt, es kommt auch darauf an, worüber wir hier reden; eine generelle Markierung oder die welche es bereits gibt für Umgebungen.

Möglichkeiten dafür gibt es eine Menge.

Zitat von FFmic

Zitat von Horstmann

Ist doch normal so, oder ist das wieder ein Mac Ding?

Nein, ist ein PC, W11.

Ich habe jetzt die Menüleiste immer aktiv. Alles gut so.

Ich bin auf einem Mac, manche Dinge sind hier anders, daher die Frage.

Aber Ende gut alles gut!

Zitat von Mira_Belle

Codierung? UTF-8

Das ist auch mein Verdacht, dass evtl. mit der Formatierung was nicht passt, daher die Datei zum runterladen.

Zitat von gumbl

Das habe ich versucht, aber es ist keine Änderung feststellbar.

Habe auch nochmal alles gecheckt, Datei liegt in

C:\Users\Rae\AppData\Roaming\Mozilla\Firefox\Profiles\jxov5t.default-release\chrome\userChrome.css

Hmm, du könntest mal versuchen, deine userChrome.css mit der angehängten Datei zu ersetzen.

Das ist der Code von Andreas, plus noch 2 grelle Hintergrundfarben zum Testen.

userChrome.css.zip

Das sollte dann so aussehen:

Zitat von FFmic

So, ich habe die Tableiste nun doch wieder nach unten gesetzt.

Aber: Auch Minimieren/Maximieren/Schließen sind mit nach unten gewandert. Das ist seltsam.

Oben erscheint das Trio nur, wenn ich per F10 die Menüleiste aktiviere.

Ist doch normal so, oder ist das wieder ein Mac Ding?

Die Window Buttons sind generell in der Titelleiste, hier zumindest.

Ist die Titelleiste "deaktiviert", werden Titelleiste und Tableiste quasi zusammengefasst, und die Window Buttons sind dann Teil dieser kombinierten Titel/Tableiste.

Wenn du die Tableiste bei deaktivierter Titelleiste verschiebst, wandern die Buttons mit.

Verschieben kannst du die Dinger danach schon, mit etwas CSS, je nachdem wo sie hinsollen.

Zitat von 2002Andreas

Auch der funktioniert einwandfrei.