aktiver Tab Linien

MarketMaker

Hallo

Ab FF 154 paßt meine CSS für die Tabs nicht mehr.

Beim aktiven Tab haut die Darstellung der Linie um den Tab nicht mehr hin und andere Linien sind dazugekommen.

Die Tabhöhe beim aktiven Tab ist bei näherer Betrachtung höher wie die anderen Tabs.

Hier mal CSS Code als Beispiel.

Die Tabs schweben bei mir über der unteren Grenze und es wird eine Multireihe benutzt, deshalb die Zeilen mit Tabhöhe.

Hat jemand eine Idee?

CSS

/* Tab-Höhe */

.tabbrowser-tab {
min-height:29px !important; 
max-height: 29px !important;
    
     
margin-top: 10px !important; 
margin-bottom: 9px !important; 

vertical-align: bottom !important;
    
margin-Left: 14px !important; 

}

#main-window .tabbrowser-tab [selected]
{
box-shadow:0px 0px 0px 1px rgba(0,0,250, 0.99) , 0px 0px 0px 0px rgba(200,200,200,0) /*inset*/ !important;
background-image: linear-gradient( rgba(145,45,45, 1), rgba(145,45,45,1) ), none !important; }

#main-window .tabbrowser-tab:not([selected]):hover
{
box-shadow:0px 0px 0px 1px rgba(0,250,0, 0.99) , 0px 0px 0px 0px rgba(200,200,200,0) /*inset*/ !important;
background-image: linear-gradient( rgba(45,45,45, 1), rgba(45,45,45,1) ), none !important; }

#main-window .tabbrowser-tab:not([selected])
{box-shadow:0px 0px 0px 1px rgba(250,0,0, 0.99) , 0px 0px 0px 0px rgba(200,200,200,0) /*inset*/ !important;
background-image: linear-gradient( rgba(45,45,45, 1), rgba(45,45,45,1) ), none !important; 
}

Alles anzeigen

2002Andreas

Auf jeden Fall passt Zeile 17 so nicht:

Code

#main-window .tabbrowser-tab [selected]

vor [selected] darf kein Leerfeld sein.

Der 2te Wert bei box.shadow hat jeweils den Wert 0px, also hat er keine Wirkung.

Zitat von MarketMaker

background-image: linear-gradient( rgba(45,45,45, 1), rgba(45,45,45,1) ), none !important; }

Das , none am Ende gehört da auch nicht hin.

MarketMaker

Hallo Andreas

Die Zeilen sind schon sehr alt und von irgendwo übernommen worden und hab das aus dem eigentlichen code zusammengekürzt.

Habe jetzt mal Chatgpt bemüht und gleichzeitig eine Multitabreihe anfertigen lassen. Bei der Multitabreihe funktioniert das schließen der Tabs aber noch nicht das Verschieben von Tabs (hatte keine Lust mehr).

KI hatte große Schwierigkeiten die Tabfarbe des aktiven Tab mit gleichzeitiger Borderlinie und den benötigten Abständen zu berechnen.

Ein Wechsel auf box-shadow Zuweisungen ging dann besser.

Also folgend mal der komplette Code. Genügt mir erstmal.

CSS

/* ============================================================
   FIREFOX MULTIROW TABS
   7 TABS PRO REIHE / 5 REIHEN
   ============================================================ */


/* ============================================================
   GRUNDWERTE
   ============================================================ */

:root {
    --tab-min-height: 29px !important;

    --tab-gap-x: 6px;
    --tab-gap-y: 12px;

    --tabs-left-space: 10px;

    --scrollbar-space: 24px;

    --tabs-top-space: 12px;
}


/* ============================================================
   TAB-HÖHE
   ============================================================ */

.tabbrowser-tab {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;

    box-sizing: border-box !important;

    margin-top: 6px !important;
    margin-bottom: 6px !important;

    margin-left: 0 !important;
    margin-right: 6px !important;
}


/* ============================================================
   TABLEISTE
   ============================================================ */

#tabbrowser-tabs {

    min-height: unset !important;

    padding-top: var(--tabs-top-space) !important;

    box-sizing: border-box !important;
}


/* ============================================================
   ARROWSCROLLBOX
   ============================================================ */

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {

    display: block !important;

    min-height: unset !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ============================================================
   MULTIROW CONTAINER
   ============================================================ */

#tabbrowser-tabs
scrollbox[part][orient="horizontal"] {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-content: flex-start !important;

    align-items: flex-start !important;

    max-height: calc(
        5 * 41px
    ) !important;

    min-height: 41px !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    scrollbar-gutter: stable !important;

    box-sizing: border-box !important;

    padding-left: var(--tabs-left-space) !important;

    padding-right: var(--scrollbar-space) !important;
}


/* ============================================================
   DIREKTE KINDER
   ============================================================ */

#tabbrowser-tabs
scrollbox[part][orient="horizontal"] > * {

    flex-wrap: wrap !important;
}


/* ============================================================
   TABS
   ============================================================ */

#tabbrowser-tabs
.tabbrowser-tab[fadein]:not([pinned]) {

    flex: 0 0 calc(
        (100% - 36px - var(--scrollbar-space)) / 7
    ) !important;

    width: calc(
        (100% - 36px - var(--scrollbar-space)) / 7
    ) !important;

    min-width: calc(
        (100% - 36px - var(--scrollbar-space)) / 7
    ) !important;

    max-width: calc(
        (100% - 36px - var(--scrollbar-space)) / 7
    ) !important;

    height: 29px !important;

    min-height: 29px !important;

    max-height: 29px !important;

    margin-top: 6px !important;

    margin-bottom: 6px !important;

    margin-left: 0 !important;

    margin-right: 6px !important;

    position: static !important;

    /*
       WICHTIG:
       Kein Transform für das Layout.
       Nur die sichtbare Tabfläche wird
       15 px nach rechts verschoben.
    */

    transform: translateX(15px) !important;

    inset: auto !important;

    box-sizing: border-box !important;

    border: 0px solid transparent !important;
}


/* ============================================================
   TAB-STACK
   ============================================================ */

#tabbrowser-tabs
.tabbrowser-tab > .tab-stack {

    width: 100% !important;

    height: 29px !important;

    min-height: 29px !important;

    max-height: 29px !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* ============================================================
   TAB-HINTERGRUND
   ============================================================ */

#main-window
.tabbrowser-tab .tab-background {

    border-radius: 0 !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   AKTIVER TAB
   ============================================================ */

#main-window
.tabbrowser-tab[selected] {

    border: 0px solid rgba(0,0,250,0.99) !important;

    background-color: rgba(145,0,0,1) !important;

    background-image: none !important;

    box-shadow:
        0px 0px 0px 1px rgba(0,130,0,0.99),
        0px 0px 0px 0px rgba(200,200,200,1)
        !important;
}


/* ============================================================
   AKTIVER TAB – INTERNEN FIREFOX-HINTERGRUND AUSBLENDEN
   ============================================================ */

#main-window
.tabbrowser-tab[selected] .tab-background {

    background: transparent !important;

    background-image: none !important;

    border: none !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   INAKTIVER TAB + HOVER
   ============================================================ */

#main-window
.tabbrowser-tab:not([selected]):hover {

    border: 0px solid rgba(0,250,0,0.99) !important;

    background-color: rgba(0,145,0,1) !important;

    background-image: none !important;

    box-shadow:
        0px 0px 0px 1px rgba(0,0,230,0.99),
        0px 0px 0px 0px rgba(200,200,200,1)
        !important;
}


/* ============================================================
   INAKTIVER TAB – FIREFOX-HINTERGRUND AUSBLENDEN
   ============================================================ */

#main-window
.tabbrowser-tab:not([selected]):hover .tab-background {

    background: transparent !important;

    background-image: none !important;

    border: none !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   INAKTIVER TAB
   ============================================================ */

#main-window
.tabbrowser-tab:not([selected]):not(:hover) {

    border: 0px solid rgba(250,0,0,0.99) !important;

    background-color: rgba(45,45,45,1) !important;

    background-image: none !important;

    box-shadow:
        0px 0px 0px 1px rgba(130,130,130,0.99),
        0px 0px 0px 0px rgba(200,200,200,1)
        !important;
}


/* ============================================================
   INAKTIVER TAB – FIREFOX-HINTERGRUND AUSBLENDEN
   ============================================================ */

#main-window
.tabbrowser-tab:not([selected]):not(:hover) .tab-background {

    background: transparent !important;

    background-image: none !important;

    border: none !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   TAB-INHALT
   ============================================================ */

#main-window
.tabbrowser-tab .tab-content {

    display: flex !important;

    align-items: center !important;

    height: 29px !important;

    min-height: 29px !important;

    max-height: 29px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   TAB-TEXT
   ============================================================ */

#main-window
.tabbrowser-tab .tab-label {

    height: 29px !important;

    display: flex !important;

    align-items: center !important;

    line-height: normal !important;

    box-sizing: border-box !important;
}


/* ============================================================
   SCHLIESSEN-BUTTON
   ============================================================ */

#main-window
.tabbrowser-tab .tab-close-button {

    align-self: center !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    transform: none !important;
}


/* ============================================================
   SCROLLPFEILE AUSBLENDEN
   ============================================================ */

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs #alltabs-button {

    display: none !important;
}


/* ============================================================
   ÜBERFLÜSSIGE FIREFOX-SPACER AUSBLENDEN
   ============================================================ */

#tabbrowser-tabs
scrollbox[part][orient="horizontal"] > spacer {

    display: none !important;
}

Alles anzeigen

2002Andreas

Zitat von MarketMaker

nicht das Verschieben von Tabs

Mit diesem Skript funktioniert das:

Beitrag

Multi Tab Rows (MultiTabRows@Merci.chao.uc.js) | Mehrzeilige Tableiste

Für mein Skript Multi Tab Rows ( MultiTabRows@Merci.chao.uc.js ) habe ich eine Einführungsseite erstellt, die Screenshots und detaillierte Beschreibungen enthält. Schau sie dir an, wenn du nach einer besseren Lösung für mehrzeilige Tableisten suchst!

https://merci-chao.github.io/userChrome.js/multitabrows/en/

Es gibt auch eine deutsche Version über Google Translate: https://merci--chao-github-io.translate.goog/userChrome.js/…=en&_x_tr_tl=de

Hoffentlich ist sie verständlich genug.

Da einige Leute…

Merci chao

13. März 2026 um 07:26

Zitat von MarketMaker

Genügt mir erstmal.