Aber weißt Du, ich wollte mir die Spielerei aufheben, mit dem Farbverlauf und so.
So was vergesse ich doch sonst, wenn ich es "lösche" und nicht hin und wieder ausprobiere!!
"Für was war das nochmal so? Muss ich testen. Achja, jetzt weiß ich es wieder!" Selbstgespräch Ende.
Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt? 
Für Verläufe gibt's zig Möglichkeiten; kuck mal:
Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt?
Für Verläufe gibt's zig Möglichkeiten; kuck mal:
Schaut interessant aus. 
Was die Formeln betrifft, vielen Dank für Deine Erklärungen.
Wenn ich das jetzt nun richtig verstanden haben, stammen die ursprünglich aus dem "Sourcecode" vom Firefox.
Wofür sie unter bestimmten Selektoren eingesetzt werden, hast Du auch schön erklärt.
Meine Frage, so ungenau gestellt, sollte aber was anderes klären.
Ich kann doch das Ergebnis einer Formel berechnen,
Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!
OK, mir gehen dann aber die Variablen verloren!
Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen
addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher
und besser nachvollziehbar, als so manche kryptische Originalformel.
Das Ergebnis muss doch nur stimmen!
Ich werde das bei Gelegenheit mal austesten, aber vorher ein Backup des nun tollen CSS, machen.
Übrigens, Danke dafür.
Ach, und den Fix-Code habe ich mal an die richtige Stelle verschoben,
denn der gehörte ja weiter hoch zu
/* Colors, outlines: selected / multiselected / hover */.
und nicht unter
/*** tabs corners ***/
...
Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?
Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.
Da treten keine Ungereimtheiten auf, also alles Bestens!
Alles anzeigenMeine Frage, so ungenau gestellt, sollte aber was anderes klären.
Ich kann doch das Ergebnis einer Formel berechnen,
Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!
OK, mir gehen dann aber die Variablen verloren!
Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen
addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher
und besser nachvollziehbar, als so manche kryptische Originalformel.
Das Ergebnis muss doch nur stimmen!
...
Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?
Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.
Da treten keine Ungereimtheiten auf, also alles Bestens!
Das Gute an Variablen, und den Berechnungsformeln, ist dass man nur einen oder einige wenige Werte ändern muss, um den gesamten Code auf einmal anzupassen.
Vorrausgesetzt natürlich dass man alles korrekt aufgebaut hat; und ich bin da nicht gerade Experte drin.
Neu gibt es noch dazu das Nesting und (bald) den :has Selector in Fx, was noch mehr Möglichkeiten eröffnet.
Aber ob ich dass noch dazulernen will...
Unser Code hier ist ziemlich einfach, ich hab selber zum Testen meist nur absolute Werte benutzt, wegen der Übersichtlichkeit.
Für die Anwendung ist dann eine mehr automatisierte Form sinnvoller, weil man nur als Author noch dahintersteigt, welcher Wert warum wo steht.
Dann schau dir mal die Codes von Aris an, oder auch andere wie der erwähnte von Godie etc., das ist eine komplett andere Welt.
An sowas kann ich nicht mal kratzen, die Komplexität an sich und der benutzten Variablen ist fantastisch. 
Und gut zu hören dass multiselected klappt - da würde ich nur ungern nochmal drangehen.
Aber ob ich dass noch dazulernen will...
Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor.
Dir wird nichts anderes übrig bleiben, wenn du auch neuere Firefox-Versionen anpassen möchtest. Selbst wenn du es in eigenem Code nicht verwenden möchtest, musst du den bestehenden Firefox-Code ja verstehen, um ihn zielführend anpassen zu können. Und wenn du die CSS-Regeln versteht, kannst du sie auch anwenden. So schließt sich der Kreis. Viel gibt es außerdem ja gar nicht, was man dafür lernen müsste, wenn man eh schon im CSS-Thema drin ist. Das lässt sich mit wenigen Sätzen erklären und mehr als das ist es am Ende auch nicht. Das ist leichter als beispielsweise jemandem die Komma-Regeln der eigenen Sprache zu erklären. Also keine Angst davor.
Stimmt schon; lesen bzw. verstehen kann ich den "neuen" Code halbwegs, und nach meiner kurzen Recherche ist es tatsächlich nicht so komplex, bringt aber wie gesagt interessante neue Möglichkeiten mit sich.
Mal schauen.
Wo ich mir nicht ganz sicher bin: ist Komma-Regeln die korrekte Schreibweise, oder sollte das nicht eher Kommaregeln sein? 
Kleiner Scherz; bitte nicht nochmal eine Rechtschreibdebatte, oder - ... Rechtschreib-Debatte?
Du kannst nicht sagen, dass du keine Debatte über Sprache willst, und dann so kommen. Nicht bei einem Sprachliebhaber wie mir. In dem Punkt ist die deutsche Sprache tatsächlich flexibel. Grundsätzlich schreibt man zusammen, aber man darf bei Zusammensetzungen Bindestriche setzen, wenn man der Meinung ist, dass es die Lesbarkeit verbessert. Es ist nicht strikt geregelt, bis wann man das nicht darf oder ab wann man das muss, das ist also mehr eine Gefühlssache. Notwendig wäre es in diesem Fall sicher nicht gewesen. Das hatte ich auch eher unbewusst als bewusst gemacht und genauso unbewusst schreibe ich es beim nächsten Mal wahrscheinlich wieder ohne Bindestrich. Wenn ich wirklich bewusst auf so etwas achte, verzichte ich bei so kurzen Zusammensetzungen tendenziell eher auf den Bindestrich. Aber vor allem im Rahmen eines Forenbeitrags denke ich normalerweise nicht über jedes Wort genauer nach und bin dann auch nicht immer konsequent.
@Horstmann
Danke auch für diesen Code!
CSS#navigator-toolbox { background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 2%, rgba(223, 144, 0, 1) 4%, rgba(192, 118, 0, 1) 8%, rgba(161, 93, 0, 1) 16%, rgba(131, 69, 0, 1) 32%, rgba(102, 47, 0, 1) 64%, rgba(74, 25, 0, 1) 72%, rgba(47, 3, 0, 1) 80%, rgba(11, 0, 0, 1) 88%, rgba(0, 0, 0, 1) 100%) !important; }
Gerne doch, war eine meiner leichteren Übungen. ...
Kleiner Scherz, der Code ist nicht von mir.
Sieht aus wie ein Verlauf über die ganze Toolbox, das geht im Prinzip.
Es geht demnächst wieder los! Das CSS für die Tableiste muss angepasst werden.
Durch die Splittfunktion, die man ja auch schon im 148.02 ausprobieren kann,
habe ich gesehen, dass die Tabs "verrutschen".
Evtl. lässt sich die Ursache hier irgendwo finden, das CSS benutzt ja eigene margins und paddings, die uU in dem Split Fall von Fx überschrieben werden.
Bei der Gelegenheit könnte man auch den Code generell auf die horizontale Tableiste beschränken (?). 
Dein CSS benutzt hier auch wieder mal Variablen, die irgendwo anders bei dir definiert sind, also kann der Code eigentlich von niemand anderem benutzt werden.
dass die Tabs "verrutschen"
Apropos verrutschen: Ich habe es mir nur auf macOS angesehen, aber dort verschwinden die Tabs mit dem CSS komplett und es befinden sich Schaltflächen wie der Zurück-Pfeil über den Kontroll-Elementen der Fenster.
Liegt das möglicherweise an Folgendem?
Dein CSS benutzt hier auch wieder mal Variablen, die irgendwo anders bei dir definiert sind, also kann der Code eigentlich von niemand anderem benutzt werden.
Apropos verrutschen: Ich habe es mir nur auf macOS angesehen, aber dort verschwinden die Tabs mit dem CSS komplett und es befinden sich Schaltflächen wie der Zurück-Pfeil über den Kontroll-Elementen der Fenster.
Liegt das möglicherweise an Folgendem?
Hier ähnlich; das fängt wohl gleich oben im Code an, wo die Fx Variablen --tab-min-height und --tab-block-margin mit undefinierten Variablen ersetzt werden.
Übrigens, aktuelles CSS von MOG.
Was die "ominösen" Variablen betrifft, es sind, was "Werte" an gehen, genau drei
und dahinter als Kommentar auch noch angegeben.
Alle anderen Variablen sind Farben, aber auch die sind als Kommentar direkt dahinter angegeben.
Aber gut, ....
Ich verstehe nicht ganz was du damit meinst.
Die (eigenen) Variablen sind weder in #150 noch in #151 definiert, noch nutzt einem ein Kommentar der sich auf eine unbekannte Variable bezieht.
Es ist nicht so, dass eine selber erstellte Variable sich ohne Definition in den Fx CSS Code anderer Leute schreibt.
Wenn du dann eine originale Fx Variable, oder eine Fx CSS Regel, unter Benutzung einer nicht definierten Variable überschreibst, dann wird in manchen Fällen ein Standard Fallbackwert benutzt, in vielen Fällen hast du aber damit den Fx Code zerschossen.
Und nur um sicher zu gehen dass wir nicht aneinander vorbeireden: --uc-irgendwas oder --ug-irgendwas oder --Gartenstuhl., das sind keine Firefox Variablen, das sind willkürlich selber erzeugte Einträge die definiert sein müssen, sonst kann Firefox nichts damit anfangen.
Etwas wie --tab-min-height ist eine existierende Firefox Variable die im Fx Code vordefiniert ist.
Etwas wie uc (user code?) am Anfang wird oft benutzt um den Unterschied zu Fx Variablen deutlich zu machen, in meinem Fall benutze ich oft ug (user gansta! 
) , das ist aber nirgends im Fx Code berücksichtigt.
Mit den Variablendeklarationen aus dem letzten Beitrag gibt es optisch einen Unterschied, aber die Tabs bleiben weiterhin verschwunden.
Ich habe den Code jetzt auch auf Windows 11 ohne sonstige Firefox-Anpassung getestet und dort sieht man zwar zumindest die Tabs im Hintergrund, aber so kann der Code definitiv nicht gedacht sein:
Mit dem Code aus Beitrag Nr. 151 und 156 sieht das hier so aus in einem unveränderten Fx Version 148 unter Windows 11:
/* Farben ---------------------------------------------------*/
:root {
--uc-color-black-light: #2B2B2B !important; /* var(--uc-color-black-light) */
--uc-color-black-lighter: #404040 !important; /* var(--uc-color-black-lighter) */
--uc-color-grey-dark: #5C5C5C !important; /* var(--uc-color-grey-dark) */
--uc-color-grey-light: #A9A9A9 !important; /* var(--uc-color-grey-light) */
--uc-color-grey-lighter: #D4D4D4 !important; /* var(--uc-color-grey-lighter) */
--uc-color-white-dark: #E0E0E0 !important; /* var(--uc-color-white-dark) */
--uc-color-white-normal: #FFFFFF !important; /* var(--uc-color-white-normal) */
--uc-color-orange-normal: #FFAA00 !important; /* var(--uc-color-orange-normal) */
--uc-color-orange-hover: #FFCC66 !important; /* var(--uc-color-orange-hover) */
--uc-color-red-normal: #FF0000 !important; /* var(--uc-color-red-normal) */
--uc-color: rgba(225, 225, 225, 0.2); /* hellgrau basis, unselected */
--uc-color_hov: rgba(225, 225, 225, 0.3); /* mittelgrau unselected hover */
--uc-color-sel: rgba(255, 148, 0, 0.4); /* zart orange selected */
--uc-color-musel: rgba(255, 148, 0, 0.3); /* zart orange dunkel+ multiselected */
--uc-color_musel_hov: rgba(255, 148, 0, 0.5); /* zart orange dunkel+ multiselected hover */
--uc-color-orange-test: #db8b00 !important;
}
/* Border ---------------------------------------------------*/
:root {
--uc-border-width: 3px !important; /* var(--uc-border-width) */
--uc-border-radius: 8px !important; /* var(--uc-border-radius) */
--uc-border-style: outset !important; /* var(--uc-border-style) */
/*--uc-radius: 20px !important;*/
--uc-radius: 19px !important;
}
/* Ränder ---------------------------------------------------*/
:root {
--uc-margin-top: 3px !important; /* var(--uc-margin-top) */
--uc-margin-right: 10px !important; /* var(--uc-margin-right) */
--uc-margin-left: 1px !important; /* var(--uc-margin-left) */
--uc-margin-bottom: 5px !important; /* var(--uc-margin-bottom) */
}
/* Abstände -------------------------------------------------*/
:root {
--uc-padding-top: 3px !important; /* var(--uc-padding-top) */
--uc-padding-right: 20px !important; /* var(--uc-padding-right) */
--uc-padding-left: 20px !important; /* var(--uc-padding-left) */
--uc-padding-bottom: 3px !important; /* var(--uc-padding-bottom) */
--uc-block-margin: 2px !important; /* var(--uc-block-margin) */
--uc-min-height: 36px !important; /* var(--uc-min-height) */
}
/*** Curved tabs beta D2b sauber - dunkles Theme ***/
/* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */
/* -------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */
/*** General adjustments ***/
/*** Allgemeine Anpassunge ***/
:root {
/* Tabs bar height adjust */
/* Tabbar Höhe einstellen */
/*--tabs-navbar-shadow-size: 0 !important;*/
/*--tab-block-margin: 4px !important;*/
--tab-block-margin: var(--uc-block-margin) !important; /* 2px */
--tab-min-height: var(--uc-min-height) !important; /* 36px */
/* Edges without corner Svg / Radius */
/* Kanten ohne Ecken (svg / Radien */
/*--ug-radius: 20px;*/
--ug-radius: var(--uc-radius) !important; /* 19px */
/* Edges (borders, outlines) colors */
/* Farben für Ränder (Umrandungen, Konturen) */
/* Edges not selected */
/* Ränder nicht ausgewählt */
/* --ug-color-border: hsla(0, 0%, 83%, 0.5); /* hellgrau unselected Kante Tab */
/* --ug-color-border: var(--uc-color-orange-test); */
--ug-color-border: var(--uc-color-grey-light);
--ug-stroke: var(--ug-color-border); /* unselected Kante Svg */
/* --ug-kante_hova: hsla(0, 0%, 93%, 0.65); /* mittelgrau unselected alle Kanten hover */
--ug-kante_hova: var(--ug-color-border);
/* Edges selected , multiselected */
/* Kanten ausgewählt, mehrfach ausgewählt */
/* --ug-color-border_select: hsla(0, 0%, 93%, 0.75); /* mittelgrau hell+ selected Kante Tab */
--ug-color-border_select: var(--uc-color-orange-normal);
--ug-stroke_select: var(--ug-color-border_select); /* selected Kante Svg */
/* --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8); /* mittelgrau hell++ multiselected alle Kanten hover */
--ug-kante_hova_select: var(--uc-color-orange-normal);
/* Tabs background colors: */
/* --ug-color1: hsla(0, 0%, 83%, 0.25); /* hellgrau basis, unselected */
/* --ug-color2: hsla(35, 80%, 60%, 0.25); /* zart orange selected */
/* --ug-color2-multi: hsla(35, 80%, 40%, 0.25); /* zart orange dunkel+ multiselected */
/* --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35); /* zart orange dunkel++ multiselected hover */
/* --ug-color_hova: hsla(0, 0%, 50%, 0.25); /* mittelgrau#2 unselected hover */
--ug-color1: var(--uc-color); /* hellgrau basis, unselected */
--ug-color2: var(--uc-color-sel); /* zart orange selected */
--ug-color2-multi: var(--uc-color-musel); /* zart orange dunkel+ multiselected */
--ug-color_hova: var(--uc-color_hov); /* mittelgrau unselected hover */
--ug-color_multi_hova: var(--uc-color_musel_hov); /* zart orange dunkel++ multiselected hover */
/* Tab bar unten, border bottom color */
/* --ug-color_bottom: hsla(0, 0%, 93%, 1); /* hellgrau nicht transparent, Kante unten */
--ug-color_bottom: var(--uc-color-orange-normal);
/* Symbole für about:xxx */
--ug-color_tab-icon: var(--uc-color-red-normal);
}
/*** General adjustments end ***/
/* -------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */
/*** Tabs base ***/
/* tabs connected bottom */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
/* Basis alle Tabs */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid !important;
/*border-bottom: none !important;*/
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* Zusatzregeln, überschreiben Basis alle Tabs */
/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
border-radius: var(--ug-radius) !important;
border-left: 1px solid var(--ug-color-border) !important;
}
/* Last tab dual corners, unless it comes after selected tab */
.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
border-right: none !important;
}
/* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
border-color: var(--uc-color-orange-normal) !important;
}
/*** COLORS ***/
/** In about:config set svg.context-properties.content.enabled to true **/
/* Basis alle Tabs */
.tabbrowser-tab .tab-background {
outline: none !important;
box-shadow: none !important;
background-color: var(--ug-color1) !important;
border-color: var(--ug-color-border) !important;
stroke: var(--ug-stroke) !important;
fill: var(--ug-color1) !important;
border-bottom: none !important; /* Muss zusätzlich, da unten ja keine Kante sein soll ! */
}
/* Zusatzregeln, überschreiben Basis alle Tabs */
/* Colors, outlines: selected / multiselected / hover */
/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
stroke: var(--ug-stroke_select) !important;
border-color: var(--ug-color-border_select) !important;
fill: var(--ug-color2) !important;
}
/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
background-color: var(--ug-color2-multi) !important;
fill: var(--ug-color2-multi) !important;
}
/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
background-color: var(--ug-color_multi_hova) !important;
fill: var(--ug-color_multi_hova) !important;
stroke: var(--ug-kante_hova_select) !important;
border-color: var(--ug-kante_hova_select) !important;
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
fill: var(--ug-color_hova) !important;
stroke: var(--ug-kante_hova) !important;
border-color: var(--ug-kante_hova) !important;
}
/* -------------------------------------------------------------------------------------------------------------- */
/* fill colors selected / unselected hover */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
fill: var(--ug-color2) !important;
stroke: var(--uc-color-orange-normal) !important;
}
.tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before,
.tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
fill: var(--ug-color2-multi) !important;
}
.tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before,
.tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
fill: var(--ug-color_multi_hova) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/* -------------------------------------------------------------------------------------------------------------- */
/*** tabs corners ***/
/* base */
#TabsToolbar {
--ug-corner-size: var(--tab-min-height) !important; /* 36px */
--ug-corner-image: url("../icons/tab_corner.svg") !important;
}
.tabbrowser-tab .tab-background::before,
.tabbrowser-tab .tab-background::after {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
content: "";
position: absolute;
width: var(--ug-corner-size) !important;
height: var(--ug-corner-size) !important;
background-size: var(--ug-corner-size) !important;
background-repeat: no-repeat !important;
background-position: bottom center !important;
mask-image: linear-gradient(215deg, transparent, black 18px) !important;
pointer-events: none !important;
}
/* left */
.tabbrowser-tab .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2); /* -18px */
background-image: var(--ug-corner-image) !important;
}
/* right */
.tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2); /* -18px */
background-image: var(--ug-corner-image) !important;
transform: scaleX(-1) !important;
}
/**** Margins etc. overflow fix ****/
/* Base values ; tab padding, margin */
#tabbrowser-tabs {
/* --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2); /* 26px */
--ug-tab_Pad: calc(-10px + var(--ug-corner-size) / 2); /* 8px */
/* --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px); /* -48px */
--ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2 + 6px); /* -12px */
}
/* Basis all Tabs */
.tabbrowser-tab:not([pinned]) {
overflow: visible !important;
padding-inline: var(--ug-tab_Pad) !important;
}
/* Tab before any tab */
.tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/* Tab after selected */
.tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/* Tab selected */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
margin-inline: 0px !important;
}
/* Last tab after selected tab */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/*** Tab left higher z index / Vorrang vor Tab rechts ***/
.tabbrowser-tab:not([pinned]) .tab-content {
z-index: 1 !important;
}
/*** Space for corner left/right - first/last tab, overflow bugs fix ***/
#tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
/* margin-inline-start: 0px !important; */
margin-inline-start: 10px !important;
}
#tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
/* margin-inline-start: 0px !important; */
margin-inline-end: 10px !important;
}
#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: -12px !important;
}
#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
margin-inline-end: -12px !important;
}
/*-----------------------------------------------*/
/**** Tabtext nicht verkürzt bei hover ****/
/*-----------------------------------------------*/
/* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
/* Diese Verkürzung bei hover hätte ich gerne verhindert. */
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 6px !important;
width: 24px !important;
}
.tabbrowser-tab[visuallyselected=true]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
--tab-label-mask-size: 1em !important;
}
/* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*--------------------------------------------*/
/**** Tabbar nach unten verschieben ****/
/*--------------------------------------------*/
#navigator-toolbox {
position: relative !important;
padding-bottom: calc( var(--tab-min-height) + 8px ); /* 44px */
/* padding-bottom: 42px !important; */
}
#TabsToolbar {
position: absolute !important;
display: block !important;
}
/*--------------------------------------------------*/
/**** Trennlinie zwischen Inhalt und Tableiste ****/
/*--------------------------------------------------*/
#TabsToolbar {
bottom: 6px !important; /* Tableiste etwas angehoben */
width: 100vw !important; /* Tableistenbreite festgelegt */
background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
margin-bottom: -7px !important; /* Trennlinie nach unten verschoben */
padding-bottom: 7px !important; /* Tabs etwas angehoben */
}
/*---------------------------------------------*/
/**** Symbole für about:xxx anpassen ****/
/*---------------------------------------------*/
.tab-icon-image {
-moz-context-properties: fill !important;
/* fill: #FFAA00 !important; */
fill: #FF0000 !important;
}
/*-----------------------------------------------------------------------*/
/* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
/*-----------------------------------------------------------------------*/
#context_reopenInContainer {
display: none !important;
}
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tabbrowser-tab:not([pinned]) .tab-close-button { /* Button rund */
border-radius: 50% !important;
display: flex !important;
}
.tab-content > .tab-close-button:hover {
/*outline: none !important;*/
outline: 1px solid rgba(255, 0, 0, 0.3) !important;
outline-offset: -1px !important;
background-color: rgba(255, 0, 0, 0.4) !important; /* Rot */
box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important; /* Rot, glow */
}
/* Schließen Kreuz größer */
.tab-close-button {
transform: scale(1.4, 1.4) !important;
}
/*---------------------------------------------------*/
/************* New Tab Button (+) hover *************/
/*---------------------------------------------------*/
/* Abstand vom Tab */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
margin-left: 6px !important;
border-radius: 50% !important;
}
/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
outline: 1px solid var(--uc-color-orange-normal) !important;
outline-offset: -1px !important;
background-color: var(--ug-color1) !important;
}
/* New Tab (+) button hover color */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
fill: var(--uc-color-orange-normal) !important;
}
/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
margin: 0 !important;
margin-top: 2px !important;
padding-inline: 0px !important;
}
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
margin-left: -16px !important;
z-index: 2 !important;
}
/*-------------------------------------------------*/
/*************** Schrift in den Tabs ***************/
/*-------------------------------------------------*/
.tab-label {
overflow: hidden !important;
text-overflow: ellipsis !important;
/* text-overflow: " " !important; */
text-overflow: " …" !important;
white-space: nowrap !important;
max-width: 95% !important;
text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important; /* Schatten hinter Schrift */
}
.tab-label[selected] {
color: var(--uc-color-white-normal) !important; /* Aktiver Tab: Schriftfarbe (Orange) */
}
.tab-label:not([selected]) {
color: var(--uc-color-grey-lighter) !important; /* Aktiver Tab: Schriftfarbe (Hellgrau) */
}
/* Move tab content */
.tab-content {
margin-top: 1px !important;
}
/*************** Tests ***************/
#tabbrowser-tabs {
/* --tab-min-width: 76px !important; */
--tab-min-width: 75px !important;
--tab-loading-fill: lime !important;
--tab-overflow-pinned-tabs-width: 0px !important;
}
/* userChrome.css */
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0;
background-color: #FFCC00;
height: 2px;
margin-inline: 12px;
margin-top: 0px;
border-radius: 90px;
}
.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1;
transform-origin: left center;
animation: 2s ease-in-out scale;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
transition: opacity 2s ease-out;
}
@keyframes scale {
0% {transform: scaleX(0);}
100% {transform: scaleX(1);}
} Nicht ganz unverändert: Du hast die Menüleiste aktiviert, deswegen passt es bei dir. Das ist keine Standardkonfiguration. Und selbst mit Menüleiste passt da ja optisch nichts zueinander.