So, Büssen, hier wird nicht aufgegeben, soweit kommt das noch.
Du nimmst jetzt mal für den kleinen Bildschirm diesen Code (kannst für jeden nehmen mit Anpassungen), die Breite der Container ist auf 800 Pixel eingestellt. Das kannst du verändern in Zeile 55 . Die Grafiken unter Themes haben auch diese Länge , dann passt es, können aber auch angepasst werden. Kann aber auch so bleiben, auch wenn du die Container verkürzen solltest, so schneiden die Grafiken mit dem rechten Rand ab.
Aus dem Code habe ich noch die blaue Schrift für das private Browsing enfernt, weil die Button eventuell alles überdecken. Richtet sich immer danach, wie lang die Container sind.
Was nicht so schön ist, dass bei Plugins die Button die Schrift überlagern, aber Kompromisse muss man hierbei schon eingehen.
So dann bitte Testen!
CSS
/*============================= 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 ************************************/
/********* 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;
} }
/***************** 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 */
width: 800px !important; /* Länge aller Container */
max-height: 120px !important; /* Höhe der Container bei Themes / nicht unterschreiten */
} }
/* 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{
border: 2px solid grey !important; /* Umrandung auch bei allen Containern wirksam */
border-radius: 15px !important; /* Ecken abgerundet */
} }
/* 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;
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;
}
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;
} }
/****************** 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 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: 5px !important;
margin-top: -2px!important; /* Lage im Container */
margin-left: 1px !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: 3px 20px !important; /* 3px ist die Höhe und 22px 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 */
}
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
background: lightyellow !important;
}
.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;
}
/*** ENDE - Aussehen des Menü hinter dem Zahnrad ***/
/* 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 */ 
. Eventuell können andere Leute nachhelfen.
