about:preferences - verschiedene Probleme

Firefox_94.0.1

Durch das Re-Design von about:preferences muss ich meine dafür angelegte Anpassung einmal neu schreiben. Hierbei habe ich (bis jetzt) folgende Probleme:

Unter dem Menüpunkt "Konto und Syncronisation" gibt es die Punkte "Konto" und "Datensicherung". Bei diesen bekomme ich den ganz äußeren Rahmen nicht entfernt
Die innere Kachel im Feld "Standardbrowser" möchte ich in der Farbe #f8de3f einfärben. Definiere ich diese im Code, wird das Feld jedoch in #e6ce3c angezeigt.
Code hierfür:
CSS
```
setting-control#setting-control-isNotDefaultPane {
 background-color: #f8de3f !important; /*warum wird Farbe #e6ce3c angezeigt?*/
}
```
Bei den Buttons der Punkte "Anmelden", "Synronisation", "Browserdaten importieren", "Profile" und "Datensicherung" habe ich ein ähnliches Problem. Hier soll bei :hover die Farbe #9c1818 genutzt werden, tatsächlich wird jedoch #891718 angezeigt.
Bei meinem Code für die seitliche Menüleiste

CSS

:root {
 --page-nav-margin-block-start: 20px !important;
 --page-space-block-start: 20px !important;
}
moz-page-nav-button {
 background-color: #9c1818 !important;
 color: #ffd700 !important;
 border-top-right-radius: 15px !important;
 border-bottom-right-radius: 15px !important;
 border-bottom-left-radius: 5px !important;
 border-top-left-radius: 5px !important;
}
moz-page-nav-button:hover {
 background-color: #ffd700 !important;  /* warum in #f1bc03 angezeigt */
 color: #9c1818 !important;
 border-top-right-radius: 15px !important;
 border-bottom-right-radius: 15px !important;
 border-bottom-left-radius: 5px !important;
 border-top-left-radius: 5px !important; 
}
button {
&[selected] {
 background-color: #9c1818 !important;
 color: #afbde1 !important;
 border-top-right-radius: 15px !important;
 border-bottom-right-radius: 15px !important;
 border-bottom-left-radius: 5px !important;
 border-top-left-radius: 5px !important;
}
}
button {
&[selected]:hover {
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-top-right-radius: 15px !important;
 border-bottom-right-radius: 15px !important;
 border-bottom-left-radius: 5px !important;
 border-top-left-radius: 5px !important;
 }
}
button {
&[selected] {
 &::before {
 background-color: #afbde1 !important;
 max-height: 110% !important;
}
}
 }

Alles anzeigen

Ist ganz offenbar der Punkt "moz-page-nav-button:hover " ohne Funktion. Ich muss die Rahmenbedingungen jedoch über "moz-page-nav-button" definieren, da sich der allgemeine "Button" auch auf andere Buttons auswirkt.

Edit: Wie kann ich bei den Checkboxen unter dem Punkt "Startseite" die Farbe bei leer und bei checked ändern?

Danke für eure Hilfe.

2002Andreas

Zitat von Firefox_94.0.1

folgende Probleme

Du kannst das ja mal testen wenn du magst. Die Farben musst du dir dann wieder anpassen:

CSS

#mainPrefPane setting-pane section setting-group moz-card {
  border: none !important;
  box-shadow: none !important;
  background: none !important;    
}

#isDefaultPane {
  --promo-background-color: #f8de3f !important;
}

#profilesSettings,
#data-migration,
#setting-control-syncNoFxaSignIn > moz-box-link,
#setting-control-noFxaSignIn > moz-box-link {
  --box-button-background-color-hover: red !important;
}

#backup-toggle-scheduled-button:hover,
#backup-toggle-restore-button:hover {
  background-color: red !important;
}

Alles anzeigen

grisu2099

Zitat von Firefox_94.0.1

Wie kann ich bei den Checkboxen unter dem Punkt "Startseite" die Farbe bei leer und bei checked ändern?

Was meinst du da genau? Screenshot ist bei solchen Anfragen meist hilfreich...

2002Andreas

Zitat von Firefox_94.0.1

bei den Checkboxen

Teste bitte, betrifft dann aber alle Checkboxen in den Einstellungen.

CSS

@-moz-document url-prefix(about:preferences) {

input[type="checkbox"] {
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Deaktiviert = rot */   
 
input[type="checkbox"][disabled] {
    opacity: .2 !important;
}
	   
input[type="checkbox"]:not(:checked) {
    background-color: red !important;
    border: 2px solid red !important;
}

/* Aktiviert = grün */

input[type="checkbox"]:checked {
    background-color: green !important;
    border: 2px solid green !important;
}

/* Weißer Haken bei aktiviert */

input[type="checkbox"]:checked::after {
    content: url('chrome://global/skin/icons/menu-check.svg') !important;
	fill: white !important;
    -moz-context-properties: fill !important;
}
  }

Alles anzeigen

Bin mir nicht sicher, aber evtl. geht das auch kürzer und einfacher

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

folgende Probleme

Du kannst das ja mal testen wenn du magst. Die Farben musst du dir dann wieder anpassen:

CSS

#mainPrefPane setting-pane section setting-group moz-card {
  border: none !important;
  box-shadow: none !important;
  background: none !important;    
}

#isDefaultPane {
  --promo-background-color: #f8de3f !important;
}

#profilesSettings,
#data-migration,
#setting-control-syncNoFxaSignIn > moz-box-link,
#setting-control-noFxaSignIn > moz-box-link {
  --box-button-background-color-hover: red !important;
}

#backup-toggle-scheduled-button:hover,
#backup-toggle-restore-button:hover {
  background-color: red !important;
}

Alles anzeigen

Danke für die Ideen, zumindest mein obiger Punkt 3 ist dadurch gelöst.

Der Abschnitt

CSS

#mainPrefPane setting-pane section setting-group moz-card {
  border: none !important;
  box-shadow: none !important;
  background: none !important;    
}

bewirkt bei mir gar nichts.

Und mit

CSS

#mainPrefPane setting-pane section setting-group moz-card {
  border: none !important;
  box-shadow: none !important;
  background: none !important;    
}

wird zu viel entfernt.

Zum Rahmenproblem (Punkt 1):

Der Hintergrund der gesamten Seite ist dunkelgelb. Die einzelnen Menüpunkte sind mit einem hellen gelb abgesetzt und der darin liegende Button ist ohne :hover wieder gelb. Mir geht es bei den zwei genannten Menüpunkten um den dünnen Rahmen innerhalb der hellgelben Box. Diesen bekomme ich nicht entfernt.

Durch deinen obigen Code bleibt dieser bestehen und zusätzlich wird der gesamte hellgelb hinterlegte Bereich entfernt.

Dein Code in Beitrag #4 ist genau das, was ich für die Checkboxen gesucht hatte.

2002Andreas

Zitat von Firefox_94.0.1

um den dünnen Rahmen innerhalb der hellgelben Box

Auch bitte wieder testen:

CSS

#scheduled-backups,
#backup-toggle-restore-button,
#backup-toggle-scheduled-button,
#profilesSettings,
#data-migration,
#noFxaSignIn {
  border: none !important;
}

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

um den dünnen Rahmen innerhalb der hellgelben Box

Auch bitte wieder testen:
CSS
#scheduled-backups,
#backup-toggle-restore-button,
#backup-toggle-scheduled-button,
#profilesSettings,
#data-migration,
#noFxaSignIn {
  border: none !important;
}

Die Rahmen sind leider immer noch da.

2002Andreas

Zitat von Firefox_94.0.1

Die Rahmen sind leider immer noch da.

Sollte ich dich falsch verstanden haben, dann sorry.

So sieht das hier aus, erst ohne den Code...dann mit:

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Die Rahmen sind leider immer noch da.

Sollte ich dich falsch verstanden haben, dann sorry.
So sieht das hier aus, erst ohne den Code...dann mit:

Den Rahmen habe ich selbst bereits entfernt bekommen. Mir geht es um den Rahmen im Feld darüber, welcher trotz Code stehen bleibt. Den habe ich bisher noch nicht wegbekommen.

Dharkness

Zitat von Firefox_94.0.1

Mir geht es bei den zwei genannten Menüpunkten um den dünnen Rahmen innerhalb der hellgelben Box.

Teste bitte:

CSS

moz-box-group {
    --box-border: 0 !important;
}

2002Andreas

oder

CSS

:root {
  --border-color: none !important;
}