UserCSSLoader (2025)

Boersenfeger

Oh, stimmt... mein CSS dazu sieht jetzt seit dem Hinweis so aus:

CSS

/* UserStyles Loader Button */

#usercssloader-menu-item {
	background-image: url("../icons/CSS.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px;
	margin-top: 1px !important;
}

#usercssloader-menu-item:hover {
	background-color: var(--toolbarbutton-hover-background);
}

#usercssloader-menu-item #usercssloader-menu > .menu-text[value="CSS"] {
	opacity: 0;
	width: calc(2 * var(--toolbarbutton-inner-padding) + 24px);
	height: calc(2 * var(--toolbarbutton-inner-padding) + 24px);
}

Alles anzeigen

Allerdings ist da der Abstand zum linken und rechten Icon größer als bei den anderen in meiner Statuszeile. Vielleicht kann man ja noch da etwas ändern!? Bin jetzt gleich für einige Tage abwesend und würde mich dann wieder melden....

Mira_Belle

Versuche es einfach mal nur mit:

CSS

/* UserStyles Loader Button */

#usercssloader-menu-item {
	background-image: url("../icons/CSS.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px;
	margin-top: 1px !important;
}

#usercssloader-menu-item:hover {
	background-color: var(--toolbarbutton-hover-background);
}

#usercssloader-menu-item #usercssloader-menu > .menu-text[value="CSS"] {
	opacity: 0;
}

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

Versuche es einfach mal nur mit:

Dann ist der Abstand noch größer:

mit seinem Code sogar etwas schmaler:

mit dem Code aus dem Skript so:

Und so, wenn man den Wert noch kleiner macht auf 8px:

Was mir aber gar nicht gefällt, bei hover passt der Hintergrund nicht:

So sieht das bei einem anderen Icon aus:

und so mit dem eingefügten:

Das müsste sich dann jemand mal genauer anssehen.

Zitat von 2002Andreas

Das müsste sich dann jemand mal genauer anssehen.

CSS

#usercssloader-menu-item {
	background-image: url("file:///C:/Users/weiss/IconsFirefox/CSS.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px;
	margin-top: 5px !important;
    margin-bottom: 5px !important;
}

die beiden unteren Werte sind neu eingefügt.

Und hier der Radius-Wert:

CSS

#usercssloader-menu-item:hover {
	background-color: var(--toolbarbutton-hover-background);
    border-radius: 5px !important;
}

Speravir

Zitat von Boersenfeger

Allerdings ist da der Abstand zum linken und rechten Icon größer als bei den anderen in meiner Statuszeile. Vielleicht kann man ja noch da etwas ändern!?

Ausgehend von Deinem zuvor geposteten Stil würde ich als Erstes das hier versuchen:

Code

#usercssloader-menu-item #usercssloader-menu > .menu-text[value="CSS"] {
	opacity: 0;
	width: calc(2 * var(--toolbarbutton-inner-padding) + 20px);
	height: calc(2 * var(--toolbarbutton-inner-padding) + 20px);
}

Dort ist jeweils der Wert von 24px zu 20px geändert.

Zitat von 2002Andreas
Was mir aber gar nicht gefällt, bei hover passt der Hintergrund nicht:
[…]
CSS
margin-top: 5px !important;
margin-bottom: 5px !important;
die beiden unteren Werte sind neu eingefügt.

Bei der Höhe meiner Leiste ist mir das überhaupt nicht aufgefallen.

Kannst du bitte das mal austesten:

CSS

#usercssloader-menu-item {
	height: var(--button-min-height);
}

Und, wenn das zu groß ist, als nächstes var(--button-min-height-small)? Ich hab noch nicht herausgefunden, wo die Unterscheidung stattfindet, wann welche Variable aktiviert wird.

Zitat von 2002Andreas

Und hier der Radius-Wert

Hmm, stiimmt. Ist mir auch nicht aufgefallen. Aber warum nur bei Hover? Und es gibt eine Variabla dafür, also gleich mal mittesten:

CSS

#usercssloader-menu-item {
	height: var(--toolbarbutton-border-radius);
}

Dann würde ich das alles noch in die Anleitung einfügen.