Suche CSS Code für Mehrzeilige Tabs

Spiderman-21

In einem Post habe ich einen CSS Code gefunden, der aber in einem Testprofil leider nicht funktioniert.

Ist dieser Code noch aktuell ?

Bitte um aktuellen Code.

Habe im jeweiligen Profil im Ordner chrome einen Unterordner css und hier die jeweiligen Codes mit dem Namen "Mehrzeilige Tabreihen.css" abgespeichert.

Nur zur Info.

CSS

/* ----------------------------*/
/* Mehrzeilige Tabreihen unten     */
/* ----------------------------*/

@-moz-document url(chrome://browser/content/browser.xhtml) {
       
#TabsToolbar {
    position: absolute !important;
    display:block !important;
    bottom: 0 !important;
    width: 100vw !important;
    }

#tabbrowser-tabs {
    width: 100vw !important;
    }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
    padding-bottom: var(--tab-min-height) !important;
    }
    
/* Tab-Höhe  */
.tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
 /* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
    min-width: 234px !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}

scrollbox[part][orient="horizontal"] {
    background: lightgrey !important;
    position: absolute !important;
    display:block !important;
    /* display: flex; */
    /* flex-wrap: wrap;  */
    /* overflow: visible !important; */
    /* overflow-x: hidden !important; */
    overflow-y: scroll !important;
    min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
    max-height: calc( 3 * 30px ) !important;  /* Anzahl der Tabreihen * Minimal-Höhe */
    -moz-window-dragging: no-drag !important;
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}

/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   12px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Höhe  */
.tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen *//*
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}
*/
/* Tab-Icon ausrichten *//*
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]) 
{
  margin-top: -1px !important;
}
*/
/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
}    
}

Alles anzeigen

grisu2099

Zitat von Spiderman-21

Habe im jeweiligen Profil im Ordner chrome einen Unterordner css und hier die jeweiligen Codes mit dem Namen "Mehrzeilige Tabreihen.css" abgespeichert.

...und dann in der userChrome.css auch die entsprechende @import-Regel erstellt??

Spiderman-21

Nein, Mist das habe ich vergessen.

2002Andreas

Der Code dürfte eh nicht mehr funktionieren.

Nimm diesen, der passt

https://github.com/Endor8/userChr…e-Tableiste.css

CSS

    @charset "UTF-8"; 
    /* Tabbreite anpassen - fixieren */    
    .tabbrowser-tab:not([pinned]) {
    min-width: 150px !important; 
    max-width: 150px !important; 
    }

    /* Titelleiste verschieben */
    #titlebar { -moz-box-ordinal-group: 2!important;}

    /* Menüleiste nach oben verschieben */
    #toolbar-menubar { position: fixed; display: inline-flex; }
    [sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
    [sizemode="normal"] #toolbar-menubar { top: 1px; }
    [sizemode="maximized"] #toolbar-menubar { top: 8px; }

    /* Platz für die Menüleiste über der Symbolleiste schaffen */
    #main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 39px transparent !important; }
    #main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 34px transparent !important; }

    /* Anderen leeren Bereich, als Menü und Titelleistenschaltflächen zu einem Ziehbereich machen */
    [tabsintitlebar="true"] #navigator-toolbox { -moz-window-dragging: drag; }

    /* Titelleistenschaltfläche nach rechts oben verschieben */
    #navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
    [tabsintitlebar="true"] .titlebar-buttonbox-container { display: block; position: fixed; right: 0; }
    [tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container { top: 1px; }
    [tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container { top: 8px; }
    #navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls { top: 0; }

    /* Auf der rechten Seite Platz schaffen, damit die Schaltflächen der Titelleiste und der Navigationssymbolleiste nicht im Vollbildmodus angezeigt werden */
    #navigator-toolbox[inFullscreen="true"] #nav-bar { padding-right: 109px !important; }

    /* Mehrzeilige Tableiste */
    tabs > arrowscrollbox { display: block; }
    scrollbox[part][orient="horizontal"] {
        display: flex;
        flex-wrap: wrap;
        max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen(Standard = 2 Zeilen) */
        overflow-x: hidden;
        overflow-y: auto; }
    tabs tab[fadein]:not([pinned]) { flex-grow: 1; }
    tabs tab,.tab-background {
        height: var(--tab-min-height);
        overflow: hidden; }
    tab > .tab-stack { width: 100%; }

    /* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,    
       über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechseln */
    scrollbox[part][orient="horizontal"] { -moz-window-dragging: no-drag; }

    /* Drag-Bereich auf der linken und rechten Seite der
       Tab-Leiste ausblenden - verstecken
       Links und rechts → hbox.titlebar-spacer 
       links → hbox.titlebar-spacer[type="pre-tabs"] 
       rechts → hbox.titlebar-spacer[type="post-tabs"] */
    hbox.titlebar-spacer
    ,
    /* Ausblenden - Verstecken */
    #alltabs-button,tabs tab:not([fadein]),
    [class="scrollbutton-up"],[class="scrollbutton-up"] ~ spacer,
    [class="scrollbutton-down"] { display: none; }

Alles anzeigen

Spiderman-21

@ Hi, Andreas.

Ist dieser Tab Code auch für mehrzeilig und unterhalb der Lesezeichensymbolleiste?

Endor

Ja der Code schiebt die Tableiste unter die Lesezeichenleiste und

macht die Tableiste Mehrzeilig.

Mfg.,

Endor

Spiderman-21

Danke.

Habe den CSS Code getestet und auch die Importregel beachtet.

Klappt alles.

Danke Euch.

Endor

Gerne.

:wink:

Mfg.
Endor

grisu2099

Gern geschehen.

Büssen

Hallo,

habe mir mal den Code aus #4 angesehen und ausprobiert, für meine Zwecke noch meinen Code "Tabs rund und farbig" zusätzlich genommen.

Sieht so aus:

Habe ebenfalls das Original (ohne Code Farbige Tabs) ausprobiert. Auch dann werden nach Neustart 4 Tabs (gleichzeitig) aufgerufen.

Ist das gewollt?

Kommando zurück: habe immer Neustart mit Cacheleerung betätigt. Das war wohl der Fehler.

Kompletten Neustart ausgeführt >> Fehler wurde beseitigt! Man lernt wohl immer dazu - aber nie aus!!

Foxfailure

Hallo,

wenn ich die mehrzeilige Tableiste mit den CSS-Codes von Endor8 realisiere, lassen sich einzelne Tabs nicht beliebig mittels Mauszeiger verschieben. Bei mir funktioniert inbesondere nicht, Tabs von links nach rechts oder von einer oberen zu einer unteren Tableiste zu verschieben.

Ist das ein Mangel, der dieser CSS-Lösung innewohnt oder gibt es noch irgendeinen Trick, mit dem ich die Tabs beliebig verschieben kann?

2002Andreas

Zitat von Foxfailure

Ist das ein Mangel, der dieser CSS-Lösung innewohnt

Ja.

Mit einem Script dazu lässt sich das wohl ändern:

Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+)