Tagesschau.de Audiofenster in Artikel

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

Mitleser

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

EDIT: Das habe ich wahrscheinlich falsch verstanden: Der Code um den es geht ist scheinbar nicht in dieser css vorhanden.

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.

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.

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.

Mitleser

Geht das:

CSS

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

Sören Hentzschel

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.

Acht Stellen sind in Ordnung. Das ist dann nicht RGB, sondern RGBA, sprich mit Angabe des Alpha-Kanals für Transparenz. Farbangaben mit der Raute können 3, 4, 6 oder 8 Stellen haben. Siehe:

<hex-color> - CSS: Cascading Style Sheets | MDN

The <hex-color> CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue)…

developer.mozilla.org

milupo

Zitat von Sören Hentzschel

Acht Stellen sind in Ordnung. Das ist dann nicht RGB, sondern RGBA, sprich mit Angabe des Alpha-Kanals für Transparenz.

Ah, danke. Mit Transparenz kannte ich nur die Darstellung rgba(00, 01, 6e, 0.82).

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.

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'?

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.

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?

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.

Mitleser

Zitat von Firefox_94.0.1

Ja. Perfekt.

Leider nein! Starte mal den Player. Jetzt aber (kürzen musst du selber):

CSS

/*player inaktiv*/
.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;
}
/*player spielt ab*/
.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-m.ardplayer-bs-break {
  background-color: green !important;
}

Firefox_94.0.1 12. Juni 2024 um 18:46