Dein Code aus Beitrag Nr. 38 sieht hier so aus:
Mit meinem Zusatz im Code so:
Danke, Andreas, das passt.
Ich versuche nun gerade an den Selektor während des Ladens einer Seite zu kommen,
denn Dein Code greift ja nur, wenn die Seite bereits geladen ist.
Hast Du eine Idee, wie man daran kommt?
Und hast Du eine Idee, wie man die Grafiken in der Höhe verschieben kann?
Alternativ auch NUR den Tab als solchen, ohne die Grafiken mitzubewegen.
während des Ladens einer Seite
Teste mal damit:
.tabbrowser-tab[busy]
NUR den Tab als solchen
Auch nur ein Test:
#tabbrowser-tabs {
margin-top: -2px !important;
}Zwischenstopp
Meine Tabs sehen z.Z. so aus.
Ich finde ja der Charme liegt in dem Zusammenspiel von seitlich komplett abgerundeten Tabs mit den teils unten ausgestellten Tabs.
Was auch die Herausforderung ist...
Alles anzeigenWoran ich gerade ab verzweifele, die Höhe der Vektorgrafiken!
Links-rechts ist kein Problem, auch die Größe der Grafiken nicht,
aber eben hoch oder tief.
Was ich auch nicht hinbekomme, was wahrscheinlich auch nicht funktionieren wird,
z.B. den "Closebutton" weiter nach rechts zu bekommen.
Auch der Anfang des Labels, also das Icon weiter nach links.
Kannst ja mal in meinen CSS Code schauen (nicht dass er dolle wäre), mit background size und position , sowie height/width und Positionierung der gesamten before/after Elemente kann man da rumschieben und anpassen.
Mit den Close buttons und dem Icon hat dir Andreas ja schon geholfen; ist in meinem CSS aber etwas anders.
Es kommt daher dass deine Rundungen zusätzlich an den Seiten zu den Tabs angestückkelt werden.
Hier wäre mein momentaner Code, ungefähr wie ich es nach meinem Geschmack machen würde; dazu braucht es wie üblich noch die .svgs im Ordner /icons.
Sogar eine auskommentierte Soft Version ist dabei 
, aber nur grob angefangen.
/* ERSETZEN */
#titlebar {
order: 1 !important;
}
/* ERSETZEN ENDE */
:root {
/*--tab-min-height: 68px !important;*/
/*--ug-height: calc(var(--tab-min-height) / 2);*/
/* Ecken ohne svg radius */
/*--ug-radius: 18px;*/
--ug-radius: 20px;
/* Rand Farben */
--ug-color-border: hsla(0, 0%, 83%, 0.5);
--ug-stroke: hsla(0, 0%, 83%, 0.35);
/* Farben tab hg / basic / selected / hover */
--ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25);
/* tab bar rand unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
}
#TabsToolbar {
-moz-context-properties: fill, stroke, stroke-opacity !important;
background-image: linear-gradient(to top,
var(--ug-color3) 1px, transparent 1px) !important;
/*outline: 1px solid grey !important;
outline-offset: -1px !important;*/
/*outline: 1px solid hsla(0, 0%, 100%, 0.75) !important;
outline-offset: -13px !important;*/
}
/* buttons adjust position */
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
margin-left: 4px !important;
border-radius: 50% !important;
}
.tab-content {
margin-top: 3px !important;
}
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
z-index: 2 !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css */
.tabbrowser-tab:last-of-type {
margin-inline-end: 11px !important;
}
/* tabs distance */
.tabbrowser-tab:not([pinned]) {
/*padding-inline: 16px !important;*/
padding-inline: 2px !important;
overflow: visible !important;
}
/*** tabs base ***/
/* tabs connected bottom */
.tab-background {
margin-block: 4px 0px !important;
}
.tabbrowser-tab .tab-background {
background-color: var(--ug-color1) !important;
box-shadow: none !important;
/*border-image: linear-gradient(to top,
var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0 !important;*/
border-image-outset: 0 1px !important;
fill: var(--ug-color1, transparent) !important;
/*stroke: var(--ug-stroke) !important;*/
outline: none !important;
/*min-height: calc(var(--tab-min-height) - 1px) !important;*/
/*box-shadow: inset 0px 1px var(--ug-color-border) !important;*/
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
fill: var(--ug-color2, transparent) !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;
}
/*** tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid var(--ug-color-border) !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
/*border: none !important;*/
}
/* not selected -> nach selected */
.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;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
}
/*** tabs corners ***/
/* base */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
content: "";
width: 38px !important;
height: 38px !important;
position: absolute;
bottom: -2px;
background-repeat: no-repeat !important;
background-position: bottom left !important;
stroke: var(--ug-stroke) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: -19px;
background-image: url(icons/Tab-corner-left2a.svg),
url(icons/Tab-corner-top2.svg) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
/*right: -298px;
stroke: red !important;*/
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: -19px;
background-image: url(icons/Tab-corner-left2a.svg),
url(icons/Tab-corner-top2.svg) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
transform: scaleX(-1) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/** test radial gradient 2d soft outline / top / left / right / unten alles **/
/*
.tabbrowser-tab:not([pinned])[selected] .tab-stack {
background-image: linear-gradient(to bottom, var(--ug-stroke), transparent 10px) !important;
background-repeat: no-repeat !important;
background-size: calc(100% - 38px) 100% !important;
background-position: top 4px center !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::before {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
left: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::after {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
right: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
transform: scaleX(-1) !important;
}
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 4px, transparent 12px) !important;
}
*/
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}
Alles anzeigenDu bist, was CSS angeht, wirklich richtig fit geworden. Super.
Und es schaut richtig gut aus.
So wie ich das derzeit sehe, habe ich noch so einige Schwierigkeiten.
Denn so wie Dein Design, so soll das Meinige auch zum Schluss werden.
OK, so ähnlich.
Nicht doch, ich hacke hier nur rum. 
Aber Danke.
Es spielt hier alles zusammen - wie meistens - und wird wie erwähnt schnell komplex wenn man sehr dünne Trennlinien, nach aussen zeigende runde Ecken, Transparenz und Überlappungen zusammenbringt.
Und dann wird alles noch verschieden gerendert...
Natürlich will man auch noch die Buttons mit anpassen, alles soll sauber passen, etc..
Viel Spass damit, ich hab mir schon den Wolf gebastelt um wenigstens so weit zu kommen.
Aber wieder Einiges dazugelernt.
Übrigens - bekommst du auch einen seltsamen schrägen Strich mit deinem Theme, oben links, und nur in Vollformat oder maximierter Ansicht?
Ich hab's auch ohne CSS probiert, gleiches Spiel. 
...Übrigens - bekommst du auch einen seltsamen schrägen Strich mit deinem Theme, oben links, und nur in Vollformat oder maximierter Ansicht?
Ich hab's auch ohne CSS probiert, gleiches Spiel.
Das ist das Hintergrundbild des Themes!
Ist echt nicht schön, aber ich nutze ja den Firefox nie im Vollformat.
Das ist das Hintergrundbild des Themes!
Ist echt nicht schön, aber ich nutze ja den Firefox nie im Vollformat.
Super getestet, das Theme.
Kannst das hier probieren (eine oder beide der Regeln), kommt aber bestimmt einigen anderen Themes in die Quere, und ich weisst nicht wie man es auf nur das eine Theme eingrenzen kann.
#navigator-toolbox {
background-image: url(icons/orange-blue-images_fix.jpg) !important;
/*background-position: right top -380px, var(--lwt-background-alignment) !important;*/
}
Für den anderen CSS Code habe ich noch das hier eingefügt, aber das ist generell ja nur ein grober Test:
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css */
.tabbrowser-tab:last-of-type {
margin-inline-end: 11px !important;
}Ich blicks nicht!
Da es nicht so geht wie ich es mir vorgestellt habe, bediente ich mich an Deinem Code.
Nur, der funktioniert bei mir einfach nicht!
Die Grafiken werden nicht so angezeigt, wie ich es erwarten würde,
und "Rahmen" (border) werden angezeigt, obwohl da eigentlich gar keine sein sollten.
Ich habe mal zur besseren Veranschaulichung
Tab-corner-top2.svg durch ein Herz ersetzt.
Gib mir doch bitte mal Deine Vektorgrafiken.
Tab-corner-left2a.svg & Tab-corner-top2.svg
Und wenn es mehr sind, dann den Rest auch noch.
Und Sicher, dass der Code so ist?
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: -19px;
background-image: url(icons/Tab-corner-left2a.svg),
url(icons/Tab-corner-top2.svg) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
/*right: -298px;
stroke: red !important;*/
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: -19px;
background-image: url(icons/Tab-corner-left2a.svg),
url(icons/Tab-corner-top2.svg) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
transform: scaleX(-1) !important;
}Bin am Verzweifeln.
Gib mir doch bitte mal Deine Vektorgrafiken.
Tab-corner-left2a.svg & Tab-corner-top2.svg
Die Grafiken sind ganz unten hier anghängt, hast du die benutzt?
Gehören dann in den Ordner Icons im Profilordner, bzw den Ordener in dem die zugehörige CSS Datei ist.
Was den Code angeht, ich denke nicht dass du nur einen Teil benutzen kannst, falls du das probiert hast.
Zumindest für diesen Test ist das meiste miteinander verbunden, also alles oder nix.
Abgesehen von deinem Code für Tabs unten, wobei da auch nichts drin sein darf was die Tab Höhe etc. beeinflusst, sonst passt es nicht.
In meinem Beispiel wird die Höhe der Tableiste auch etwas verringert; das kann ich rauseditieren und anderen Einträge universeller machen, aber erstmal ist es so im Testcode.
Ich hätte hier noch einen leicht variierten Code, mit neuen .svgs; immer noch in der Testphase und etwas wirr; die Icons hänge ich als zip ganz unten an.
/* ERSETZEN mit eigenem Code für Tabs unten */
#titlebar {
order: 1 !important;
}
/* ERSETZEN ENDE */
/* only test outline for button position */
/*
:is(#scrollbutton-up, #scrollbutton-down) {
outline: 1px solid white !important;
outline-offset: -5px !important;
}
#TabsToolbar toolbarbutton > .toolbarbutton-icon,
#TabsToolbar toolbarbutton > .toolbarbutton-badge-stack {
outline: 1px solid yellow !important;
outline-offset: -1px !important;
}
#TabsToolbar {
outline: 1px solid hsla(0, 0%, 100%, 0.75) !important;
outline-offset: -13px !important;
}
*/
:root {
/* Ecken ohne svg/ Radius */
/*--ug-radius: 18px;*/
--ug-radius: 20px;
/* Rand Farben: Schatten, Borders / svgs */
--ug-color-border: hsla(0, 0%, 83%, 0.5);
--ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
--ug-stroke: hsla(0, 0%, 83%, 0.5);
/* Farben tab hg: basic / selected / hover */
--ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25);
/* tab bar rand unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
}
#TabsToolbar {
-moz-context-properties: fill, stroke, stroke-opacity !important;
background-image: linear-gradient(to top,
var(--ug-color3) 1px, transparent 1px) !important;
}
/* buttons adjust position */
/* kleiner by -x , 10px default normal */
#TabsToolbar {
/*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
/*
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
*/
.tab-content {
margin-top: 3px !important;
}
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
z-index: 2 !important;
}
/* tabs distance */
.tabbrowser-tab:not([pinned]) {
padding-inline: 2px !important;
overflow: visible !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
.tabbrowser-tab:last-of-type {
/*margin-inline-end: 18px !important;*/
margin-inline-end: 11px !important;
}
/* close button, not overflow */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
/*margin-left: -14px !important;*/
border-radius: 50% !important;
}
/*** tabs base ***/
/* tabs connected bottom, tab bar height reduced ? */
.tab-background {
margin-block: 4px 0px !important;
/*margin-block: 8px 0px !important;
min-height: 40px !important;*/
}
.tabbrowser-tab .tab-background {
background-color: var(--ug-color1) !important;
/*box-shadow: none !important;*/
box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
/*background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
/*border-image: linear-gradient(to top,
var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0 !important;
border-image-outset: 0 1px !important;*/
fill: var(--ug-color1, transparent) !important;
/*stroke: var(--ug-stroke) !important;*/
outline: none !important;
/*min-height: calc(var(--tab-min-height) - 1px) !important;*/
/*box-shadow: inset 0px 1px var(--ug-color-border) !important;*/
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
fill: var(--ug-color2, transparent) !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;
}
/*** tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid var(--ug-color-border) !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
/*border: none !important;*/
}
/* not selected -> nach selected */
.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;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
}
/*** tabs corners ***/
/* base */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
content: "";
width: 38px !important;
height: 38px !important;
position: absolute;
bottom: -2px;
background-repeat: no-repeat !important;
background-position: bottom left !important;
stroke: var(--ug-stroke) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: -19px;
background-image: url(icons/Tab-corner-left2aTest.svg),
url(icons/Tab-corner-top2Test.svg) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
/*right: -298px;
stroke-width: 6px !important;
stroke: red !important;*/
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: -19px;
background-image: url(icons/Tab-corner-left2aTest.svg),
url(icons/Tab-corner-top2.svgTest) !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
transform: scaleX(-1) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/** test radial gradient 2d soft outline / top / left / right / unten alles **/
/*
.tabbrowser-tab:not([pinned])[selected] .tab-stack {
background-image: linear-gradient(to bottom, var(--ug-stroke), transparent 10px) !important;
background-repeat: no-repeat !important;
background-size: calc(100% - 38px) 100% !important;
background-position: top 4px center !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::before {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
left: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::after {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
right: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
transform: scaleX(-1) !important;
}
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 4px, transparent 12px) !important;
}
*/
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}
Dein Code, OHNE Veränderung,
OK, den Pfad angepasst!
Deine Vektorgrafiken.
Hier noch mal der Code, aus Beitrag #43, mit neuen Pfadangaben!
/* ERSETZEN */
#titlebar {
order: 1 !important;
}
/* ERSETZEN ENDE */
:root {
/*--tab-min-height: 68px !important;*/
/*--ug-height: calc(var(--tab-min-height) / 2);*/
/* Ecken ohne svg radius */
/*--ug-radius: 18px;*/
--ug-radius: 20px;
/* Rand Farben */
--ug-color-border: hsla(0, 0%, 83%, 0.5);
--ug-stroke: hsla(0, 0%, 83%, 0.35);
/* Farben tab hg / basic / selected / hover */
--ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25);
/* tab bar rand unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
}
#TabsToolbar {
-moz-context-properties: fill, stroke, stroke-opacity !important;
background-image: linear-gradient(to top,
var(--ug-color3) 1px, transparent 1px) !important;
/*outline: 1px solid grey !important;
outline-offset: -1px !important;*/
/*outline: 1px solid hsla(0, 0%, 100%, 0.75) !important;
outline-offset: -13px !important;*/
}
/* buttons adjust position */
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
margin-left: 4px !important;
border-radius: 50% !important;
}
.tab-content {
margin-top: 3px !important;
}
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
z-index: 2 !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css */
.tabbrowser-tab:last-of-type {
margin-inline-end: 11px !important;
}
/* tabs distance */
.tabbrowser-tab:not([pinned]) {
/*padding-inline: 16px !important;*/
padding-inline: 2px !important;
overflow: visible !important;
}
/*** tabs base ***/
/* tabs connected bottom */
.tab-background {
margin-block: 4px 0px !important;
}
.tabbrowser-tab .tab-background {
background-color: var(--ug-color1) !important;
box-shadow: none !important;
/*border-image: linear-gradient(to top,
var(--ug-color1), var(--ug-color1)) 1 / 0 0 1px 0 !important;*/
border-image-outset: 0 1px !important;
fill: var(--ug-color1, transparent) !important;
/*stroke: var(--ug-stroke) !important;*/
outline: none !important;
/*min-height: calc(var(--tab-min-height) - 1px) !important;*/
/*box-shadow: inset 0px 1px var(--ug-color-border) !important;*/
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
fill: var(--ug-color2, transparent) !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;
}
/*** tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid var(--ug-color-border) !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
/*border: none !important;*/
}
/* not selected -> nach selected */
.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;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
}
/*** tabs corners ***/
/* base */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
content: "";
width: 38px !important;
height: 38px !important;
position: absolute;
bottom: -2px;
background-repeat: no-repeat !important;
background-position: bottom left !important;
stroke: var(--ug-stroke) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: -19px;
background-image: url("../tabs/Tab-corner-left2a.svg"),
url("../tabs/Tab-corner-top2.svg") !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
/*right: -298px;
stroke: red !important;*/
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: -19px;
background-image: url("../tabs/Tab-corner-left2a.svg"),
url("../tabs/Tab-corner-top2.svg") !important;
background-position: bottom -0px left, top 0px right 1px !important;
background-size: 19px, 19px !important;
transform: scaleX(-1) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/** test radial gradient 2d soft outline / top / left / right / unten alles **/
/*
.tabbrowser-tab:not([pinned])[selected] .tab-stack {
background-image: linear-gradient(to bottom, var(--ug-stroke), transparent 10px) !important;
background-repeat: no-repeat !important;
background-size: calc(100% - 38px) 100% !important;
background-position: top 4px center !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::before {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
left: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
}
.tabbrowser-tab:not([pinned])[selected] .tab-stack::after {
content: "";
width: 72px !important;
height: 36px !important;
position: absolute;
bottom: 4px;
right: calc(-36px + 18px);
background-image:
radial-gradient(circle at top left, transparent 18px, var(--ug-stroke) 18px, transparent 28px),
radial-gradient(circle at bottom right, transparent 8px, var(--ug-stroke) 18px, transparent 18px) !important;
background-repeat: no-repeat !important;
background-size: 72px 18px !important;
background-position: bottom left, top left -35px !important;
transform: scaleX(-1) !important;
}
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 4px, transparent 12px) !important;
}
*/
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}Warum klappt das nicht?
Wo mache ich was nicht richtig?
Und warum ist bei diesem Code die Tableiste zwar "unten" aber dafür die "Nav-bar" ganz oben,
wo doch die "toolbar-menubar" ganz oben und nicht in der Mitte stehen sollte.
Ich brauche Zeit!
Viel Zeit um alles auseinander zu plücken, sonst verstehe ich das nie.
Alles anzeigen
Dein Code, OHNE Veränderung,
OK, den Pfad angepasst!
Deine Vektorgrafiken.
Hier noch mal der Code, aus Beitrag #43, mit neuen Pfadangaben!
CSS/* ERSETZEN */ #titlebar { order: 1 !important; } /* ERSETZEN ENDE */Warum klappt das nicht?
Wo mache ich was nicht richtig?
Und warum ist bei diesem Code die Tableiste zwar "unten" aber dafür die "Nav-bar" ganz oben,
wo doch die "toolbar-menubar" ganz oben und nicht in der Mitte stehen sollte.
Ich brauche Zeit!
Viel Zeit um alles auseinander zu plücken, sonst verstehe ich das nie.
Schmeiss das raus was bei Ersetzen steht, das funktioniert bei dir nicht, benutz deinen eigenen Code für Tabs unten.
Wo die Menüleiste ist geht aus dem Screenshot auch nicht hervor, und vermutlich benutzt du anderes CSS für Tabs das die Höhe manupuliert, oder evtl. sogar Kompakt Modus - das ginge gar nicht momentan.
Dein Code, OHNE Veränderung,
OK, den Pfad angepasst!
Deine Vektorgrafiken.
Hier noch mal der Code, aus Beitrag #43, mit neuen Pfadangaben!
Moment mal, ich sehe gerade du hast einen alten Code genommen, und evtl. die dalschen Grafiken dazu?
Mein Verdacht ist immer noch dass du heimlich Kompaktmodus benutzt , dafür passt natürlich nicht viel.
Oder ähnliche CSS Modifikationen für Tabs, die ich ja nicht kennen kann; meines baut alles auf reguläres Fx in einem Testprofil auf.
Ausser vielleicht das hier - bitte wieder komplett übernehmen, auch die neuen Grafiken von ganz unten; die Leiste kann ich dir noch uU schmaler machen, aber komplett für den seltsamen Kompaktmodus neu aufbauen bring ich nicht; evtl. geht's ja aber auch so schon halbwegs.
Tableiste unten musst du selber einfügen, das werf ich komplett raus, und die Dateipfade wieder anpassen.
:root {
--tab-block-margin: 4px !important;
--tab-min-height: 36px !important;
/* Ecken ohne svg/ Radius */
/*--ug-radius: 18px;*/
--ug-radius: 20px;
/* Rand Farben: Schatten, Borders / svgs */
--ug-color-border: hsla(0, 0%, 83%, 0.5);
--ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
--ug-stroke: hsla(0, 0%, 83%, 0.5);
/* Farben tab hg: basic / selected / hover */
--ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25);
/* tab bar rand unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
}
/* Tab Leiste Kante unten */
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 2px, transparent 2px) !important;
}
/* buttons adjust position */
/* kleiner by -x , 10px default normal */
#TabsToolbar {
/*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
/*
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
*/
.tab-content {
margin-top: 6px !important;
}
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
z-index: 2 !important;
}
/* tabs distance */
.tabbrowser-tab:not([pinned]) {
padding-inline: 2px !important;
overflow: visible !important;
}
.tabbrowser-tab:not([pinned]):first-of-type {
margin-inline-start: 9px !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
:root:not([customizing]) .tabbrowser-tab:last-of-type {
/*margin-inline-end: 18px !important;
margin-inline-end: 14px !important;*/
margin-inline-end: 11px !important;
}
/* close button, not overflow */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
border-radius: 50% !important;
}
/*
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
margin-left: -8px !important;
}
*/
/*** tabs base ***/
/* tabs connected bottom, tab bar height reduced ? */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
.tabbrowser-tab .tab-background {
background-color: var(--ug-color1) !important;
/*box-shadow: none !important;*/
box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
/*background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
outline: none !important;
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
}
/*** tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid var(--ug-color-border) !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* not selected -> nach selected */
.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;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
}
/*** tabs corners ***/
/* base 38px height */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
content: "";
--ug-corner-size: calc(var(--tab-min-height) + 2px);
width: var(--ug-corner-size) !important;
height: var(--ug-corner-size) !important;
position: absolute;
bottom: -2px;
background-size: calc(var(--ug-corner-size) / 2), calc(var(--ug-corner-size) / 2) !important;
background-repeat: no-repeat !important;
background-position: bottom left !important;
stroke: var(--ug-stroke) !important;
fill: var(--ug-color1, transparent) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/Tab-corner-left2aTestB.svg),
url(icons/Tab-corner-top2TestB.svg) !important;
background-position: bottom left, top right 1px !important;
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/Tab-corner-left2aTestB.svg),
url(icons/Tab-corner-top2TestB.svg) !important;
background-position: bottom left, top right 1px !important;
transform: scaleX(-1) !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, transparent) !important;
}
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::before,
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
fill: var(--ug-color_hova) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}
Du bist ein Schatz!
Dein letzter Code funktioniert hervorragend und das auch im Kompaktmodus.
Um die Tableiste nach unten zu versetzen, habe ich nachfolgenden Code noch eingesetzt.
/*-------------------------------------------*/
/**** Tabbar nach unten verschoben ****/
/*-------------------------------------------*/
#navigator-toolbox {
position: relative !important;
padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
}
#TabsToolbar {
position: absolute !important;
display: block !important;
bottom: 0 !important;
}
#tabbrowser-tabs {
width: 95vw !important;
}Nun kann ich daran machen diesen Code auseinander zu pflücken, damit ich dahinterkomme,
wie das alles zusammen hängt und funktioniert.
Danach werde ich mir die Farbeinstellungen vornehmen.
Aber alles eins nach dem anderen.
Vielen lieben Dank noch mal. 
Dein letzter Code funktioniert hervorragend und das auch im Kompaktmodus.
Nun kann ich daran machen diesen Code auseinander zu pflücken, damit ich dahinterkomme,
wie das alles zusammen hängt und funktioniert.
Danach werde ich mir die Farbeinstellungen vornehmen.
Prima, freut mich zu hören! 
War so ein Test aus Neugier, und ist mal wieder ausgeartet... 
Du findest bestimmt noch einige viele Bugs, und wie gesagt kann ich die Leiste bestimmt noch etwas schmaler zimmern, aber ist halt wie so oft alles miteinander verbunden, und Fx hat auch noch seine Meinung dazu. .
Die Farben sind alle ganz oben als Variablen; kannst ja einfach mal für jede was Wildes eingeben, um zu schauen was die machen im Einzelnen.
Ich muss eh nochmal ran um ein paar Sachen zu verschlanken, ist ja noch sehr testartig, und die Kompaktmodus Anpassung ist ziemlich grob; würde aber vorher lieber etwas Feedback haben.
Selber benutze ich das Ganze nämlich nicht im Hauptprofil, das hab ich mir vor langem schon gemacht wie ich's mag, und bin so langsam etwas testmüde.
Vielleicht hat ja sogar noch jemand anderes Lust das mal zu testen. 
So, einer geht noch; die Grafik hatte noch nicht sauber gepasst, ist jetzt ein einziges Bild und justiert, sollte jetzt hoffentlich besser aussehen.
Noch ein paar Bugs beseitigt, Tableiste zart niedriger, was imo besser zu Kompaktmodus passt, und ein wenig aufgeräumt.
Immer noch Testkram drin, aber alles auskommentiert.
Das . svg hängt wieder unten dran, Dateipfade bitte anpassen, und viel Spass damit.
:root {
/* Tabs bar height adjust */
/*--tab-block-margin: 4px !important;*/
--tab-block-margin: 2px !important;
--tab-min-height: 36px !important;
/* Ecken ohne svg/ Radius */
--ug-radius: 20px;
/* Rand Farben: Schatten, Borders / svgs */
--ug-color-border: hsla(0, 0%, 83%, 0.5);
--ug-stroke_lite: hsla(0, 0%, 83%, 0.35);
--ug-stroke: hsla(0, 0%, 83%, 0.5);
/* Farben tab hg: basic / selected / multiselected / hover */
--ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color2-multi: hsla(35, 80%, 40%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25);
/* tab bar rand unten Farbe */
--ug-color3: hsla(0, 0%, 83%, 0.75);
}
/* Tab Leiste Kante unten */
#TabsToolbar {
background-image: linear-gradient(to top,
var(--ug-color3) 2px, transparent 2px) !important;
}
/* buttons adjust position */
/* kleiner by -x , 10px default normal */
#TabsToolbar {
/*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}
.tab-label, .tab-close-button {
text-shadow: none !important;
}
/* Move buttons up/down, OFF */
/*
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
#tabbrowser-tabs {
--ug_margin_plus: 1px -1px;
}
:is(#scrollbutton-up, #scrollbutton-down) {
margin-block: var(--ug_margin_plus) !important;
}
*/
/* Move tab content */
.tab-content {
margin-top: 1px !important;
}
/* tabs distance */
.tabbrowser-tab:not([pinned]) {
padding-inline: 2px !important;
overflow: visible !important;
}
.tabbrowser-tab:not([pinned]):first-of-type {
margin-inline-start: 9px !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css */
:root:not([customizing]) .tabbrowser-tab:last-of-type {
/*margin-inline-end: 18px !important;
margin-inline-end: 14px !important;*/
margin-inline-end: 11px !important;
}
/* close button, not overflow */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
border-radius: 50% !important;
}
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
border-radius: 50% !important;
padding-left: 0px !important;
}
/*
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
margin-left: -8px !important;
}
*/
/*** tabs base ***/
/* tabs connected bottom, tab bar height reduced ? */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
.tabbrowser-tab .tab-background {
outline: none !important;
background-color: var(--ug-color1) !important;
box-shadow: none !important;
/*box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important;
background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
}
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
background-color: var(--ug-color2-multi) !important;
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
}
/*** Tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid var(--ug-color-border) !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* not selected -> nach selected */
.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;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
}
/*** tabs corners ***/
/* base 38px height */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
content: "";
position: absolute;
--ug-corner-size: calc(var(--tab-min-height) + 0px);
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;
stroke: var(--ug-stroke) !important;
fill: var(--ug-color1) !important;
mask-image: linear-gradient(215deg, transparent, black 18px) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/tab_corner_doppel_Test-1W2.svg) !important;
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2);
background-image: url(icons/tab_corner_doppel_Test-1W2.svg) !important;
transform: scaleX(-1) !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;
}
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::before,
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
fill: var(--ug-color_hova) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}Hey Horstmann ,
bist Du denn kirre?
Weißt Du wie lange ich an Deinem Code gesessen habe, um auch nur zu erahnen, wie das alles funktioniert?
Irgendwie habe ich es geschafft, ihn meinen Vorstellungen anzupassen
und jetzt kommst Du mit einer noch geileren Version 
Woran ich aber verzweifele, einen Rand um den "Neuen Tabbutton" zu zaubern.
Entweder spricht der Selektor ALLE Buttons an, also die selbsterstellten, oder
der "Rahmen" steht viel zu weit um den Button und ist auch nicht rund.
Nun werde ich mich nächste Woche dann mal mit Deinem neuen und besseren Code befassen.
Und höre auf, diesen noch weiter zu optimieren, der ist gut.
Apropos anpassen, so habe ich Deinen Code hingebogen.
Ob ich das mit Deinem neuen Code auch so hinbekomme?
Hey Horstmann ,
bist Du denn kirre?
Weißt Du wie lange ich an Deinem Code gesessen habe, um auch nur zu erahnen, wie das alles funktioniert?
Irgendwie habe ich es geschafft, ihn meinen Vorstellungen anzupassen
und jetzt kommst Du mit einer noch geileren Version
Keine Sorge, der Code ist generell noch der gleiche in der Struktur, nur etwas aufgeräumter, und die Grafik ist hoffentlich besser.
Für den Neuer Tab (+) Button kannst du sowas probieren, das wäre dann nur für den Button ohne Tab Overflow; bei Overflow ist es ein anderer Button, auch wenn er genauso aussieht.
Es gibt verschiedene Möglichkeiten das zu regeln; Farbe wäre dann wie der Rest der Umrandungen:
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
/*outline: 1px solid var(--ug-color-border) !important;
outline-offset: -1px !important;*/
box-shadow: inset 0 0px 0px 1px var(--ug-color-border) !important;
padding-block: 7px 9px !important;
}...
Es gibt verschiedene Möglichkeiten das zu regeln; Farbe wäre dann wie der Rest der Umrandungen:
...
Oh, soweit war ich auch schon, nur den "statischen" Rahmen meinte ich gar nicht.
:hover
Das bekomme ich einfach nicht hin!
Und hier mal Dein Code, mit meinen Anpassungen.
War gar nicht so einfach die richtigen Stellen im Code zu finden,
um die Außenlinien immer passend in der Farbe zu ändern.
Zum Code muss ich aber noch sagen, dass ich eine eigene root.css für diverse Variablen habe,
also auch für die Farben.
/* 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) */
}Der Code für die Tabs:
:root {
--tab-block-margin: 4px !important;
--tab-min-height: 36px !important;
/* Ecken ohne svg/ Radius */
/*--ug-radius: 18px;*/
--ug-radius: 20px;
/* Rand Farben: Schatten, Borders / svgs */
/* --ug-color-border: hsla(0, 0%, 83%, 0.5); */
/* --ug-stroke_lite: hsla(0, 0%, 83%, 0.35); */
/* --ug-stroke: hsla(0, 0%, 83%, 0.5); */
/* Farben tab hg: basic / selected / hover */
/* --ug-color1: hsla(0, 0%, 83%, 0.25);
--ug-color2: hsla(35, 80%, 60%, 0.25);
--ug-color_hova: hsla(0, 0%, 50%, 0.25); */
--ug-color1: rgba(225, 225, 225, 0.2);
--ug-color2: rgba(255, 148, 0, 0.4);
--ug-color_hova: rgba(225, 225, 225, 0.4);
}
/* buttons adjust position */
/* kleiner by -x , 10px default normal */
#TabsToolbar {
/*--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);*/ /* default */
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
}
#TabsToolbar toolbarbutton {
margin-top: -0px !important;
}
.tab-label {
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) */
}
.tab-content {
margin-top: 6px !important;
}
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
z-index: 2 !important;
}
/* Abstände der Tabs voneinander */
.tabbrowser-tab:not([pinned]) {
padding-inline: 2px !important;
overflow: visible !important;
}
/* Abstand des ersten Tabs vom linken Rand */
.tabbrowser-tab:not([pinned]):first-of-type {
margin-inline-start: 9px !important;
}
/*
:root:not([customizing]) #tabbrowser-arrowscrollbox-periphery {
margin-left: -8px !important;
}
*/
/*** tabs base ***/
/* tabs connected bottom, tab bar height reduced ? */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
.tabbrowser-tab .tab-background {
background-color: var(--ug-color1) !important;
/*box-shadow: none !important;*/
/* box-shadow: inset 0 1px 0px var(--ug-stroke_lite) !important; */
/* box-shadow: inset 0 1px 0px red !important; */
/*background-image: linear-gradient(to bottom, var(--ug-stroke_lite), transparent 1px) !important;*/
outline: none !important;
}
/* tabs selected */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
box-shadow: inset 0px 0px 0px 0px transparent !important; /* Aktiver Tab: Schatten Breite, Art und Farbe */
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
}
/*** tabs Radien, borders ***/
/* basis */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
/* border: 1px solid var(--ug-color-border) !important; */
border-top: 1px solid grey !important;
border-right: 1px solid MediumOrchid !important;
border-bottom: none !important;
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
border-top: 1px solid var(--uc-color-grey-light) !important;
border-right: 1px solid var(--uc-color-grey-light) !important;
}
/* selected , pinned */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-left: none !important;
border-top: 1px solid var(--uc-color-orange-normal) !important;
}
/* selected border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* not selected -> nach selected */
.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; */
border-top: 1px solid var(--uc-color-grey-light) !important;
border-left: 1px solid var(--uc-color-grey-light) !important;
border-right: 1px solid var(--uc-color-grey-light) !important;
}
/* not selected last */
.tabbrowser-tab:last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
border-top: 1px solid var(--uc-color-grey-light) !important;
}
.tabbrowser-tab:last-of-type:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
border-top: 1px solid var(--uc-color-orange-normal) !important;
}
/* not selected last -> nach selected */
.tabbrowser-tab:is([visuallyselected]) + .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;
/* border-top: 1px solid lime !important; */
border-top: 1px solid var(--uc-color-grey-light) !important;
}
/*** tabs corners ***/
/* base 38px height */
.tabbrowser-tab:not([pinned]) .tab-background::before,
.tabbrowser-tab:not([pinned]) .tab-background::after {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
content: "";
--ug-corner-size: calc(var(--tab-min-height) + 2px);
width: var(--ug-corner-size) !important;
height: var(--ug-corner-size) !important;
position: absolute;
bottom: -2px;
background-size: calc(var(--ug-corner-size) / 2), calc(var(--ug-corner-size) / 2) !important;
background-repeat: no-repeat !important;
background-position: bottom left !important;
stroke: var(--uc-color-grey-light) !important;
fill: var(--ug-color1, transparent) !important;
}
/* left */
.tabbrowser-tab:not([pinned]) .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2);
background-image: url("../tabs_3/Tab-corner-left2aTestB.svg"),
url("../tabs_3/Tab-corner-top2TestB.svg") !important;
background-position: bottom left, top right 1px !important;
}
/* right */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2);
background-image: url("../tabs_3/Tab-corner-left2aTestB.svg"),
url("../tabs_3/Tab-corner-top2TestB.svg") !important;
background-position: bottom left, top right 1px !important;
transform: scaleX(-1) !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, transparent) !important;
stroke: var(--uc-color-orange-normal) !important;
}
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::before,
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background::after {
fill: var(--ug-color_hova) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tab-content > .tab-close-button:hover {
outline: none !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 */
}
/* close button, not overflow */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
border-radius: 50% !important;
/* border: 1px solid red !important; */
}
/*-------------------------------------------*/
/**** Tabbar nach unten verschoben ****/
/*-------------------------------------------*/
#navigator-toolbox {
position: relative !important;
padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
}
/*
#TabsToolbar {
position: absolute !important;
display: block !important;
bottom: 10px !important;
}
*/
#tabbrowser-tabs {
width: 95vw !important;
}
#TabsToolbar {
position: absolute !important;
display: block !important;
bottom: 6px !important; /* Leiste etwas angehoben */
/* Trennlinie zwischen Inhalt und Tableiste */
background-image: linear-gradient(to top, var(--uc-color-orange-normal) 1px, transparent 10px) !important;
margin-bottom: -7px !important;
padding-bottom: 7px !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: 7px !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;
}
.tab-label {
overflow: hidden !important;
/*text-overflow: ellipsis !important;*/
text-overflow: " …" !important;
white-space: nowrap !important;
max-width: 95% !important;
}
#tabs-newtab-button {
fill: var(--uc-color-grey-light) !important;
}
#tabs-newtab-button:hover {
fill: var(--uc-color-orange-normal) !important;
}
toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon {
background-color: var(--ug-color_hova) !important;
}Keine Sorge, der Code ist generell noch der gleiche in der Struktur, nur etwas aufgeräumter, und die Grafik ist hoffentlich besser.
Ja, auf den ersten Blick sah das schon viel besser aus.
Nur muss ich zuschauen, ob ich die Außenlinien des aktiven Tabs und der inaktiven Tabs da auch getrennt ansprechen kann.
Wenn ja, ist der neue Code, so glaube ich, viel einfacher, aber das sehe ich mir erst ab Montag näher an.
Vorher habe ich da keine Zeit für, oder ich schlage mir die Nächte um die Ohren und hänge dann Tagsüber in den Seilen.
Wäre nicht wirklich so gut, denn es gibt viel zu tun.
In diesem Sinne, bis nächste Woche.
Auch habe ich Neues entdeckt, eine Funktion, die ich nie nutzte!
" Multiselekt" !
Für was braucht man sowas?
Ich kann nur für mich sprechen, aber ich nutze diese Funktion häufig und kann daher eine Antwort geben: Ich habe beispielsweise mehrere angepinnte Tabs, darunter X und Mastodon, wo Inhalte verlinkt werden, die ich anklicke. Die öffnen dann in der Tableiste ganz links - am nächsten zur Position des Ursprung-Tabs eben, und angepinnte Tabs sind eben ganz links. Neue Tabs öffnen aber ganz rechts. Ich verschiebe dann oft mehrere Tabs auf einmal nach ganz rechts, damit alles zusammen ist, was aktuell ist. Ich habe ja meistens eine dreistellige Anzahl an Tabs offen, da müsste ich sonst sehr viel scrollen, um entweder zwischen den Tabs zu wechseln oder jeden Tab einzeln zu verschieben.
Ein anderer Anwendungsfall ist, dass ich häufiger mehrere Tabs auf einmal neu laden möchte. Das Beispiel hier sind Bugzilla-Tickets. Ich nutze die Voting-Funktion, die Mozilla ohnehin nicht als solche nutzt, als Abo-Funktion, um E-Mail-Benachrichtigungen zu erhalten (damit dafür nicht wie beim CC eine E-Mail an alle anderen Abonnenten geschickt wird). Wenn Tickets erledigt sind, entferne ich meine Votes, damit die Liste nicht ins Unendliche wächst. Die Liste braucht bei so vielen Einträgen (aktuell 6.791 Bugzilla-Tickets bei mir, Tendenz steigend) schon echt lange zum Laden. Manchmal entferne ich mehrere Votes auf einmal, wenn mir da direkt mehrere erledigte ins Auge stechen (da hilft mir auch eine kleine userContent.css-Anpassung, weil das sonst kaum erkennbar wäre). Anschließend aktualisiere ich alle offenen Bugzilla-Tabs auf einmal, um zu sehen, wo ich mein Vote noch entfernen muss.
Dritter und letzter Anwendungsfall für mich: Wenn ich Artikel zu neuen Firefox-Versionen schreibe, habe ich sehr viele Tabs dafür offen. Ich nutze die Möglichkeit, eine Reihe von Tabs zu markieren, um über das Kontextmenü die Anzahl der markierten Tabs und damit „noch nicht abgehandelten Themen“ zu erhalten, ohne manuell nachzählen zu müssen, damit ich zwischendurch einfach weiß, wie weit ich schon bin, und ich meine Zeit entsprechend einteilen kann.