Breite Tabs und Mehrzeilig

Fox2Fox

Endlich das Update auf 66.0.5 gemacht.

Tab_mehrzeilig_Breite_und_Höhe_verringern.css hat mit der aktuellen Version Probleme gemacht, also habe ich die CSS rausgeschmissen. Das hat die Tabs in der Höhe verringert, war also geringer als die Tableiste. Mehrere Tabs hatten verschiedene Höhen.

CSS

.tabbrowser-tab{
	margin-right:20px!important;
    max-height: 40px!important;
    -moz-box-flex: 0!important;
    width: 126px!important;
}

	:root {
  --tab-min-height: 30px !important;
}


.tab-stack {
  width: 90%!important;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex!important;
  flex-wrap: wrap!important;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(5*var(--tab-min-height)) !important; /* 5 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
	margin-right:-20px!important;
  overflow: visible!important; 
  display: block!important;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag;
}

Alles anzeigen

Jetzt sieht ein einzelner Tab sehr breit aus und die Breite variiert, je nachdem, wie hoch die Anzahl der geöffneten Tabs ist. Je mehr Tabs, desto schmaler wird der einzelne Tab. Damit könnte ich noch leben, aber vielleicht ist eine Anpassung möglich.

Sieht so aus:

[attachment=0]A2.jpg[/attachment]

Drei Tabs nehmen die halbe Breite der Tableiste in Anspruch.

Frage:
Können die Tabs eine feste Breite bekommen?
Kann die Tabsleiste wieder mehrzeilig werden?

2002Andreas

Teste bitte mal:

CSS

/* Tableiste mehrreihig */


#tabbrowser-tabs{
--tabs-lines: 3; /*Angezeigte Leisten, bei mehr wird eine Scrollbar eingeblendet, oder den Wert erhöhen*/
--tab_min_width_mlt: 120px;/* Mindeste Tabbreite */
--tab_max_width_mlt: 120px;/* Maximale Tabbreite */
--tab-max-height_mlt: var(--tab-max-height,25px);
}
/*Tableistenabstände*/


#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
margin-bottom:-16px !important;
margin-top:-15px !important;
margin-left:3px !important;
}


.tabbrowser-tab .tab-content {
border:1px solid grey!important;
}


.tabbrowser-tab[pinned] .tab-icon-image{
margin-left:-5px!important;
}


.tab-close-button.close-icon{
margin-right:-10px!important;
}


/* Tab schließen Button dauerhaft auf allen Tabs anzeigen, ansonsten auskommentieren*/


.tab-close-button.close-icon{
display: -moz-box !important;
}


.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;
}


.tabbrowser-tab[fadein]:not([pinned]) {
flex-grow: 1;
min-width: var(--tab_min_width_mlt) !important;
max-width: var(--tab_max_width_mlt) !important;
}


.tabbrowser-tab,.tab-background {
min-height: var(--tab-max-height_mlt);
}


.tabs-newtab-button {
margin-left:-2px!important;
vertical-align: bottom !important;
height: var(--tab-max-height_mlt);
}


.tab-stack {
width: 98% !important;
}


#tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: collapse !important;
overflow-y: auto !important;
min-height: var(--tab-min-height_mlt);
max-height: calc( var(--tabs-lines) * var(--tab-max-height_mlt); ) !important;
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow-x: collapse;
overflow: visible;
display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
display: none;
}


#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-max-height_mlt) * var(--tabs-lines));
}


.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
opacity: 0 !important;
}


#tabbrowser-tabs * {
overflow-x: none !important;
}


#tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 4px !important;
}


#TabsToolbar[currentset^="tabbrowser-tabs,new-tab-button"] #tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 10px !important;
}


#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag !important;
}


#main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
display: block !important;
}

Alles anzeigen

Fox2Fox

Ist schon fast gut.

Aber das Schließkreuz auf dem Tab hätte ich gerne ausgeblendet. Kann man das noch in die CSS einbauen?

[attachment=0]A3.jpg[/attachment]

2002Andreas

Im Code:

/* Tab schließen Button dauerhaft auf allen Tabs anzeigen, ansonsten auskommentieren*/

.tab-close-button.close-icon{
display: -moz-box !important;
}

oder display:none !important draus machen

Fox2Fox

Sorry - habs gesehen.

Kann man den Rahmen im Tab ausblenden?

2002Andreas

Zeile 19...

.tabbrowser-tab .tab-content {
border:1px solid grey!important;
}

entfernen und testen.

Fox2Fox

Zitat von 2002Andreas

Zeile 19...

Rahmen ist weg.

Noch ein anderes Problem.

Ab der 3. Tabreihe siehts so aus

[attachment=0]A4.jpg[/attachment]

2002Andreas

In Zeile 7

--tab-max-height_mlt: var(--tab-max-height,25px);

verändere bitte mal den Wert, egal ob größer oder kleiner...zwecks Test.

Fox2Fox

Mit

Code

--tab-max-height_mlt: var(--tab-max-height,15px);

siehts so aus. Obwohl 3 Tabreihen geöffnet sind.

[attachment=1]A5.jpg[/attachment]

Mit

Code

--tab-max-height_mlt: var(--tab-max-height,35px);

siehts so aus

[attachment=0]A6.jpg[/attachment]

2002Andreas

Ich weiß nicht was das immer bei dir ist :wink::-??

Hier sieht das so aus mit 3 Reihen.

[attachment=0]Screenshot (342).png[/attachment]

Fox2Fox

Zitat von 2002Andreas

Ich weiß nicht was das immer bei dir ist :wink::-??

Das weiß ich auch nicht. :mrgreen:

Zitat

Hier sieht das so aus mit 3 Reihen.

Du hast ja auch einen Scrollbalken. Wobei ich keinen Balken habe und auch nicht möchte.

Werde morgen mal weiter testen. Vielleicht gibt es ja einen Konflikt mit anderen CSS

2002Andreas

Zitat von Fox2Fox

Du hast ja auch einen Scrollbalken. Wobei ich keinen Balken habe und auch nicht möchte.

Stellt sich die Frage, warum du die nicht hast :-??

Zitat von Fox2Fox

einen Konflikt mit anderen CSS

Könnte gut sein.

milupo

Zitat von 2002Andreas

Ich weiß nicht was das immer bei dir ist :wink::-??

Könnte es ein Rolle spielen, ob die Titelleiste eingeblendet ist oder nicht?

milupo

Zitat von 2002Andreas

Stellt sich die Frage, warum du die nicht hast :-??

Laut CSS-Datei erscheint ab 4 Reihen ein Scrollbalken, es sei denn irgendein Wert wird erhöht. Ich weiß nicht welcher.

2002Andreas

Eben mal getestet, macht keinen Unterschied bezüglich Titelleiste.

2002Andreas

Zitat von milupo

irgendein Wert wird erhöht. Ich weiß nicht welcher.

--tabs-lines: 3;

Bei 4 wird bei 3 Tabreihen kein Scrollbalken angezeigt.

Fox2Fox

Habe jetzt den Wert eingestellt

Code

--tabs-lines: 4;

und damit 3 Tabreihen. Die Darstellung ist dann OK.

Aber ich habe noch ein anderes Problem, ~~seit ich den Code aus #2 benutze :~~
Sorry, habe mich vertan.
Auch wenn ich die CSS aus #2 lösche, gibt es das Problem mit der LZ-Symbolleiste.

Die LZ in der LZ-Symbolleiste sind nur dann anklickbar, wenn ich mit der Maus von unten mehr als die Hälfte überfahren habe. In der ersten unteren Hälfte wird der Mauszeiger also nicht erkannt. Ich muss über die Hälfte fahren, dann kann ich klicken.

Die LZ-Symbolleiste sieht im Anpassmodus so aus. Da sieht man, dass der Schriftzug "Lesezeichensymbolleiste" zu hoch ist und nicht mittig.

[attachment=0]A7.jpg[/attachment]

Habe 2 CSS, die mit der Lesezeichensymbolleiste zu tun haben.

LZ-Symbolleiste_Höhe.css

CSS

#PlacesToolbar{
	margin-bottom:-2px!important;
}

LZ-Symbolleiste_mehrreihig.css

CSS

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/




/* NOTE  ********************************************************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */


/* import old button/bookmark size code *************************************************/
@import "./../buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css";


:root {
  --bookmark_items_height: 26px; /* <- bookmark items - line height */
  --bookmark_items_lines: 7; /* <- maximum amount of lines */
}


#PersonalToolbar {
  min-height: var(--bookmark_items_height) !important;
  max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}


#PlacesToolbar,
#PlacesToolbarItems {
  overflow: visible;
  display: block;
}


#PlacesToolbarItems > .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap; 
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}


#personal-bookmarks {
  display: block;
}


#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}


#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left: 0px;
  right: 0px;
  width: 100%;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x: visible;
  overflow-y: visible;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display: block;
}


#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}


#personal-bookmarks #PlacesToolbar .chevron{
  visibility: collapse;
}


#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}


#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}


#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  vertical-align: middle;
}
/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
*/
#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}


#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}


#navigator-toolbox #PersonalToolbar { 
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}

Alles anzeigen

Da ich nicht an den Werten fummeln möchte, kann mir vielleicht jemand mitteilen, wie die LZ in der Symbolleiste wieder mittig werden bzw. auch an Höhe gewinnen können

Fox2Fox

Damit mein edit nicht untergeht:

Zitat von Fox2Fox

Aber ich habe noch ein anderes Problem, ~~seit ich den Code aus #2 benutze :~~
Sorry, habe mich vertan.
Auch wenn ich die CSS aus #2 lösche, gibt es das Problem mit der LZ-Symbolleiste.

Mache jetzt einen neuen Thread auf.