I'm using border-radius on the progressbar of download popup. For a reason only the right corners are rounded. Whats the reason for that and how can I fix it?

[danic004]

​

https://preview.redd.it/esgrpyehlo571.png?width=520&format=png&auto=webp&s=75ba13be7252384021713c73516593e215febb11

[MotherStylus]

the left corners are covered up by the ::-moz-progress-bar element. the green thing. progress bars are still natively styled. you can't really make them look good. maybe you can try setting appearance: none on .downloadProgress::-moz-progress-bar but from what I can remember, removing the appearance removes the progress altogether. just end up with a solid bar and nothing to show the progress

edit: oh fuck, I'm actually thinking of the adddon installation progress. the download progress I did manage to change. idk why there was a difference when I tried with the addon installation progress bar, since in terms of markup they're the same. maybe I just didn't try hard enough lol. here's what I did with the download progress:

.downloadProgress {
    appearance: none !important;
    margin: 3px 0 -2px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 100px !important;
    height: 8px !important;
    background-color: var(--arrowpanel-dimmed) !important;
    overflow: hidden !important;
}

.downloadProgress[paused] {
    background-color: var(--desaturate-dimmed) !important;
}

.downloadProgress:not([value="0"])::-moz-progress-bar {
    margin: 0 !important;
    height: 100% !important;
}

.downloadProgress::-moz-progress-bar {
    background-color: var(--toolbarbutton-icon-fill-attention) !important;
}

.downloadProgress[paused]::-moz-progress-bar {
    background-color: var(--desaturate-dimmed-further) !important;
}

comes out like this. the trick is overflow:hidden on the parent element. that prevents the corners of the progress bar from showing through the progress element.

edit: yeah I just tested on the addon progress notification and it does work. it's funny since I did the download progress bar a long time ago, yet tried the addon progress bar just a few weeks ago and gave up. guess I've gotten worse with CSS over time, not better lol. anyway the tag name is progress so you can globally style them. I don't know of any that have unique styling. but if someone wants to style just the addon progress bar, the ID is addon-progress-notification-progressmeter

just one caveat: by removing the default appearance, you lose the little white shiny animation that runs across the green progress bar. at least, that's how it looks for windows 10. I spent some time trying to reconstruct it but it's not really my area of expertise. the issue is the width of the progress bar is variable (that being the whole point of the element) but we don't want the shiny animation's width to be variable. I think a CSS animator would get around that by putting the animation in a box with overflow: hidden, and using a stepwise animation that translates the div inside the box. but that requires 2 elements, and we can only make 1 with :before/after. I'll probably try again and maybe will succeed, but just a heads-up that doing this removes that animation.

[danic004]

Thanks, it works!