Linie zwischen aktivem Tab und und Symbolleiste entfernen (eckige Tabs)

Hallo,

Firefox hat keine „Linie“ zwischen Tableiste und Navigationssymbolleiste. Und hätte Firefox das, wüsste ich nicht, was der gezeigte Code damit zu tun haben sollte. Am besten zeigst du mal deinen vollständigen Code plus einen Screenshot, worum es geht.

Auch mit deinem Code kann ich keine Linie zwischen den zwei Leisten erkennen:

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

Dennoch ist dort keine Linie, wenn er sie nicht selbst reingeschrieben hat, aber nicht in diesem CSS, ob solid oder nicht, was den aktiven Tab gar nicht betrifft. Wo das her kommt, kann er am schnellsten mit den Browser-Werkzeugen finden, oder umständlich CSS für CSS nullen und Firefox jedes mal neu starten.

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 Horstmann

Der Code dazu in Fx 121 ist vermutlich

Der andere funktioniert auch:

Warum sollte ich mir was installieren, was er gar nicht installiert hat? Es muss schon reproduzierbar sein.
Bei mir ist der box-shadow auch vorhanden, es fällt nur nicht auf, aber wenn du es schon siehst, warum nullst es nicht dann?

Besagtes Theme kann das nicht.

{
    "theme": {
        "images": {
            "theme_frame": "lollypop_top.jpg"
        },
        "colors": {
            "frame": "rgba(229,230,232,1)",
            "tab_background_text": "#000"
        }
    },
    "version": "2.0",
    "name": "Lollipop Road",
    "manifest_version": 2,
    "description": "This persona is gentle transition of colors on a gradient that reminds me of an isle of lollipops. This gradient will not fight for focus against Firefox elements or web pages."
}

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. Ausserdem sehen die Tabs selbst anders als Standard aus, ergo kann es nur an diesem Stil liegen. Solange das unbekannt ist, was er noch in der userChrome.css hat, kannst du gerne ausprobieren, dürfte aber bei ihm nichts ändern. Zeitverschwendung.

Zitat von .DeJaVu

Warum sollte ich mir was installieren, was er gar nicht installiert hat? Es muss schon reproduzierbar sein.

Wer sagt, dass der Themenersteller kein Theme installiert hat? Zugegeben wäre die Information bereits im ersten Beitrag hilfreich gewesen und ich ging bei meinen Beiträgen auch davon aus, dass keines installiert ist. Aber in Anbetracht der Nichtreproduzierbarkeit ohne Theme ergibt das absolut Sinn. Denn mit Theme gibt es eine „Linie“, die als Schatten umgesetzt ist.

Zitat von .DeJaVu

Bei mir ist der box-shadow auch vorhanden, es fällt nur nicht auf, aber wenn du es schon siehst, warum nullst es nicht dann?

Den Schatten, der das verursacht, gibt es ausschließlich mit installiertem Theme, sonst nicht.

Zitat von .DeJaVu

Besagtes Theme kann das nicht.

Das kommt auch nicht vom Theme, sondern von Firefox selbst. Firefox besitzt CSS, welches nur dann Anwendung findet, wenn ein Theme installiert ist.

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.

Nein. Denn sobald Transparenz ins Spiel kommt, ist die sichtbare Farbe dieser „Linie“ vom Hintergrund abhängig. Und im Screenshot des Themenstarters liegt diese „Linie“ auf den Tabs - und der aktive Tab hat einen anderen Hintergrund als der inaktive Tab. Dementsprechend ist auch die Farbe der „Linie“ anders.

Der Original-Code ist:

#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
}

Dementsprechend kann eine Deaktiverung so erfolgen:

#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
  box-shadow: none !important;
}

Oder eben kürzer, so wie von Horstmann oben vorgeschlagen, was vom Selektor her zwar etwas weniger spezifisch ist, durch das !important aber trotzdem die bestehende Regel überschreibt. Das dürfte in dem Fall keine relevanten Auswirkungen haben. Man kann sich also aussuchen, ob man die kürzere Variante bevorzugt oder die, welche näher am Original-Code ist.

Das hab ich verpasst mit der Überlagerung. Dark-Theme aktiv:

#nav-bar:-moz-lwtheme {
  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
}

Bis auf das Tag identisch. Fällt nur nicht auf hier, wenn an- oder abgewählt.

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?

Zitat von 2002Andreas

Der andere funktioniert auch:

Danke für's Testen!

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?

Mit dem Thema kommt das hin. Aber warum ist die Schrift bei dir so "zierlich" dünn und eckig? Courier?

Ob kompakt oder nicht, das muss in den prefs explizit angeschaltet werden, damit es unter Anapssen ausgewählt werden kann. bin mich bri dir nicht sicher, weil das Favicon nach unten hängt statt mittig zu sein, dürfte am CSS liegen. Mit userChrome siehts dann ziemlich ähnlich aus wie bei dir. Und falls dich die Linie zur Webseite noch stören sollte:

#navigator-toolbox
{
  border-bottom: none !important;
}

Zitat von Horstmann

Ein box-shadow kann also nicht semi-transparent sein

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

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