Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Parzival

Zitat von 2002Andreas

Zitat von Parzival

ich meinte den Rahmen vom aktiven Tab ist noch da

sorry, das hatte ich dann missverstanden.

Teste bitte mal diesen kompl. neuen Code:

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
scrollbox[smoothscroll="true"] > slot {
  display: contents !important;
}

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Jooo! Das ist es!!! Brutal! Danke dir Andreas!!!

2002Andreas

Zitat von Parzival

Das ist es!!!

Freut mich wenn es jetzt für dich passt, war gern geschehen

Kleinigkeit noch:

Tausch bitte mal diesen Code:

CSS

/* Tabs mittig */
scrollbox[smoothscroll="true"] > slot {
  display: contents !important;
}

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

gegen diesen aus:

CSS

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
}
#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
}

Parzival

Mmm, wenn ich den Code so ändere sind die angehefteten Tabs ganz links...

2002Andreas

Zitat von Parzival

sind die angehefteten Tabs ganz links...

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) {
    --ug_tabs_position: center;
    --ug_slot_display: contents;
}
scrollbox {
    justify-content: var(--ug_tabs_position) !important;
}
slot {
  display: var(--ug_slot_display) !important;
}

/* Rahmen um Tab weg*/
.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Oder den anderen Code angepasst:

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([hidden])) {
    margin-left: auto !important;
}

#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
}

/* Rahmen um Tab weg*/
.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Parzival

Beide Codes machen das was sie sollen, also ich sehe jetzt keinen Unterschied 👍😉

Eine Frage noch, könnte man die Tabs in der Höhe noch etwas anpassen 😇?

2002Andreas

Zitat von Parzival

die Tabs in der Höhe noch etwas anpassen

was genau meinst du damit?

Du könntest z.B. in about:config den Wert:

browser.compactmode.show

auf true setzen.

Und dann das aktivieren:

Dann sind die Tabs schmaler:

Parzival

Ich meinte damit ob man die Tabshöhe noch etwas höher machen kann.

2002Andreas

Zitat von Parzival

noch etwas höher machen kann.

Den Wert musst du dir anpassen:

CSS

#tabbrowser-tabs {
  min-height: 65px !important;
  max-height: 65px !important;
}

Parzival

Ja, jetzt ist es perfekt 😉🤠!!!

Danke nochmal für deine großartige Hilfe 👍👍👍!!!

2002Andreas

Zitat von Parzival

Danke nochmal für deine großartige Hilfe

Gern geschehen

Zitat von Parzival

jetzt ist es perfekt

So sollte es ja auch sein

Boersenfeger

Parzival

Vielleicht hätte ich noch ein paar Modalitäten

CSS

    /* 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; 
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 150px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 220px !important;
    flex-grow: 0 !important;
    }
    
    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 18px !important;
    }

Alles anzeigen

Größen ggf. anpassen

Meine Tabs sind rund, der Code sollte aber auch für deine Auswahl der Form passen,

Parzival

Hi Andreas!

Ich schon wieder 🙈.

Die Favicon hätte ich gerne etwas größer, kannst du mir dafür den Code nennen?

Grüße Parzival

Boersenfeger

CSS

/* 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: -6px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 6px !important;
    width:  6px !important;    
    background-color: red !important;
    border-radius: 12px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 155px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 220px !important;
    flex-grow: 0 !important;
    }

Alles anzeigen

Bin nicht Andreas, aber gerade noch drauf... Größe anpassen

Parzival

Vielen Dank Boersenfeger 👍! Hat super geklappt 🤗😁!

Boersenfeger

Das freut mich

Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Ähnliche Themen

FAQ: Menü-, Adress- und Tableiste unterhalb des Fensters anzeigen? (FF 71+)

Firefox 70 - Tabs wieder oben

Firefox Nightly 71.0a1 vom 07.10. Leerfläche unter Tableiste?

Tabs nach unten machen

Tableiste ist über der Adressleiste?