Beiträge von Firefox_94.0.1

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.

Firefox_94.0.1

Ich bin gerade dabei, die Feinheiten der letzten Änderungen anzupassen. Hierbei ist mir aufgefallen, dass sich die Farbe von diesen Checkboxen nicht mehr wie gewohnt ändern lässt.

Gemeint sind die Boxen wie:

- Bei der Suche (Strg+F) vor "alles hervorheben", "Groß-/Kleinschreibung", "Akzente", "Ganze Wörter"

- Bei about:config vor "Beim Aufruf dieser Einstellungen immer warnen"

- und weitere (falls ich noch welche übersehen habe)

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?

Firefox_94.0.1

Zitat von Horstmann

Zitat von Firefox_94.0.1

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?

Wenn ich den bei mir reinstelle, macht farblich kaum was Sinn, auch bei verschiedenen Themes.
Man müsste noch wissen welches Theme du benutzt, ob noch anderen CSS Code, oder evtl. Erweiterungen wie Firefox Color.

Ich habe das Standard-Theme laufen. Da ich eigendlich alles angepasst habe, hat sich auch jede Menge Code angesammelt. Das war irgendwann in einer Datei einfach nicht mehr übersichtlich, daher habe ich nach Bereichen getrennte einzelne Dateien per @import in die UserChrome.css gezogen. Der Übersicht halber habe ich oben nur den Code für die hier relevante Lesezeichenleiste eingestellt. Daher macht die Farbgebung von nur dem geposteten Code tatsächlich keinen Sinn.

Firefox_94.0.1

Zitat von Horstmann

Zitat von Firefox_94.0.1

... , funktioniert wie gewünscht.

Den Code würde ich bei Gelegenheit mal überdenken; der ist überladen und unnötig komplex, macht teilweise gar nix oder ist schlicht falsch, und adaptiert sich nicht sauber für viele Themes.

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist? Ich habe mir das nur so zusammengebastelt, dass das Design im Standardmodus, wenn ich den FF öffne, passt und ich weiß, wo was steht, falls durch ein Update wieder was geändert wird. Mehr Ahnung habe ich davon nicht.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Das ist mein Code für die Lesezeichenleiste.

Teste bitte mal:

CSS

/********************* Lesezeichenleiste********************************************/

/*Symbole in Lesezeichenleiste Farbe ändern*/
#PersonalToolbar .toolbarbutton-icon {
 fill: white !important;
}
#PersonalToolbar .toolbarbutton-1:hover {
 background-color: #2B2C86 !important;
}
/*Hintergrundfarbe*/
#PersonalToolbar{
    background:#00016E !important} /*original_color: light grey(#F0F0F0)*/ /*aktuell: dunkelblau*/

/*Schriftfarbe*/
#PersonalToolbar .bookmark-item{color:white !important}

/*Trennstriche in Lesezeichenleiste*/
#PlacesToolbarItems > toolbarseparator {
   margin: 0;
   padding-inline: 4px;
   appearance: none;
    color: white;
}
/*Schriftfarbe der Lesezeichen im drop-down-menü*/
#PlacesToolbar menuitem, #PlacesToolbar menu, .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
  color: white !important;
}
#PlacesToolbar menuitem:hover, #PlacesToolbar menu:hover, .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
  color: black !important;
}
/*hover-Farbe ändern*/
#PersonalToolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover, #tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, #tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, toolbarbutton.bookmark-item:not(.subviewbutton, [disabled="true"], [open]):hover, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
 background-color: #2b2c86 !important;
}
/*Hintergrundfarbe beim anklicken*/
#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active), #tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover:active, #tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover:active, toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]), toolbarbutton.bookmark-item[open="true"], toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-badge-stack {
 background-color: #8888B3 !important;
 color: inherit;
}
/********************* Lesezeichensidebar********************************************/
/*Schriftfarbe (color) und Hintergrundfarbe (background)*/
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,
#sidebar-search-label,#sidebar-search-container,#placesList > treechildren {
color: white !important;
background:#00016E  !important; }

Alles anzeigen

Danke, funktioniert wie gewünscht.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

dass ich die Farbe auf weis geändert hatte.

Wie bzw. womit denn?

Sorry, hatte den Code vergessen.

Das ist mein Code für die Lesezeichenleiste.

CSS

/********************* Lesezeichenleiste********************************************/

/*Symbole in Lesezeichenleiste Farbe ändern*/
#PersonalToolbar .toolbarbutton-1 {
 fill: white !important;
}
#PersonalToolbar .toolbarbutton-1:hover {
 background-color: #2B2C86 !important;
}
/*Hintergrundfarbe*/
#PersonalToolbar{
    background:#00016E !important} /*original_color: light grey(#F0F0F0)*/ /*aktuell: dunkelblau*/

/*Schriftfarbe*/
#PersonalToolbar .bookmark-item{color:white !important}

/*Trennstriche in Lesezeichenleiste*/
#PlacesToolbarItems > toolbarseparator {
   margin: 0;
   padding-inline: 4px;
   appearance: none;
    color: white;
}
/*Schriftfarbe der Lesezeichen im drop-down-menü*/
#PlacesToolbar menuitem, #PlacesToolbar menu, .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
  color: white !important;
}
#PlacesToolbar menuitem:hover, #PlacesToolbar menu:hover, .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
  color: black !important;
}
/*hover-Farbe ändern*/
#PersonalToolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover, #tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, #tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, toolbarbutton.bookmark-item:not(.subviewbutton, [disabled="true"], [open]):hover, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
 background-color: #2b2c86 !important;
}
/*Hintergrundfarbe beim anklicken*/
#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active), #tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover:active, #tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover:active, toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]), toolbarbutton.bookmark-item[open="true"], toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-badge-stack {
 background-color: #8888B3 !important;
 color: inherit;
}
/********************* Lesezeichensidebar********************************************/
/*Schriftfarbe (color) und Hintergrundfarbe (background)*/
#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,
#sidebar-search-label,#sidebar-search-container,#placesList > treechildren {
color: white !important;
background:#00016E  !important; }

Alles anzeigen

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

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

Farbe von "Checkboxen" anpassen

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern