Färbung des "Tab-Schließen" Kreuzes ändern

Pentomino

Hallo, dank vieler hilfreicher und ganz ausgezeichneter Tipps in diesem Forum ist es mir inzwischen gelungen, den Firefox auch in der Version 57 nach meinen Wünschen zu gestalten
Hier noch eine weitere "Kleinigkeit". Wäre es möglich, das "Tab-Schließen"-Kreuz sowohl in der Hintergrundfarbe als auch in der Kreuzfarbe separat beliebig farblich einzustellen ? Super wäre es, wenn man die HG- und Kreuzfarbe auch noch im gewählten Tab anders einfärben könnte wie in den nicht ausgewählten Tabs.
Vielen Dank im Voraus für die Mühe.
Gruß, Pentomino

2002Andreas

Ich kann dir nur ein eigenes neues Icon für z.B. den aktiven Tab anbieten :

CSS

.tabbrowser-tab[selected="true"] .tab-close-button.close-icon{
list-style-image: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADLUlEQVQ4jWWTS2hUZxzFf99377yTmel0mkfrGA2tlthK8UFpJxXyonThTloxorVQLNloKbiWLFINuumicWGhYtG2FiIuzCLQdiAiSmgXoaDBBHHMJDOTmUkmuTNz7zd3vi40IaVnd+Ccwx/+5witNVvxZSKRei0W2y4RIAQAWjfQQDafn/8hk+nbqje3ki/a26e+v3Yt6fc1AQZIA9CAAqmpWFbH5y0tf/yYy/VseMTGBSfi8amxsbFkaHoa3Ab4gi8CpAahQSnweil3demh06dTPxWLPZsBRyORqe8uX062pFIsrq+zGArxrtZ4mptASBzLYkZKttk2rbEYmf379ddnzqR+WVvrMWYuXUoNnz//ke/OHdKFApXjx3l9aIj5+/cJz85SKxSY7ewkMTxMVimK9+7hT6fF+ydPdnzV29ttvBcIDO9aWooUczk8hw6x99w5Qk1NBLu7+SeVotDSwtujo0SjUVr37SPz4AHFmRnU3Jx4mM1qUzmO+9fqKsF6nfjdu0QOHGDn4CDhaJSD16+DEEgpAXh+9SrFyUnKWlNfW6OhlGsqrfm7WiXeaFC2LKyzZ6mWSiROndo0uq7L4pUrzF68yJrHQ0FKykJQ1xqz0WiQy2apao0jBGXHwZyYIHT4MNIwQAjqtRoPJybILS9je70sac2qEDS0Rkoh2KUUO5Si2XFo7e9n78i3rFcqVByFZdtUHMWe0VE8HyapOg4BpXhVKRACo8vn++agEJFm16Wjr489IyM4jgMeD/WbN3EfP6b21pvYtRqtA/2IR4/wpdPE/X7mpSyZwraNXCzmvlOtGq+USoTyeVbf2EbT+DgrFy4gTZOIabIwMEB8bp4dKysUm5uZDoZsuZz3C601Rzyehd729rYPymXp372bcDKJc+MGxoumgWliHjuGNTmJ8/Qpv4fD9p+ZTP63ej2xWeVPvd6FI4lE28dKSa0U3mAQQwiEEGjXpW5ZCJ+Pca/Xvv3sWf6W4yT+swWAz/z+hcHOzrZPtJYeIeDlG7XW1LXmthDOrSdPcr/aduJ/Y9rA0UDgeSQet7wvpyqEwNUaBRTz+cDPtdr2rfp/AYkFe80/+csxAAAAAElFTkSuQmCC") !important; 
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Den inaktiven Tab würdest du mit:

Code

.tabbrowser-tab:not([selected="true"]) .tab-close-button.close-icon{

ansprechen und könntest ihm ein anderes Icon geben.

Zitat von Pentomino

Hintergrundfarbe als auch in der Kreuzfarbe separat beliebig farblich einzustellen ?

Das geht wohl nur mit SVG Grafiken, bin mir aber nicht sicher.

Pentomino

Schon mal besten Dank für den Vorschlag ! Das sieht doch schon mal super aus !! :klasse: Werde dann mal ein paar Icons nach meinem Geschmack zusammenbasteln und testen !
Gruß, Pentomino

2002Andreas

Freut mich wenn du damit zufrieden bist

HT-Frogger

Ich habe das auch ohne Grafik hin bekommen.

CSS

/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Farbe des Kreuzes blau
 * Hintergrundfarbe gelb, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: blue !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: yellow !important;
  border-radius: 5px !important;
}


/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe rot.
 */
#TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon {
  background-color: red !important;
}

Alles anzeigen

Was über ist (Größenangaben etc) einfach weglassen, Gruß Harry

2002Andreas

Zitat von 2002Andreas

Das geht wohl nur mit SVG Grafiken,

Damit kann man das dann beliebig ändern, habe es an dieser Grafik mal getestet:
[attachment=0]Zwischenablage01.jpg[/attachment]

CSS

#context-bookmarkpage[bookmarklabel="Lesezeichen hinzufügen"] >.menu-iconic-left{
color:yellow!important;
background:blue!important;
}

Pentomino

@ HT-Frogger: Auch das neue Verfahren ist super :klasse: Jetzt habe ich die "Qual der Wahl" :wink:

Pentomino

Nach einigen Test muss ich sagen, dass die "individuelle Icon-Variante" natürlich Vorzüge hat. Auch wenn der "Hover-Effekt" fehlt. Aber toll, was sich alles machen lässt :klasse:

2002Andreas

Zitat von Pentomino

wenn der "Hover-Effekt" fehlt.

Kann man auch ändern, so hättest du dann ein anderes Icon bei hover:

CSS

.tabbrowser-tab[selected="true"] .tab-close-button.close-icon:hover{
list-style-image: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAClUlEQVQ4ja2TXUhTARzFJXWmWbtbWWoZZlZQaVpbay3Q6KGnejCsHovsgwoK+9KNpq3vSOheB+FHBF4bMbdruykZaXpnZtadGfVyCYKiXqIPkKKih18PYSurl+g8/zn//zn/cxISxsEwDNSIiiRKeNwePG4PkiihRlQMw2D8/C9QVRVRlAiFFaKaRkzXiek6UU0jFFYQRQlVVf9MErgSQJZb6RxSODaym03DNkrvZ1IymEnZwFIO3tpC5E4bstxK4EqA3zbLcistw342DhezSrfgGrLgHBBwaALrugvxPtpJWYeTxugFZLk1folhGIiiRMc9hfJYMa77VlYOWHH0Cdh7BOxdAk9ePeTL18/YQhmsCS+kvS+IKErfPVEjKqGwQm1sFysHrTj7LTh6LNhumClWzZQFXQCc6fay4PIk5jWnURmpIBRWUCMqCZIoEdU0yu/aWHHbwvIuK8tUgaKQmYKAmchIEADHxTzm1qeReyGN0oZCopqGJEokeNweYrrOqp4sbJ0WNt8qoaJ3HYUtFlzN+QAoD66SW5dKztmJzDyZwpxTAjFdx+P2xAmc17NZEhSo7z8NwLbABnwdVQCs9TuYdXoi2b4UMmtM5NROiROMSVh/zc6ilikUNc1g9NMoL9++4P2Hdzx+PsKsE6lk1ZqYfjSZaVVJrDi1OC5hzER3x24WNKaT70/nfNdxxrC1aROZXhPT3clMPZKE5UASe5u3x00ce2OkN8zqS4vJrUvFVpfH249vePb6KbO9ZqZVJ2M9lIRQmUhR7XyUm23xN/4cpIauelz+RWT7UphRYyLjx9ZEzPsnsKRmPv528dcgjY9ye3eIfS07cJ4rYGb1ZLIOp2P3LWRPUwXhm3+J8n8p07/W+RtwnC3itIcCYgAAAABJRU5ErkJggg==") !important; 
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Pentomino

Sensationell !! :klasse: Da habe ich in den nächsten Tagen viel zu "spielen" !! Besten Dank

2002Andreas

Zitat von Pentomino

in den nächsten Tagen viel zu "spielen

Dann viel Spaß dabei :wink: