about:addons Button neben Suchfeld

Firefox_94.0.1

Hallo,

irgendwas funktioniert bei mir nicht mehr richtig. Der Button neben dem Suchfeld (mit dem Lupen-Symbol) sieht nur noch zum teil so aus, wie er soll.

Hat jemand den Code parat, um Farbe des Symbols, Radius und Farbe des Buttons festzulegen?

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.

Firefox_94.0.1

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:

CSS

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

Alles anzeigen

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.

2002Andreas

Zitat von Firefox_94.0.1

Dieses Symbol hinter dem Suchfeld

Teste bitte wenn du magst:

Zeile 3 - 20 sind neu.

Zeile 146 habe ich mal auskommentiert.

CSS

@-moz-document url(about:addons) {

.button-background {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img):hover {
    background: yellow !important;	
    }
}

.button-background {
  &[type~="ghost"]:hover {
    border: 2px solid #9c1818 !important;
   }
}

.button-background {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
    border: 2px solid #9c1818 !important;
    border-radius: 5px !important;
   }
}


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

Alles anzeigen

Zitat von Firefox_94.0.1

und die Lupe im innern

Dafür habe ich leider nichts gefunden, evtl. fällt einem anderen User ja etwas dazu ein.

2002Andreas

Zitat von Firefox_94.0.1

und die Lupe im innern am

Teste bitte mal diesen kompl. neuen Code:

Zeile 3 - 36 sind neu:

CSS

@-moz-document url(about:addons) {

.button-background {
   &:not(.labelled):has(img) {
	 display: none !important;
}
}

[data-l10n-id="addons-heading-search-button"] {
	background-color: #9c1818 !important;
	-moz-context-properties: fill !important;
   	padding-left: 5px !important;
	padding-top: 4px !important;
    margin-left: 6px !important;	
    content: url("chrome://global/skin/icons/search-glass.svg") !important;
    width: 25px !important;
    height: 27px !important;
   	border: 1px solid transparent  !important;
	border-radius: 5px !important;
	fill: #ffd700  !important;
}
	
[data-l10n-id="addons-heading-search-button"]:hover {
	background-color: #ffd700  !important;
	border: 1px solid #9c1818 !important;
    -moz-context-properties: fill !important;
  	padding-left: 5px !important;
	padding-top: 4px !important;
    margin-left: 6px !important;
    content: url("chrome://global/skin/icons/search-glass.svg") !important;
    width: 25px !important;
    height: 27px !important;
	border-radius: 5px !important;
	fill: #9c1818 !important;
}

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

Alles anzeigen

Standard:

Hover:

about:addons Button neben Suchfeld

Firefox_94.0.1 29. März 2026 um 20:10

Ähnliche Themen

Alter Zustand der Searchbar mit Anpassungen

Adressleiste plötzlich mit Suchmaschine