Beiträge von Firefox_94.0.1

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Einen Link habe ich mittlerweile

Ich vermute mal, du verwechselst da etwas
Mit dem Zusatz in meinem Code sieht das z.B. bei Amazon so aus:

Und so ohne den Zusatz:
Dann hat der Eintrag links auch deine Hg Farbe.
Bei deinem Link hat der Zusatz keine Wirkung.
Ist z.B. hier ja auch schon so im Antwortenfenster bei einem Rechtsklick:
Das entspricht ja auch dem normalen Kontextmenü vom Firefox, und nicht das einer Webseite.
Ob man da etwas ändern könnte, bin ich überfragt.

Alles anzeigen

Ja, mit deinem Code funktioniert es, dass es sich nicht auf Webseiten auswirkt. Jedoch habe ich damit das im Edit von #22 beschriebene und in #34 erneut geschilderte Problem. Wenn du mir sagst, wie ich diese Bildschirmaufnahmen starten kann, könnte ich ein Video von dem Phänomen reinstellen.

Firefox_94.0.1

Zitat von Mira_Belle

Firefox_94.0.1 Ist tatsächlich so, nur kann ich mir da keinen Reim drauf machen, Sorry.
Nutze Andreas CSS aus Beitrag #24, da tritt das dann nicht auf.
Und Dein geschildertes Problem aus #22 ist damit auch erledigt, gerade getestet.

Nachtrag!
Dass der Code auch auf Websites wirkt, hat mit dem Selektor "menuitem" zu tun.
Der ist wohl zu allgemein.
Ich werde da noch etwas herumprobieren, aber mit Andreas CSS sollten ja Deine Wünsche erfüllt sein.

MIt dem .css aus #24 habe ich aber das Problem, welches ich im Edit geschildert hatte: Wenn ich einen Menüpunkt verlasse, wird der Hintergrund weiß mit schwarzer Schrift und auch meine px-Einstellung ist weg. Ich werde (wohl) bei deinem bleiben und mich damit abfinden, dass es auch auf (manche) Kontexemüs in Webseiten auswirkt.

Firefox_94.0.1

Zitat von Mira_Belle

Firefox_94.0.1 Hättest Du mal einen Link, wo Dir das passiert?
Und Du musst natürlich in Deiner userChrome.css
in der ersten Zeile @-moz-document url(chrome://browser/content/browser.xhtml) { stehen haben
und das ganze dann in der letzten Zeile auch mit ) abschließen!

Leider funktioniert das trotz @-moz-document nicht. Einen Link habe ich mittlerweile. Hier im Forum bei der erweiterten Suche das Menü, bei welchem man die Seitenteile auswählen kann, in welchen gesucht werden soll: https://www.camp-firefox.de/suche/

Firefox_94.0.1

Zitat von Mira_Belle

Kann und darf auch ausprobiert werden, Farben müssen halt nach eigenen Wünschen angepasst werden.

CSS

menu,	
menuitem {
		&:where([disabled="true"]) {
      		border-radius: 10px !important;
			/* color:color: #ffff !important; */
		  	text-shadow: none;
		}
		&:where([_moz-menuactive]:not([disabled="true"])) {
      		border-radius: 10px !important;
			color: lime !important;  /* Schriftfarbe aktiv (hover) */
			background-color: red !important; /* Feld aktiv (hover) */
		}
		&:where([_moz-menuactive="true"][disabled="true"]) {
      		border-radius: 10px !important;
      		color: yellow !important;    /* Schriftfarbe inaktiv (hover) */
		  	background-color: green !important; /* Feld inaktiv (hover) */
		}
	}

Alles anzeigen

Im Hamburgermenü funktioniert dieses CSS aber noch nicht!

Und für's Hamburgermenü

CSS

	:is(panelview toolbarbutton.subviewbutton,.toolbaritem-combined-buttons
	:is([overflowedItem="true"]) > toolbarbutton):not([disabled]):hover {
		background-color: orange !important; /* Feld (hover) */
    	color: lime !important; /* Schriftfarbe (hover) */
	}

Danke dafür. Der Code ist (fast) perfekt. Mit diesem ist auch mein im Edit von #22 geschildertes Problem nicht mehr da. Den Code für das Hamburger Menü habe ich noch nicht getestet, da ich für dieses einen separaten Code am laufen haben muss (:hover ist noch in da, aber in einer anderen Farbe).

Jedoch habe ich mit dem Code (wieder) das Problem, dass der sich auf auf Webseiten auswirkt... Kann man das noch ausschließen?

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

aber das funktioniert leider nicht.

Teste bitte:
CSS
menupopup :is(menu,menuitem)[disabled="true"]:hover {
  color: #5656ab !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; /* old: #87CEFF */
  }

Funktioniert leider nicht.

Edit: Bezieht sich noch auf den funktionierenden Code: Im Kontextmenü der Menüleiste gibt es den Punkt "Lesezeichen-Symbolleiste". Wenn ich diesen mit der Maus anklicke und anschließend aus dem Menü fahre, ist der Punkt nicht mehr in "#2b2c86" hinterlegt, wie ich es als :hover definiert habe, sondern der wird dann weiß hinterlegt mit schwarzer Schrift. Welche Eigenschaft muss ich hier noch definieren, damit die Farben auch beim rausfahren stabil bleiben?

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

Laut dem Code beträgt der 10px.

Zitat von Firefox_94.0.1

Wenn ein Punkt im drop-down "ausgegraut" ist

Das hatte ich im Code ausgeschlossen.
Wenn du das auch für die Einträge möchtest, dann teste bitte wieder:
CSS
/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}
In Zeile 4 habe ich das dann entfernt:
:not([disabled="true"]):
Alles anzeigen

Vielen Dank für den Code, dieser funktioniert wunderbar. Jedoch möchte ich die ausgegrauten Elemente doch separat steuern.

Ich habe es mit

CSS

menupopup[disabled="true"]:hover {
  color: #5656ab !important;
  border-radius: 9px !important;
  background-color: #2b2c86 !important; old: #87CEFF
  }
}

probiert, aber das funktioniert leider nicht.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Kann man das noch trennen?

Neuer Versuch

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup > menu:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menuitem:not(#ContentSelectDropdown > menupopup > menuitem):hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Alles anzeigen

Evtl. auch diese Kurzform

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

menupopup :is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Die Langform funktioniert nicht (hat Auswirkungen auf die Webseite), bei der Kurzform ist noch folgendes Problem: Wenn ein Punkt im drop-down "ausgegraut" ist, ist die :hover-Farbe nicht die #8888b3 sondern #f0f0f3. So kann man dort die weiße Schrift nicht lesen.

Und eine Frage, damit ich es dokumentieren kann: Wodurch wird jetzt der 25-px-Radius an den gewünschten Stellen definiert?

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von milupo

eben jene Zeile 12.

Sorry, wie peinlich.

Ich habe sie noch eingefügt.

Zitat von Firefox_94.0.1

leider das gleiche Problem.

Und damit?

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {

toolbarbutton.bookmark-item:not(.subviewbutton):hover,
:is(menu,menuitem):not([disabled="true"]):not(#ContentSelectDropdown > menupopup > menuitem):hover {
   color: #fff !important;
   border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
   }
}

Der Code wirkt sich nicht mehr auf Webseiten aus, jedoch wirkt sich dafür die "border-radius" Einstellung auch auf die Lesezeichen (davor nur das Order-drop down) sowie die Buttons in der Menüleiste (zuvor auch hier nur auf das drop down) aus. Kann man das noch trennen?

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

nur als angemeldeter Benutzer

Du meinst auf einer Webseite?
Wo hast du den Code denn genau eingetragen?
Ansonsten, teste bitte mal.
CSS
/*4. hover Farbe in allen pop-up menüs ändern*/ /*--> mal anschauen*/

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
    border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
}
Alles anzeigen
Zeile 1 habe ich nur angepasst, da stimmten die /*...*/ nicht.
Zeile 3 + 12 sind neu.
Alles anzeigen

Genau. Der Code hat auswirkungen auf eine Webseite. Den Code habe ich ganz normal in der userChrome.css eingetragen. Mit deinem Code habe ich aber leider das gleiche Problem.

Firefox_94.0.1

Für die oben genannten Menüs habe ich folgenden Code für die :hover Farbe in Verwendung:

CSS

/*4. hover Farbe in allen pop-up menüs ändern*/ --> /*mal anschauen*/
menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
   color: #fff !important;
    border-radius: 10px !important;
   background-color: #8888b3 !important; /*old: #87CEFF*/
}

Die Einstellungen wirken sich jedoch auch auf andere Menüs aus, nicht nur - wie gewollt - auf die im Titel genannten. Ein Beispiel zu nennen ist aber schwierig, da die Seite, auf welcher ich es bemerkt habe, nur als angemeldeter Benutzer mit entsprechenden Rechten benutzbar ist. Daher: gibt es Codes, welche sich nur auf die 3 genannten Elemente auswirken?

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

Gibt es hier eine Option

Ändere bitte mal ab Zeile 54 zu:
CSS
#appMenu-popup toolbarbutton:hover {
background-color: #8888b3 !important;
color: #fff !important;
border-radius: 25px !important;
}
und teste es dann.

Funktioniert

Firefox_94.0.1

Ich nutze schon länger diesen Code für das Hamburger Menü:

CSS

/********************* Hamburger Menü********************************************/

/*Abstände in Einstellungsmenüleiste verringern*/

#appMenu-popup .subviewbutton:not(#appMenu-fxa-status2) {
--arrowpanel-menuitem-padding: 0 !important;
--arrowpanel-menuitem-margin: 0 !important;
padding-left: 10px!important;
font-size: 12px !important;
min-height: 22px !important;
max-height: 22px !important;
}
#appMenu-fxa-status2 {
font-size: 12px !important;
}
#appMenu-protonMainView > vbox:nth-child(1) > toolbarseparator:nth-child(n+1) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

/*Schrift und Hintergrund*/
#appMenu-popup toolbarbutton,
#appMenu-popup .toolbaritem-combined-buttons,
#appMenu-popup .subviewbutton,
#appMenu-popup .widget-overflow-list .toolbarbutton-1 {
background-color: #00016E !important;
color: #fff !important;
}

/*Schriftfarbe von Einträgen mittig in Untermenüs*/
#appMenu-popup .subview-subheader {
font-size: inherit;
font-weight: inherit;
color: #fff !important;
}

/*Farbe in header und footer*/
#appMenu-popup panelview, #PanelUI-fxa {
width: 22.5em;
background-color: #00016E !important;
color: #fff !important;
}

/* Hover Schrift und Hintergrund Hamburger Menü */
/* #appMenu-mainView toolbarbutton:hover,
#appMenu-mainView .toolbaritem-combined-buttons:hover,
#appMenu-multiView .subviewbutton:hover,
#appMenu-multiView .widget-overflow-list .toolbarbutton-1:hover {
background-color: #8888b3 !important;
color: #fff !important;
}
*/

#appMenu-mainView toolbarbutton:hover,
#appMenu-mainView .toolbaritem-combined-buttons:hover,
#appMenu-multiView .subviewbutton:hover,
#appMenu-multiView .widget-overflow-list .toolbarbutton-1:hover {
background-color: #8888b3 !important;
color: #fff !important;
border-radius: 25px !important;
}

Alles anzeigen

Die Einstellungen für :hover wirken sich jedoch auch an Menüstellen aus, wo diese nicht ganz passend sind, wie z. B. ganz oben ("Daten synconisieren...") oder bei dem Punkt "Zoom". Gibt es hier eine Option, damit diese Bereiche nicht von :hover erfasst werden, ohne dass ich für jeden einzelnen Menüpunkt die :hover-Einstellungen extra definieren muss?

Code

Firefox_94.0.1

Zitat von Mitleser

Ok, dann auf die harte Tour:

CSS

.mediaplayer.mediaplayer--reduced-m.mediaplayer--audio.mediaplayer--lazy-loading.mediaplayer--loaded div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive.ardplayer-m.ardplayer-bs-break {
  background-color: red !important;
}

Jetzt?

Ja. Perfekt. Danke für deine Hilfe.

Firefox_94.0.1

Zitat von Mitleser

Zitat von Firefox_94.0.1

Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus

Aber nicht auf dem von dir erwähnten Beispiellink (https://www.tagesschau.de/ausland/amerik…huldig-100.html) oder doch? Oder wo sonst (Bitte Link/Screen). Und was heißt 'teilweise'?

Teilweise = Auf der genannten Seite funktioniert es, aber es wirkt sich auf Elemente auf der Startseite (https://www.tagesschau.de/) Videoeinbettung unter der Überschrift "Zollstreit mit China" aus.

Firefox_94.0.1

Zitat von Mitleser

Geht das:

CSS

.ardplayer-state-audio:not(.ardplayer-s) {
  background-color: red !important;
}

Teilweise. Wirkt sich leider nur auch auf (div.ardplayer-posterbackdrop) aus.

Firefox_94.0.1

Zitat von milupo

Eine Farbangabe mit 8 Stellen gibt es nicht. Im allgemeinen wird die Farbe im RGB-Format angegeben. Das hat nur 6 Stellen. #00016e ist OK, #00016e82 aber nicht. Oder meintest du eigentlich #000082? #00016 gibt es auch nicht, aber hier meintest du wohl auch #00016e.
.ardplayer ist eine Klasse ja, die wirkt sich auf alle Elemente aus, die die Klasse haben. Wenn es aber nur um die unterschiedlichen Artikel geht, bette mal die Einträge mit .ardplayer am Anfang in @-moz-document url("https://www.tagesschau.de/ausland/amerik…huldig-100.html")
Dann sollte dein CSS nur auf den ARD-Player auf dieser Seite funktionieren, aber auch nur auf dieser Seite. Ich halte es für Unsinn den ARD-Player auf jeder Seite unterschiedlich zu gestalten. Die ARD hat es bewusst so gemacht, dass der Player auf allen Seiten das gleiche Aussehen hat. Ich nehme mal an, dass deine falschen Farbangaben die Ursache für dein Problem sind.

Danke für deine Ausführungen. Ja, #00016e ist korrekt. Habe ich mWn auch so in der .css.

Das "#00016e82" habe ich über den Farbwähler in den Entwicklerwerkzeugen erzeugt, in dem ich von dem #00016e die Deckkraft reduziert habe. Die Farbe funktioniert an sich auch, wie sie soll.

Problem konkret:

Wenn ich den unteren Player (div.player.ardplayer.ardplayer-show-controls.ardplayer-state-audio.ardplayer-state-audio-inline.ardplayer-state-inactive ardplayer-m.ardplayer-bs-break.rdplayer-bs-xl) auf #00016e setze, wirkt sich das auf den (div.ardplayer-posterframe) aus.

Ich möchte nicht den Player auf jeder Seite einzeln ändern, sondern nur den großen am Artikelende. Die kleinen Bild-Player sollen bleiben, wie sie sind.

Firefox_94.0.1

Zitat von Mitleser

Der entsprechende Codeausschnitt hätte auch gereicht, wer soll das denn alles durchlesen/arbeiten?

Sonst wird immer nach dem Code gefragt... Für die Fragegestellung an sich habe ich noch nichts gefunden. Aber teilweise wirkt sich ja bereits vorhandener Code auf andere Änderungen aus.

Firefox_94.0.1

Hallo,

am Ende von z. B. diesem Artikel: https://www.tagesschau.de/ausland/amerik…huldig-100.html

befindet sich eine Box, um ein Audio abzuspielen. Diese möchte komplett in #00016 färben.

Problem hierbei ist, dass die Bilder, welche im Artikel sind, auch ein Audio beeinhalten. Wenn ich die untere Box entsprechend einfärbe, verschwinden die Bilder. Gibt es da eine Lösung?

Edit: Hier meine bisherige .css, welche auch funktioniert

CSS

/*4. tagesschau.de*/
@-moz-document domain("www.tagesschau.de") {
body {
 background-color: #00016e !important;
 color: white !important;
}
h1 {
 color: #ffd900 !important;
 background-color: #00016e !important;
 font-weight: bold !important;
}
h2 {
 color: #ffd700 !important;
 background-color: #00016e !important;
 font-weight: bold !important;
}
h4 {
    color: #ffd700 !important;
}
span {
    color: white !important;
}
p {
    color: white !important;
}
a {
    color: white !important;
}

/*Header*/
.burger-navi-holder {
   max-width: 102.4rem;
   padding: 0 4rem;
   background-color: #00016e !important;
}
.header-fancy-v2 .header__logo {
   padding-left: 4rem;
   background-color: #ffd700 !important;
}
.header-app__link__text {
 padding-right: .6rem;
 white-space: nowrap;
 color: #ffd700;
}
.header-app__icon {
 fill: #ffd700 !important;
}

.burger-navi-holder .burger-button-animated {
 list-style: none;
 fill: #ffd700 !important;
 background-color: #00016e !important;
}
 
/*Navigation*/
.home__label {
 color: red !important;
}
a.latthema__link {
 background: #ddfaff !important;
 border: .1rem solid transparent;
 border-color: #ddfaff !important;
 border-radius: 1.2rem;
 color: #00016e !important;
 margin: 0 .5rem;
 padding: .3rem .7rem;
}
a.latthema__link:hover { 
background: #ffd !important; 
color: #00016e !important; 
border-color: #ffd !important;
}
.subnav a:hover {
 background: #ffd !important;
 color: #33322f;
 cursor: pointer;
 border-radius: 25px !important;
}
.subnav a {
 color: red !important;
 display: inline-block;
 outline-offset: -.2rem;
 padding: 1.2rem 1.2rem 1.1rem;
 font-weight: bold !important;
}
.arrow-controls__button--left {
   background: linear-gradient(270deg,hsla(0,0%,100%,0),#ffd700 45%,#ffd700) !important;
   display: block;
   left: 0;
   padding: 0 2.5rem 0 1rem;
   top: 0;
   z-index: 1;
}
.arrow-controls__button--right {
   background: linear-gradient(90deg,hsla(0,0%,100%,0),#ffd700 45%,#ffd700) !important;
   display: block;
   padding: 0 1rem 0 2.5rem;
   right: 0;
   top: 0;
   fill: #00016e !important;
}
/*Subnavigation*/
.horizontal-nav .swipe a {
    color: white !important;
}
/*Hamburger Menü*/

/*Hintergrund News-Kasten in #00016e*/

div.columns.twelve.teasergroup.teasergroup--docked {
    background-color: #00016e !important;
}
div.columns.twelve.teasergroup {
    background-color: #00016e !important;
}
div.trenner.trenner--default.trenner--divider.color--tongue {
    background-color: #00016e !important;
}

div.trenner.trenner--default.trenner--divider {
    background-color: #00016e !important;
}
.compact-list.color--tongue {
 background-color: #00016e !important;
}

/*Hintergrund + Text Kasten weitere Informationen (Pfeil nach rechts) // UND mehr zum Thema*/
div.buttongroup {
    background-color: #00016e !important;
}
div.columns.twelve.teasergroup--docked.background-standard.pb-7.l-px-6 {
    background-color: #00016e !important;
}
.teaser-nano__icon {
 fill: #ffd700 !important;
}
.teaser-nano__headline {
 overflow: hidden;
 -webkit-line-clamp: 2;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 color: white !important;
 display: -webkit-inline-box;
 margin-left: 1rem;
 white-space: normal;
}
.teaser-nano__headline:hover {
 overflow: hidden;
 -webkit-line-clamp: 2;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 color: #f6f61f !important;
 display: -webkit-inline-box;
 margin-left: 1rem;
 white-space: normal;
}

.teaser {
    background-color: #00016e !important;
    color: white !important;
}
.teaser:hover {
    background-color: #00016e !important;
    color: f6f61f !important;
}
.teaser__medialinks .mubu-container__infotext {
 color: white !important;
}
/*News-Vorschau*/
.label {
 background: #ffd !important;
 border-radius: .3rem;
 color: #00016e !important;
 display: inline-flex;
 font-family: Thesis,sans-serif;
 font-size: 1.4rem;
 font-weight: 700;
 margin-right: .8rem;
 padding: .3rem .8rem;
 text-transform: uppercase;
}

span.teaser__headline {
    color: #ffd !important;
}
.teaser__teaserinfo {
 background-color: #00016e !important;
 color: white !important;
}
.teaser__teaserinfo:hover {
 background-color: #00016e !important;
 color: #f6f61f !important;
}
span.link-extend {
    color: red !important;
}
p.teaser__shorttext {
 background-color: #00016e !important;
 color: white !important;
}
p.teaser__shorttext:hover {
 background-color: #00016e !important;
 color: #f6f61f !important;
}

/*Infoboxen*/
.columns.twelve {
 width: 100%;
 background-color: #00016e !important;
}
.teaser-xs__topline-container .label--small {
 margin-bottom: .6rem;
 margin-right: .6rem;
 background-color: #ffd !important;
 color: #00016e !important;
}
.teaser-xs__topline {
 color: #ffd !important;
 display: block;
 font-family: Thesis,Helvetica,Arial,sans-serif;
 font-size: 1.6rem;
 line-height: 2rem;
 margin-top: 0;
 padding: .2rem 0;
 width: 100%;
}
.teaser-xs__headline {
 color: white !important;
 display: -webkit-inline-box;
 overflow: hidden;
 -webkit-line-clamp: 4;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 white-space: normal;
}
.teaser-xs__headline:hover {
 color: #f6f61f !important;
 display: -webkit-inline-box;
 overflow: hidden;
 -webkit-line-clamp: 4;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 white-space: normal;
}
.trenner {
 background: #00016e !important;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 letter-spacing: .2em;
 width: 100%;
}
h3 span.hyphenate:hover {
    color: #f6f61f !important;
}
.buttongroup:not(.buttongroup--copytext, .buttongroup--searchresults) {
   padding: 0 0 2.4rem;
   background-color: #00016e !important;
}

/*Überschriften*/
.trenner__text__topline {
 color: white !important;
 flex-basis: 100%;
 letter-spacing: .2rem;
 text-align: center;
 text-transform: uppercase;
}

/*Buttons*/
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
 background-color: #ffd700 !important;
}
span.swiper-pagination-bullet {
 background-color: #ffd !important;
}
button.swiper-button-next {
    background-color: #00016e82 !important;
}
button.swiper-button-next:hover {
    background-color: #00016e !important;
}
button.swiper-button-prev {
    background-color: #00016e82 !important;
}
button.swiper-button-prev:hover {
    background-color: #00016e !important;
}

.btn.btn--transparent-light .icon {
 fill: #00016e !important;
}
span.btn__label {
    color: #00016e !important;
}
.btn.btn--transparent-light {
 background-color: #ddfaff !important;
 border-radius: 5px !important;
}
.btn.btn--transparent-light:hover {
    background-color: #ffd !important;
    border-radius: 5px !important;
}
.btn.btn--light-grey {
 background-color: #ddfaff !important;
 border-radius: 5px !important;
}
.btn.btn--light-grey:hover {
 background-color: #ffd !important;
 border-radius: 5px !important;
}
.btn.btn--tongue {
    background-color: #ddfaff !important;
}
.btn.btn--tongue:hover {
    background-color: #ffd !important;
}
.btn.btn--tongue .icon {
 fill: #00016e !important;
}

/*Video-play*/
.ardplayer button.ardplayer-button-big.ardplayer-button-hero {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e82 !important;
   border-color: white !important;
 }
.ardplayer button.ardplayer-button-big.ardplayer-button-hero:hover {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e !important;
   border-color: white !important;
}
.ardplayer button.ardplayer-button-big.ardplayer-button-hero {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e82 !important;
   border-color: white !important;
}    
.ardplayer button.ardplayer-button-big.ardplayer-button-hero:hover {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e !important;
   border-color: white !important;
}
.ardplayer.ardplayer-state-live button.ardplayer-button-big.ardplayer-button-hero {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e82 !important;
   border-color: white !important;
}    
.ardplayer.ardplayer-state-live button.ardplayer-button-big.ardplayer-button-hero:hover {
   font-size: 3rem;
   height: 3.5rem;
   line-height: 3.5rem;
   width: 3.5rem;
   background-color: #00016e !important;
   border-color: white !important;
}
h2 span.hyphenate {
    color: #ffd700 !important;
}
/*Livestream Seite*/
div.container.content-wrapper__group {
    background-color: #00016e !important;
}
.multimediahead {
 background-color: #00016e !important;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 margin-top: 2.4rem;
 padding: 0 2rem;
}
div.mediaplayer-subline__details {
    color: white !important;
}
.tag-btn--light-grey {
 background: #ddfaff !important;
 border: .1rem solid transparent;
 border-color: #ddfaff !important;
 border-radius: 1.2rem;
 color: #00016e !important;
 margin: 0 .5rem;
 padding: .3rem .7rem;
}
.tag-btn--light-grey:hover { 
background: #ffd !important; 
color: #00016e !important; 
border-color: #ffd !important;
}
.btn.btn--light-grey .icon {
 fill: #00016e !important;
}
/*Eilmeldung*/
.icon-animated--pulse {
 animation: pulse 1.6s infinite;
 background: red !important;
 border-radius: 50%;
 cursor: pointer;
 display: block;
 height: 1.8rem;
 width: 1.8rem;
 border-color: red !important;
}
span.trenner__divider {
    border-bottom: red !important;
}
h2.eilmeldung__headline {
 background-color: red !important;
 color: #ffd !important;
}
div.eilmeldung {
    background-color: red !important;
}

/*Videoplayer (Sendung verpasst)*/
.header-app__close {
   height: 5.6rem;
   right: 4.2rem;
   top: -6.7rem;
   width: 5.6rem;
   background-color: #00016e !important;
}
 
.header-app__close svg {
 width: 2.5rem;
 fill: #ffd700 !important;
}
.header-app-video {
 padding: 1rem 0;
 background-color: #00016e !important;
}
.header-app-video__topline {
 margin: 1rem 2rem;
 text-align: center;
 color: white !important;
}
.header-app-video__title {
 color: white !important;
 margin: 1.2rem 0 .6rem;
}
.header-app-video__date {
 color: white !important;
 margin-top: .2rem;
}
/*Videoplayer/Audioplayer (in Artikel)*/
button.ardplayer-button-playpause.ardplayer-button-big.ardplayer-icon.ardplayer-icon-play {
        color: #ddfaff !important;
}
button.ardplayer-button-playpause.ardplayer-button-big.ardplayer-icon.ardplayer-icon-play:hover {
        color: #ffd !important;
}



/*Artikel*/
article.container.content-wrapper__group {
 background-color: #00016e !important;
}
span.seitenkopf__headline--text {
 clear: left;
 color: white !important;
 display: block;
}
.textabsatz strong {
 color: white !important;
}
div.teaser-absatz__teaserinfo.columns.eight.m-nine {
 background-color: #00016e !important;
}
.socialbuttons__list {
 align-items: center;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: #00016e !important;
}








/*Footer*/
.footer {
   margin: 1.6rem auto 0;
   max-width: 102.4rem;
   background-color: #00016e !important;
}
.footer__link {
 color: white !important;
 display: flex;
 font-size: 1.8rem;
 line-height: 2.6rem;
 margin: .2rem;
 padding: .7rem 0 .7rem 2rem;
 text-decoration: none;
}
.footer__link:hover {
 color: #f6f61f !important;
 display: flex;
 font-size: 1.8rem;
 line-height: 2.6rem;
 margin: .2rem;
 padding: .7rem 0 .7rem 2rem;
 text-decoration: none;
}
.endline {
 background: #00016e !important;
 box-sizing: border-box;
 height: 4rem;
 padding: .8rem 0 0 4rem;
 width: 100%;
}
.endline__copyright {
 color: #ffd700 !important;
 font-family: Thesis,helvetica,arial,sans-serif;
 font-size: 1.2rem;
 font-weight: 400;
}
.footer__logo__icon svg {
 fill: #ffd700 !important;
}
a#footer-exp-header-1.exp-header {
    background-color: #00016e !important;
    color: #ffd700 !important;
}
a#footer-exp-header-2.exp-header {
    background-color: #00016e !important;
    color: #ffd700 !important;
}
a#footer-exp-header-3.exp-header {
    background-color: #00016e !important;
    color: #ffd700 !important;
}
a#footer-exp-header-4.exp-header {
    background-color: #00016e !important;
    color: #ffd700 !important;
}
.footer .expanderbox__item-wrapper a .footer__arrow svg {
 height: 4rem;
 margin-bottom: -.1rem;
 margin-top: -.1rem;
 width: 4rem;
 fill: #ffd700 !important;
}
.footer__navigation__list__item a {
    color: #00016e !important;
}
li.footer__navigation__list__item.--service-item {
    background-color: #ddfaff !important;
    border: none !important;
}
li.footer__navigation__list__item.--service-item:hover {
    background-color: #ffd !important;
    border: none !important;
}



/*Wahlseite*/

/*Lottozahlen*/
/*eingebundene Wahlgrafik von Infratest*/
.www-header {
 color: #ffd700 !important;
 background-color: #00016e !important;
}
button.menu-button.active {
 background-color: #00016e !important;
 color: #fff !important;
 border-color: #00016e !important;
}
.menu-button {
 font-weight: 500;
 padding: 0 1rem;
 font-size: 1rem;
 margin: .1rem .1rem;
 border-radius: .3rem;
 cursor: pointer;
 color: #00016e !important;
 background-color: #ffd700 !important;
 border-color: #ffd700 !important;
}
.menu-button:hover {
 background-color: #ffd !important;
 border-color: #ffd !important;
}
svg#www-tool {
    background-color: #00016e !important;
}
text {
    fill: white !important;
}

/*Börse*/
li.current {
 border-bottom-color: #ffd900 !important;
 color: #ffd700 !important;
 background-color: #00016e !important;
}
li {
 border-bottom-color: white !important;
 color: #ffd !important;
 background-color: #00016e !important;
}
span.price {
   padding-bottom: 0;
   background-color: #00016e !important;
   color: #ffd !important;
}
    
span.priceCurrency {
   padding-bottom: 0;
   background-color: #00016e !important;
   color: #ffd !important;
}
.date {
 color: #ffd700 !important;
}
.name {
    color: #ffd700 !important;
}
.icon_neg {
    color: red !important;
}
.icon_pos {
    color: #36cc71 !important;
}
.icon_neutral {
    color: #ffd !important;
}
.VWDcontent * {
 color: #ffd;
 font-family: Thesis,helvetica,arial,sans-serif !important;
 background-color: #00016e !important;
}
.quotebox .addinfo span{
 display: inline-block;
 white-space: nowrap;
 padding-right: .42857em;
 margin-right: .21429em;
 border-right-width: 1px;
 border-right-style: solid;
 color: #ffd !important;
}
input#VWDsearchField.vwdFormControl {
    background-color: #ffd900 !important;
    border-color: #ffd900 !important;
    color: #00016e !important;
    fill: #ffd !important;
}
span.action.linked {
    color: red !important;
}

.externalcontent .VWDcontent {
   padding: 0 4rem;
   background-color: #00016e !important;
}
.link {
 text-decoration: underline;
 color: white !important;
}
.link:hover {
 text-decoration: underline;
 color: #f6f61f !important;
}
.action select {
 width: 9.375em;
 color: #00016e !important;
 background-color: #ffd900 !important;
 border-color: #ffd700 !important;
 fill: #ffd !important;
}
.VWDcomp .comp_head.withselect .action_select select {
 width: 9.375em;
 color: #00016e !important;
 background-color: #ffd900 !important;
 border-color: #ffd700 !important;
 fill: #ffd !important;
}
i.svgicon.svg-search {
    background-color: #ffd700 !important;
}
i.svgicon.svg-search:hover {
    background-color: #ffd !important;
}
input#usfSearchDropdownUSFueberblick.vwdFormControl {
    background-color: #ffd900 !important;
    border-color: #ffd900 !important;
    color: #00016e !important;
    fill: #ffd !important;
}
span.neg {
    color: red !important;
}
span.pos {
    color: #36cc71 !important;
}
th {
    color: #ffd700 !important;
}
th.le {
 color: #ffd700 !important;
}
td.le {
 color: white !important;
}

th.ri {
    color: #ffd700 !important;
}
td {
    color: white !important;
}
th.hidden-xs-down.hidden-sm-down {
    color: #ffd700 !important;
}


    
}

Alles anzeigen

Firefox_94.0.1

Zitat von Sören Hentzschel

Korrekt wäre accent-color statt background-color. Der Selektor input[type="checkbox"] passt so natürlich nur für HTML-Checkboxen, für XUL-Checkboxen wäre es checkbox.

Probiere ich mal aus. Woran erkenne ich den Unterschied zwischen HTML- und XUL-Checkboxen?

Firefox_94.0.1

Zitat von grisu2099
Zitat von Firefox_94.0.1

Gibt es da aktuell noch eine Möglichkeit, die Hintergrundfarbe im nicht aktivierten Zustand sowie im aktivierten Zustand die Farbe hinter dem Haken und den Haken selber anzupassen?

Grundsätzlich ja, siehe Screenshot:
Teste mit diesem Schnipsel:
CSS
input[type="checkbox"] {
	background-color: black !important;
	}

Das bewirkt bei mir leider auch nichts.

Beiträge von Firefox_94.0.1

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

:hover für Kontextmenü, Ordner in Favoritenleiste und Dropdown in Menüleiste

Hamburger Menü :hover

Hamburger Menü :hover

Tagesschau.de Audiofenster in Artikel

Tagesschau.de Audiofenster in Artikel

Tagesschau.de Audiofenster in Artikel

Tagesschau.de Audiofenster in Artikel

Tagesschau.de Audiofenster in Artikel

Tagesschau.de Audiofenster in Artikel

Farbe von "Checkboxen" anpassen

Farbe von "Checkboxen" anpassen