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.
CSS
: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 */
}
Alles anzeigen