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;
}

Firefox_94.0.1

Zitat von 2002Andreas
oder
CSS
:root {
  --border-color: none !important;
}

Ist der bessere Code. Mit dem von Dharkness bleiben an anderen Stellen Rahmenfragmente übrig. Daher besser gleich alles weg.

Jetzt fehlt noch:

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.

Hier würde mich auch die Ursache interessieren.

2002Andreas

Zitat von Firefox_94.0.1

Die innere Kachel im Feld "Standardbrowser"

Meinst du das?

Wenn ja, teste bitte:

CSS

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

Dharkness

Zitat von Firefox_94.0.1

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.

Wenn Du das ↓ meinst, teste bitte das ** CSS-Schnipsel, ist sowohl für Standardbrowser, als auch für nicht Standardbrowser.

**

CSS

#isDefaultPane {
    --promo-background-color: #006800 !important;
    --promo-message-text-color: #FFF !important;
}
#isNotDefaultPane {
    --promo-background-color: #f8de3f !important;
    --promo-message-text-color: #000 !important;
}

Firefox_94.0.1

Zitat von Dharkness
Zitat von Firefox_94.0.1

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.

Wenn Du das ↓ meinst, teste bitte das ** CSS-Schnipsel, ist sowohl für Standardbrowser, als auch für nicht Standardbrowser.
**
CSS
#isDefaultPane {
    --promo-background-color: #006800 !important;
    --promo-message-text-color: #FFF !important;
}
#isNotDefaultPane {
    --promo-background-color: #f8de3f !important;
    --promo-message-text-color: #000 !important;
}

Funktioniert. Warum muss ich

CSS

    --promo-background-color: #006800 !important;
    --promo-message-text-color: #FFF !important;

verwenden und nicht einfach nur

background-color:

color:

? Und: Wie finde ich heraus, wann (und welche) Sonderformen benötigt werden? Möchte das nur für die Zukunft verstehen, damit ich nicht mehr so viel fragen muss.

Und: Wie kann ich hier den border-radius definieren?

grisu2099

CSS

#isDefaultPane {
    --promo-background-color: #006800 !important;
    --promo-message-text-color: #FFF !important;
    border-radius: 20px !important;
}
#isNotDefaultPane {
    --promo-background-color: #f8de3f !important;
    --promo-message-text-color: #000 !important;
    border-radius: 20px !important;
}

2002Andreas

Zitat von Firefox_94.0.1

Wie finde ich heraus, wann (und welche) Sonderformen benötigt werden?

wie = mit den Browser-Werkzeugen

wann = wenn background oder background-color nicht wie gewünscht funktionieren, gibt es eine andere Bezeichnung dafür, die du dann mit den Werkzeugen suchen musst.

Sören Hentzschel

Zitat von Firefox_94.0.1
Funktioniert. Warum muss ich
CSS
    --promo-background-color: #006800 !important;
    --promo-message-text-color: #FFF !important;
verwenden und nicht einfach nur
background-color:
color:
?

Du musst nie Variablen verwenden, du kannst immer auch direkt die Eigenschaften verändern. Variablen haben den Vorteil, dass du sie zentral an einer Stelle definieren und dann gleichzeitig für mehrere Stellen verwenden kannst. Außerdem kann es Code sparen, wenn du Variablen für Kalkulationen verwendest, statt die Logik für jeden Fall duplizieren zu müssen. Und was die Anpassung vom Firefox-Code betrifft, ist es einfach naheliegend, die Variablen zu überschreiben, die Mozilla bereits definiert hat. Aber würdest du die Eigenschaften statt die Variablen überschreiben, würde das genauso zu einem Ergebnis führen.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Wie finde ich heraus, wann (und welche) Sonderformen benötigt werden?

wie = mit den Browser-Werkzeugen
wann = wenn background oder background-color nicht wie gewünscht funktionieren, gibt es eine andere Bezeichnung dafür, die du dann mit den Werkzeugen suchen musst.

Stehen diese Bezeichnungen im Inspektor immer recht weit unten unter "Geerbt von ELEMENT"?