Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

FuchsFan

Die Thematik hatten wir schon einige Male, war für mich aber immer noch nicht zufriedenstellend. Den Kompromiss habe ich natürlich gefunden, und bisher genutzt.

Der Code dafür sieht i.M. so aus:

CSS

toolbarbutton#scrollbutton-down,
toolbarbutton#scrollbutton-up{
	color: blue !important;
    background-color: lightgrey !important;
    border: 1px solid grey !important;
	border-radius: 5px !important; 
	height: 32px !important;
}

toolbarbutton#scrollbutton-down:hover,
toolbarbutton#scrollbutton-up:hover  {
    color: blue !important;
    background-color: yellow !important;
    border: 1px solid red !important;
}


toolbarbutton#scrollbutton-up{
	margin-top: 10px !important;
}

Alles anzeigen

Weil das in diesem Beitrag #14 besonders hervor gehoben wird, nach Möglichkeit immer nur den zu verändernden Bereich (nicht übergreifend) anzusprechen. So habe ich auch versucht den o.g. Code zu verändern, aber leider ohne Erfolg. Mein Gedanke dabei, die Button in Ordnern und die in der Symbolleiste einzeln anzusteuern. Versucht habe ich das mit folgendem Code, in der Hoffnung, dass dieses nur für einen Bereich zuständig wäre, leider nicht.

Gibt es eine Möglichkeit hier wirklich eine Trennung zu erzwingen?

CSS

[data-l10n-id="overflow-scroll-button-backwards"],
[data-l10n-id="overflow-scroll-button-forwards"] {
	appearance: none !important;
	background-color: green !important;
	box-shadow: none !important;
	border: 2px solid red !important;
	border-radius: 0 !important;
	height: 32px !important;
	overflow: hidden !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	
}

Alles anzeigen

Mitleser

Das ist 'shadowroot' und deshalb auch nur in der userChromeShadow.css auseinander zuhalten (Hier mal 'meine' mit genau dieser Problematik [meine user-Variablen müssen selbstverständlich ersetzt werden]) als Beispiel:

CSS

/*■■■■■■■■■■■■■■■■scrollbuttons tableiste■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
	appearance: none !important;
	background-color: var(--uc-color-theme-grey) !important;
	box-shadow: var(--uc-shadow-tabs-border-bottom) !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: var(--uc-tabs-height) !important;
	min-height: var(--uc-tabs-height) !important;
	max-height: var(--uc-tabs-height) !important;
	overflow: hidden !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
	appearance: none !important;
	background-color: var(--button-hover-bgcolor) !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
	--arrowscrollbox-scrollicon-hover-background-color: unset !important;
	--arrowscrollbox-scrollicon-active-background-color: unset !important;
   }
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
	fill: var(--uc-color-green-font) !important;
	fill-opacity: 1.0 !important;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
	fill: var(--uc-color-theme-font) !important;
	fill-opacity: 1.0 !important;
}
#tabbrowser-arrowscrollbox[scrolledtostart]::part(scrollbutton-up),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(scrollbutton-down) {
	fill: var(--uc-color-redorange-button) !important;
	fill-opacity: 1.0 !important;
	opacity: 1.0 !important;
	background-color: var(--uc-color-theme-grey) !important;
}
#tabbrowser-arrowscrollbox[scrolledtostart]::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox[scrolledtoend]::part(scrollbutton-down):hover {
	fill: var(--uc-color-redorange-button) !important;
	fill-opacity: 0.6 !important;
	opacity: 1.0 !important;
}
/*■■■■■■■■■■■■■■■■scrollbuttons dropdown kontext■■■■■■■■■■■■■■■■■*/
menupopup:not([placespopup="true"])::part(arrowscrollbox)   {
    background-color: var(--uc-border-color) !important;
	border-radius: 0!important;
}
menupopup:not([placespopup="true"]):hover::part(arrowscrollbox)   {
    background-color: var(--uc-border-color) !important;
	border-radius: 0 !important;
}
/*■■■■■■■■■■■■■■■■scrollbuttons dropdown bookmarks■■■■■■■■■■■■■■■*/
menupopup[placespopup="true"]::part(arrowscrollbox) {
    background-color: var(--uc-border-color) !important;
}
menupopup[placespopup="true"]:hover::part(arrowscrollbox) {
    background-color: var(--uc-border-color) !important;
}

Alles anzeigen

Ich hoffe es hilft dir weiter...

Eine weitere Möglichkeit wäre: Shadowroot ist von außen über Variablen ansprechbar. Diese müssen auf einer höhere Ebene deklariert werden um dann auf der auszuführenden Ebene anwendbar zu sein...
Das wäre dann die bessere Lsg.

FuchsFan

Zitat von Mitleser

Ich hoffe es hilft dir weiter...

Ich danke dir, damit werde ich mich mal befassen, melde mich dann wieder.

Zitat von Mitleser

Eine weitere Möglichkeit wäre: Shadowroot ist von außen über Variablen ansprechbar. Diese müssen auf einer höhere Ebene deklariert werden um dann auf der auszuführenden Ebene anwendbar zu sein...
Das wäre dann die bessere Lsg.

Das sind für mich "Böhmische Wälder".

2002Andreas

Zitat von FuchsFan

Gibt es eine Möglichkeit

Wenn du magst, dann kannst du das auch mal testen:

CSS

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
    fill: red !important;
    background: lightgrey !important;    
    border: 1px solid grey !important;
	border-radius: 5px !important; 
	height: 32px !important;
  }
}

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up):hover, &::part(scrollbutton-down):hover {
    fill: blue !important;
    background-color: yellow !important;
    --arrowscrollbox-scrollicon-hover-background-color: transparent !important;
    border: 1px solid red !important;
 }
}

Alles anzeigen

FuchsFan

Zitat von 2002Andreas

Wenn du magst, dann kannst du das auch mal testen:

Ja, Andreas ich danke dir. In 146 funktioniert es mit einem kleinen Manko. Bei Hover wenn der Button gedrückt wird (also aktiv ist), dann ist der originale graue HG noch mit aktiv. Auch in v148 probiert, dort funktioniert der Code so nicht, ob du das mal prüfen könntest.

2002Andreas

Zitat von FuchsFan

in v148 probiert, dort funktioniert der Code so nicht, ob du das mal prüfen könntest.

Auf die Schnelle in Fx 148

Zitat von FuchsFan

der originale graue HG noch mit aktiv.

Muss ich mir ansehen, mache ich

Zitat von FuchsFan

wenn der Button gedrückt wird

Füg das bitte mal in den ersten Teil vom Code noch ein, und teste:

CSS

--arrowscrollbox-scrollicon-active-background-color: transparent !important;

FuchsFan

Zitat von 2002Andreas

Auf die Schnelle in Fx 148

Danke, dann muss ich suchen.

2002Andreas

Zitat von FuchsFan

dann muss ich suchen

Siehe bitte meinen Nachtrag:

FuchsFan

Zitat von 2002Andreas

Siehe bitte meinen Nachtrag:

Perfekt, Andreas, das sieht gut aus. In 148 auch geklärt, lag noch am alten Script. Gut, dass immer noch geprüft werden kann. Ich bedanke mich.

2002Andreas

Zitat von FuchsFan

Ich bedanke mich.

gerne wie immer

Zitat von FuchsFan

Perfekt, Andreas, das sieht gut aus.

So sollte es ja auch sein, freut mich

Zitat von FuchsFan

In 148 auch geklärt, lag noch am alten Script.

FuchsFan

Mitleser

Deinen Code habe ich teilweise schon hier getestet, auch damit funktioniert es, muss mich aber noch weiter damit befassen. Vorerst sage ich Dankeschön.

2002Andreas

Zitat von FuchsFan

Versucht habe ich das mit folgendem Code

Der funktioniert auch, allerdings muss er dann in die userChrome.css.

Horstmann

Zitat von 2002Andreas
Wenn du magst, dann kannst du das auch mal testen:
Code
#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {

....

Also ::part lässt sich jetzt ohne JS direkt mit CSS ansprechen?

Mira_Belle

Horstmann Nur über die userChromeShadow.css!

Horstmann

Zitat von Mira_Belle

Horstmann Nur über die userChromeShadow.css!

Das ist nicht der Tenor hier, weder die Frage noch die akzeptierten Lösungen haben diesen Umweg erwähnt.
Mitleser hat es zumindest teilweise erklärt.

Sören Hentzschel

Den Beitrag verstehe ich nicht. Du sprichst von einer Erklärung von Mitleser, verlinkst aber einen Beitrag von dir, der (in meinen Augen und wie dort bereits geantwortet) eine schlechtere Alternative zur Verwendung der Datei userChromeShadow.css darstellt. Und du schreibst, userChromeShadow.css sei nicht erwähnt worden. Das hat Mitleser aber in Beitrag #2 erwähnt.

FuchsFan

Zitat von 2002Andreas

Der funktioniert auch, allerdings muss er dann in die userChrome.css.

Ja, das war ja mein Gedanke, aber wenn ich den Code, oder auch den mit ::part einsetze, so wird der von dir RE: Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen wieder überschrieben. Nun habe ich alles Mögliche probiert, um auch die Scrollbutton in den Lesezeichenordnern einzeln anzusprechen, es will nicht funktionieren. Hast du noch eine Idee?

Mitleser

Zitat von FuchsFan

Das sind für mich "Böhmische Wälder".

Ich meinte diese Möglichkeit (gehört in die userChrome.css):

CSS

#PlacesToolbar menupopup{
	--uc-background-color: green;
}
scrollbox {
    background-color: var(--uc-background-color,initial);
}

oder besser:

CSS

#PlacesToolbar menupopup{
	--mp-background-color: green;
	--mp-background-color-over: blue;
}
#scrollbutton-down,
#scrollbutton-up {
    background-color: var(--mp-background-color,initial);
}
#scrollbutton-down:hover,
#scrollbutton-up:hover {
    background-color: var(--mp-background-color-over,initial);
}

Alles anzeigen

2002Andreas

Zitat von FuchsFan

in den Lesezeichenordnern einzeln anzusprechen

Wenn du magst, dann teste auch das mal:

CSS

toolbarbutton#scrollbutton-up {
    background-color: yellow;
    border: 1px solid red;
}

toolbarbutton#scrollbutton-up > image {
	fill: red !important;
}

toolbarbutton#scrollbutton-up:hover {
    background-color: lightgreen;
    border: 1px solid orange;
    border-radius: 5px;
}

toolbarbutton#scrollbutton-up:hover > .toolbarbutton-icon {
    fill: white !important;
}

toolbarbutton#scrollbutton-down {
    background-color: lightgreen;
    border: 1px solid red;
}

toolbarbutton#scrollbutton-down > image {
	fill: blue !important;
}

toolbarbutton#scrollbutton-down:hover {
    background-color: lightblue;
    border: 1px solid brown;
    border-radius: 5px;
}

toolbarbutton#scrollbutton-down:hover > .toolbarbutton-icon {
    fill: red !important;
}

Alles anzeigen

Horstmann

Zitat von Mitleser

Zitat von FuchsFan

Das sind für mich "Böhmische Wälder".

Ich meinte diese Möglichkeit (gehört in die userChrome.css):

In dem Sinne auch sowas; das Problem ist, dass initial nicht greift (den nativen Wert benutzt), wenn eine Variable nicht ausdrücklich gesetzt ist, zB wenn man --ug-scroller_hoverbgcolor: orange; ganz oben löscht.
Evtl. sollte man über die internen Fx Variablen gehen?

CSS

#navigator-toolbox {
    --ug-scroller_bgcolor: green;
    --ug-scroller_border: 2px solid red;  
    --ug-scroller_hoverbgcolor: orange;
    --ug-scroller_border_hover: 2px solid purple
}

/*menupopup,*/
toolbarbutton.bookmark-item {
    --ug-scroller_bgcolor: lightgrey;
    --ug-scroller_border: 1px solid grey;  
    --ug-scroller_hoverbgcolor: yellow;
    --ug-scroller_border_hover: 1px solid red;         
}

:is(#scrollbutton-down, #scrollbutton-up) {
    background-color: var(--ug-scroller_bgcolor, initial) !important;    
    border: var(--ug-scroller_border, initial) !important; 
}

:is(#scrollbutton-down, #scrollbutton-up):is(:hover, :active) {
    background-color: var(--ug-scroller_hoverbgcolor, initial) !important;    
    border: var(--ug-scroller_border_hover, initial) !important; 
}

Alles anzeigen

Hat es übrigens jemand geschafft, ::part(scrollbutton-up) etc. für die Lesezeichen Popups mit der userChromeShadow.css zu manipulieren?

Fuchsfan hat so viele spezifische Regeln, der Umweg über Variablen wird da schnell mühsam.

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

TABs lassen sich nicht mehr nach rechts verschieben

Gruppieren der Tabs mit MultiRowTabLiteforFx.uc.js nicht möglich?

Mehrzeilige Tableiste eine leere Zeile (Fehler)