Multi-Row Tableiste per Userchrome anpassen

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#31

Beitrag von 2002Andreas » Do, 21. Feb 2019 10:46

Höhe und Breite ändern sollte pauschal hiermit im ersten Code funktionieren:

Code: Alles auswählen

#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-min-height_mlt: var(--tab-min-height,25px);
}
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#32

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 11:01

Also, schmaler werden sie (habe min und max width gerade mal auf 100 geändert, jetzt gefällt's ;-) )
Aber wenn ich die tab-min-height auf z.B. 15 ändere tut sich nichts...

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#33

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 11:25

Hast du mit diesen beiden Codes

Code: Alles auswählen

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

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

}
Die "Schließen-Buttons" für alle Tabs eingefügt?

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#34

Beitrag von 2002Andreas » Do, 21. Feb 2019 11:37

Mit diesem:

Code: Alles auswählen

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

}
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#35

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 11:49

ok, kann man den Close-Button noch etwas nach rechts schieben?

Und wie ändere ich die Tabhöhe? - Ging mit tab-min-height nicht...

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#36

Beitrag von 2002Andreas » Do, 21. Feb 2019 11:52

Krabato hat geschrieben:
Do, 21. Feb 2019 11:49
nach rechts schieben?
Teste mit ändern von diesem Wert:

Code: Alles auswählen

.tab-close-button.close-icon{
   margin-right:-2px!important;
}
Krabato hat geschrieben:
Do, 21. Feb 2019 11:49
wie ändere ich die Tabhöhe?
Da fummele ich gerade dran rum, wahrscheinlich muss noch ein max Wert eingetragen werden :-??

PS:
Ich bin aber kein Fachmann dafür :wink:
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#37

Beitrag von 2002Andreas » Do, 21. Feb 2019 11:59

Neuer Versuch:

Code: Alles auswählen

/* 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,18px);
}

.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{
   border:1px solid grey!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: 25px!important;
}

.tab-stack {
  width: 95%;
}

#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-x: collapse !important;
  overflow-y: auto !important;
  min-height: var(--tab-max-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;
}

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

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

#main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
  display: block !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;
}

/*Ungelesene Tabs kursiv*/
/* Italicize inactive tabs */
#TabsToolbar .tabbrowser-tab:not([selected]) {
	font-style: italic !important;
}

/*TABs farblich unterscheiden ANFANG*/
/* Tab, normal */
.tabbrowser-tab .tab-content {
	background: aquamarine !important;
	color: black !important;
}
/* Tab, aktiv */
.tabbrowser-tab[visuallyselected="true"].tab-content {
	background: green !important;
	color: black !important;
}
/* Ungelesenes Tab / Tab, in welchem (noch) kein Link angewählt wurde  */
.tabbrowser-tab[notselectedsinceload="true"] .tab-content {
	background: yellow !important;
	color: black !important;
}
/* Tab, entladen / (noch) nicht geladen */
.tabbrowser-tab[pending="true"] .tab-content{
	background: #B7F4F3 !important;
	color: black !important;
}
/* Letztes Tab */
.tabbrowser-tab[last-visible-tab="true"] .tab-content {
	background: lightseagreen !important;
	color: black !important;
}

/* Tab, aktiv */
.tabbrowser-tab[selected='true'].tab-content {
	background: #F465B4 !important;
	color: black !important;
}

/* Das Tab vor dem aktiven Tab > Wozu das gut sein soll, weiss ich nicht... */
.tabbrowser-tab[beforeselected-visible="true"].tab-content{
	background: rebeccapurple !important;
	color: black !important;
}
/*TABs farblich unterscheiden ENDE*/

.tab-line[selected="true"],.tab-line:not([selected="true"]) {
   display:none!important;
}

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

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

}

/*NEU**** für Tableiste unter anderen Leisten*/
/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 40px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-

bar {
  margin-top: 6px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 10px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 18px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) 

.titlebar-buttonbox-container {
  top: 4px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-

version:windows-win7) {
	/* set to '0', if no menubar is used */
	#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 8px !important;
	}
	/* set to '0', if no menubar is used */
	#main-window[tabsintitlebar][sizemode="maximized"]:not

([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 4px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
	  top: 8px !important;
	}
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-

container {
	  top: 0px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not

([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 8px !important;
	}
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) 

.titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ 

#TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-

buttonbox-container {
	  display: none !important;
	}
  }
  @media not all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-

container {
	  top: -8px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not

([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not

([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-

menuactive="true"]:not([disabled="true"]) {
	background-color: Highlight !important;
	color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/*NEU**** für Tableiste unter anderen Leisten - ENDE*/
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#38

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 12:12

Jetzt ist die Höhe super! - was hast du jetzt geändert?

Die angepinnten Tabs könnten noch etwas kleiner(in der Breite) werden...

Wenn ich jetzt 3 Tableisten öffne, sind aber nur 2 sichtbar die dritte kann nur über scrollen erreicht werden...
Obwohl ich doch gleich oben am Anfang die tabs-lines: 3 drin habe...

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#39

Beitrag von 2002Andreas » Do, 21. Feb 2019 12:17

Krabato hat geschrieben:
Do, 21. Feb 2019 12:12
was hast du jetzt geändert?
Ich habe aus:
--tab-min-height_mlt: var(--tab-min-height,25px);

jetzt:
--tab-max-height_mlt: var(--tab-max-height,18px);
gemacht, und überall dann den Code angepasst.
Krabato hat geschrieben:
Do, 21. Feb 2019 12:12
oben am Anfang die tabs-lines: 3 drin habe.
Ändere das bitte mal auf 6
Krabato hat geschrieben:
Do, 21. Feb 2019 12:12
Die angepinnten Tabs
Muss ich sehen ob ich dafür auch eine Lösung finde.
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#40

Beitrag von 2002Andreas » Do, 21. Feb 2019 12:27

Krabato hat geschrieben:
Do, 21. Feb 2019 12:12
Die angepinnten Tabs
Teste bitte mal, noch schmaler bekomme ich die nicht:

Code: Alles auswählen

.tabbrowser-tab[pinned] {
	max-width:40px!important;
}

.tabbrowser-tab[pinned] .tab-icon-image{
	margin-left:-5px!important;
}
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Benutzeravatar
milupo
Senior-Mitglied
Beiträge: 5741
Registriert: Fr, 27. Okt 2006 22:25

Re: Multi-Row Tableiste per Userchrome anpassen

#41

Beitrag von milupo » Do, 21. Feb 2019 20:42

Boersenfeger hat geschrieben:
Do, 21. Feb 2019 7:03
Zur Beruhigung: bis zur Zeit einschließlich Firefox 67 Nightly funktionieren Codes und Scripts :)
So pauschal kann man das nicht schreiben. Du wirst ja nicht all die vielen Skripte getestet haben, sondern nur die, die du verwendest. :-)
Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#42

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 22:09

ok, habe jetzt alles eingepflegt. Die angepinnten Tabs sind jetzt fast ein bischen zu klein ;-)
Ich werde an den beiden Zahlen nochmal rumspielen und ausprobieren.

Die Reihen-Anzahl habe ich auf 6 geändert... aber, jetzt ist mein Scrollbalken weg, der eigentlich nach bereits 3 Zeilen erscheinen soll.
Ich möchte gerne mehr als 3 Reihen haben können, aber nur 3 oder 4 davon anzeigen lassen, der Rest wird durch scrollen erreicht... von daher muss ich doch den Wert wieder auf 3 ändern?!

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#43

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 22:16

Und jetzt überlagern sich die Menüleiste und die Eingabezeile....
Dateianhänge
überlagerung.JPG

Benutzeravatar
2002Andreas
Moderator
Beiträge: 40980
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Multi-Row Tableiste per Userchrome anpassen

#44

Beitrag von 2002Andreas » Do, 21. Feb 2019 22:23

Die Titelleiste muss dabei ausgeblendet sein.

Ansonsten:

Bei diese beiden Änderungen im obersten Code werden mir 3 Leisten angezeigt, und erst danach entsteht ein Scrollbalken.

Code: Alles auswählen

#tabbrowser-tabs{
  --tabs-lines: 4; /*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,20.2px);
}
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Krabato
Mitglied
Beiträge: 63
Registriert: Mo, 18. Feb 2019 22:24

Re: Multi-Row Tableiste per Userchrome anpassen

#45

Beitrag von Krabato Themen-Starter » Do, 21. Feb 2019 22:51

Titelleiste ist weg - alles super!

Habe Deinen Code jetzt nochmal reinkopiert, jetzt ist es wie bei Dir!

@2002Andreas: Danke vielmals für die Hilfe!!!

Den Punkt mit der roten, kursiven Schrift und den abgerundeten Ecken werde ich erstmal lassen, da das mit den Tab-Hintergrundfarben ja schon sichtbar ist.

Jetzt muss ich mich noch an das Verschieben der Tabs innerhalb der Tableisten machen. Da graut mir noch etwas vor... Aber wenn ich nicht weiterkomme, melde ich mich ;-)

Antworten

Wer ist online?

Mitglieder in diesem Forum: milupo und 4 Gäste