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

[omega3]

For Anki 2.1 can you consider adding button colour change in add-on code itself not in template?

The change of colour in template as described here https://ospalh.github.io/anki-addons/Play_button.html

is good when user have template with separate audio field. So this form of styling has only limited scope of application. Unfortunately I don't have separate audio field. I Anki 2.0 I pasted audio next a word because I used a png as audio button. Changing the whole database would be a big problem.

It is not important to me if it is png or svg or whatever. Only colour matters to me because I use night-mode add-on.

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