Beiträge von Firefox_94.0.1

Ich habe selbst noch etwas dazu recherchiert und getestet.

Falls jemand dieselbe Frage hat und auf dieses Thema stößt:

Der Trick ist, dass Elemente nicht mehr auf der kleinsten Ebene angesprochen werden müssen, sondern auf der Hauptebene.

Beispiel:

Statt:

#taskbar-tabs-button.urlbar-page-action {
 color: #fff !important;
}
#taskbar-tabs-button.urlbar-page-action:hover {
 background-color: #2b2c86 !important;
 color: red !important;
 border-radius: 8px !important;
}

muss

#taskbar-tabs-button {
    border-radius: 8px !important;
    color: #fff !important;
}
#taskbar-tabs-button.urlbar-page-action:hover {
    border-radius: 8px !important;
    color: red !important;
    background-color: #2b2c86 !important;
}

verwendet werden.

In Nova wurde bekanntlich der Radius :hover auf 360° eingestellt. Da mir dies zu rund ist, habe ich versucht, diesen bei den einzelnen Elementen wie gewohnt mit der Funktion "background-radius" zu ändern. Jedoch greift diese hier offenbar nicht mehr.

Beispielhaft hier mein Code für die Suchleiste (noch nicht ganz fertig):

/********************* Navigationsleite mit Adressleiste ********************************************/
::selection {
 background: red !important;
}

#nav-bar{
    background: #00016e !important;
}

/*Buttons*/
#identity-icon-label {
 padding-inline-start: 4px;
 margin: 0;
 background-color: #2b286 !important;
 color: #fff !important;
}
.urlbar-icon.urlbar-go-button {
 color: #fff !important;
}
.urlbar-icon.urlbar-go-button:hover {
 background-color: #2b2c86 !important;
 color: red !important;
 border-radius: 8px !important;
}
#taskbar-tabs-button.urlbar-page-action {
 color: #fff !important;
}
#taskbar-tabs-button.urlbar-page-action:hover {
 background-color: #2b2c86 !important;
 color: red !important;
 border-radius: 8px !important;
}
#star-button-box.urlbar-page-action :hover {
 background-color: #2b2c86 !important;
 color: red !important;
 border-radius: 8px !important;
}
/*Symbole*/
image#trust-icon {
 color: red !important;
}
/*Schriftfarbe Suchfeld*/
#urlbar-input {
 mask-repeat: no-repeat;
 unicode-bidi: plaintext;
 text-align: match-parent;
 color: #fff !important;
}
/*Suchmaschienen Switcher*/
.button-background {
 &.labelled {
   gap: var(--space-small);
   background-color: red !important;
 }
}
.searchmode-switcher-panel-list {
 .searchmode-switcher-panel > & {
   padding: var(--panel-subview-body-padding);
   background-color: #00016e !important;
   color: #fff !important;
   border: none !important;
 }
}
/*Suchvorschläge*/
.urlbarView-background {
 .urlbar > .urlbarView > & {
   inset-block: calc(-1 * var(--urlbarView-margin-block) - var(--urlbar-joint-background-overlap)) calc(-1 * var(--urlbarView-joint-background-outset-block));
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   clip-path: inset( var(--urlbar-joint-background-overlap) calc(-1 * var(--urlbar-joint-background-shadow-margin)) calc(-1 * var(--urlbar-joint-background-shadow-margin)) );
   background-color: #00016e !important;
   color: #fff !important;
 }
}
span.urlbarView-title.urlbarView-overflowable {
 color: #fff !important;
}
/*Länge der Leiste*/
.urlbar[breakout] {
 & > .urlbar-input-container {
   width: 100%;
   height: 100%;
   width: 1000px !important;
   margin-left: 60px !important;
 }
}
.urlbar-background {
 display: block;
 position: absolute;
 inset: 0;
 background-color: #00016e !important;
}
.urlbar-background:focus {
 display: block;
 position: absolute;
 inset: 0;
 background-color: #00016e !important;
 border-color: none !important;
}
.urlbar-background:active{
 display: block;
 position: absolute;
 inset: 0;
 background-color: #00016e !important;
 border-color: none !important;
}


/*Rahmen bei klick entfernen*/
.urlbar-background {
 box-shadow: none !important;
}
 
.urlbar {
 --toolbar-field-focus-border-color: transparent !important;   
}

Hier geht es mir um alles mit :hover beim Punkt /*Buttons*/ trotz der Einstellung von 8px wird immer noch der runder Kreis angezeigt. Wie kann ich in Zukunft den Radius für die einzelnen Elemente festlegen?

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"?

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

    --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?

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.

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.

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.

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

#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

#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.

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

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

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.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

für die Menüs nicht mehr so

Der funktioniert auch in der ESR Version 140 nicht so wie du schreibst:

Zitat von Firefox_94.0.1

durch Klick auf Datei, Bearbeiten

Dafür musst du dann noch einen weiteren Code haben.

Das war tatsächlich die Lösung. Habe dort jetzt auch die geänderten Bezeichnungen angepasst und jetzt läuft alles wieder wie es soll.

Leider funktioniert mein Code für die Menüs nicht mehr so, wie er soll.

#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
  --panel-text-color: #fff !important;
  --menu-disabled-color: lightgrey !important;
  --panel-background-color: #000080 !important;
  --panel-border-color: #000080 !important;
  #textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-text-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background-color: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: #fff !important;
   background-color: #2b2c86 !important;
}

}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
  color: #fff !important;
  background-color: #2b2c86 !important;
}

Jetzt ist es so, dass der Code sich nicht mehr auf die Menüs auswirkt, die sich durch Klick auf Datei, Bearbeiten, Ansicht, usw. öffnen. Auch sollte der Hintergrund bei :hover einen - ich meine 15px - Radius aufweisen, was es auch nicht mehr tut...

Zitat von Sören Hentzschel

Wenn du tatsächlich das gleiche Problem hast, sollte die Lösung ja funktionieren, die hier bereits steht …

--panel-background → --panel-background-color
--panel-text → --panel-text-color

Danke, hat schonmal geholfen. Bei mir funktionier es jedoch trotzdem nicht mehr in der ganz oberen Menüleiste (dort wo sich die Punkte Datei, Bearbeiten, Ansicht, Chronik, ... befinden). Hier findet der Code auf die dortigen Menüs der genannten Punkte keine Anwendung mehr.

Ich habe dasselbe Problem. Auch mein Code für die besagten Menüs funktioniert seit dem neuestem Update auf V.152.0 nicht mehr.

/* 3.1 Kontextmenü*/
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
  --panel-color: #fff !important;
  --menu-disabled-color: lightgrey !important;
  --panel-background: #000080 !important;
  --panel-border-color: #000080 !important;
  --panel-border-radius: 5px !important;
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
  color: #fff !important;
  background-color: #2b2c86 !important;
}

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

auf einem Tab

Lange Version:

CSS

#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Kurze Version:

CSS

#tabContextMenu,
#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

---

Edit:

Wenn du das überall so haben möchtest, dann kannst du auch das mal testen:

CSS

 menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}
:is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Mir sind noch zwei Stellen aufgefallen:

- das Kontextmenü bei rechtsklich in die URL-Leiste sowie das im Suchfeld, welches man mit Strg + F öffnet.

Deinen Code für überall habe ich getestet, jedoch habe ich damit wieder das ursprüngliche Problem, dass sich das auch auf Menüs auf Webseiten auswirkt.

Wie findest du eig. die adressierung der Menüs an der genauen Stelle, um ausschl. diese anzusprechen? Mit den Browser-Werkzeugen finde ich überall nur das allgemeine "arrowscrollbox.menupopup-arrowscrollbox".

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Die Langform alleine passt nun für alles

Freut mich

Ich habe gerade festgestellt, dass doch noch nicht alles passt:

Wenn ich das Kontextmenü öffne, wenn der Mauszeiger auf einem Tab (egal ob aktiv oder nicht) liegt, öffnet sich noch das normale Menü ohne Änderungen...

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Dasselbe wenn ich auf Höhe

Teste bitte:

CSS

#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Edit:

Ich habe mal etwas gebastelt hier, diese Kurzform sollte auch ausreichen:

CSS

#placesContext,
#toolbar-context-menu,
#contentAreaContextMenu {
  &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover {
   --panel-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
   color: red !important;
   background-color: lightblue !important;
  }
}

Alles anzeigen

Die Langform alleine passt nun für alles

Zitat von grisu2099

Hast du meine Version aus #3 getestet? Da sollte das nicht auftreten...

Ja, die wirkt sich jedoch vollständig auch auf besagte Menüs auf Webseiten aus, was ich eig. nicht möchte.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

mit einem rechtsklick

Teste bitte wieder:

CSS

#contentAreaContextMenu {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#contentAreaContextMenu :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Danke, auch der Code funktioniert wie gewünscht. Nur:

wenn ich im Kontextmenü einen Punkt wähle, hinter welchem sich ein zweites Menü öffnet (Bsp. "Einen KI-Chatbot fragen" findet der Code auf dieses Menü keine Anwendung. Dasselbe wenn ich auf Höhe der Tableiste das Kontextmenü öffne, wird auch dieses "klassisch" ohne die o.g. Anpassungen angezeigt.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Dropdown menüs in Menüleiste

Meinst du das so, also nur in der Menüleiste?

Wenn ja, dann teste bitte, Farben wenn dann anpassen:

CSS

/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
 #toolbar-menubar menupopup {
   --menuitem-hover-background-color: #2B2C86 !important;
   --panel-color: #fff !important;
   --menu-color: #fff !important;
   --menu-disabled-color: lightgrey !important;
   --panel-background: #000080 !important;
   --panel-border-color: #000080 !important;
   --panel-border-radius: 5px !important;
}

#toolbar-menubar menupopup :is(menu,menuitem):hover {
   color: red !important;
   background-color: lightblue !important;
}

Alles anzeigen

Hier bleiben die unerwünschten Auswirkungen weg. Gibt es auch noch einen solchen Code für das Kontextmenü, welches sich mit einem rechtsklick im Browserfenster öffnet?

Zitat von Sören Hentzschel

Hallo,

vielleicht zeigst du erst einmal deinen aktuellen Code und beschreibst anhand dessen und idealerweise sogar eines Screenshots, was für dich nicht passt. Mit der Beschreibung „sieht nur noch zum teil so aus, wie er soll” (sic!) kann man nichts anfangen.

Hier der Code:

@-moz-document url(about:addons){
/*Hintergrund gesamte Seite*/
body {
 cursor: default;
 background-color: #ffd700 !important;
}
.main-search {
 background: #ffd700 !important;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 padding-inline-start: 28px;
 padding-top: 20px;
 padding-bottom: 30px;
 max-width: var(--section-width);
}
.main-heading {
 background: #ffd700 !important;
 display: flex;
 margin-inline-start: var(--main-margin-start);
 padding-bottom: 16px;
 max-width: var(--section-width);
}
.sticky-container {
 background: #ffd700 !important;
 width: 100%;
 position: sticky;
 top: 0;
 z-index: var(--z-index-sticky-container);
}

/*Suchfeld*/
#input {
 &[type="search"] {
   --input-background-icon: url(chrome://global/skin/icons/search-textbox.svg);
   padding-inline-end: var(--space-xxsmall);
   background-color: lightblue;
    background-color: #00016e !important;
    color: #afbde1 !important;
 }
}
/* search-addons > search-textbox {
 margin: 0;
 width: 20em;
 min-height: 32px;
 background-color: #00016e !important;
 color: #afbde1 !important;
} 
*/
/*Block nach recht verschieben*/
.main-search {
    margin-left: 650px !important;
}
/*Überschriften*/
h1 {
 margin: 0 0 8px;
 font-size: 1.46em;
 font-weight: 300;
 line-height: 1.3em;
 color: red !important;
 background-color: #00016e !important;
 border-radius: 15px !important;
 text-align: center !important;
 font-weight: bold !important;
 width: 350px !important;
}
/*Sidebar*/
.navigation {
 overflow-x: hidden;
 overflow-y: auto;
 position: relative;
 background-color: #ffd700 !important;
}
#categories > .category[selected], #categories > .category.selected {  /* --> aktuelle Seite */
 color: #afbde1 !important;
}
#categories > .category {
 background-color: #9c1818 !important;
 color: #ffd700 !important;
 border-color: #9c1818 !important;
 border-radius: 30px !important;
 margin-bottom: 3px !important;
}
.sidebar-footer-link {
 background-color: #9c1818 !important;
 color: #ffd700 !important;
 border-color: #9c1818 !important;
 border-radius: 30px !important;
 margin-bottom: 3px !important;
}
#categories > .category:hover {
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-color: #9c1818 !important;
 border-radius: 30px !important;
 margin-bottom: 3px !important;
}
.sidebar-footer-link:hover {
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-color: #9c1818 !important;
 border-radius: 30px !important;
 margin-bottom: 3px !important;
}
/*Buttons / Verlinkungen*/

.page-options-menu > .more-options-button {
 background-image: url("chrome://global/skin/icons/settings.svg");
 width: 32px;
 height: 32px;
 background-color: #9c1818 !important;
 color: #ffd700 !important;
}
.page-options-menu > .more-options-button:hover {
 background-image: url("chrome://global/skin/icons/settings.svg");
 width: 32px;
 height: 32px;
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-color: #9c1818 !important;
}
button {
 font-weight: 600;
 color: #ffd700 !important;
 background-color: #9c1818 !important;
}
button:hover {
 font-weight: 600;
 color: #9c1818 !important;
 background-color: #ffd700 !important;
 border-color: #9c1818 !important;
}

/*Einzelne Erweiterungen*/
.addon.card {
 box-shadow: var(--card-shadow);
 background-color: #f0e68c !important;
 color: #00016e !important;
}
.addon.card:hover {
 box-shadow: #afbde1 !important;
 background-color: #f0e68c !important;
}
/*aktiviert_deaktiviert Schalter*/
.toggle-button:hover {
 background: #9c1818 !important;
 border-color: transparent;
 border: none !important;
}
.toggle-button {
 background: #9c1818 !important;
 border-color: transparent;
 border: none !important;
}
/*Add-on Optionen Drop-down*/
panel-list {
 font: menu;
 background-color: #9c1818 !important;
 color: #ffd700 !important;
}
addon-options > panel-list > panel-item:hover,
plugin-options > panel-list > panel-item:hover {
fill: #9c1818 !important;
 --in-content-button-background-hover: #ffd700 !important;
 --in-content-button-text-color-hover: #9c1818 !important;
}

/*Detailansicht*/
input[type="radio"]:checked, .radio-check[selected] {
 -moz-context-properties: fill;
 fill: #ffd700 !important;
 color: var(--in-content-primary-button-text-color);
 background-color: #9c1818 !important;
 background-image: url("chrome://global/skin/icons/radio.svg");
 border-color: var(--in-content-primary-button-border-color);
 color-adjust: exact;
}
button.ghost-button:not(.semi-transparent):enabled {
 background-color: #9c1818 !important;
 color: #ffd700 !important;
 border-radius: 30px !important;
 border-color: #9c1818 !important;
}
button.ghost-button:not(.semi-transparent):enabled:hover {
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-radius: 30px !important;
 border-color: #ffd700 !important;
}

Dieses Symbol hinter dem Suchfeld sollte einen Radius von 5px haben und die Lupe im innern am besten in #ffd700 gehalten sein. Bei :hover sollte der Rahmen in #9c1818 sein.