Menübereich farblich anpassen

Bastler

Zitat von Grisu2099

Frag mich nicht, warum

Gleiche Dichte Einstellung wie imebro?
Dein Code setzt auch den Button 18x18, der von imbro 16x16

dharkness21

Zitat von Grisu2099

Selektierter Tab mit gleicher Anpassung:

Hm, sieht bei absolut nicht so verschoben aus, ich habe mein CSS so ↓ aufgebaut.

CSS

.tab-close-button {
    border-radius: 0 !important;
    border: 0 !important;
    background-color: #F20 !important;
    color: #FFF !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
}
.tab-close-button:hover {
    background-color: #800 !important;
    color: #FFF !important;
}

Alles anzeigen

Es spielt absolut keine Rolle, welche Tab selektiert ist, der Schließen-Button ist nicht verschoben, hast irgendwie Dein padding im Tab versemmelt?

dharkness21

Zitat von Bastler

Dein Code setzt auch den Button 18x18, der von imbro 16x16

Das sollte beim margin keine Rolle spielen, einmal generell angepasst, sollte die Anpassung sowohl für selektierte aus auch für nicht selektierte Tabs gelten.

imebro

Hmmm... jetzt bin ich doch etwas sehr verwirrt...

Bie dharkness21 steht immer .tab-close-button. Bei mir steht da .tab-close-icon.

Und das .tab-close-button:hover habe ich überhaupt nicht in meinem CSS.

Ich stelle hier nochmal meinen kompletten Code für das Kreuz-Icon ein. Vielleicht klärt es sich dann, denn ich weiß gerade nicht, was ich nun ändern soll, da die Code-Bezeichnungen ja bei mir anders sind. Aber vielleicht kapiere ich ja auch was nicht

CSS

/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-icon {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-icon-image {
	margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-icon {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0px 4px 0 -3px !important;
}

Alles anzeigen

Wie gesagt, ist das kleine Springen des Kreuzes um vielleicht 1/2 mm nicht wirklich schlimm und das mit diesem "Schatten" ja auch nicht.
Aber dennoch würde ich nun gerne wissen, woran das Problem noch liegt - einfach auch, um was dazu zu lernen

Grüße und vielen Dank an Euch 3 again...
imebro

Grisu2099

Hast du denn die von mit gepostete Variante mal bei dir getestet (anstelle deines Codes)?

dharkness21

Zitat von imebro

Wie gesagt, ist das kleine Springen des Kreuzes um vielleicht 1/2 mm nicht wirklich schlimm und das mit diesem "Schatten" ja auch nicht.

Ich denke, das Dein Problem deshalb entsteht, weil Du die Anpassungen auf das Icon/Image des Buttons legst und nicht auf den Button selbst, verwende doch mal mein CSS und ändere es für Dich passend.

imebro

Hallo,

ja, ich habe Deinen Grisu2099 Code auch ausprobiert und auch den Tipp von dharkness21 berücksichtigt.

Nun sieht mein Code so aus und hier springt das Kreuz nicht mehr:

CSS

/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 3px 0 -3px !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
	/* margin: 0px 4px 0 -3px !important; */
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 4px 0 -3px !important;
}

Alles anzeigen

Das erste margin von 4 auf 3px verringert und das zweite margin auskommentiert. Und natürlich "icon" durch "button" ersetzt. So gehts.

Jetzt muss ich nur noch schauen, wieso die Schrift innerhalb der Tabs noch springt, wenn man einen Tab wechselt.
Sobald man auf einen Tab geklickt hat, springt die Schrift etwas nach unten.
Werde morgen mal versuchen, in dem entspr. Code-Bereich ein margin bei der dritten Zahl auch um 1 px zu verringern... muss dann nur noch schauen, wo ich das mache. Aber erst mal schlafen

Danke Euch und schöne Grüße,
imebro

Bastler

Zitat von imebro

Das erste margin von 4 auf 3px verringert
-------------
und das zweite margin auskommentiert

a) Nimm dort beide Zeilen mit margin ganz raus, dann sitzen die [X] besser.
--------------
b) Das kann auch komplett weg, da steht jetzt ein Bezeichner ohne Parameter.

Zitat von imebro

wieso die Schrift innerhalb der Tabs noch springt

Kommentiere folgendes aus, oder besser entfernen, dann ist Ruhe.

.tabmail-tab:not([selected]) .tab-label-container {
margin: -4px 0 0 !important;
}

imebro

Danke Dir Bastler für Deine Hilfe.

Ich habe jetzt die o.g. Zeilen auskommentiert und zunächst beide margin-Angaben ebenfalls.
Das passte jedoch nicht. Dann habe ich lange hin- und her probiert und jetzt bleibt die Schrift schon mal an gleicher Stelle.

Allerdings springt nun das [x] einen Tick nach links. Hier nochmal der aktuelle Code:

CSS

/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	/* margin: 0 3px 0 -3px !important; */
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
	margin: 1px 0px 0px 0px !important; 
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 20px !important;
	height: 20px !important;
	/* margin: 0 4px 0 -3px !important; */
}

Alles anzeigen

Vor allem habe ich mit der Code-Zeile 11 aus dem obigen Block lange herum experimentiert. Aber das Kreuz springt noch immer ca. 1 - 2 px nach links. Das bekomme ich nicht weg.

Schöne Grüße,
imebro

Bastler

Wenn unterschiedliche Werte für [selected], not([selected]) oder hover existieren, oder nur einer definiert ist,
und andere nicht, kann es auch keine stabilen Ansichten geben.

dharkness21

Zitat von imebro

Allerdings springt nun das [x] einen Tick nach links. Hier nochmal der aktuelle Code:

Das ist teilweise doppelt gemoppelt, gekürzt und in eine vernünftige Reihenfolge gebracht, sollte das ↓ reichen.

CSS

/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tabmail-tab .tab-close-button {
	height: 20px !important;
	width: 20px !important;
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	margin: 1px 0 0 0 !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
	background-color: #ecd0de !important;
}

Alles anzeigen

Beide Einträge mit .tabmail-tab versehen und der 2te Eintrag erbt das CSS des 1sten Eintrag und man braucht für den 2ten Eintrag nur das wirklich relevante überschreiben, in diesem Fall also nur background-color:.

Die Reihenfolge * der Werte von margin usw., also auch padding und andere, ist Dir bekannt?

oben → rechts → unten → links

imebro

Hallo und danke für die Erläuterungen.

Bastler Aber ich hatte es vorher so verstanden, dass ich ja die beiden margin-Werte auskommentieren sollte. Das hatte ich getan, aber damit ging es nicht. Dann erst habe ich mit dem margin (siehe Zeile 11 im obigen Code) herumprobiert. Aber damit bekomme ich es nicht hin. Vielleicht hatte ich Dich aber auch falsch verstanden.

dharkness21 Ja, ich kenne die Reihenfolge und deshalb habe ich ja auch mit der Zeile 11 getestet mit vielen unterschiedlichen Einstellungen. Aber bisher hat nichts davon so gewirkt, dass das Kreuz nicht mehr nach links springt. Es ist vielleicht 1 od. 2 Pixcel.

Grüße,
imebro

Bastler

Zitat von imebro

ich hatte es vorher so verstanden, dass ich ja die beiden margin-Werte auskommentieren sollte. Das hatte ich getan, aber damit ging es nicht.

So war es auch gemeint - damit hatten die tab-close-button mit Deinem gesamten CSS bei mir eine bessere Lage.

Zu #70 lediglich generelle Info, weil in Deinem Code nicht alles gleichsinnig definiert ist.
Man kann natürlich damit auch bewusst optische Veränderungen je nach Zustand erzwingen,
aber Hüpferei ist wohl nicht angedacht.
Bedenke künftig, was Du zu den einzelnen Bezeichnern vorgibst, bei [selected], not([selected]) oder hover und was es bewirken kann.

imebro

OK, werde ich berücksichtigen. Danke auch...

Wo kann ich denn nun dieses eine od. 2 Pixcel eintragen, welches das Kreuz beim Aktivieren des Tabs nicht nach links springen läßt?
Habe bisher noch nicht gefunden, wo das funktioniert...

Grüße,
imebro

Bastler

Zitat von imebro

Wo kann ich denn nun dieses eine od. 2 Pixcel eintragen

Dort, wo bei einer Aktion etwas gegenüber vorigem oder Ruhezustand geschieht.
U.U. kann auch ein "Ruhezustand" verbogen sein und ändert sich bei Aktion.
Wenn sich nichts mehr bewegt, außer dem gewünschten Farbumschlag, ist es gelungen.
Die Möglichkeiten Fehler einzubauen sind vielfältig.

imebro

so, jetzt hab ich´s

CSS

/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
	margin: 1px -1px 0px 0px !important;  /* oben, rechts, unten links */
}

bei rechts musste ich einfach -1px eingeben... das war´s dann.

Danke auf jedenfall an:

Bastler

dharkness21

Grisu2099

...für Eure super Unterstützung

Grüße,
imebro

dharkness21

Zitat von imebro

...für Eure super Unterstützung

Aber gerne doch.

Grisu2099

Zitat von imebro

so, jetzt hab ich´s

Ja, manchmal dauert es beim CSS ein wenig länger...

dharkness21

Zitat von imebro

so, jetzt hab ich´s

Wirklich?

Wie sieht denn Dein Verfassen-Fenster aus?

imebro

Ja stimmt... manchmal dauert es etwas länger. Aber ich habe dabei auch ne Menge über CSS gelernt, wobei ich da vorher völliger Laie war

Was meinst Du dharkness21 mit dem Verfassenfenster?
Das sieht bei mir sehr gut aus. Oben das kleine Menü funktioniert ebenfalls gut und hovert auch korrekt. Und da springt nix etc.

Grüße,
imebro

Menübereich farblich anpassen

Thunderbird 128.4.3 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht