About Seiten mit CSS Codes anpassen

In Version 106.0.1, bei about:preferences, gibt es ein kleines Problem. Wenn bei Datenschutz & Sicherheit die Auswahl auf Standard gestellt wird, so verbreitert sich die gesamte Box nach rechts hin. Das tritt nicht bei Streng und Benutzerdefiniert auf.

In der beta und auch in Nightly gibt es dieses Verhalten nicht.

Hallo,

ich bin gerade dabei, about:addons für mich anzupassen. Hier komme ich aber bei der oberen Suchleiste überhaupt nicht weiter.

Hier mein Code dafür:

.search-label {
margin-inline-end: 8px;
background-color: #9c1818 !important;
width: 200px !important;
text-align: center !important;
color: #ffd700 !important;
border-radius: 15px !important;
font-weight: 600 !important;
}


input {
border: none;
padding: 0 1px;
outline: none;
font: inherit;
font-size: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
min-width: 0;
text-align: inherit;
background-color: #00016e !important;
color: #fff !important;
font-size: 17px !important;
}


.textbox-search-icon .deck-selected {
color: red !important;


}
.search-textbox {
min-height: 32px;
padding-inline: 8px;
background-color: #00016e !important;
color: #fff !important;
}


.search-addons > .search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #fff !important;
}

Der Hintergrund der Box soll vollständig in #00016e sein. Jedoch bekomme ich nur das "innere" Feld hin.

Des weiteren: Was muss man einstellen, damit Drop-down Menüs offen bleiben, damit man diese mit dem Inspektor entsprechend anschauen und anpassen kann?

Zitat von Firefox_94.0.1

Der Hintergrund der Box soll vollständig in #00016e sein.

Meinst du das so?

Wenn ja, dann teste bitte:

.search-label {
margin-inline-end: 8px;
background-color: #9c1818 !important;
width: 200px !important;
text-align: center !important;
color: #ffd700 !important;
border-radius: 15px !important;
font-weight: 600 !important;
}


input {
border: none;
padding: 0 1px;
outline: none;
font: inherit;
font-size: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
min-width: 0;
text-align: inherit;
background-color: #00016e !important;
color: #fff !important;
font-size: 17px !important;
}


.textbox-search-icon .deck-selected {
color: red !important;
}

search-addons > search-textbox {
min-height: 32px;
padding-inline: 8px;
background-color: #00016e !important;
color: #fff !important;
}


.search-addons > .search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #fff !important;
}

Zitat von Firefox_94.0.1

damit man diese mit dem Inspektor entsprechend anschauen und anpassen kann?

Popup öffnen...Rechtsklick rein..Untersuchen..

ergibt:

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Der Hintergrund der Box soll vollständig in #00016e sein.

Meinst du das so?

Wenn ja, dann teste bitte:

CSS

.search-label {
margin-inline-end: 8px;
background-color: #9c1818 !important;
width: 200px !important;
text-align: center !important;
color: #ffd700 !important;
border-radius: 15px !important;
font-weight: 600 !important;
}


input {
border: none;
padding: 0 1px;
outline: none;
font: inherit;
font-size: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
min-width: 0;
text-align: inherit;
background-color: #00016e !important;
color: #fff !important;
font-size: 17px !important;
}


.textbox-search-icon .deck-selected {
color: red !important;
}

search-addons > search-textbox {
min-height: 32px;
padding-inline: 8px;
background-color: #00016e !important;
color: #fff !important;
}


.search-addons > .search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #fff !important;
}

Alles anzeigen

---

Mein Ziel ist, dass es am Ende so aussieht, wie auf deinem Bild. Bei mir macht der Code jedoch nur folgendes:

Zitat von Firefox_94.0.1

Bei mir macht der Code jedoch nur folgendes:

Eigenartig

Extra nur in die Entwickler-Werkzeuge eingetragen ergibt:

Nur der eine Code mit anderen Farben ergibt:

Teste bitte mal:

.main-search > search-addons:nth-child(2) > search-textbox:nth-child(1) {
  background-color: black !important;
  color: white !important;
}

Farben kannst du ja nach Geschmack anpassen...

Zitat von 2002Andreas

---

Zitat von Firefox_94.0.1

damit man diese mit dem Inspektor entsprechend anschauen und anpassen kann?

Popup öffnen...Rechtsklick rein..Untersuchen..

ergibt:

[data-l10n-id="addon-updates-check-for-updates"]:focus {
        background: #404040 !important;
}

Funktioniert mit und ohne focus

Wo liegt der Unterschied?

[data-l10n-id="addon-updates-check-for-updates"]:hover {
        background: red !important;
}

Funktioniert leider gar nicht,

und wie wäre der Code für "gedrückt"?

Zitat von Mira_Belle

Funktioniert leider gar nicht,

Meinst du diese Einträge?

Zitat von 2002Andreas

Meinst du diese Einträge?

Yes.

Wichtig wäre für mich das Hovern!

Wobei die Textfarbe auch ganz interessant wäre.

Ach, und "gedrückt"!

Zitat von Mira_Belle

Wichtig wäre für mich das Hovern!

Pauschal:

#page-options panel-item {
  color: yellow !important;
}

#page-options panel-item {
  --in-content-button-background-hover: lightblue !important;
  --in-content-button-text-color-hover: green !important;
}

Einzeln:

[data-l10n-id="addon-updates-check-for-updates"] {
  color: red !important;
}

[data-l10n-id="addon-updates-check-for-updates"] {
  --in-content-button-background-hover: green !important;
  --in-content-button-text-color-hover: blue !important;
}

[data-l10n-id="addon-install-from-file"] {
  color: yellow !important;
}

[data-l10n-id="addon-install-from-file"] {
  --in-content-button-background-hover: lightblue !important;
  --in-content-button-text-color-hover: green !important;
}

Zitat von 2002Andreas

Pauschal:

CSS

#page-options panel-item {
  color: yellow !important;
}

#page-options panel-item {
  --in-content-button-background-hover: lightblue !important;
  --in-content-button-text-color-hover: green !important;
}

Super, klasse.

Danke, funktioniert wie von mir gewüscht.

Nur eine Sache noch, wenn möglich.

Beim Hovern wird die ganze Zeile "markiert",

ist es möglich links, wie rechts einen Abstand zum Rand hinzuzaubern

und die Ecken dann noch abzurunden?

Im Grunde weiß ich ja wie es geht, aber hier hänge ich irgendwie fest,

denn

    --in-content-button-border-color: 3px solid red !important;
    --in-content-button-border-radius: 4px !important;

greift nicht.

Und mit den Abständen weiß ich auch gerade nicht weiter.

Und auch wenn ich folgendes versuche, ...

    #page-options panel-item:hover {
        border-radius: 8px !important;
        background: #5C5C5C !important;
        margin-left: 5px !important;
        width: 305px !important;
}

... ist es nicht von Erfolg gekrönt.

Ich bin z.Z. mit meinem Latein am Ende.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Bei mir macht der Code jedoch nur folgendes:

Eigenartig

Extra nur in die Entwickler-Werkzeuge eingetragen ergibt:

---

Nur der eine Code mit anderen Farben ergibt:

Alles anzeigen

Bei mir ist es auch so, dass der Code nur in die Entwickler-Werkzeuge eingetragen funktioniert. Setze ich das dann in die css Datei, funktioniert der Code nicht...

Firefox_94.0.1

Hast du #1147 mal probiert?

Zitat von Firefox_94.0.1

Setze ich das dann in die css Datei, funktioniert der Code nicht...

In welche CSS Datei hast du das denn gesetzt?

Funktioniert hier einwandfrei.

Zitat von grisu2099

Firefox_94.0.1

Hast du #1147 mal probiert?

Ja. Funktioniert leider nicht.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Setze ich das dann in die css Datei, funktioniert der Code nicht...

In welche CSS Datei hast du das denn gesetzt?

Funktioniert hier einwandfrei.

Der Code für das Drop-Down Menü funktioniert bei mir auch sehr gut (wie kann man da den border-radius verändern?).

Hauptsächlich ging und geht es mir jedoch um den vollständigen Hintergrund der oberen Suchleiste (siehe dazu Beitrag #1145).

Zitat von Firefox_94.0.1

den vollständigen Hintergrund der oberen Suchleiste

Keine Ahnung warum das bei dir alles nicht funktioniert

Hier funktioniert das einwandfrei.

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

den vollständigen Hintergrund der oberen Suchleiste

Keine Ahnung warum das bei dir alles nicht funktioniert

Hier funktioniert das einwandfrei.

Hast du den Code auch in der .css für diese Seite getestet, oder nur im Inspektor eingegeben?

Wenn du das in der css hast, kannst du dann bitte die vollständige Datei zur verfügung stellen, also auch mit dem "Kopf" in dem die Adresse der Seite eingetragen ist?

Zitat von Firefox_94.0.1

in der .css für diese Seite getestet

Ja

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

.search-label {
margin-inline-end: 8px;
background-color: #9c1818 !important;
width: 200px !important;
text-align: center !important;
color: #ffd700 !important;
border-radius: 15px !important;
font-weight: 600 !important;
}


input {
border: none;
padding: 0 1px;
outline: none;
font: inherit;
font-size: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
min-width: 0;
text-align: inherit;
background-color: #00016e !important;
color: #fff !important;
font-size: 17px !important;
}


.textbox-search-icon .deck-selected {
color: red !important;
}

search-addons > search-textbox {
min-height: 32px;
padding-inline: 8px;
background-color: #00016e !important;
color: #fff !important;
}


.search-addons > .search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #fff !important;
}
}

Es reicht auch oben:

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

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

in der .css für diese Seite getestet

Ja

CSS

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

.search-label {
margin-inline-end: 8px;
background-color: #9c1818 !important;
width: 200px !important;
text-align: center !important;
color: #ffd700 !important;
border-radius: 15px !important;
font-weight: 600 !important;
}


input {
border: none;
padding: 0 1px;
outline: none;
font: inherit;
font-size: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
min-width: 0;
text-align: inherit;
background-color: #00016e !important;
color: #fff !important;
font-size: 17px !important;
}


.textbox-search-icon .deck-selected {
color: red !important;
}

search-addons > search-textbox {
min-height: 32px;
padding-inline: 8px;
background-color: #00016e !important;
color: #fff !important;
}


.search-addons > .search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #fff !important;
}
}

Alles anzeigen

Es reicht auch oben:

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

Danke. Ich hatte oben als Adressierung noch "@namespace url(http://www.w3.org/1999/xhtml);" drin. Das habe ich jetzt entfernt und der Code funktioniert auch bei mir.

Kannst du mir bitte noch sagen, wie ich bei dem drop-down Menü bei :hover den border-radius ändern kann?

#page-options panel-list {
font: menu;
background-color: #00016e !important;
border-radius: 5px !important;
border-color: #00016e !important;
color: #ffd700 !important;
}


#page-options panel-item {
--in-content-button-background-hover: #ffd700 !important;
--in-content-button-text-color-hover: #9c1818 !important;
--in-content-button-border-radius: 30px !important;
}