Firefox CSS Trapezförmige Tabs: arrowscrollbox wird zu früh angezeigt

birdskywinter

Cadet 4th Year
Dabei seit
Juni 2019
Beiträge
97
Hallo,

ich verwende dieses Script um Trapezförmige Tabs zu erzeugen (wie beim alten google chrome design)
CSS:
/*maximale Tab Breite festlegen*/
    .tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 200px !important;
    }

  .titlebar-spacer {
    display: none !important;
}

#tabbrowser-tabs {
  /*max-height:22px !important;*/
  margin-left:-1px !important;
  /*margin-top:10px;*/
  border:0px !important;

}

/* Vertikale 1px Linie vor erstem Tab entfernen*/
    .titlebar-placeholder {
    border: none !important;
    }

/*Veritkale 1px Linie Hinter Tabs entfernen*/
    .tabbrowser-tab::before,.tabbrowser-tab::after {
    border: none !important;
    }

/*remove top line of active tab*/
    .tab-line {
    display: none !important;
    }


/*Tabs aussehen*/
    .tab-background {
    /*workaround für verpixelte Tabkanten*/
        outline: 1px solid transparent;
       

    /*Tabform erzeugen */
        -moz-transform: perspective(100px) rotateX(30deg) !important;
        /*width:90% !important;*/

    /*Hintergrundfarbe inaktiver Tab*/
        background-color:#cfcfcf;
 
    /*Border um Tabs*/
        border:2px solid /*#9b9b9b*/ /*#525252*/ #2eb9ce !important;
 
    /*untere Tab Border entfernen*/
        border-bottom:0px solid #2eb9ce !important;
}

/* Change tab load animation to spinning wheel */
    .tab-throbber[busy]::before {
    background-image: url("chrome://global/skin/icons/loading.png") !important;
    animation: unset !important;
    }
    .tab-throbber[busy]:not([progress])::before {
    /* Grays the blue during "Connecting" state */
    filter: grayscale(100%);
    }
    @media (min-resolution: 2dppx) {
    .tab-throbber[busy]::before {
    background-image: url("chrome://global/skin/icons/loading@2x.png") !important;
    }
    }
   
/*/_________TAB_OVERFLOW_FIX________/*/



/* Gleicher Abstand zum ersten Tab wenn Firefox maximiert ist */
    #main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
    padding-left: 48px !important;
    }

.tab-loading-burst[bursting]::before {
  animation: unset !important;
}



.tabbrowser-arrowscrollbox {
    overflow: hidden;
}
Nur leider wird dann die arrowscrollbox viel zu früh angezeigt und nicht erst wenn sehr viele Tabs offen sind (im Screenshot sind nur 6 Tabs offen). Hat jemand eine Idee wie man das beheben kann?
 

Anhänge

2002Andreas

Cadet 4th Year
Dabei seit
Feb. 2017
Beiträge
92
Wenn ich oben die Breite auf 100px verändere:

CSS:
/*maximale Tab Breite festlegen*/
    .tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 100px !important;
    }
Dann passen hier 14 Tabs nebeneinander.

Zwischenablage01.png
 

birdskywinter

Cadet 4th Year
Ersteller dieses Themas
Dabei seit
Juni 2019
Beiträge
97
Das ist ja nun am Sinn des ganzen vorbei.
Das Problem ist das die Skalierung nicht richtig funktioniert.
 
Top