[feature request] replay button styling in add-on not in template

[omega3]

[feature request] replay button styling in add-on not in template

[ospalh]

Yes, i can consider that.
But i do think that the add-on is the right place to do it.
I don’t know how many note types you use, but for a normal collection with only a handful of note types (not notes) changing the styling for each note type shouldn’t be a big problem. Set the fill color for each note type for day and night mode to different colors. Unless you want to use a medium color that is visible in either mode. Than you can use just one.

[omega3]

Sorry to bother you. Perhaps I don't understand how to follow instructions.

Let's say in a card I have:
[sound:file_name.mp3] Example sentence.
and template:
Styling:

.card {
 font-family: arial;
 font-size: 32px;
 text-align: center;
 color: black;
 background-color: white;
}

.card1 { background-color: #ffffff; }
.card2 { background-color: #ffffff; }

.red_button .replaybutton span svg {
  fill: red;
}

Back template:

{{Question}}<br><span style="font-size: 20px; color:#3399ff">{{#Tags}}{{Tags}}{{/Tags}}</span><hr>{{type:Spelling}}<br><span class="red_button">{{Audio}}</span>{{Answer}}<br>

Or you just mean to set a more appropriate background in night-mode so that this default black play button becomes more visible?

[ospalh]

What Anki version are you using?
What night mode add-on?

[omega3]

Anki Version 2.1.4, Qt 5.9.2 PyQt 5.9 on Manjaro Linux Plasma 5.13.5, QT 5.11.1

Night Mode 2.1.9

[ospalh]

Thanks.
The quick workaround seems to bee to switch to a grey color.

The .night_mode switch from my old Anki 2 add-on is not honored by krassowski’s add-on.
So, you could try this in the styling

.card .replaybutton svg {
    fill:  #657b83;
}

With a color that looks OK on black or white where i put the #657b83
Apart from that, i have to think about it. Ideally the night mode add-on would look at the night_mode css styling and not do any other inverting. AnkiDroid does it that way, or at least did a while ago.

[omega3]

That solves the problem.

Perhaps it it worth to mention this version of styling code on your site:
https://ospalh.github.io/anki-addons/Play_button.html

so that other users might know it. Because for people like me who doesn't know programming languages it is impossible to come up with this solution. I would never be able to do it myself.

Thank you very much.

[omega3]

I don't know it it is important to you but I don't request this anymore. I am satisfied in styling in template. I hope it will be possible in 2.1.20.
As far as I am concerned you may close it.

Edition:
Anki allows to style replay button:

.replay-button svg path { stroke: #272828; fill: #3399ff; }
.replay-button { width: 35px; }
.replay-button svg circle {
  fill: #272828;
  stroke: #272828;
}

.card.nightMode { background-color: #272828; }

So I don't need any support anymore.