音声プレイヤーを細くして行と同じ高さにするUserCSS
Cosenseの音声プレイヤーの見た目を変更して高さを行の高さと同じにする
https://gyazo.com/f21138bc483f63050c8d8c3937f51d07 → https://gyazo.com/caa512d525a97727d708cfaecc574cc5
通常のプレイヤーは大きくて背高なのでページの見た目が崩れる
https://gyazo.com/00cab135550080084d460dcd5063a083
プレイヤーを行と同じ高さにすると、ページの見た目がきれいになる
https://gyazo.com/2260fd363d992c797188141245660eb7
行の高さを変えないプレイヤーの高さを見つける
.audio-player {height: 1.7em;}以下だと行に収まった
1.8em以上だと収まらない、行を広げてしまう
もっと見た目を良くする
1.7emだと大きいので小さくする
文字に対して大きすぎる存在感
https://gyazo.com/6b73a70606f14258f3685d4c53d08669
もっと薄くしよ
1.4emがいいな
https://gyazo.com/963feae300a6ef6bacb31d8faa16cb8c
行の中心より下に少しずれてたのでmargin-bottom: 0.1emで正中させた
https://gyazo.com/15fbda612b0306d43381613043c5901d
code:style.css
audio {
height: 1.4em;
margin-bottom: 0.1em;
}
FirefoxのプレイヤーもこのCSS Ruleで細くなった
https://gyazo.com/cf2b590816a7e702e8bab3f27324c4e1
カプセル形を変更して角丸にする
長方形で両側に半円がくっついてる形じゃなく、長方形の角が丸くなってる形にしたい
https://gyazo.com/6232722dbd608adec8db870751ef87d9 → https://gyazo.com/5ae71f17abb5c93a8a33025165b17054
code:style.css
audio::-webkit-media-controls-enclosure {
border-radius: 5px;
}
Firefoxのプレイヤーも角丸にする
https://gyazo.com/cf2b590816a7e702e8bab3f27324c4e1 → https://gyazo.com/8473c448265afae3fc7c327226ac454a
code:css
.videocontrols { border-radius: 1em; }
うまく動作しない
Web developer toolsのInspectorでStyleを書き込んだときは動作してた、見た目が変わってた
でもCosenseのstyle.cssとして読み込んだときに動作しない、見た目に変化がない
なんでvlzs.icon
Firefoxでは<audio>や<video>のshadow DOMの内部にCSSを当てることができない Copilot.icon
Firefoxのshadow Domはclosedになってる
FirefoxはそういうCSSフックを公開してないのでできない
使わなかった枝葉の作業メモ↓
audio {border-radius: 5px} でborder-radiusの値を変えても見た目の変化がない
audio {background-color: red}したらちゃんと変化してた
audioに対してborder-radiusを設定してきた
audioが透明だったので変化が見えなかった
カプセルの円の部分を作っているのはaudioでなく<pseudo="-webkit-media-controls-enclosure">だった
これに色がついてる
border-radiusがある
border-radiusを変更すると円が変化した
こちらのborder-radius値を変更しよう
background: light-dark(rgb(241, 243, 244), rgba(59, 59, 59, 0.9));
light-dark() は CSS の <color> 関数で、プロパティに 2 つの色を設定することができます。開発者が明るい配色または暗い配色を設定したか、ユーザーがライト色またはダーク色のテーマをリクエストしたか検出することによって、 2 つの色の選択肢のいずれかを返します。
黄緑色の部分を消す
https://gyazo.com/64dedf3fdcf1a54806e17a523bfef866 → https://gyazo.com/bea3e0d9937ceff345f762afd5ef4880
code:style.css
audio::-webkit-media-controls-panel {
padding: 0 1px 0 6px;
}
使い方