Which theme is that (Settings > Appearance > Themes)? Dark? Have you tried with the other themes?
What formatting do you have in the fields of this note – and in the card template – and in the note type Styling?
[I’m not suggesting that preview and study *should* appear different with the same theme selected, just that knowing how this varies between the themes might help pinpoint whether this issue is specific to this card/template/styling, or an app-wide display issue.]
I’m using the Dark night mode, but same thing happens on the Black one.
Comparing with the preview, the text color on the first link (which is a {{hint:}} field is darker, the background of the “loop-button” becomes lighter, and the space between the button and the “0” is smaller.
This is my css:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
/* Image Transition Effect */
img {
transition: transform .3s ease-in-out;
}
/* Image Hover Effect */
img#effect:hover {
transform: rotate(60deg);
}
/* Replay Button Styling */
.replay-button svg {
width: 28px; /* Adjust the width as needed */
height: 28px; /* Adjust the height as needed */
}
.replay-button svg circle {
fill: rgb(246, 245, 253);
stroke: none; /* Ensure no stroke is applied */
stroke-width: 1;
}
.replay-button svg path {
fill: ; /* Ensure no fill is applied */
transform: scale(0.57) translate(23px, 23px); /* Adjust the scale and translate values */
}
.loop-count {
font-size: 20px; /* Adjust the size as needed */
color: ; /* Optional: Change the color */
}
.loop-button {
background-color: ; /* Optional: Change the color */
border: 1px solid #ccc; /* Light gray border */
border-radius: 5px; /* Rounded corners */
padding: 5px; /* Padding inside the button */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s; /* Smooth transition for background color */
}
.loop-image {
display: block; /* Ensures the image is treated as a block element */
}
.loop-button:hover {
background-color: #e0e0e0; /* Slightly darker gray on hover */
}
.nightMode img[src$=".svg"],
.nightMode img[src$=".png"] {
filter: invert(1);
}
a.hint {
text-decoration: none;
}
There is no styling in the HTML section. This is the code in any case:
<div>{{hint:Español}}</div><br>
{{Spanish Audio}}
<br>
<br>
<div id="audio-container">
<audio id="audio-player" src="{{Loop}}"></audio>
<button id="loop-button" class="loop-button">
<img id="loop-image" src="_loop.svg" alt="Loop">
</button>
<div><span id="loop-count" class="loop-count">0</span></div>
</div>
<script>
var audio = document.getElementById('audio-player');
var loopButton = document.getElementById('loop-button');
var loopImage = document.getElementById('loop-image');
var loopCount = document.getElementById('loop-count');
var count = 0;
var isLooping = false;
loopButton.addEventListener('click', function() {
isLooping = !isLooping;
if (isLooping) {
loopImage.src = '_pause.svg';
loopImage.alt = 'Pause';
audio.loop = false; // Disable native loop to handle it manually
audio.play();
} else {
loopImage.src = '_loop.svg';
loopImage.alt = 'Loop';
audio.loop = false;
audio.pause(); // Pause the audio immediately
audio.currentTime = 0; // Reset the audio to the beginning
}
console.log('Loop button clicked, isLooping:', isLooping);
});
audio.addEventListener('ended', function() {
console.log('Audio ended, isLooping:', isLooping);
if (isLooping) {
count++;
loopCount.textContent = count;
console.log('Loop count incremented:', count);
audio.currentTime = 0;
audio.play(); // Manually restart the audio
}
});
</script>
I tried to recreate your situation but it works fine for me.
Could you tell me where you downloaded the _loop.svg from?
Did you also try to recreate this situation on another Android-phone (is there a possibility for you to do that?)
Try to give us the console logs. Your best bet doing this would be by inserting eruda into your template and then tapping the gear sign that appears. If there is nothing written in the console logs. Don’t bother with it and delete it.
Here is a instruction on how to getting eruda to work: Development Guide · ankidroid/Anki-Android Wiki · GitHub
_loop_svg is taken from here: Phosphor Icons (arrow-clockwise-fill version).
I currently don’t have another phone to try it with, but I’ll look for one. I tried using a different build (B, C, D, etc.), but for some reason whenever I install one, the collection from AnkiDroid.A appears loaded automatically, so I couldn’t check on a different profile either.
I followed the instructions to check the console, but there is no message.
I am attaching a deck with an example note here, in case that’s useful.
I was able to recreate your problem. Apparently this is not a bug on your end.
It is apparently the way the previewer handles the cards.
The previewer shows the cards differently than the reviewer. I don’t know why. But when I look at it, the same happens for all of my cards too, where I use a button. It is very notable in dark mode rather than in the normal mode.
I don’t know why this happens. But it happens.
This seems to be a bug? I don’t know. If it is, we can really good demonstrate it with your screenshots. There is apparently no solution for this.
The only way to make this “prettier” for yourself is by making extra CSS styling for AnkiDroid. This is something you can achieve by using platform specific css (take a look here: Styling & HTML - Anki Manual).
