Themes verändern auch Text in der Tableiste

genetic

Hallo,

ich habe jetzt mal div. Themes (direkt von Firefox) installiert/optisch getestet und bei allen hat sich die Schriftfarbe und insbesondere die Schriftschäfte der Tableiste auch mit verändert. Die Schrift wird immer leicht unscharf.

Lässt sich das irgendwie verhindern?

Oben: neues Theme
Unten: Standard-Theme

Sören Hentzschel

Hallo,

das sieht für mich nach einem Textschatten aus. In dem Fall ließe sich das ganz bestimmt via userChrome.css anpassen. Hast du ein konkretes Beispiel für ein betroffenes Theme?

2002Andreas

Zitat von genetic

Unten: Standard-Theme

Standard ist das aber nicht.

Und solltest du diese Theme meinen:

Yana-Framework.net

sieht das hier so aus damit:

genetic

Zitat von 2002Andreas

Standard ist das aber nicht.

Doch! Warum sollte ich Dich anlügen?

2002Andreas

Zitat von genetic

Doch!

Dann hast du das bei dir in Windows so eingestellt.

Hier sieht das so aus:

Abgerundete Tabs sind auch nicht Standard.

genetic

Zitat von Sören Hentzschel

Hallo,
das sieht für mich nach einem Textschatten aus. In dem Fall ließe sich das ganz bestimmt via userChrome.css anpassen. Hast du ein konkretes Beispiel für ein betroffenes Theme?

Vermutlich ist die bereits vorhandene userChrome.css die Ursache, für die komische Darstellung!?

Die userChrome.css sieht so aus:

CSS

/* userChrome.css **********************************************/

@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
/***************************************************************/

/* CSS-Anweisungen bitte unter diesen Kommentar eintragen. */


/***************************************************************/
}
/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */

/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
treechildren::-moz-tree-image(container) {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important;
 }
}

/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
treechildren::-moz-tree-image(container) {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important;
 }
}

/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml){
.bookmark-item[container="true"] {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=') !important; 
 }
}

.titlebar-button {
stroke: white !important;
}

/*******Damit wird der Tabtext nicht blasser, wenn kein Fokus auf dem FF ist*******/
.tab-label {
opacity: 1 !important;
}

/*******Menüleiste eingefärbt*******/
#toolbar-menubar {
color:#fff!important;
background: #0062A8 !important;
}

/*******Tableiste eingefärbt*******/
#TabsToolbar {
color:#fff!important;
background: #0078D7 !important;
}

/*******Abgerundete Tabs*******/
.tab-background {
border-radius: 80px !important;
}

/*******Abgerundeter Schließen Button*******/
.tab-close-button {
border-radius: 80px !important;
}

/*******Aktiver Tab HG*******/
.tabbrowser-tab[visuallyselected] > .tab-stack > .tab-background {
background: #51A1DB !important;
}

/*******Aktiver Tab hover*******/
.tabbrowser-tab:is([visuallyselected="true"]:hover, [multiselected]) > .tab-stack > .tab-background {
background: #CFCFD8 !important;
}

/*******Aktiver Tab Schrift weiß*******/
.tabbrowser-tab[visuallyselected] {
color: white !important;
}

/******Inaktiver Tab hover*******/
.tabbrowser-tab:not([visuallyselected="true"]):hover > .tab-stack > .tab-background {
background: #005A9E !important;
}

/******Inaktiver Tab HG******/
.tabbrowser-tab:not([visuallyselected]) > .tab-stack > .tab-background {
background: #006CBA !important
}

/******Inaktiver Tab Schrift weiß, transparent (.5 steht für die Deckkraft Werte zwischsen 0 (komplett transparent) und 1 (komplett sichtbar) sind möglich.******/
.tabbrowser-tab:not([visuallyselected]) {
color: rgba(255, 255, 255, .5) !important;
}

/*****Inaktiver Tab hover Schrift weiß******/
.tabbrowser-tab:not([visuallyselected]):hover {
color: white !important;
}

/*******Tab schließen Button HG bei hover rot und das X weiß******/
.tab-close-button[fadein]:hover {
fill: white !important;
background: #E81123 !important;
}

/********Tab Schließen-Kreuz anzeigen bei vielen Tabs wenn gehovert wird******/
.tabbrowser-tab:hover .tab-close-button {
display: block !important;
}

/*******< und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt*******/
#toolbarbutton, #scrollbutton-down,#scrollbutton-up, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
fill: rgb(255, 255, 255)!important;
}

/*******v-Button für Alle Tabs auflisten (wenn Tableiste sehr voll) weiß eingefärbt*******/
#alltabs-button {
fill: rgb(255, 255, 255)!important;
}

/*******+ Button für neuer Tab weiß eingefärbt*******/
#tabs-newtab-button, #TabsToolbar #new-tab-button {
fill: rgb(255, 255, 255)!important;
}

#tabs-newtab-button, #TabsToolbar #new-tab-button:hover {
fill: white!important;
}

/*******Runder Neuer Tab Button*******/
#TabsToolbar #tabs-newtab-button > image {
border-radius: 80px !important;
}

/*******Hintergrund bei den Buttons in der Tableiste: +, <, >, v bei Hover und beim draufklicken*******/
#TabsToolbar {
--toolbarbutton-hover-background: #005A9E !important
}

/*******Lautsprechersymbol auf Tab größer und weiß*******/
.tab-icon-overlay {
fill: White !important;
transform: scale(1.5, 1.5) !important;
}

/*******context menu items and icons instead of just huge icons*******/
#context-back .menu-iconic-icon {
fill: #4169e1 !important;
}

#context-forward .menu-iconic-icon {
fill: #4169e1 !important;
}

#context-reload .menu-iconic-icon {
fill: green !important;
}

#context-stop .menu-iconic-icon {
fill: red !important;
}

#context-bookmarkpage .menu-iconic-icon {
fill: #336699 !important;
}

/*********** tab close - always visible *******************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
visibility: visible !important;
display: block !important;
}

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned])[faviconized="true"] .tab-close-button {
visibility: collapse !important;
display: none !important;
}

/****** Kontextmenü kürzen *********/
#context-openlinkprivate,
#context-bookmarklink,
menuitem[label="Link in Pocket speichern"],
#context-sendlinktodevice{
display:none!important;
}

/****** Button ... ausblenden *********/

#reader-mode-button{
display:none!important;
}

#pageActionButton{
display:none!important;
}

/*********** Menütextfarbe ****************/

/*
.bookmark-item[container="true"] {
fill:#00437A !important;
color:#00437A !important;
}

toolbarbutton[container="true"] {
filter:none !important;
fill:#00437A !important;
color:#00437A !important;
}
*/
toolbarbutton {
filter:none !important;
fill:#00437A !important;
color:#00437A !important;
background:transparent
}
.toolbarbutton-text {
-moz-appearance: none !important;
color:#00437A !important;
}
menubar{
-moz-appearance: none !important;
color:white !important;
}
menupopup > menu,
menupopup > menuitem {
color:#00437A !important;
}

.menu-accel{
color:#00437A!important;
}

#titlebar-min,#titlebar-max,#titlebar-close{
color:white!important;
}

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {

.sidebar-placesTreechildren,
sidebarheader,
#sidebar-search-label{
color:#00437A !important;
}

.sidebar-placesTreechildren::-moz-tree-image(leaf) {
fill:#00437A!important;
}
}

/******Linkvorschau unten links abschalten******/

@-moz-document url-prefix(chrome://browser/content/browser.xhtml){
    
#statuspanel-label
{display:none!important;}


/******Tooltipps entfernen******/

tooltip{
visibility:hidden!important}
}

/********Neustart im Dropdownmenü einrücken*******/
#restartfirefox-appMenu > label {
margin-left: -24px !important;
}

/********Lesezeichen-Symbolleite schmaler*************/
menupopup[needsgutter] menu:not([checked="true"]),
menupopup[needsgutter] menuitem:not([checked="true"]) {
padding-inline-start: 15px !important;
}

Alles anzeigen

Zitat von 2002Andreas

Abgerundete Tabs sind auch nicht Standard.

Ich habe noch eine userChrome.css ^^^ - aber ich dachte ehrlich gesagt nicht, dass sich das gegenseitig beeinflusst/stört?

Bis vor kurzem hatte ich ein Theme, das mit der uc.css perfekt harmoniert hat - nur finde ich es bei den Themes nicht mehr:

Microsoft Mica Light Blue

2002Andreas

Zitat von genetic

Vermutlich ist die bereits vorhandene userChrome.css die Ursache

Ist sie

Sieht hier so aus damit:

Und mit dem Code hast du auch die abgerundeten blauen Tabs und die Tableiste in blau.

Also nichts mit Standard

Schrift wieder anpassen:

Ändere bitte diesen beiden Codes mal:

CSS

/*******Aktiver Tab Schrift weiß*******/
.tabbrowser-tab[visuallyselected] {
text-shadow: none !important;
color: white !important;
}

/******Inaktiver Tab Schrift weiß, transparent (.5 steht für die Deckkraft Werte zwischsen 0 (komplett transparent) und 1 (komplett sichtbar) sind möglich.******/
.tabbrowser-tab:not([visuallyselected]) {
color: rgba(255, 255, 255, .5) !important;
text-shadow: none !important;
}

Alles anzeigen

da habe ich jeweils das eingefügt:

text-shadow: none !important;

genetic

Zitat von 2002Andreas

Und mit dem Code hast du auch die abgerundeten blauen Tabs und die Tableiste in blau.

Das war/ist mir klar. Nur dachte ich, dass das keinen Zusammenhang/Konflikt mit den Themes hat bzw. gibt.

Wie gesagt, mit dem "Microsoft Mica Light Blue"-Theme gab es keine Probleme mit der uc.css.

Gibt's eine Möglichkeit die css so anzupassen, dass sie nicht in Konflikt mit den Themes kommt, aber trotzdem den vollen Umfang der Anpassungen behält?

2002Andreas

Zitat von genetic

dass sie nicht in Konflikt mit den Themes kommt

Ob es einen pauschalen Code gibt kann ich dir nicht sagen.

Aber siehe meinen Hinweis unten in Beitrag Nr. 7

Damit wird der Schatten vom Text entfernt.

Ansonsten, wenn ein Theme die Farbe vorgibt, du sie aber selber anders eingestellt hast, kann es durchaus Probleme geben.

genetic

Zitat von 2002Andreas

da habe ich jeweils das eingefügt:
text-shadow: none !important;

Danke - sieht schon mal gut aus.

Bekommen wir noch den weißen Rahmen und den (aktiven) Tab weg?

Und die Symbole, rechts oben (Minimieren, Maximieren, Schließen) haben irgendwie auch noch einen "Schatten"?

2002Andreas

Zitat von genetic

den weißen Rahmen und den (aktiven) Tab weg?

Teste bitte:

CSS

/* weißer Rahmen um aktiven Tab weg*/
.tab-background[selected] {
 outline: none !important;
}

genetic

Zitat von 2002Andreas

Teste bitte:

Yes, funktioniert 👍

Danke 😊

Jetzt sind es "nur" noch die Symbole rechts, oben.

2002Andreas

Zitat von genetic

Jetzt sind es "nur" noch die Symbole rechts, oben.

Das muss ich erstmal in Ruhe suchen.

Bin jetzt aber eine Weile offline, wird wohl erst morgen sein.

genetic

Zitat von 2002Andreas

Das muss ich erstmal in Ruhe suchen.
Bin jetzt aber eine Weile offline, wird wohl erst morgen sein.

Kein Ding - ich bin froh und dankbar, dass Du mir überhaupt hilfst.

milupo

Zitat von genetic

Gibt's eine Möglichkeit die css so anzupassen, dass sie nicht in Konflikt mit den Themes kommt

genetic Bisher hast du nicht geschrieben, welches Theme du verwendest, sondern nur, welches du nicht mehr verwendest. 2002Andreas vermutet Yana Framework.net. Ist es das?

genetic

Zitat von milupo

2002Andreas vermutet Yana Framework.net. Ist es das?

Nicht zwingend, aber bei allen pot. in Frage kommenden Themes ist/war es dasselbe Problem wie bei Yana Frame.

- Der Schatten des Tab-Textes (erl.)
- Der weißen Rahmen um den Tab (erl.)
- Die Darstellung der Symbole rechts, oben (noch offen)

milupo

Zitat von genetic

Die Darstellung der Symbole rechts, oben (noch offen)

Deswegen frage ich nach dem Theme. Denn die schwarze Umrahmung um die drei Schaltflächen ergibt sich nicht aus dem CSS-Code deiner userChrome.css. Sie müsste also vom Theme kommen. Deswegen nochmal die Frage: Welches Theme nutzt du?

2002Andreas

Zitat von genetic

- Die Darstellung der Symbole rechts, oben (noch offen)

Das kommt durch das Theme

Teste bitte mal, ob sich dadurch etwas ändert:

CSS

.titlebar-button > .toolbarbutton-icon {    
   filter: invert(15%) sepia(175%)  hue-rotate(554deg) brightness(178%) contrast(120%) !important;
  }

Hier sieht das dann so aus damit:

genetic

Zitat von 2002Andreas

Teste bitte mal, ob sich dadurch etwas ändert:

Nö, nicht wirklich.

Zitat von 2002Andreas

Hier sieht das dann so aus damit:

So sah es auch schon vorher aus - siehe Post #10.

Getestet mit diesen 3 Themes:

2002Andreas

Zitat von genetic

Nö, nicht wirklich.

Dann muss ich leider passen, das wird von dem jeweiligen Theme so erstellt.

Evtl. fällt einem anderen User ja noch etwas dazu ein.

Themes verändern auch Text in der Tableiste

Ähnliche Themen

Firefox 122 unterstützt Erkennung unglaubwürdiger Produktbewertungen auf amazon.de

Linie zwischen aktivem Tab und und Symbolleiste entfernen (eckige Tabs)

Neuling braucht Rat bzgl. Layout

Scrollbuttons andere Farbe

Einstellungsänderungen vornehmen

Hamburgermenü Icons einfügen