CSS
/* Tabs rund und farbig */
/* Angaben für die TAB-Leiste */
/* TAB bei bei angewähltem TAB (aktiv): */
/* Hintergrundfarbe, Rahmen,*/
/* Schriftfarbe. */
.tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
background: red !important;
border-radius: 18px !important;
margin-top: 2px !important;
border: none !important;
color: black ! important;
margin-bottom: 0 !important;
}
/* Schliessen-Button nur wenn angewählt */
tab:not([selected]) .tab-close-button {display: none !important;
}
/* Schriftgröße Tabs */
.tab-text {
font-size: 17px !important;
}
/* Damit wird der Tabtext am Ende schleichend ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black 1em) !important;
}
/* Doppelte Schliessung ausblenden */
#TabsToolbar > .titlebar-buttonbox-container {
display:none !important;
}
.tabbrowser-tab[visuallyselected] .tab-label {
font-weight: bold !important;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
border-radius: 16px !important;
height: 22px ! important;
margin-top: 5px !important;
padding: 0 !important;
color: black ! important;
}
/* Tab-Icon etwas größer,
* links weniger, unten etwas mehr Abstand zum TAB-Rand */
#TabsToolbar .tab-icon-image {
height: 20px !important;
width: 20px !important;
margin-left: -2px !important;
margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
* Rechts weniger Abstand zum TAB-Rand, etwas größer,
* Textfarbe (Kreuz)
* Hintergrundfarbe, an den Eckenradius des Buttons angepasst */
#TabsToolbar .tab-close-button {
margin-right: -8px !important;
font-weight: bold !important;
color: black !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
height: 20px !important;
width: 20px !important;
background-color: red !important;
border-radius: 12px !important;
}
/* Aktiver Tab breiter */
.tabbrowser-tab:not([pinned]):not([selected]) {
min-width: 200px !important;
flex-grow: 0 !important;
}
.tabbrowser-tab:not([pinned])[selected] {
min-width: 200px !important;
flex-grow: 0 !important;
}
*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
}
/* Lautsprechersymbol größer */
.tab-icon-overlay {
transform: scale(1.8) !important;
}
image.tab-icon-overlay {
margin-top: 3px !important;
}
/* Lautsprechersymbol violett bei Sound */
.tab-icon-overlay[soundplaying] {
fill: blueviolet !important;
margin-left: 5px !important;
}
/* Lautsprechersymbol gelb bei Stumm */
.tab-icon-overlay[muted] {
fill: yellow !important;
margin-left: 5px !important;
}
/* Tab Beschriftung mittig */
.tab-content {
display: flex !important;
margin-top: 2px !important;
justify-content: center !important;
align-items: center !important;
}
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
margin-top: 2px !important;
}
.tabbrowser-tab {
min-height: 40px !important;
max-height: 40px !important;
}
.tab-label-container {
margin: auto !important;
}
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
flex-shrink: 0 !important;
padding: 0 !important;
width: 16px !important;
}
#TabsToolbar .toolbarbutton-1 {
min-height: 34px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
min-height: 34px !important;
border: 1px solid #B2B2B2 !important;
}
#TabsToolbar .toolbarbutton-1 > image {
padding: 2px 4px !important;
}
/* Rahmen um die Tableiste durchsichtig */
#TabsToolbar {
border: 0.2px solid transparent !important;
}
#TabsToolbar:hover {
border: 0.2px solid transparent !important;
}
/* Tabs in Tableiste mittig */
#tabbrowser-tabs:not([overflow="true"]) {
--ug_tabs_position: center;
}
scrollbox[smoothscroll="true"] {
display: flex !important;
justify-content: center !important ;
}
/* Fortschrittsbalken im aktiven Tab */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0;
background-color: #00ff00;
height: 6px;
margin-inline: 8px;
margin-top: 2px;
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);}
}
Alles anzeigen
Seit gestern mit dem UpDate auf 130 Nightly sind die nicht aktiven Tabs nicht mehr so geformt, wie der aktive Tab.
Wenn man genau hinsieht, erkennt man die abgerundete Form im Hintergrund, nur der Kasten drängt sich vor. Was muss geändert werden? ![]()
Danke milupo
