Danke schön Andreas für Deine Bemühungen, jetzt ist es pefekt!
Vielen Dank
JD
Mit Version 96 hat sich der aktive Tab optisch verändert
-
jd_cort -
11. Januar 2022 um 21:32 -
Erledigt
-
jetzt ist es pefekt!
Freut mich, so sollte es ja auch sein
-
Also bei mir sieht das seit "proton" so aus und ist optisch nahezu identisch mit dem vorherigen Design. Aktuell genutzt in der Form für alle aktuellen Browser-Versionen.
CSS
Alles anzeigen/*proton fixes*/ #TabsToolbar .tabbrowser-tab .tab-background { border-radius: unset !important; margin-block: unset !important; } .tabbrowser-tab:not([visuallyselected="true"]) { background-color: #A3A3A3 !important; border-right: 1px solid #444 !important; border-bottom: 1px solid #444 !important; border-top: 3px solid #6a6a6a !important; } .tabbrowser-tab:not([visuallyselected="true"]):hover { border-top: 3px solid #757575 !important; background-color: #909090 !important; } .tabbrowser-tab[visuallyselected="true"] { border-top: 3px solid #0A84FF !important; } .tabbrowser-tab .tab-background[selected="true"] { background-color: #F9F9FA !important; } .tabbrowser-tab { padding-inline: unset !important; } /* toolbar spacers left/right */ #TabsToolbar .titlebar-spacer[type="pre-tabs"], #TabsToolbar .titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* tabbar max height + scroller */ :root[uidensity="compact"] { --scroll-padding-y: 4px !important; --scroll-padding-x: 4px !important; --scroll-max-height: 32px !important; } #TabsToolbar .tabbrowser-tab { max-height: var(--scroll-max-height) !important; } toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down { padding: var(--scroll-padding-y) var(--scroll-padding-x) !important; max-height: var(--scroll-max-height) !important; border: none !important; border-radius: 0 !important; } #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { /* Add a gap between the last pinned tab and the first visible tab */ margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */ } .tabbrowser-tab:is([visuallyselected="true"]) .tab-stack > .tab-background { border: none !important; } :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { margin-top: 0 !important; }Ich nutze keinen Dark Mode, nirgends. Deswegen brauchte ich auch nichts im about:config ändern.
-
Also bei mir sieht das seit "proton" so aus und ist optisch nahezu identisch mit dem vorherigen Design. Aktuell genutzt in der Form für alle aktuellen Browser-Versionen.
CSS
Alles anzeigen/*proton fixes*/ #TabsToolbar .tabbrowser-tab .tab-background { border-radius: unset !important; margin-block: unset !important; } .tabbrowser-tab:not([visuallyselected="true"]) { background-color: #A3A3A3 !important; border-right: 1px solid #444 !important; border-bottom: 1px solid #444 !important; border-top: 3px solid #6a6a6a !important; } .tabbrowser-tab:not([visuallyselected="true"]):hover { border-top: 3px solid #757575 !important; background-color: #909090 !important; } .tabbrowser-tab[visuallyselected="true"] { border-top: 3px solid #0A84FF !important; } .tabbrowser-tab .tab-background[selected="true"] { background-color: #F9F9FA !important; } .tabbrowser-tab { padding-inline: unset !important; } /* toolbar spacers left/right */ #TabsToolbar .titlebar-spacer[type="pre-tabs"], #TabsToolbar .titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* tabbar max height + scroller */ :root[uidensity="compact"] { --scroll-padding-y: 4px !important; --scroll-padding-x: 4px !important; --scroll-max-height: 32px !important; } #TabsToolbar .tabbrowser-tab { max-height: var(--scroll-max-height) !important; } toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down { padding: var(--scroll-padding-y) var(--scroll-padding-x) !important; max-height: var(--scroll-max-height) !important; border: none !important; border-radius: 0 !important; } #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { /* Add a gap between the last pinned tab and the first visible tab */ margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */ } .tabbrowser-tab:is([visuallyselected="true"]) .tab-stack > .tab-background { border: none !important; } :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { margin-top: 0 !important; }Ich nutze keinen Dark Mode, nirgends. Deswegen brauchte ich auch nichts im about:config ändern.
Sieht auch sehr schön aus DeJaVu, habe es mir gerade mal angesehen, nutze ebenfalls keinen Dark Mode.
Was müsste man denn ändern damit der aktive Tab oben nicht den Strich oben auf dem Tab hat, und das der inaktive Tab die Farbe vom gewählten Theme hat? Der inaktive Tab ist ja ausgegraut.
Danke
JD
-
nicht den Strich oben auf dem Tab hat, und das der inaktive Tab die Farbe vom gewählten Theme hat?
Teste bitte mal diesen kompl. Code dann:
CSS
Alles anzeigen/*proton fixes*/ #TabsToolbar .tabbrowser-tab .tab-background { border-radius: unset !important; margin-block: unset !important; } .tabbrowser-tab:not([visuallyselected="true"]):hover { background-color: transparent !important; } .tabbrowser-tab .tab-background[selected="true"] { background-color: #F9F9FA !important; } .tabbrowser-tab { padding-inline: unset !important; } /* toolbar spacers left/right */ #TabsToolbar .titlebar-spacer[type="pre-tabs"], #TabsToolbar .titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* tabbar max height + scroller */ :root[uidensity="compact"] { --scroll-padding-y: 4px !important; --scroll-padding-x: 4px !important; --scroll-max-height: 32px !important; } #TabsToolbar .tabbrowser-tab { max-height: var(--scroll-max-height) !important; } toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down { padding: var(--scroll-padding-y) var(--scroll-padding-x) !important; max-height: var(--scroll-max-height) !important; border: none !important; border-radius: 0 !important; } #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { /* Add a gap between the last pinned tab and the first visible tab */ margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */ } .tabbrowser-tab:is([visuallyselected="true"]) .tab-stack > .tab-background { border: none !important; } :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { margin-top: 0 !important; } -
passt zu 100 %.
gerne doch.. -
Bei mir erscheinen in FF96 auch Texte wie "WIEDERGABE" in den Tab-Headern wenn Medien-Inhalte auf den Seiten sind. Lässt sich das irgendwie abschalten oder per CSS wegdefinieren?
-
Das ist schon seit Firefox 89 so, der am 1. Juni 2021 erschienen ist. Dementsprechend hat das mit diesem Thema überhaupt nichts zu tun. Wie du das abschalten kannst, steht im Vorstellungs-Artikel zum Proton-Design:
Proton: Ausführliche Vorstellung des neuen Firefox-Designs - camp-firefox.deAm 1. Juni wird Mozilla Firefox 89 veröffentlichen. Mit diesem Tag wird Firefox in einem völlig neuen Glanz erstrahlen. Dieser Artikel stellt ausführlich das…www.camp-firefox.de -
Sören Hentzschel Danke, das wars. Hatte in meiner Erinnerung das Setting bereits damals auf dem Wege abgestellt, ehe es jetzt wieder auftauchte.
Nutze aber auch Linux Mint, die schon bei der letzten Version Packaging-Probleme hatten (Suchmaschinen wurde bei jedem Start überschrieben) und nun wohl aus Versehen auch die Datenerhebung wieder aktiviert hatten.
-
Ich hab da auch noch ein Anliegen.
Bei mir ist vor dem letzten Update der aktive Tab auch ohne sichtbaren Übergang mit der Symbolleiste verbunden gewesen. Nun, nach dem Update, sieht man unten am Tab offenbar eine Linie des Themes durchscheinen, die sich normalerweise auch an dieser Stelle befindet, aber bisher vom etwas nach unten verschobenen Tab überdeckt worden war. Das Stück Linie unten am Tab ist etwas heller, als die restliche Linie rechts und links daneben.
Ich habe nun schon verschiedenes von dem probiert, was hier in anderen Beiträgen gepostet wurde, aber bei meinem Theme ist das alles wirkungslos. Wie kann ich den Tab wieder nahtlos mit der Symbolleiste verbinden?
Ich hatte schon mal versucht, die Tabs weiter nach unten in die Leiste zu schieben, aber dadurch hatten sich nur die Seitenlinien des aktiven Tabs in die Leiste reingeschoben.
Hier sind drei Bilder. Bild 1 zeigt wie es aussehen soll, Bild 2 zeigt wie es momentan aussieht, Bild 3 zeigt die zu langen Seitenlinien:
.
1)
.
.
2)
.
3)
. -
Schuß ins Blaue:
border-bottom 2px solid Hintergrundfarbe !important;
Für den aktiven TAB?
BTW: es wäre geschickter für die Helfer gewesen, wenn Du einen eigenen Thread aufmachst
-
es wäre geschickter für die Helfer gewesen
Und auch das genutzte Theme incl. dem genutzten CSS Code zu posten
-
Okay, ich hatte gedacht, weil in dem Thread hier zwei oder drei andere User auch schon leicht andere Fragen gestellt hatten, als der Threadstarter, stelle ich meine auch mal hier drin, weil es genau andersherum vielleicht nicht so gut angekommen wäre, wenn noch ein dritter eigenständiger Thread zum Aussehen des neuen aktiven Tabs eröffnet worden wäre...
border-bottom 2px solid Hintergrundfarbe !important;
Das hatte ich fast richtig geschrieben. Allerdings hatte ich es ohne "solid" gemacht, weil ich nicht wusste, welcher Begriff dafür verwendet werden muss.
Aktuell sieht es bezüglich der Tabs bei mir so aus:CSS
Alles anzeigen/* Höhe der Tabs */ .tabbrowser-tab { min-height: 36px !important; max-height: 36px !important; vertical-align: bottom !important; margin-top: 2px !important; margin-bottom: 0px !important; } /* Rahmen des aktiven Tabs */ .tabbrowser-tab .tab-background[selected="true"] { border-left: 1px #464646 !important; border-right: 1px #464646 !important; border-top: 1px #464646 !important; border-bottom: 2px solid #E6F0F8 !important; }
Im unteren Block hat die Zeile zu "border-bottom" nun geholfen, den hellgrauen Rahmenstrich verschwinden zu lassen.
Allerdings sind jetzt plötzlich die Rahmenlinien an den Seiten und oben weg. Statt derer ist dort nun jeweils nur ein dezenter hellgrauer Schatten zu sehen.
Wie bekomme ich die Linien da wieder hin oder auch einfach den Schatten etwas dunkler?
. -
die Rahmenlinien an den Seiten und oben weg.
Was genau meinst du damit
Der Code sieht hier so aus:
Oder so:
CSS
Alles anzeigen/* Höhe der Tabs */ .tabbrowser-tab { min-height: 36px !important; max-height: 36px !important; margin-bottom: 0 !important; } /* Rahmen des aktiven Tabs */ .tabbrowser-tab .tab-background[selected="true"] { border-left: 1px solid #464646 !important; border-right: 1px solid #464646 !important; border-top: 1px solid #464646 !important; border-bottom: 2px solid #E6F0F8 !important; box-shadow: none !important; } -
Ich teste den CSS-Code gleich mal.
Hier sieht man wie es vorher war (Linienumrandung) und wie es aktuell aussieht (Schattenumrandung).
Mit dem Schatten sieht es eigentlich auch nicht übel aus. Vielleicht behalte ich den sogar.
Bei dem sehr hellen Theme sieht man die dunkleren Linien nur ein kleines bisschen deutlicher, aber mit dem Schatten erkennt man den aktiven Tab trotzdem auch ganz gut.
-
Wenn du auch um den inaktiven Tab einen Rahmen willst:
CSS
Alles anzeigen/* Höhe der Tabs */ .tabbrowser-tab { min-height: 36px !important; max-height: 36px !important; margin-bottom: 0 !important; } /* Rahmen des aktiven Tabs */ .tabbrowser-tab .tab-background { border-left: 1px solid #464646 !important; border-right: 1px solid #464646 !important; border-top: 1px solid #464646 !important; border-bottom: 2px solid #E6F0F8 !important; box-shadow: none !important; } -
Nöö, um die inaktiven Tabs müssen keine Rahmen, die erkennt man auch ohne schnell und gut.
Der Code funktioniert prima. Ich habe jetzt wieder die Rahmenlinien drum und habe von denen nur die Farbe noch etwas besser angepasst. Es sieht jetzt wieder richtig perfekt aus.
Danke für deine schnelle und gute Hilfe!
-
Danke für deine schnelle und gute Hilfe!
Freut mich wenn ich dir damit helfen konnte, war gern geschehen
-
Hallo zusammen,
die untere Linie/Rahmenlinie des aktuellen Tabs ist auf einmal wieder zu sehen, von der ich in Beitrag #31 geschrieben habe.
Aktuell benutze ich mit der 110.0 die aktuellste FF-Version und ich meine, dass die Linie in der 109.0.1 noch nicht wieder angezeigt wurde.
Im Code habe ich bei den Zahlen nun schon verschiedene zum Testen geändert, vor allem die in Zeile 14, da habe ich mit Werten zwischen 0 und 5 herumprobiert, aber es gab nie eine Änderung in der Ansicht.
Liegt's vielleicht gar nicht an einer der Zahlen, sondern es muss nun etwas ganz anderes geändert oder sogar neu hinzugefügt werden?CSS
Alles anzeigen/* Höhe der Tabs */ .tabbrowser-tab { min-height: 36px !important; max-height: 36px !important; margin-top: 2px !important; margin-bottom: 0 !important; } /* Rahmen des aktiven Tabs */ .tabbrowser-tab .tab-background[selected="true"] { border-left: 1px solid #767676 !important; /* Farbe der festsichtbaren Rahmenlinien, mittelgrau */ border-right: 1px solid #767676 !important; border-top: 1px solid #767676 !important; border-bottom: 2px solid #E6F0F8 !important; /* Höhe und Farbe der unteren Rahmenlinie */ box-shadow: none !important; /* Entfernt den Schatten um den Rahmen */
