ersetzen mit:
#security-software-firewall,
Den Code aus Beitrag #171 ersetzen (Zeile 108), dann funktioniert alles. 
Bei dem Code aus #175 fehlt die Rundung links unten bei Allgemeine Information.
Also, Endor, ich habe zwar auch mit den Zahlen gespielt, soweit alles hinbekommen unter Sicherheit, aber die rechte untere Ecke, das hätte ich niemals hinbekommen. Danke nochmals für deine tolle Arbeit.
Genau den von Dir erwähnten Teil sehe ich hier nicht.
Wie heißt denn die Klasse bzw. die ID zu Sicherheitssoftware, dann kann ich ja mal nachschauen, ob ich da was finde.
Einiges konnte ich vielleicht anpassen.
Na super, Endor, da bleibt nur noch eine Sache übrig, die auch im 76 noch da ist.
Ganz große Klasse!!
3. Sicherheitssoftware: erste und letzte Zeile Hintergrund die Ecken zu sehen (Rundung vorhanden)
ja ich weiß, das ist aber etwas komplizierter, da diese Seite
bei jedem anders ist. Da muss individuell abgepasst werden.
Ob und wie ich das hinkriege muss ich erst sehen.
Das habe ich befürchtet, denn da steckt ja ein Haufen Arbeit drin. Damit du wenigstens einen Anhaltspunkt hast, so habe ich im Nightly mal rausgesucht, welche Stellen betroffen sind. Eventuell hilft es dir ja weiter.
1. Allgemeine Informationen: letzte Zeile Profile
2. Erweiterungen: letzte Zeile Hintergrund die Ecken zu sehen (Rundung vorhanden)
3. Sicherheitssoftware: erste und letzte Zeile Hintergrund die Ecken zu sehen (Rundung vorhanden)
4. Grafik:
5. Medien:
6. Barrierefreiheit:
7. Start-Cache:
8. Internationalisierung & Lokalisierung:
9. Externes Debugging (Chromium-Protokoll):
Kannst du bitte mal die Datei support überprüfen, dort sind bei einigen Boxen die Ecken nicht abgerundet. In v.76 war es bei mir nur unter Sicherheit, aber im Nightly sind es eine ganze Anzahl. Nicht böse sein, aber es soll doch alles schick aussehen.
Bitte testen:
Danke, Endor, jetzt auch im Nightly alles bestens.
So hier meine Version von about:cache
Danke, erst einmal, für alle diese Codes.
Nur ein Hinweis zu cache, Fx in Version 76 und 78 in der Darstellung keine Übereinstimmung.
Der Code gehört doch in die Datei Kontextmenu-Rechtsklick.css ?
Genau da gehört er hin!
Da muss man erst einmal drauf kommen, ich habe den Code von Andreas am Ende ( noch vor der zweiten Klammer) eingefügt.
Jetzt der Versuch am Anfang, und siehe da, jetzt ist das Icon da. Der Pfad dann dazu:
background: url("..//abouticons/icons/Bild5.png") no-repeat !important;
Danke für eure Zuarbeit.
Welchen Pfad hast du denn für die anderen Icons im Kontextmenü angegeben?
Das sind nur Base64.
#context-inspect-a11y { hiermit und Base64 wird auch nichts angezeigt.
Wenn ja wäre der Pfad:
Ich habe mal den Namen geändert , IconsMenu, wird trotzdem nicht angezeigt. Dann das png-File einfach in den Ordner gepackt, icons im Pfad entfernt, auch dann geschieht nichts. Seltsam, auch in anderen Nightly nicht.
Frage noch?
Der Code gehört doch in die Datei Kontextmenu-Rechtsklick.css ?
Du hast doch die ganzen Icons von Endor auch in dem Ordner icons.
Dafür habe ich mir einen speziellen Ordner unter chrome angelegt, heißt iconsabout. Und die Datei für das Kontext-Menü liegt im Ordner IconsMenü, der auch unter chrome liegt.
Werte etc. musst du dir dann noch anpassen.
Hilf mir mal bitte auf die Sprünge, im Ordner chrome befindet sich der Ordner IconsMenü. In diesem Ordner ist ein Ordner icons vorhanden, in dem die betreffende png-Datei liegt. Nun habe ich in der Kontext-Menü.css (liegt auch in IconsMenü) das als Pfad zu der Bild-Datei eingegeben (auch andere probiert), aber ich bekomme es nicht gebacken, die Grafik wird nicht gefunden. Wie muss in diesem Fall der Pfad lauten?
background: url('.//icons/Bild19.png') no-repeat !important;
Version und für Save verbose wird das Icon im Nightly nicht angezeigt
Stimmt, ist hier auch so.
Hallo, Endor!
Im aktuellen Nightly gibt es im Hauptkontext-Menü einen neuen Eintrag. Wenn du mal viel Zeit hast, bitte mal eine Code-Schnipsel dafür.
Kann mit Bummelbahn kommen, braucht kein ICE sein.
Werte kannst/musst du dir dann noch etwas anpassen.
PS:Das ist dann ohne den Zusatz von Sören!
Danke, Andreas, auch das funktioniert so.
Nach Zeile:
736, 758, 773 und 795
Danke, Andreas, das sieht dann so aus. Habe mal versucht mit margin-Werten zu verlagern, gelingt mir nicht.
Edit: Mit den Einstellungen zusätzlich klappt es dann doch. RE: About Seiten mit CSS Codes anpassen
für das Element.
Danke, Sören, aber in diesem Fall weiß ich nicht , wie ich das in dem Code von Endor einsetzen kann.
Nachtrag: Nun habe ich doch über die margin-Werte noch eine Lösung gefunden. Besser wäre es m.M.n. aber, wenn die Container etwas länger wären. Endor, kannst du dazu bitte noch was ändern?
Die für mich überdiemnsionierten Icons bei den Themes ist noch störend.
Hallo BarbaraZ-!
Jetzt habe ich mich noch mal daran gemacht, den bisherigen Code vollständig zu überarbeiten. Meines Erachtens nach müsste alles sauber laufen , die Container bei Themes sind in der Höhe reduziert, mehr geht wohl nicht.
Eine Sache konnte ich nicht erledigen, und zwar unter Verwalten bei Themes gibt es noch einen Button "Deaktivieren bzw. Aktivieren", hierfür habe ich keinen Code mehr. Bestimmt wird Andreas uns hierzu noch etwas liefern .
So, wenn du möchtest, dann der vollständige Code hier nachfolgend zur Verfügung (die Icons für das Menü hinter den Zahnrad sind in dem Code enthalten).
/* Addons-Verwaltung: Hintergrundfarben */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(about:addons) {
#sidebar {
background: #CDC8B1 !important; /* Hintergrund linke Seite */
}
.main-search,
.sticky-container,
.main-heading,
#content {
background: #EEEED1 !important; /* Hintergrund rechte Seite */
font-size: 15px !important;
} }
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {
/* Hintergrund der Container bei Hover andere Farbe */
addon-card:not([expanded="true"]) .addon.card:hover {
background: #9bf86c /* #76ee00 */ !important;
}
/* Abstand zwischen den Containern */
addon-card .addon {
margin: 7px !important;
}
/* Umrandung der Container bei Hover breiter Rand und andere Farbe */
:root {
--card-outline-color: DarkOrange !important;
}
/* Hintergrund der Container mit anderer Farbe */
addon-card:not([expanded="true"]) .addon.card {
background: #F1F7FC !important; /* Hintergrundfarbe */
border: 2px solid grey !important; /* Umrandung */
border-radius: 15px !important; /* Ecken abgerundet */
width: 1100px !important; /* Länge der Container */
max-height: 120px !important; /* Höhe der Container bei Themes */
} }
/***************** weitere Einstellungen für die Container der rechten Seite ********************/
/* Abstand zwischen den Containern */
addon-card .addon {
margin: 8px !important;
border: 1px solid grey !important;
border-radius: 20px !important;
}
/* Höhe der Container bei Erweiterungen */
addon-list[type="extension"]{ --card-padding: 18px } /* Höhe in px */
addon-card .addon-card-collapsed{ margin-bottom: 5px !important; /* Button rechts Abstand vom oberen Rand */
}
/**** Entfernt den Drei-Punkte-Button aus dem Container ****/
addon-card .more-options-button {
display: none !important;
}
/**** remove button icon ****/
addon-list panel-item {
--icon: unset !important;
}
/* Höhe der Grafiken unter Themes */
.card-heading-image {
height: 60px !important;
margin: -6px -6px 16px !important; /* unter Themes die Grafiken versetzt */
}
/* fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. */
body {
counter-reset: section;
}
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
color: red !important;
font-weight: bold !important;
counter-increment: section;
content: counter(section, decimal-leading-zero)".) ";
padding-right: 20px !important;
margin-top: 1px!important; /* Lage im Container */
margin-left: -5px !important; /* Abstand vom linken Rand */
}
/* Versionsnummer der Addons wird angezeigt */
div:not([current-view="updates"]) .addon-name-link[title]::after,
div:not([current-view="updates"]) .addon-name[title]::after {
display: block !important;
content: attr(title) !important;
margin-top: -22px !important;
}
/* Hintergrund der Button auf der rechten Seite */
addon-list addon-card:not([expanded="true"]) panel-list * {
background: #ffefd5 !important;
color: black !important; /* Schrift Farbe */
}
@supports -moz-bool-pref("browser.in-content.dark-mode") {
@media (prefers-color-scheme: dark) {
addon-list addon-card:not([expanded="true"]) panel-list *,
.more-options-menu panel-item {
background: black !important;
color: white !important;
}
}}
addon-list panel-item{
margin: 0 8px !important; /* Abstand zwischen den Button rechte Seite */
border-radius: 80px !important; /* Abrundung der Button */
box-shadow: inset 0 0 2px 2px forestgreen; /* innerer Schatten / Farbe / der rechten Button */
}
/**** Größenänderung der Button rechte Seite ****/
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 5px 25px !important; /* 5px ist die Höhe und 25px die Länge der rechten Button */
}
/**** Anordnung der Button rechte Seite ****/
div.arrow.top + div.list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
}
/* Umrandung und Hintergrund der Button rechte Seite */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
.addon.card panel-item:not([badged]){
border: 1px solid grey !important;
background: lightyellow !important;
/* border-radius: 50px !important; */
margin-top: -3px !important;
}
/* Umrandung und Hintergrund der Button rechte Seite bei Hover */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]):hover,
.addon.card panel-item:not([badged]):hover{
border: 1px solid red !important;
background: blue !important;
color: white !important;
}
/**** Button Aktivieren/Deaktivieren unter Themes ****/
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button {
background: #ffefd5 !important; /* beliebige Farbe eintragen */
border: 1px solid #888 !important; /* farbige Umrandung */
border-radius: 15px !important; /* Abrundung */
width: 105px !important; /* Länge des Button */
height: 29px ! important; /* Höhe des Button */
box-shadow: inset 0 0 2px 2px coral !important; /* innerer Schatten */
margin-right: 440px ! important; /* Button ausrichten ab rechtem Rand */
}
/* Veränderung des Hintergrundes bei Mouseover */
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container button.theme-enable-button:hover {
background-color: #1e90ff !important; /* beliebige Farbe eintragen */
border-radius: 80px !important;
color: white ! important;
}
/******************** Aussehen des Menü hinter dem Zahnrad **************************************/
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
padding-top: 8px !important; /* Ausdehnung nach oben */
padding-bottom: 8px !important; /* Ausdehnung nach unten */
min-width: 340px !important;
width: 400px !important; /* Länge der einzelnen Felder */
margin-left: 5% ! important; /** Schrift ausrichten ab linkem Rand **/
}
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
background: lightyellow !important;
color: red !important;
font-size: 13px !important;
max-height: 32px !important;
padding-left: 15px !important;
}
.sticky-container {
z-index: 1000 !important;
}
addon-page-options panel-list panel-item {
min-width: 340px !important;
width: 448px !important; /* Länge der aktivierten Menü-Leiste */
/* border-radius: 20px !important; */
border: 1px solid grey!important;
}
addon-page-options panel-list panel-item:hover {
min-width: 340px !important;
width: 448px !important; /* Länge der aktivierten Menü-Leiste */
/* border-radius: 20px !important; */
border: 1px solid red!important;
background: lime !important;
}
addon-page-options panel-list {
min-width: unset !important;
width: auto !important;
max-width: 450px !important; /* Ausdehnung der Felder nach rechts */
background: #f8f8ff ! important; /* farbiger Hintergrund des Feldes */
z-index: 1000 !important;
}
/**** Button oben mit dem Zahnrad ****/
.page-options-menu > .more-options-button {
fill: red !important; /* rotes Zahnrad */
border: 1px solid grey !important; /* farbige Umrandung */
border-radius: 15px !important; /* Abrundung */
width: 60px !important; /* Länge des Button */
height: 30px ! important; /* Höhe des Button */
box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten */
}
/**** Button oben mit dem Zahnrad bei hover blau ****/
.page-options-menu > .more-options-button:hover {
fill: lime !important; /* Farbe des Zahnrades */
font-weight: bold !important;
}
/**** Hintergrund der einzelnen Boxen ****/
addon-page-options panel-list panel-item[accesskey][checked] {
background: unset !important;
}
/******************* Button auf der rechten Seite ****************************************************/
/**** Einsstellungen für den Block der rechten Button ****/
addon-list addon-card:not([expanded="true"]) panel-list {
position: absolute !important;
display: block !important;
overflow: hidden !important;
background: unset !important;
border: none !important;
box-shadow: unset !important;
min-width: unset !important;
width: unset !important;
left: unset !important;
top: unset !important;
right: 545px !important; /* Abstand der Button bei Erweiterungen vom rechten Rand */
bottom: unset !important;
}
/**** Abstand der Button vom rechten Rand bei Themes, Plugins, Wörterbücher, usw. *****/
addon-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"]) addon-card:not([expanded="true"]) panel-list {
right: 515px !important;
}
/**** Abstand der Button vom oberen Rand bei Plugins, Wörterbücher, usw. *****/
addon-list addon-card:not([expanded="true"]) panel-list {
margin-top: -60px !important;
}
/**** Abstand der Button vom oberen Rand bei Themes *****/
addon-list:-moz-any([type="theme"]) addon-card:not([expanded="true"]) panel-list {
margin-top: -100px !important;
}
/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
input[type="checkbox"].toggle-button {
margin-left: 280px !important; /* Abstand vom rechten Rand */
margin-bottom: 7px !important; /* Lage vertikal */
}
/* unter Verwalten das sich öffnende Menü verbreitern */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(about:addons) {
html body div#full div#content div#main div addon-card div.card.addon{
min-width: 1100px !important; /* Breite in px */
} }
/************************* Die großen Button auf der linken Seite **************************/
/**** Abstand der Button zum linken Rand ****/
#categories > .category, #preferencesButton, #helpButton, #addonsButton {
margin-left: 1px !important;
margin-right: 5px !important;
}
#categories > .category:not([disabled]){
background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
margin-top: 1px !important; /*Abstand zum Button darüber*/
border-radius: 60px !important;/*Rundung vom Button*/
box-shadow: inset 0 0 4px 4px #888;
}
/**** Aktiver Button rot, Schrift weiß ****/
#categories > .category[selected]{
color: white !important;
background-color: red !important;
margin-top: 1px !important;
border-radius: 60px !important;
box-shadow: inset 0 0 5px 5px #888;
font-weight: bold !important;
font-family: "Verdana, Helvetica", serif !important;
font-style: italic !important; /* Schriftstil */
font-size: 19px !important;
}
/**** Inaktive Button ****/
#categories > .category:not([selected]),
#preferencesButton,
#help-button,
#addonsButton {
background-color: gainsboro !important;
margin-top:1px!important;
border-radius:60px!important;
box-shadow: inset 0 0 5px 5px #888;
}
/**** Hintergrund der Button blau, Schrift weiß bei hover mit der Maus ****/
#categories > .category:hover, #preferencesButton:hover, #help-button:hover, #addonsButton:hover {
color: white !important;
background-color: blue !important;
margin-top: 1px !important;
border-radius: 60px !important;
box-shadow: inset 0 0 5px 5px #888;
}
/**** restore buttons ****/
addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
position: relative !important;
display: block !important;
overflow: hidden !important;
margin-top: -25px !important;
box-shadow: 0 0 3px 3px blue !important;
background: unset !important;
border: unset !important;
box-shadow: unset !important;
min-width: unset !important;
width: unset !important;
}
panel-item[badged] {
border: 1px solid Highlight !important;
}
panel-item[badged]::after,
:host([badged]) button::after,
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
:-moz-any(addon-options,plugin-options) button::after {
display: none !important;
content: unset !important;
}
panel-item[action="preferences"] {
order: -1;
}
/**** blendet den Text für privates Browsing ein ****/
.addon-badge-private-browsing-allowed::before {
content: "(In privaten Fenstern erlaubt)" !important;
margin-left: 10px !important; /* Entfernung nach rechts */
}
.addon-badge-private-browsing-allowed {
min-width: 440px !important; /* lila Icon Entfernung nach rechts */
}
/* Länge der Container unter Empfehlungen */
.card {
width: 650px!important; /* Länge */
background: #F2F4F7 !important; /* Hintergrund */
}
/**** Schrift und Abstand unter Plugins ****/
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container {
margin-left: -9px !important;
}
html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container h3.addon-name a.addon-name-link {
font-size: 13px !important; /* Schriftgröße */
}
/**** Unter Plugins Nachfragen ob aktiviert werden soll entfernt ****/
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
display: none !important;
}
/* Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
.back-button {
background-color: gainsboro !important;/*Hintergrundfarbe vom Button*/
width: 60px !important;
border-radius: 60px !important;/*Rundung vom Button*/
box-shadow: inset 0 0 3px 3px #888;
}
.back-button:hover {
color: white !important;
background-color: dodgerblue !important;
border-radius: 60px !important;
box-shadow: inset 0 0 3px 3px #888;
}
/* Aktiviert/Deaktiviert - Farbe */
.list-section-heading[data-l10n-id="extension-enabled-heading"],
.list-section-heading[data-l10n-id="theme-enabled-heading"],
.list-section-heading[data-l10n-id="plugin-enabled-heading"],
.list-section-heading[data-l10n-id="dictionary-enabled-heading"] {
font-weight: bold !important;
color: forestgreen !important;
text-indent: 15px;
}
.list-section-heading[data-l10n-id="extension-disabled-heading"],
.list-section-heading[data-l10n-id="theme-disabled-heading"],
.list-section-heading[data-l10n-id="plugin-disabled-heading"],
.list-section-heading[data-l10n-id="dictionary-disabled-heading"] {
font-weight: bold !important;
color: red !important;
text-indent: 15px;
}
/***************************************************************************/
/* Icons für Addon-Manager *** Menü hinter dem Zahnrad */
/*********** von Endor *********************************/
#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild5.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild61.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild3.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild66.ico');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
fill: transparent !important;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master//Icons/Bild62.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 16px;
margin-right: -32px;
margin-bottom: 3px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
content: '';
font-size: 14px;
padding-left: 12px !important;
padding-right: -6px !important;
padding-top: 1px !important;
padding-bottom: 2px !important;
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild63.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 18px;
margin-right: -32px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild64.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild67.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}Viel Erfolg damit!
In letzter Zeit kommt es im Addon-Manager, an dem ich auch mit gebastelt habe, immer mal zu Fehlern. Zuletzt in der 77 Beta nach dem letzten Update, wo unter Themes keine Grafiken mehr angezeigt werden (hatte ich auch schon in anderen Versionen). Deshalb hatte ich mich entschlossen mal einen neuen zu basteln. Dieser enthält hauptsächlich Codes von Aris, und alles was ich bisher hier zusammentragen konnte ( die fleißigen Helfer sind hier zur Genüge bekannt ).
Ich werde hier jetzt drei Codes anhängen, die ich persönlich gesondert in css-Dateien untergebracht habe, und dann mit @import-Befehl anspreche. Wer es zusammen nutzen möchte, muss alles in die userContent.css einfügen.
1. Addon-Manager
/*============================= Addon-Manager ================================*/
/* Addons-Verwaltung: Hintergrundfarben */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(about:addons) {
#sidebar {
background: #CDC8B1 !important; /* Hintergrund linke Seite */
}
.main-search,
.sticky-container,
.main-heading,
#content {
background: #EEEED1 !important; /* Hintergrund rechte Seite */
font-size: 15px !important;
} }
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/******** Button (kleine Quadrate) einrichten - farbliche Anpassung ********************/
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
-moz-context-properties: fill !important;
fill: red !important;
}
panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
-moz-context-properties: fill !important;
fill: green !important;
}
panel-item[data-l10n-id="remove-addon-button"] {
-moz-context-properties: fill !important;
fill: red !important;
}
panel-item[data-l10n-id="install-update-button"] {
-moz-context-properties: fill !important;
fill: blue !important;
}
panel-item[data-l10n-id="preferences-addon-button"] {
-moz-context-properties: fill !important;
fill: grey !important;
}
panel-item[data-l10n-id="report-addon-button"] {
-moz-context-properties: fill !important;
fill: orange !important;
}
panel-item[data-l10n-id="expand-addon-button"],
panel-item[data-l10n-id="manage-addon-button"] {
-moz-context-properties: fill !important;
fill: blue !important;
}
panel-item[data-l10n-id="ask-to-activate-button"] {
-moz-context-properties: fill !important;
fill: red !important;
}
panel-item[data-l10n-id="always-activate-button"] {
-moz-context-properties: fill !important;
fill: green !important;
}
panel-item[data-l10n-id="never-activate-button"] {
-moz-context-properties: fill !important;
fill: red !important;
} }
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/********* Versionsnummer wird angezeigt ************************************************/
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
/*restore version number */
div:not([current-view="updates"]) .addon-name-link[title]:not([data-l10n-args])::after,
div:not([current-view="updates"]) .addon-name[title]:not([data-l10n-args])::after {
display: block !important;
content: attr(title) !important;
margin-top: -22px !important;
} }
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/************Button (Felder) auf der rechten Seite **************************************/
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
html {
--addon-page-options-width: 340px;
}
/* <some> locales require adjustments */
html[lang="de"] {
--addon-page-options-width: 370px;
}
html:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
--addon-page-options-width: 440px;
}
html[lang*="es-"] {
--addon-page-options-width: 460px;
}
/**/
/* Umrandung und Hintergrund der Button rechte Seite */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
.addon.card panel-item:not([badged]){
border: 1px solid grey !important;
background: lightyellow !important;
/* border-radius: 50px !important; */
margin-top: -3px !important;
}
/* Umrandung und Hintergrund der Button rechte Seite bei Hover */
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]):hover,
.addon.card panel-item:not([badged]):hover{
border: 1px solid red !important;
background: blue !important;
color: white !important;
/* border-radius: 50px !important; */
}
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
.addon.card panel-item:not([badged]){
border: 1px solid lightgrey !important;
}
addon-list addon-card panel-list * {
background: white !important;
color: black !important;
}
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid black !important;
}
@supports -moz-bool-pref("browser.in-content.dark-mode") {
@media (prefers-color-scheme: dark) {
addon-list addon-card panel-list *,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: black !important;
color: white !important;
}
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid white !important;
}
} }
:-moz-any(addon-list,panel-list) panel-item{
margin: 0 1px !important;
}
/* reduce size of default buttons */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 2px 5px !important;
}
/* remove three dots button */
addon-card .more-options-button {
display: none !important;
}
/* remove button icon */
:host([checked]),
panel-item[checked],
:-moz-any(addon-list,panel-list) panel-item {
--icon: unset !important;
}
/* restore buttons */
div.arrow.top + div.list {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
}
panel-item[action="preferences"] {
order: -1;
}
panel-item[badged] {
border: 1px solid Highlight !important;
}
panel-item[badged]::after,
:host([badged]) button::after,
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
:-moz-any(addon-options,plugin-options) button::after {
display: none !important;
content: unset !important;
}
addon-page-options panel-list {
min-width: unset !important;
width: auto !important;
max-width: var(--addon-page-options-width) !important;
z-index: 1000 !important;
}
addon-page-options panel-list panel-item {
min-width: calc(var(--addon-page-options-width) - 20px) !important;
width: 320px !important;
}
.sticky-container {
z-index: 1000 !important;
}
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
padding-inline-start: 20px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
min-width: calc(var(--addon-page-options-width) - 10px) !important;
width: calc(var(--addon-page-options-width) - 10px) !important;
}
addon-page-options panel-list panel-item[accesskey][checked] {
background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
}
addon-card panel-list {
position: relative !important;
display: flex !important;
overflow: hidden !important;
background: unset !important;
border: unset !important;
box-shadow: unset !important;
min-width: unset !important;
width: unset !important;
float: right !important;
right: 36px !important;
}
addon-card panel-list {
margin-top: -48px !important;
}
addon-card .addon.card .theme-enable-button {
-moz-appearance: none !important;
min-width: 20px !important;
width: 20px !important;
max-width: 20px !important;
height: 20px !important;
font-size: 0 !important;
border: 1px solid !important;
border-top: 3px solid !important;
-moz-margin-end: 1px !important;
opacity: 0.9 !important;
}
addon-card .addon.card .theme-enable-button:hover {
cursor: pointer !important;
opacity: 1.0 !important;
filter: brightness(2.00) !important;
}
addon-card .addon.card[active="true"] .theme-enable-button {
background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-card:hover .addon.card[active="true"] .theme-enable-button {
background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
}
addon-card:hover .addon.card[active="false"] .theme-enable-button {
background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-card .card-contents {
display: block !important;
height: 40px !important;
}
addon-card .card-contents .addon-description {
display: block !important;
mask-image: linear-gradient(to left, transparent, black 10px) !important;
}
addon-card .addon.card .theme-enable-button,
input[type="checkbox"].toggle-button {
-moz-margin-end: 8px !important;
}
.card-contents input[type="checkbox"].toggle-button {
-moz-margin-end: 0px !important;
}
addon-card > .addon.card,
addon-card > .addon.card * {
overflow: hidden !important;
} }
/***************** Container anpassen **************************************************/
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {
/* Hintergrund der Container bei Hover andere Farbe */
addon-card:not([expanded="true"]) .addon.card:hover {
background: #76ee00 !important;
}
/* Abstand zwischen den Containern */
addon-card .addon {
margin: 7px !important;
}
/* Umrandung der Container bei Hover breiter Rand und andere Farbe */
:root {
--card-outline-color: DarkOrange !important;
}
/* Hintergrund der Container mit anderer Farbe */
addon-card:not([expanded="true"]) .addon.card {
background: #F1F7FC !important; /* Hintergrundfarbe */
border: 2px solid grey !important; /* Umrandung */
border-radius: 15px !important; /* Ecken abgerundet */
width: 1200px !important; /* Länge der Container */
max-height: 120px !important; /* Höhe der Container bei Themes */
} }
/****************** sonstige Anpassungen ***************************/
/* unter Themes die Grafik anpassen */
.card-heading-image {
min-width: 800px !important; /* Länge der Grafik */
height: 80px !important; /* Höhe der Grafik */
margin-left: -4px !important; /* Abstand vom linken Rand */
margin-top: -6px !important; /* Abstand vom oberen Rand */
}
/* blendet den Text für privates Browsing ein */
.addon-badge-private-browsing-allowed::before {
content: "(In privaten Fenstern erlaubt)" !important;
margin-left: 10px !important; /* Entfernung nach rechts */
}
.addon-badge-private-browsing-allowed {
min-width: 430px !important; /* lila Icon Entfernung nach rechts */
}
/* unter Verwalten das sich öffnende Menü verbreitern */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(about:addons) {
html body div#full div#content div#main div addon-card div.card.addon{
min-width: 1100px !important; /* Breite in px */
} }
/* Unter Plugins - Nachfragen ob aktiviert werden soll - entfernt */
.card > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
display: none !important;
}
/* fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. */
body {
counter-reset: section;
}
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
#main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
color: red !important;
font-weight: bold !important;
counter-increment: section;
content: counter(section, decimal-leading-zero)".) ";
padding-right: 20px !important;
margin-top: -2px!important; /* Lage im Container */
margin-left: 5px !important; /* Abstand vom linken Rand */
}
/* Größenänderung der Button rechte Seite */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 4px 25px !important; /* 4px ist die Höhe und 25px die Länge der rechten Button */
border: 1px solid grey !important; /* Umrandung */
}
/* Länge der Container unter Empfehlungen */
.card {
width: 800px!important; /* Länge */
background: white !important; /* Hintergrund */
}
/* Button mit dem Zahnrad */
.page-options-menu > .more-options-button {
fill: red !important; /* rotes Zahnrad */
border: 1px solid grey !important; /* farbige Umrandung */
border-radius: 15px !important; /* Abrundung */
width: 60px !important; /* Länge des Button */
height: 30px ! important; /* Höhe des Button */
box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
}
/* Button oben mit dem Zahnrad bei Hover */
.page-options-menu > .more-options-button:hover {
fill: lime !important; /* Farbe des Zahnrades */
}
/* Aussehen des Menü hinter dem Zahnrad */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
margin-left: 6% ! important;
min-width: 350px !important;
width: 375px !important; /* Länge der einzelnen Felder */
background: white ! important; /* Farbe des Hintergrundes */
}
.sticky-container {
z-index: 1000 !important;
}
addon-page-options panel-list panel-item {
width: 425px !important; /* Länge der aktivierten Menü-Leiste */
background: none ! important;
}
addon-page-options panel-list panel-item:hover {
width: 425px !important;
background: lime ! important;
color: red !important;
}
addon-page-options panel-list {
min-width: unset !important;
width: auto !important;
max-width: 430px !important; /* Ausdehnung der Felder nach rechts */
background: #f8f8ff ! important; /* farbiger Hintergrund des Feldes */
padding-left: 8px !important; /* Ausdehnung nach links */
padding-right: 3px !important; /* Ausdehnung nach rechts */
z-index: 1000 !important;
}
/* Hintergrund der Box Updates automatisch aktualisieren */
addon-page-options panel-list panel-item[accesskey][checked] {
background: gold !important;
}
/* Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
.back-button {
background-color: silver !important;/*Hintergrundfarbe vom Button*/
width: 60px !important;
border-radius: 60px !important;/*Rundung vom Button*/
box-shadow: inset 0 0 3px 3px #888;
}
.back-button:hover {
color: white !important;
background-color: dodgerblue !important;
border-radius: 60px !important;
box-shadow: inset 0 0 3px 3px #888;
}
/* Aktiviert/Deaktiviert - Farbe */
.list-section-heading[data-l10n-id="extension-enabled-heading"],
.list-section-heading[data-l10n-id="theme-enabled-heading"],
.list-section-heading[data-l10n-id="plugin-enabled-heading"],
.list-section-heading[data-l10n-id="dictionary-enabled-heading"] {
font-weight: bold !important;
color: forestgreen !important;
text-indent: 15px;
}
.list-section-heading[data-l10n-id="extension-disabled-heading"],
.list-section-heading[data-l10n-id="theme-disabled-heading"],
.list-section-heading[data-l10n-id="plugin-disabled-heading"],
.list-section-heading[data-l10n-id="dictionary-disabled-heading"] {
font-weight: bold !important;
color: red !important;
text-indent: 15px;
}
/* Aktiviert/Deaktiviert - Farbe - ENDE */ 2. große Button unter Addons und Einstellungen
/* Firefox Quantum userChrome.css tweaks *****************************/
/* Github: https://github.com/aris-t2/customcssforfx *****************/
/***** 2 Button links unten unter Add-ons ******/
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
.category {
-moz-margin-end: -4px !important;
}
.sidebar-footer-list {
margin-inline: 0px !important;
}
#preferencesButton { /* Einstellungen unten links */
fill: #8b8b8b !important;
background-color: gainsboro !important; /* Hintergrundfarbe vom Button */
margin-top: 1px !important; /* Abstand zum Button darüber */
border-radius: 60px !important; /* Rundung vom Button */
box-shadow: inset 0 0 5px 5px #888; /* innerer Schatten */
width: 180px !important; /* länge des Button */
}
#help-button { /* Hilfe für Add-ons unten links */
fill: #ff0000 !important;
background-color: gainsboro !important; /* Hintergrundfarbe vom Button */
margin-top: 1px !important; /* Abstand zum Button darüber */
border-radius: 60px !important; /* Rundung vom Button */
box-shadow: inset 0 0 5px 5px #888; /* innerer Schatten */
width: 180px !important; /* länge des Button */
}
#preferencesButton:hover,
#help-button:hover {
color: white !important;
background-color: blue !important;
} }
/**** Die großen Button auf der linken Seite unter Addons und Extras/Einstellungen ****/
/* Abstand der Button zum linken Rand */
#categories > .category, #generalButton, #homeButton, #searchButton, #privacyButton, #syncButton, #addonsButton, #helpButton {
margin-left: 1px !important;
}
#categories > .category:not([disabled]){
background-color: gainsboro !important; /*Hintergrundfarbe vom Button*/
margin-top: 1px !important; /*Abstand zum Button darüber*/
border-radius: 60px !important; /*Rundung vom Button*/
box-shadow: inset 0 0 5px 5px #888;
}
/* Aktiver Button rot, Schrift weiß */
#categories > .category[selected]{
color: white !important;
background-color: red !important;
margin-top: 1px !important;
border-radius: 60px !important;
box-shadow: inset 0 0 5px 5px #888;
}
/* Inaktive Button */
#categories > .category:not([selected]),
#addonsButton,
#helpButton {
background-color: gainsboro !important;
margin-top:1px!important;
border-radius:60px!important;
box-shadow: inset 0 0 5px 5px #888;
}
/* Hintergrund der Button blau, Schrift weiß bei hover mit der Maus */
#categories > .category:hover, #generalButton:hover, #homeButton:hover, #searchButton:hover, #privacyButton:hover, #syncButton:hover, #addonsButton:hover, #helpButton:hover {
color: white !important;
background-color: blue !important;
margin-top: 1px !important;
border-radius: 60px !important;
box-shadow: inset 0 0 5px 5px #888;
}3. Icons für das Menü hinter dem Zahnrad (von Endor)
/* Icons für Addon-Manager *** Menü hinter dem Zahnrad */
/*********** von Endor *********************************/
#page-options > panel-list:nth-child(1) > panel-item:nth-child(1)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild5.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(2)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild61.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(4)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild3.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(5)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild66.ico');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7) {
fill: transparent !important;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master//Icons/Bild62.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 16px;
margin-right: -32px;
margin-bottom: 3px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(7):not([checked])::before {
content: '';
font-size: 14px;
padding-left: 12px !important;
padding-right: -6px !important;
padding-top: 1px !important;
padding-bottom: 2px !important;
display: block;
width: 16px;
height: 16px;
background: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild63.png') no-repeat !important;
background-size: 18px 18px !important;
margin-left: 18px;
margin-right: -32px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(8)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild64.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}
#page-options > panel-list:nth-child(1) > panel-item:nth-child(10)::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('https://raw.githubusercontent.com/Endor8/CSS/master/Icons/Bild67.png');
background-size: 16px 16px !important;
margin-left: 15px;
margin-right: -31px;}(alles getestet bisher im Nightly)
Wer Lust auf Neues hat, bitte!
Hier noch Bilder dazu:
Wieso das so ist
weiß ich leider auch nicht.
Damit kann ich aber leben, nichts als Kleinigkeiten. Danke, Endor!