habs jetzt noch bisschenm verändert. Das Problem ist jetzt, dass die letzte Tabreihe erst ab einer bestimmten Anzahl an Tabs die richtige Größe anzeigt. Zudem bei dunklem Theme ist der blaue Rand zu sehen.
CSS
/* Tableiste mehrreihig oben */
@-moz-document url(chrome://browser/content/browser.xhtml) {
[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 10px !important;
}
#titlebar,#tabbrowser-tabs {
appearance: none !important;
}
[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}
/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 4); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}
#tabbrowser-arrowscrollbox {
margin-top: -3px !important;
margin-bottom: -20px !important;
}
:root {
--tab-min-height: 30px !important;
}
:root #tabbrowser-tabs {
--tab-min-height: 30px !important;
}
/* Tabs rund und farbig */
/* Angaben für die TAB-Leiste*/
/* TAB normal (inaktiv):
* Hintergrundfarbe, Schriftfarbe,
* Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
* unten kein Rahmen -> Abschlußrahmen vom Container.*/
#TabsToolbar .tabbrowser-tab {
min-height:20px !important;
color: black !important;
border: 1px solid !important;
border-bottom: 1px solid black !important;
border-radius: 10px 10px !important;
margin-top: 0px !important;
padding: 0px !important;
}
/* TAB bei bei angewähltem TAB (aktiv):
* Hintergrundfarbe, Rahmen,
* Schriftfarbe. */
#TabsToolbar .tabbrowser-tab[selected="true"] {
background: white !important;
border-radius: 10px 10px !important;
margin-top: 0px !important;
padding: 0px !important;
font-weight: bold !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: -5px !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 angepaßt */
#TabsToolbar .tab-close-button {
margin-right: -5px !important;
color: black !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
height: 20px !important;
width: 20px !important;
background-color: red !important;
border-radius: 14px !important;
}
/* Schliessen-Button nur wenn angewählt */
tab:not([selected]) .tab-close-button {display: none !important;
}
/* Alle anderen Elemente in den TABs ohne Hintergrund. */
#TabsToolbar .tabbrowser-tab * {
background: none !important;
}
/* Schriftgröße Tabs */
.tab-text {
font-size:15px !important;
}
/* Damit wird der Tabtext am Ende nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black 0em) !important;
}
/* Doppelte Schliessung ausblenden */
#TabsToolbar > .titlebar-buttonbox-container {
display:none !important;
}
/* Tabs Proton-Design */
:root {
--proton-tab-radius: 0px !important;
--proton-tab-block-margin: 0px !important;
--inline-tab-padding: 10px !important;
}
#TabsToolbar .toolbarbutton-1 {
margin-top: 2px !important;
margin-bottom: 2px !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;
}
.tabbrowser-tab[label*=" - YouTube"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton {
-moz-box-orient: horizontal !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
margin-top: 0px !important;
margin-right: 0px !important;
}
.tab-icon-sound[soundplaying="true"],
.tab-icon-sound[muted="true"],
.tab-icon-sound[activemedia-blocked="true"] {
background: #FFF !important;
padding: 0 1px !important;
}
.tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
.tab-icon-sound[muted="true"] .tab-icon-sound-image,
.tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
fill: #F10 !important;
}
.tab-icon-sound-image {
height: 1.7em !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
display: none !important;
}
/* Tab Beschriftung mittig */
.tab-content {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.tab-label-container {
margin: auto !important;}
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
flex-shrink: 0 !important;
padding: 0px !important;
padding-top: -5px!important;
width: 16px !important;
}
/*Tabs in Tableiste mittig*/
scrollbox:not(#PlacesToolbarItems) {
-moz-box-pack: center !important;
}
/* Lautsprechersymbol größer */
.tab-icon-overlay {
transform: scale(1.7, 1.7) !important;
}
image.tab-icon-overlay {
top: 3px !important;
padding-right: 3px !important;
}
/* Aktiver Tab breiter */
.tabbrowser-tab:not([pinned]):not([selected]) {
min-width: 200px !important;
max-width: 200px !important;
}
.tabbrowser-tab:not([pinned])[selected] {
min-width: 256px !important;
max-width: 256px !important;
}
/* Schatten drum */
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
[multiselected]) > .tab-stack > .tab-background
{
box-shadow: none !important;
}
Alles anzeigen