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?
Wie wäre es mal mit nem Screenshot?
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?
Wie wäre es mal mit nem Screenshot?
Brauche noch einmal Hilfe:
Wie lautet der Code, um das :hover der Elemente im drop-down menü rechts oben im Kasten der einzelnen Erweiterungen (u.a. "Auf Updates prüfen") anzusprechen?
rechts oben im Kasten der einzelnen Erweiterungen (u.a. "Auf Updates prüfen") anzusprechen?
So habe ich auch geguckt.
rechts oben im Kasten der einzelnen Erweiterungen (u.a. "Auf Updates prüfen") anzusprechen?
Genau den meine ich jetzt.
Den Code für den Hintergrund und die Schrift habe ich selber gefunden. Nur ich finde nichts funktionierendes für :hover der einzelnen Einträge.
Nur ich finde nichts funktionierendes für :hover der einzelnen Einträge.
Teste bitte das ↓.
Nur ich finde nichts funktionierendes für :hover der einzelnen Einträge.
Teste bitte das ↓.
Danke. Hat nicht 100% funktioniert, war aber eine große Hilfe.
Hier die (bei mir) funktionierende Lösung:
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?
Wie wäre es mal mit nem Screenshot?
z.B.
2002Andreas hat doch Gif's eingestellt!
Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.
Aber hier mal zwei Beispiele, wie ich mir das vorstelle.
...
Kannst du mir bitte noch sagen, wie ich bei dem drop-down Menü bei :hover den border-radius ändern kann?
CSS Alles anzeigen#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; }
Denn das funktioniert ja nicht!
Und links, wie rechts ist es dann halt auch nicht möglich den Hintergrund "einzuschränken".
Hier die (bei mir) funktionierende Lösung:
Die beiden --in-content-button-Einträge können wiederum bei mir nicht funktionieren, das ist per :root-Eintrag auf unset gesetzt, das hatte ohne diesen :root-Eintrag bei mir einen sehr merkwürdigen Effekt.
Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.
Natürlich, denn die ganze Zeile ist das panel-item, in dem Fall müsstest Du mit margin-left und margin-right arbeiten, aber eben nicht nur bei dem Eintrag fürs hovern.
Bei mir sieht die panellist übrigens so ↓ aus.
Teste bitte:
addon-page-options panel-list {
border: 2px ridge lightgrey !important;
border-radius: 10px !important;
background-color: rgb(32,32,35) !important;
width: 354px !important;
padding: 5px !important;
}
/* Hoverfarbe grün */
addon-page-options panel-list panel-item:hover {
border-radius: 20px !important;
background-color: green !important;
}
Alles anzeigen
Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.
Natürlich, denn die ganze Zeile ist das panel-item, in dem Fall müsstest Du mit margin-left und margin-right arbeiten, aber eben nicht nur bei dem Eintrag fürs hovern.
D.h. ich müsste erst das "Menü" verbreitern,
um dann links wie rechts das panel-item jeweils um ca. 5px einzuschränken.
UND um einen Radius hinzuzuzaubern?
Oh weh.
D.h. ich müsste erst das "Menü" verbreitern,
um dann links wie rechts das panel-item jeweils um ca. 5px einzuschränken.
UND um einen Radius hinzuzuzaubern?
Nein, teste bitte meinen Code vorher...
D.h. ich müsste erst das "Menü" verbreitern,
Musst Du nicht.
Teste bitte:
Ich denke mal, das das die falsche panel-list ist.
Welch schwierige Geburt!
Nun klappt es aber, so wie von mir gewünscht.
Danke für die Zaunlatte, Dharkness.
Danke für den Code, grisu2099.
Danke 2002Andreas für Deinen Code.
Alles zusammen ergibt folgenden funktionierenden Code:
/**************************************/
/**** Menü unter "Zahnrad" Expand ***/
/**************************************/
#page-options panel-item {
--in-content-button-background-hover: transparent !important;
--in-content-button-text-color-hover: #FFA500 !important;
--in-content-button-background-active: transparent !important;
}
addon-page-options panel-list {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: #FFA500 !important;
width: 340px !important;
padding: 5px !important;
background-color: #2B2B2B !important;
}
/* Hoverfarbe #404040 */
addon-page-options panel-list panel-item:hover {
border-radius: 8px !important;
background-color: #5c5c5c !important;
}
/* Activfarbe #404040 */
addon-page-options panel-list panel-item:active {
background-color: #404040 !important;
}
Alles anzeigen
Ich denke mal, das das die falsche panel-list ist.
Ich nicht...
Hier die (bei mir) funktionierende Lösung:
Nur mal so.
Das :hover jeweils am Ende brauchst du nicht:
addon-options > panel-list > panel-item:hover,
plugin-options > panel-list > panel-item:hover
weil es hier ja schon enthalten ist:
--in-content-button-background-hover: #ffd700 !important;
--in-content-button-text-color-hover: #9c1818 !important;
Der Code funktioniert in diesem Fall zwar trotzdem, aber das ist Zufall wie ich meine.
Käse, jetzt habe ich mit Verfügbaren Updates anzeigen das gleiche Problem!
Es wird durch root,
genauer durch die Einträge
--in-content-button-background: rgba(207,207,216,.33);
--in-content-button-background-hover: rgba(207,207,216,.66);
--in-content-button-background-active: rgb(207,207,216);
verschiedene Hintergründe festgelegt.
Wenn ich jedoch
:root {
--in-content-button-background: red !important;
--in-content-button-background-hover: green !important;
--in-content-button-background-active: blue !important;
}
nutze, ändert sich nichts.
Wenn ich statt
:root, [data-l10n-id="addon-updates-manual-updates-found"] eintrage, ändert sich auch nichts
1. Wie bekomme ich den nicht passenden Hintergrund transparent?
2. Wie kann ich "neuen", abgerundeten und mit eigenen Farben versehenen Hintergrund definieren?
Wie bekomme
Ich bin mir nicht sicher was genau du meinst.
Geht es um diesen Button?
Wenn ja:
#updates-message {
--in-content-button-background: red !important;
--in-content-button-background-hover: green !important;
--in-content-button-text-color-hover: #FFA500 !important;
}
Evtl. hilft dir das bei deinem Problem weiter.
Wie bekomme
Ich bin mir nicht sicher was genau du meinst.
Geht es um diesen Button?
Ja!
Auf den Punkt! Vielen Dank.
Ich habe daraus, ...
#updates-message {
--in-content-button-background: transparent !important;
--in-content-button-background-hover: transparent !important;
--in-content-button-text-color-hover: #FFA500 !important;
--in-content-button-background-active: transparent !important;
}
..., gemacht. Somit ist Aufgabe 1 gelöst.
Nun zu 2.
Den "Rahmen" bei hovern einfärben
und Hintergründe devinieren, ähnlich wie oben beschrieben!
Z.Z. schaut der "Eintrag" (Button) gehovert so aus:
Wenn Du/sich jemand fragt, was ich genau meine, stelle ich nochmal Bildchen ohne Code ein.
1. normal
2. hover
3. active
Deshalb dieser Aufwand!
Mit diesem Code bin ich recht nahe an meinem Ziel.
#updates-message {
border-width: 2px !important;
border-style: solid !important;
border-color: transparent !important;
}
#updates-message:hover {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: #FFA500 !important;
}
Alles anzeigen
Hier mal der komplette Code für about:addons
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(about:addons) {
/*---------------------------------*/
/*********** Hintergrund ***********/
/*---------------------------------*/
html {
background-color: #2B2B2B !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm gray17 #2B2B2B 43,43,43 */
}
#main {
margin-top: 5px;
}
/*---------------------------------*/
/*********** Auswahlfeld ***********/
/*---------------------------------*/
#sidebar {
background: #2B2B2B !important;
}
/* Text & Icons */
#categories > .category {
color: #E0E0E0 !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm gray88 #E0E0E0 */
}
/* Augewähles Element in Auswahlfeld (Text) */
.category[selected] > .category-name,
.category.selected > .category-name {
color: #FFA500 !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm orange #FFA500 255,165,0 */
}
/* Augewähles Element in Auswahlfeld (Icon) */
.category[selected] {
fill: #FFA500 !important;
}
#categories > .category[selected] {
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #FFA500 !important;
}
/* Augewähles Element in Auswahlfeld (gedrückt) */
#categories > .category {
color: #E0E0E0 !important;
background-color: #2b2b2b !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm gray25 #404040 64,64,64 */
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #E0E0E0 !important;
}
#categories > .category:hover {
background-color: #404040 !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm gray25 #404040 64,64,64 */
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #FFA500 !important; /* https://www.farb-tabelle.de/de/farbtabelle.htm orange #FFA500 255,165,0 */
}
button.category {
margin-top: 3px !important;
}
/* Links unten links */
.sidebar-footer-label {
color: #E0E0E0 !important;
}
.sidebar-footer-icon {
fill: #E0E0E0 !important;
}
.sidebar-footer-link {
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #E0E0E0 !important;
}
.sidebar-footer-link:hover {
background-color: #404040 !important;
}
.sidebar-footer-link:hover {
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #FFA500 !important;
}
.sidebar-footer-list > li {
margin-top: 3px !important;
}
/* Hintergründe */
.main-search,
.sticky-container,
.main-heading,
#content {
background: #2B2B2B !important;
}
/* Suchfeld */
search-addons > search-textbox {
background: #2B2B2B !important; /* Hintergrund Eingabefeld */
}
search-textbox {
border: 1px solid #E0E0E0 !important; /* Rahmen des Eingabefelds */
border-radius: 4px;
}
search-textbox[focused] {
border-color: transparent !important; /* Rahmen des Eingabefelds (Aktiv) */
outline: 2px solid #FFA500 !important;
}
/* Position des Button mit Zahnrad */
.main-heading {
max-width: 1045px !important;
}
/**** Button oben mit dem Zahnrad ****/
.page-options-menu > .more-options-button {
fill: #E0E0E0 !important; /* Farbe d. Zahnrades */
outline-width: 1px !important; /* Dicke d. Umrandung */
outline-style: solid !important; /* Art d. Umrandung */
outline-color: #E0E0E0 !important; /* Farbe d. Umrandung */
border-radius: 8px !important;
width: 70px !important; /* Länge des Button */
/* height: 30px ! important; /* Höhe des Button */
}
.back-button {
width: 70px !important;
}
/**** Button oben mit dem Zahnrad (hover) ****/
.page-options-menu > .more-options-button:hover {
fill: #FFA500 !important; /* Farbe des Zahnrades */
outline-width: 2px !important;
outline-style: solid !important;
outline-color: #FFA500 !important;
background-color: #404040 !important;
}
/**** Updates ****/
#updates-message {
outline-width: 1px !important;
outline-style: solid !important;
outline-color: #E0E0E0 !important;
border-radius: 8px;
height: 30px !important;
background: #2B2B2B !important;
}
/* Überschriften */
.header-name {
color: #E0E0E0 !important;
}
/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/
:root {
--card-outline-color: none !important;
--card-padding: 18px !important; /* Abstände innerhalb der Container */
}
/* Vorschauen in den Containern */
.card-heading-image {
border-radius: 8px !important;
}
/*
addon-card:not([expanded="true"]) .addon.card {
outline: 3px solid orange;
outline-offset: 2px;
} */
/*** Button "Mehr Add-ons ansehen" ***/
button.primary {
background-color: #2B2B2B!important;
color: #E0E0E0 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #E0E0E0 !important;
}
button.primary:enabled:hover {
background-color: #2B2B2B !important;
color: #FFA500 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
border-color:#FFA500 !important;
}
/*************************/
/**** Empfehlungen ****/
/*************************/
/* Textfarbe (Empfehlungen) */
body {
color: #E0E0E0 !important;
}
/* Linkfarbe (Empfehlungen) */
a {
color: #FFA500 !important;
}
a:hover {
color: #FFA500 !important;
text-decoration: none !important;
}
/* Breite der Container */
#main {
max-width: 1050px !important;
}
/* Container */
.card {
border: none !important;
background: #2B2B2B !important;
/* border-width: 3px !important; */
/* border-style: solid !important; */
/* border-color: #E0E0E0 !important; */
border-radius: 8px !important;
/* outline: 3px solid #E0E0E0; */
outline-width: 1px !important;
outline-style: solid !important;
outline-color: #E0E0E0 !important;
/* outline-offset: 2px; */
width: 1008px; /* Ausdehnung der Container zum rechten Rand */
}
.card:hover {
/* background: #2B2B2B !important; */
background-color: #404040 !important;
/* border-width: 3px !important; */
/* border-style: solid !important; */
/* border-color: #FFA500 !important; */
border-radius: 8px !important;
outline-width: 3px !important;
outline-style: solid !important;
outline-color: #FFA500 !important;
/* outline-offset: 2px; */
}
/* Höhe der Container */
.addon-description {
line-height: 25px !important;
}
/* Image in den Container in der Höhe verschoben */
addon-card[expanded] .addon.card {
margin-top: 10px !important;
}
/* Image in den Container in der Größe angepasst */
.card-heading-image {
width: 1040px !important;
height: 100px !important;
}
/*************************/
/**** Erweiterungen ****/
/*************************/
/* Schieberegler */
input[type="checkbox"].toggle-button {
background: #8b8b8b !important;
border-color: #E0E0E0! important;
}
input[type="checkbox"].toggle-button:checked {
background: #FFA500 !important;
border-color: #FFA500 !important;
}
input[type="checkbox"].toggle-button:hover {
background: #FFA500 !important;
border-color: #FFA500 !important;
}
/* Sternchen */
.disco-description-statistics {
color: #FFA500 !important;
}
/* Sternchen & mehr */
.addon-detail-rating {
color: #FFA500 !important;
}
/* Überschriften in den Containern */
recommended-addon-card {
color: #E0E0E0 !important;
}
recommended-addon-card:hover {
color: #E0E0E0 !important;
}
/* Buttons im Allgemeinen */
button {
color: #E0E0E0 !important;
}
button:enabled:hover {
color: #FFA500 !important;
}
button:focus-visible {
outline-color: transparent !important;
}
/* Tastenkombinationen von Erweiterungen verwalten */
[class="shortcut-input"] {
appearance: none;
border: 1px solid #E0E0E0 !important;
border-radius: 8px !important;
color: #E0E0E0 !important;
background-color: #2B2B2B!important;
}
[class="shortcut-input"]:hover {
border: 1px solid #FFA500 !important;
background-color: #404040!important;
}
[class="shortcut-input"]:focus {
border: 1px solid #FFA500 !important;
background-color: #404040 !important;
outline: none !important;
}
/**************************************/
/**** Container Expand ***/
/**************************************/
/* "Knöpfe" */
input[type="radio"]:enabled:checked {
background-color: #FFA500 !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #FFA500 !important;
}
input[type="radio"]:enabled:checked:hover {
background-color: #FFA500 !important;
}
input[type="radio"]:enabled:hover {
background-color: #FFA500 !important;
}
input[type="radio"] {
border-width: 1px !important;
border-style: solid !important;
border-color: #E0E0E0 !important;
}
.more-options-button, /* Button mit den drei Punkten */
.back-button, /* Button Zurück */
.disco-cta-button, /* Buttons in den Containern unter Empfelungen */
.theme-enable-button { /* Buttons in den Containern unter Themes */
background-color: #2B2B2B !important;
outline-width: 1px !important;
outline-color: #E0E0E0 !important;
outline-style: solid !important;
border-radius: 8px !important;
}
.more-options-button:hover, /* Button mit den drei Punkten */
.back-button:hover, /* Button Zurück */
.disco-cta-button:hover, /* Buttons in den Containern unter Empfelungen */
.theme-enable-button:hover { /* Buttons in den Containern unter Themes */
outline-width: 2px !important;
outline-color: #FFA500 !important;
background-color: #404040 !important;
}
.back-button:hover {
background-color: #404040 !important;
}
/* Icons ausblenden */
/* panel-item {
--icon: unset !important;
}
*/
/* Menü unter den drei Punkten */
/*
addon-list addon-options > panel-list[role="menu"],
addon-list plugin-options > panel-list[role="menu"] {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: orange !important;
background-color: #2B2B2B !important;
padding: 0 0 2px 0 !important;
margin-top: -1px !important;
}
addon-list addon-options > panel-list > panel-item-separator,
addon-list plugin-options > panel-list > panel-item-separator {
background: #E0E0E0 !important;
margin: 2px 0 0 0 !important;
}
panel-list {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: orange !important;
background-color: #2B2B2B !important;
}
*/
/* Dreipunkte Button für Erweiterungen und Themes. */
addon-list addon-options > panel-list > panel-item {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
border-radius: 4px !important;
border: 1px solid #E0E0E0 !important;
margin: 2px 2px 0 2px !important;
}
addon-list addon-options > panel-list[role="menu"],
addon-list plugin-options > panel-list[role="menu"] {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: orange !important;
background-color: #2B2B2B !important;
}
addon-list addon-options > panel-list > panel-item:hover,
addon-list addon-options > panel-list > panel-item[action="preferences"]:hover,
addon-list addon-options > panel-list > panel-item[action="remove"]:hover,
addon-list addon-list addon-options > panel-list > panel-item[action="expand"]:hover,
addon-list addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item:hover,
addon-list plugin-options > panel-list > panel-item[action="manage-addon-button"]:hover {
background-color: #404040 !important;
}
/* Dreipunkte Button in der Detailansicht. */
div#main[current-view="detail"] addon-card panel-list panel-item-separator {
background: #E0E0E0 !important;
margin: 2px 0 0 0 !important;
}
div#main[current-view="detail"] addon-card panel-list > panel-item {
--in-content-button-background: none !important;
--in-content-button-background-hover: none !important;
--in-content-button-background-active: none !important;
border-radius: 4px !important;
border: 1px solid #E0E0E0 !important;
background-color: #2B2B2B !important;
margin: 2px 2px 0 2px !important;
}
div#main[current-view="detail"] addon-card panel-list > panel-item:hover {
background-color: #404040 !important;
}
/**************************************/
/**** Menü unter "Zahnrad" Expand ***/
/**************************************/
#page-options panel-item {
--in-content-button-background-hover: transparent !important;
--in-content-button-text-color-hover: #FFA500 !important;
--in-content-button-background-active: transparent !important;
}
addon-page-options panel-list {
border-radius: 8px !important;
border-width: 2px !important;
border-style: solid !important;
border-color: #FFA500 !important;
width: 340px !important;
padding: 5px !important;
background-color: #2B2B2B !important;
}
/* Hoverfarbe #404040 */
addon-page-options panel-list panel-item:hover {
border-radius: 8px !important;
background-color: #5c5c5c !important;
}
/* Activfarbe #404040 */
addon-page-options panel-list panel-item:active {
background-color: #5c5c5c !important;
}
.category[badge-count]::after {
background-color: #FFA500 !important;
color: #2B2B2B !important;
border-radius: 100px !important;
}
.more-options-button-badged::after {
background-color: #FFA500 !important;
}
#updates-message {
--in-content-button-background: transparent !important;
--in-content-button-background-hover: transparent !important;
--in-content-button-text-color-hover: #FFA500 !important;
--in-content-button-background-active: transparent !important;
}
}
Alles anzeigen