diff options
| author | lonkaars <loek@pipeframe.xyz> | 2023-01-25 18:16:16 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2023-01-25 18:16:16 +0100 |
| commit | 71fc52b7d8d920ba1b0b11645064545e4c85551b (patch) | |
| tree | 107717ce0580197abb9d897cfea8ef319f53b81d /anki-card-template/card.html | |
| parent | cc4511ffe8cdb40133dd9488c7cd4f700097d166 (diff) | |
display definition separator with css and display card state in dev buttons
Diffstat (limited to 'anki-card-template/card.html')
| -rw-r--r-- | anki-card-template/card.html | 20 |
1 files changed, 15 insertions, 5 deletions
diff --git a/anki-card-template/card.html b/anki-card-template/card.html index 6d6c861..8559b58 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -31,14 +31,24 @@ <span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span> <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span> </div> -</div> +<style> +#card.front #dev-button-flip::after { content: "front"; } +#card.back #dev-button-flip::after { content: "back"; } +#card.horizontal-layout #dev-button-layout::after { content: "horizontal layout"; } +#card.vertical-layout #dev-button-layout::after { content: "vertical layout"; } +body:not(.night_mode) #dev-button-theme::after { content: "light mode"; } +body.night_mode #dev-button-theme::after { content: "dark mode"; } +body:not(.mobile) #dev-button-platform::after { content: "desktop"; } +body.mobile #dev-button-platform::after { content: "mobile"; } +</style> <div id="dev-buttons"> -<button onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')">toggle view</button> -<button onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')">toggle layout</button> -<button onclick="document.body.classList.toggle('night_mode')">toggle dark</button> -<button onclick="document.body.classList.toggle('mobile')">toggle mobile</button> +<button id="dev-button-flip" onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')"></button> +<button id="dev-button-layout" onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')"></button> +<button id="dev-button-theme" onclick="document.body.classList.toggle('night_mode')"></button> +<button id="dev-button-platform" onclick="document.body.classList.toggle('mobile')"></button> </div> +</div> </span> </html> |