ich bin auch nur ein kleiner Bastler
Das hat doch nichts mit Übertreibung zu tun, wenn wir alle ehrlich sind, was würden wir ohne deine Hilfe hier anfangen . Das gilt natürlich auch für die anderen fleißigen Helfer, um niemanden hier zu übergehen. Danke!
Grüße
FuchsFan
Teste bitte mal, hover etc. musst du dir dann noch erstellen:
Sag ich doch, großer Meister. Perfekt Andreas, den Rest richte ich noch ein. 
Grüße
FuchsFan
Da passt alles, aber farblich doch anders als mein Code.
Dass die Farben anders sind will ich dir gerne glauben, aber wenn du den Code so in den Nightly übernommen hast, dann fehlen die Button auf der rechten Seite. Also da stimmt was nicht, oder?
Grüße
FuchsFan
Also nee echt...da fehlt ja ein Button (Deaktivieren)
Irrtum, großer Meister !!!
Bei Themes rechts unten, und unter Erweiterungen, der kleine blaue. Und weil du das hier ansprichst, der Deaktivieren/Aktivieren-Button bei Themes (siehe Bild aus #327) gefällt mir so auch nicht, aber ich habe mich schon garnicht mehr getraut das anzusprechen, weil ich in der Hauptphase der Bastelei schon genügend Wünsche erfüllt bekommen habe. Hast du noch eine Idee, wie der Button den anderen angepasst werden kann ?
Grüße
FuchsFan
Hast du meinen obigen Code für dein Beispiel verwendet?
Nein, das ist aus meinem gebastelten Code. Hast du mal bei den 100px andere Werte probiert, so habe ich das auch im alten Addon-Manager bis zur 71 hinbekommen. Ich hänge dir mal aus dem Nightly meinen aktuellen Code an, eventuell kannst du davon was verwenden.
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
@-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;
border: 1px solid green ! important;
}
/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/
:root {
--card-outline-color: DarkOrange !important;
}
/***************** weitere Einstellungen für die Container der rechten Seite ********************/
/**** Ausdehnung der Container zum rechten Rand hin / alle Rubriken **** von BrokenHeart ****/
:root {
--section-width: -1 !important; /* nicht verändern */
}
.card-heading-image {
height: 100px !important; /* ist für Rubrik Themes angepasst */
}
/*** Abstand zwischen den Containern ********/
addon-card .addon {
margin: 5px !important;
border: 1px solid grey !important;
border-radius: 20px !important;
}
/**** unter Themes die Grafiken versetzt ****/
.card-heading-image {
margin: -6px -6px 16px !important;
}
/****** Höhe der Container ****/
addon-list[type="extension"]{ --card-padding: 25px }
addon-card .addon-card-collapsed{ margin-bottom: 2px !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;
}
/**** 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:5px!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; /* oder: / gold / #fffff0 / #fff68f */
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 10px !important; /* 10px Abstand zwischen den Button rechte Seite */
/*box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten der rechten Button */
border-radius: 80px !important; /* Abrundung der Button */
box-shadow: 5px 5px grey, inset 0 0 3px 3px grey; /* äußerer und 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;
}
/**** Hintergrund bei Hover rechte Button ****/
button:focus,
button:enabled:hover {
background-color: #1e90ff !important; /* beliebige Farbe eintragen */
border-radius: 80px !important;
color: white ! important;
box-shadow: inset 0 0 3px 3px lightgrey;
}
/******************** 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 */
/*background: gold ! important; /* Farbe des Hintergrundes */
margin-left: 11% ! important; /** Schrift ausrichten ab linkem Rand **/
}
.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;
box-shadow: 4px 4px grey, inset 0 0 3px 3px grey; /* äußerer und innerer Schatten */
}
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: 70px !important; /* Länge des Button */
height: 30px ! important; /* Höhe des Button */
box-shadow: inset 0 0 3px 3px grey; /* innerer Schatten */
}
/**** Optionen-Button (Zahnrad) ****/
button.more-options-button:nth-child(1) {
position: absolute !important;
left: 9% !important; /* Abstand zum linken Rand */
margin-top: 28px !important; /* Abstand vom oberen Rand */
}
/**** Button oben mit dem Zahnrad bei hover blau ****/
.page-options-menu > .more-options-button:hover {
fill: lime !important; /* Farbe des Zahnrades */
}
/**** 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: 20px !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: 12px !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: -130px !important;
}
/*** Button Deaktivieren/Aktivieren (kleiner blauer) ***/
input[type="checkbox"].toggle-button {
margin-right: 520px !important; /* Abstand vom rechten Rand */
}
/************************* Die großen Button auf der linken Seite **************************/
/**** Abstand der Button zum linken Rand ****/
#categories > .category, #preferencesButton, #helpButton, #addonsButton {
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]),
#preferencesButton,
#helpButton,
#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, #helpButton: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;
box-shadow: 0 0 5px 5px 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 */
}
/**** Detailanzeige unter Verwalten ****/
addon-card[expanded] .addon.card {
margin-top: 3% ! important; /* Zahnrad-Button nach unten verlagern */
}
/**** manuelle Update-Suche Benachrichtigung (Text) nach links verlagern ****/
#updates-message {
margin-right: 66% ! important;
margin-top: 2% ! important; /* senkrechte Lage */
color: #00cd00 ! important; /* Farbe der Schrift */
font-weight: bold !important; /* fette Schrift */
margin-bottom: -3% ! important;
}
/**** unter - Tastenkombination für Erweiterungen verwalten - den Zahnrad-Button senkrecht verlagern ****/
.shortcut.card {
margin-top: 50px !important;
}
/******** Suchfeld für Erweiterungen wird ausgeblendet *****/
.main-search {
display: none !important;
}
}Grüße
FuchsFan
Hat jemand ne Idee?
Zeile 3 xul in xhtml ändern. Das hat bei mir geholfen.
Grüße
FuchsFan
Lässt sich da noch etwas nachbessern?
Ja, ich denke schon.
1. Für die Ausdehnung zum rechten Rand hin verwende ich diesen Code von BrokenHeart. Bei dem Wert
.card-heading-image kannst du die Höhe der Container unter Themes anpassen, damit auch die Grafiken wieder angezeigt werden.
/**** Ausdehnung der Container zum rechten Rand hin / alle Rubriken **** von BrokenHeart ****/
:root {
--section-width: -1 !important; /* nicht verändern */
}
.card-heading-image {
height: 100px !important; /* ist für Rubrik Themes angepasst */
} sieht dann so aus:
2. Damit die Grafiken nicht über den Rand hinaus stehen benutze ich diesen Code von Andreas:
/**** unter Themes die Grafiken versetzt ****/
.card-heading-image {
margin: -6px -6px 16px !important;
} Grüße
FuchsFan
Vielleicht magst Du nochmal Deinen gesamten css-Code hier einstellen?
Daran soll es nicht liegen, habe kein Problem damit. 
Aber , um das Aussehen zu erreichen, gehören 7 Scripte, 29 Chrome-css- und 3 Content-css-Dateien dazu. So, wenn du das so übernehmen willst, so musst du die Zip-Datei entpacken und den Ordner Chrome in deinem Profil austauschen. Lege dir aber von deinem vorher eine Sicherung an. Außerdem sei dazu gesagt, dass alles für mein Laptop mit Auflösung 1920x1080 eingerichtet ist. Das abzuändern sollte aber keine Schwierigkeiten bedeuten, musst einfach hier nachfragen. So , dann versuche es .
Sieht gut aus, der 'entjungferte' Firefox...
Danke, du bringst mich in Verlegenheit. 
Grüße
FuchsFan
Jetzt gefällt mir die Breite, aber das Kreuz ist weg...
Kannst ja mal den Code probieren, den verwende ich dafür:
/************* Tabschliessen-Button ****************/
.tab-close-button.close-icon{
display: -moz-box !important;
width: 20px; height: 20px !important;
border: none !important;
background-color: none !important;
}
.tab-close-button {
color: red !important; /* Farbe des Kreuzes */
} So sieht es dann mit Breite 130px aus, Kreuz ist da.
Andreas und BrokenHeart , das ist aus dem Code von #37 geworden, ich bin euch sehr dankbar. Hätte nicht geglaubt, dass es noch machbar wäre. Das ist das Ergebnis, aus einem jungfräulichen Firefox gemacht.
Grüße
FuchsFan
Folgende Regel hinzufügen, sollte reichen:
Ich danke dir, auch das funktioniert.
Grüße
FuchsFan
Den hatte ich für das gif installiert gehabt.
Ja, Andreas, den ersten Code aus #1 mit meinem alten Code , zusammen sieht es dann so aus, ohne daran etwas zu ändern.
Danke für den Tipp. Da lässt sich was machen.
Grüße
FuchsFan
Du könntest dir aber auch den ersten Code installieren, und nach deinen Wünschen anpassen.
Ja, dann werde ich das mal machen. Danke!
Mit deinem Code meist du den aus #60 ?
Dann muss BrokenHeart seinen Code mal anpassen
Das wäre sehr schön, dann wüsste man dazu, wo angesetzt werden muss.
Danke, Andreas!
Grüße
FuchsFan
Es ist nicht die feine Art so wie man sagt, aber teste bitte mal mit diesem Zusatzcode:
Nein, Andreas, da ändert sich nichts. Gelb, dafür ist ja schon die Zeile 178, und die macht es ja auch. Aber fette und farbige Schrift, das will bei Hover nicht klappen.
weil schon in Zeile 184 ein Code dafür enthalten ist
Im unteren Teil des Codes habe ich alles was mir bisher bekannt war probiert, es bleibt ohne Wirkung. Nur die beiden Farben funktionieren, die ich eingetragen habe.
Den Code habe ich in den anderen Firefox zu laufen, und der greift, aber nicht zusammen mit diesem neuen Code.
/*** nicht aktiver Tab ändert Farbe nach Überfahren mit der Maus ******/
.tabbrowser-tab:hover {
background-image: linear-gradient(to top, gold 30%, yellow 60%)!important;/*background: yellow !important;*/
color: black !important;
} So, Andreas, mit deinem Code aus Beitrag #60 ändert sich bei yellow das Schließenkreuz in diese Farbe bei Mauskontakt. Alles andere ohne Reaktion.
In dem angehängten Code habe ich die Zeilen 164 und 178 geändert.
/* -------------------------------------------*/
/* Mehrzeilige Tabreihen (Abgerundete Ecken) */
/* -------------------------------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 212px !important;
box-shadow: inset 0 0 3px 3px #6495ED; /* innerer Schatten der Tabs */
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 30px !important; /* Tab-Höhe(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Anzahl der Tabreihen * Minimal-Höhe */
-moz-window-dragging: no-drag !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]),
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
tabs tab {
border-left: solid 1px hsla(0,0%,50%,.5);
border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}
#TabsToolbar:not(:-moz-lwtheme){
color: black !important;
}
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
font-weight: 500 !important;
font-size: 13px !important;
font-family: "Arial" !important;
color: black !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
color: black !important;
font-weight: 700 !important;
font-size: 12px !important;
font-family: "Arial" !important;
}
/**** Schrift im Zentrum des Tabs ****/
.tab-label {
-moz-box-flex: 1 !important;
text-align: center !important;
}
/**** obere Tab-Line entfernen ****/
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/**** doppelte graue Linie unter der Tabs-Toolbar entfernt ****/
#nav-bar {
box-shadow: none !important;
}
/**** Tab-Höhe ****/
.tabbrowser-tab {
min-height: 26x !important;
max-height: 26px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/**** Tab-Rahmen entfernen ****/
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/* Tab-Schließen-Button entfernen *
.tabbrowser-tab .tab-close-button {
visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
margin-right : -1px !important;
background: unset ! important;
border-radius: 80px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
background: gold !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background: yellow !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !important;
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !important;
}Entschuldigt bitte, konnte nicht gleich antworten, musste kurz weg. Ich melde mich gleich dazu.
Grüße
FuchsFan