Beautiful Design App

[Robert_Petitto]

The background of it?

[SantiagoPerez]

yes!

[Robert_Petitto]

This is the best I could do.

Since the audio player is rendered from the browser, I don’t thing you can control it.

<pre><span><style>
[data-test="app-audio-wrapper"] {
background-color: red;
}

[SantiagoPerez]

Thanks! I will try that.

Edit: It works for what I want. Thanks a lot!

[ThinhDinh]

@SantiagoPerez @Robert_Petitto This is an interesting discussion. I read about this a while ago and you can use the audio tag in CSS to style the audio, but beware of how it looks in different browsers, should test first to be sure.

Here’s the source code for all elements involved:

https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Here’s a sample.

<pre><span><style>
audio::-webkit-media-controls-enclosure {
width: 100%;
max-width: 800px;
height: 30px;
flex-shrink: 0;
bottom: 0;
text-indent: 0;
padding: 10px 5px 5px 0px;
box-sizing: border-box;
background-color: #90EE90;
}

[ThinhDinh]

I even tried out a crazy code on Stackoverflow:

How can I style html audio player play button color?

And it shows something like this, there’s various ways to style this component.

[SantiagoPerez]

Thanks man!!! Giving it a try now.

The goal is to make “transparent”. Let’s see what happens.

[ThinhDinh]

Here you are. Just change the background-color to transparent.

[Robert_Petitto]

Nicely done. I was trying to target the .audio and I couldn’t figure it out…needed the ::webkit... element. Nice.

[SantiagoPerez]

Awesome! It works perfectly.

Thanks man!

[Mauricio_Paz]

Amazing! @ThinhDinh! Does anyone know how to remove the download icon? I would like to create an audio resources app that can be downloaded with a glide button only if you have paid, so I want to hide the download button in the player.

[SantiagoPerez]

@Robert_Petitto, @ThinhDinh, Do you have any tricks to change the color of the icon on the native floating button? In this theme the color of it is white and I need to change it black.

Thanks guys!

[Robert_Petitto]

Here you go! By the way, this might be a solution for you too, @Jeff_Hager, to target different FABs

<pre><span><style>

.fab-target :nth-child(1) > * {
background-color: red !important;
}

.fab-target :nth-child(2) > * {
background-color: green !important;
}

[SantiagoPerez]

Awesome!!! It works perfectly.

[Jesus_Or]

Hello, do you know how to do this in an Inline List, thank you very much for your contributions, the community is fascinating, there is a lot of knowledge and support here I like it

[ThinhDinh]

Can you specify on what layout of the inline list do you want to do this?

[Jesus_Or]

Hello, of course look, I have this app and an Inline list where I present the social networks and I would like to have the background in red

[ThinhDinh]

<pre><span><style>
[class="tile-image-area"]{
background-color: red;
}

[Jesus_Or]

Sorry I don’t think I explained well, thank you very much in advance, I try to put color in the background, I made an edition for you to see

[ThinhDinh]

Then it will have to be something like this.

<pre><span><style>
[role="row"]{
background-color: red;
}