Ankiで物書堂の再生ボタンを再現する方法

説明

　Anki Manualを見ていたら、再生ボタンの色や大きさは変更できると書いてあるのを見つけた。せっかくならと、物書堂の再生ボタンの再現にチャレンジしてみたので、以下にそのコードを共有したい。ダークモード時の色の変化も物書堂と同じになるように調整してある。

　なお、アンドロイド版のAnkiではボタンが縦に引き伸ばされてしまう。PC版やiOS版ではこの問題は発生しない。

.replay-button svg circle {

fill: #158ADA;

stroke: #158ADA;

}

.replay-button svg {

width: 55px; /*ここと真下のheightの数字をいじれば、再生ボタンの大きさを変更できる。ここではiPad版のAnkiに適した大きさで用意した。*/

height: 24px;

border: solid 2.7px white;

background-color: #158ADA;

margin: 2px;

border-radius: 6px;

box-shadow: 0 0 0 2.6px #158ADA;

overflow: visible;

margin: 0px 0px 0px 5px;

}

.replay-button svg path {

stroke: white;

fill: white;

}

.nightMode .replay-button svg {

border: solid 2.7px black;

}