Absolut notwendige Einträge für die mehrzeilige Tableiste (und nur dafür)

ActrosHasser

Hallo an die Communitiy!

Den Code für die mehrzeilige Tableiste habe ich von diesem Posting.

Jetzt habe ich mal die auskommentierten Zeilen großteils aus der userChrome.css gelöscht, da ich mir die kompletten Anpassungen in einzelne (Unter)-css-Dateien packen will (sollte ja besser sein).

Jetzt frage ich mich (und natürlich auch die Community ) welche der Zeilen in meiner userChrome.css absolut notwendig sind, damit die mehrzeilige Anzeige grundsätzlich funktioniert. Nachdem die Anpassung der mehrzeiligen Tableiste für mich passt, kommt auch dieser Code in eine eigene "Unter-"-css.
Dinge wie "Farben der Tabs", "abgerundete Tabs" usw. würde ich aber gerne in weiteren (Unter)-css-Dateien einstellen.

Zumindest teilweise habe ich diverse Änderungen schon getestet und mit dem "@ import url" in die "Haupt"-css eingefügt - wegen der weiteren Tests sind diese Zeilen momentan natürlich auskommentiert. (step by step)

Interessant wäre für mich auch eine Erklärung, was welcher Eintrag macht, damit ich das Ganze ein bisschen besser verstehe (ev. mit weiterführenden Links).

Gelesen habe ich schon mal die Anpassungen mittels userchrome und die Anleitung Inspektor. Danke an milupo für die doch recht einfachen Erklärungen.

Soweit die Einleitung - hier der Inhalt meiner momentanen userChrome.css:

CSS

/* Mit diesen Zeichen am Anfang und Ende wird ein Kommentar gekennzeichnet */




/* @import url("CSS/Aktiver Tab Farbaenderung.css"); */
/* @import url("CSS/Tabladering.css"); */


/* @import url("CSS/Ordnericon Lesezeichen.css"); */




/* @import url("CSS/mehrzeilige Lesezeichenleiste.css"); */ /* funktioniert noch nicht */














/* Dieser Kommentar ist als reines Beispiel für anderen Text im Posting gedacht. ;-) */

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */






/* -----------------------------*/
/* Tabs-Toolbar */
/* -----------------------------*/
#TabsToolbar:not(:-moz-lwtheme){
color: black !important;
margin-top: -11px !important;
}
#TabsToolbar:-moz-lwtheme {
margin-top: -10px !important;
}
#TabsToolbar{
margin-bottom: 0px !important;
padding-top: 10px !important;
}


#menubar-items :not([fokus]), #tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
/* TabLabel settings */
.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;
}
/* hide tab-line */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* hide tab separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/*------------------*/
/* Tab-Background */
/*------------------*/
/*--- 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;
}
/* ----------------------------*/
/* Mehrzeilige Tabreihen */
/* ----------------------------*/
/* Die angezeigte Scrollbar, bewegt sich mit dem Mausrad, wenn die Anzahl der Tabreihen um mehr als die angegebene Anzahl erhöht wird */
/*tabs > arrowscrollbox > scrollbox{ -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") ; }*/
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
.tab-throbber, .tab-icon-image {
margin-top: 0px !important;
}
.tabbrowser-tab:not([pinned]) {
min-width: 180px !important; /* Feste Breite des einzelnem Tabs (Originalwert 100px) (passender Wert 150px)*/
}
/* tabs right position */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block !important;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important;
max-height: calc( 3 * 30px ) !important; // 3 Rows
-moz-window-dragging: no-drag !important;
}




/* Button for scrolling tabs to the left */
.scrollbutton-up{
display: none;
}
/* Button for scrolling tabs to the right */
.scrollbutton-down{
display: none;
}
/* TabClose hidden */
/* .tabbrowser-tab .tab-close-button { */ /* nachträglich auskommentiert */
/* visibility: collapse !important; */ /* nachträglich auskommentiert */
}
/* Height for '+'-Button (newtab) */
.tabs-newtab-button {
vertical-align: bottom !important;
height: var(--tab-min-height:) !important;
}
/*Drop-down menu for all tabs */
#alltabs-button{
display: none;
}

Alles anzeigen

Mir persönlich würden die Angaben der Zeilennummern ausreichen (z. B.: Lösche die Zeilen 3, 4, 8, 17 - 29 da sie (hier) nur unnötige Leerzeilen sind, auch die Zeile 30 kann gelöscht werden - wegen dem mehr oder weniger sinnvollen Kommentar )

Auch bei Änderungen wäre für mich die Zeilennummer ausreichend (z.B.: Ändere in der Zeile 44 von "black" auf "green").

Da ich mir jetzt nicht sicher bin, ob meine Fragen im obigen "Geschreibsel" klar verständlich waren, hier nochmals die Fragen:

1. Welche Zeilen im css-Code sind für die reine Funktion der mehrzeiligen Tableiste absolut erforderlich - und welche Zeilen sind rein optische Anpassungen?

2. Welche Bedeutung haben die verschiedenen Einträge (vielleicht gibt es ja hilfreiche (idealerweise deutschsprachige) Links zum "Selbststudium"). Tante Google liefert da leider nicht so gute Ergebnisse. Das erste Beispiel was mir nicht ganz klar ist, betrifft die Zeilen 32 und 33. Wieso muß diese Angabe erfolgen? Wenn sich die Person, die den betreffenden Code geschrieben hat, an die entsprechenden Regeln hält, dann ist die Angabe doch zwecklos - oder?
Ein weiteres Beispiel welches mir nicht ganz klar ist, betrifft die Zeilen 43, 47 und 50. In Zeile 43 steht nach "#TabsToolbar" noch "not(:-moz-lwtheme)", in Zeile 47 steht nach "#TabsToolbar" nur ":-moz-lwtheme" und in Zeile 50 kein "-moz-lwtheme" zu finden. Wieso eigentlich?
Sofern ich die Anleitung von milupo richtig verstanden habe, dann werden hier für den Identifikator "TabsToolbar" in Abhängigkeit von "-moz-lwtheme" verschiedene Werte für beispielsweise eine Farbe festgelegt - oder?

Vielen Dank schon mal für Antworten!
Es gibt dann noch einige weitere Fragen von mir. Einige werden (gerade noch) hier dazupassen, bei anderen Fragen muß ich dann neue Themen erstellen. Step by step .

Lg vom ActrosHasser

2002Andreas

Zeile 139 bis einschl. Zeile 173 sind nur für die mehrzeilige Tableiste.

CSS

/* Mehrzeilige Tabreihen */
/* ----------------------------*/
/* Die angezeigte Scrollbar, bewegt sich mit dem Mausrad, wenn die Anzahl der Tabreihen um mehr als die angegebene Anzahl erhöht wird */
/*tabs > arrowscrollbox > scrollbox{ -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") ; }*/
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
.tab-throbber, .tab-icon-image {
margin-top: 0px !important;
}
.tabbrowser-tab:not([pinned]) {
min-width: 180px !important; /* Feste Breite des einzelnem Tabs (Originalwert 100px) (passender Wert 150px)*/
}
/* tabs right position */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block !important;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important;
max-height: calc( 3 * 30px ) !important; // 3 Rows
-moz-window-dragging: no-drag !important;
}

Alles anzeigen

ActrosHasser

2002Andreas Vielen Dank! Das klappt schon mal!

Ein Teil ist erledigt. Doch der nächste folgt sogleich. (Frei nach irgendeinem Autor )

Dazu habe ich einen Screenshot angehängt. Kann man hier unterschiedliche Tabbreiten definieren, die sich irgendwie automatisch einstellen?

Im Screenshot habe ich verschiedene Farbmarkierungen gesetzt. Einmal Gelb mit der Nummer 1 und dann noch Pink mit der Nummer 2.

Ich würde es gerne haben, daß die Tabs mit gelber Markierung (1) (und weitere Tabs mit ähnlicher Textlänge) etwas schmäler sind. Die Tabs mit der pinken Markierung (2) würden mit der (festen) Breite von 180 passen. Bei den gelb markierten Tabs ist ja zwischen dem letzten Buchstaben des Seitentitels und dem Symbol der Stummschaltung freier Platz. Wenn man hier den rechten Rand des Tabs nach links verschieben könnte, dann hätten natürlich mehr Tabs in der Zeile Platz. Es kann natürlich sein, daß das nicht funktionieren wird - dann hab ich halt Pech gehabt.

Hmm, stellt sich jetzt nur noch die Frage, ob das jetzt noch zur grundsätzlichen Funktion, oder doch schon zur Optik zählt - denn das möchte ich ja dann in einer extra css machen.

Edit: (zusätzlich zur Angabe des Bearbeitungsgrundes) *selbstsarkassmus on* Tja, dieses blöde "@" Zeichen. Wenn man nicht daran denkt, dieses Zeichen und einen Namen zu verwenden. *selbstsarkassmus off*

Sören Hentzschel

Zitat von ActrosHasser

Ich würde es gerne haben, daß die Tabs mit gelber Markierung (1) (und weitere Tabs mit ähnlicher Textlänge) etwas schmäler sind.

Schau doch mal in dein CSS. Es ist sogar an der entsprechenden Stelle kommentiert.

ActrosHasser

Zitat von Sören Hentzschel

Es ist sogar an der entsprechenden Stelle kommentiert.

Wenn ich es richtig verstehe, dann gilt diese Angabe aber nur für alle Tabs im Fenster. Oder kann man die betreffende Zeile mehrfach mit unterschiedlichen Werten verwenden?

Mein Wunsch wäre, daß der 1. Tab z.B. 100 Pixel breit ist, der nächste Tab hat dann eine Breite von 200 Pixel, der 3. Tab ist dann 180 Pixel breit, usw. (aber es ist immer abhängig davon, wie lang bzw. kurz der Text ist.).

Ich habe es gerade so ausprobiert:

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

min-width: 100px !important; /* Zusätzlicher Test (passender Wert 150px)*/

min-width: 150px !important; /* Feste Breite des einzelnem Tabs (Originalwert 100px) (passender Wert 150px)*/

min-width: 200px !important; /* Zusätzlicher Test (Originalwert 100px) (passender Wert 150px)*/

}

Das funktioniert leider nicht bei mir. Da haben alle Tabs die letzte angegebene Breite (200).

Ich hänge jetzt noch ein Bild an, in dem ich unterhalb ungefähr "gezeichnet" habe, wie ich es gerne hätte.

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Sören Hentzschel

Vielleicht hätte ich das in meinem letzten Beitrag dazu schreiben sollen: Der Kommentar ist falsch. Die Eigenschaft heißt min-width und das heißt übersetzt minimale Breite, nicht feste Breite. Mit dem Code im letzten Beitrag definierst du dreimal die minimale Breite, die letzte Zeile gewinnt. Also sind alle Tabs Minimum 200px breit. Wenn du nur 60px definierst, dann sind Tabs auch nur Minimum 60px Breit und Tabs, die mehr Platz benötigen, sind breiter.

Ich bin jetzt aber nur vom Code ausgegangen, der bereits so genutzt wird, ich habe es nicht getestet. Wenn das so nicht klappt, dann hat der Code meines Erachtens bereits vorher nicht so funktioniert, wie er gedacht war.

BrokenHeart

ActrosHasser : Ich denke, dass das, was du dir vorstellst, in CSS überhaupt nicht möglich ist (lasse mich gern eines besseren belehren). Unterschiedliche Breiten für die einzelnen Tabs in Abhängigkeit von der Textlänge könnte man vielleicht mit JavaScript realisieren, wenn man den entsprechenden Event zur Darstellung des Seitentitels im Tab abfragt. Allerdings frage ich mich, ob das wirklich sinnvoll wäre, da sich ja der Seitentitel oft mehrmals (z.B beim Laden des Inhalts) ändern kann und es dann zu einem ständigen Nachjustieren der Größe des entsprechenden Tabs und damit zum Verschieben aller nachfolgenden Tabs kommen würde.

Sören Hentzschel

Zitat von BrokenHeart

Ich denke, dass das, was du dir vorstellst, in CSS überhaupt nicht möglich ist (lasse mich gern eines besseren belehren)

Sicher.

Wie gesagt, dafür gibt es ja min-width. Man muss halt schauen, woher die Breite kommt, weil das alleine nicht reicht und die Tabs trotzdem mehr Platz einnehmen. Das habe ich gerade mal schnell geschaut. Man muss im gleichen Element noch -moz-box-flex: 0 !important; setzen. Das ist im Firefox-Code nämlich auf 200 gesetzt.

BrokenHeart

Zitat von Sören Hentzschel

Man muss im gleichen Element noch -moz-box-flex: 0 !important; setzen. Das ist im Firefox-Code nämlich auf 200 gesetzt.

Ja, stimmt. Habe es gerade in der Entwicklungsumgbung ausprobiert. Hätte ich vielleicht vorher mal nachschauen sollen.

Bei mir steht übrigens bei moz-box-flex: 100. (FF68).

Finde diese Anpassung trotzdem, wie weiter oben beschrieben, nicht optimal, da die Tabs sich bei geändertem Seitentitel immer wieder verschieben. Aber das ist wohl Geschmackssache...

ActrosHasser

Sören Hentzschel Danke für Deine Antworten. Dann wäre der Kommentar leider auch schon in diesem Thema falsch - denn von dort habe ich den (Grund)Css-Code. Momentan ist für mich nur wichtig, daß ein Kommentar dort steht, damit ich weiß, wo ich die Breite des Tabs anpassen kann.

BrokenHeart Danke für Deine Antwort. Ich möchte es einfach mal austesten, um zu sehen, wie es für mich aussieht - ändern kann ich es dann immer noch. Die ersten beiden Tabs (Messenger bzw. Facebook) von meinem Bild bleiben (übrigens) immer die Gleichen - in diesem Profil.

Edit: Einen Teil gelöscht, da es sich bei der Frage doch um eine optische Anpassung handelt, und es sich dann durch ein neues Thema um ein Crossposting handeln würde.

Sören Hentzschel Kann dieses Thema dann bitte geschlossen werden?