Beautiful Design App

[ThinhDinh]

Thanks to @Robert_Petitto’s child trick, I made a comments component work this way: the add comment is pushed up top, a little bit of padding for better spacing, and no “X comments” text.

<pre><span><style>
[data-test="app-comments-preview"] {
  display:flex;
  flex-direction: column-reverse;
}
[data-test="app-comments-preview"] >:last-child {
 padding: 0px 16px 16px 16px;
}
[data-test="app-comments-preview"] >:first-child{
display: none;
}

[Robert_Petitto]

This is exactly what I do in my group chat template!

[Robert_Petitto]

@ThinhDinh You solved it! Was wondering why my :first-child etc. weren’t working…needed the > in front apparently.

[Amal]

lol i see this promo of your app in quite a few post.

[ThinhDinh]

Haha yeah it took me a while yesterday to figure this out. Gotta learn more about CSS Selectors.

[SantiagoPerez]

Hey @ThinhDinh, @Robert_Petitto, @Lucas_Pires and everyone else.

Do you have a trick to change the the color of the audio component?

Thanks guys.

[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.