このページのアドレスをOBSのブラウザソースURLに貼り付けるだけ
デフォルトの800x600では左右が切れるので、800x400ぐらいがおすすめです
この説明文はOBS上では表示されないはず
カスタム変数を利用したカスタムCSSに対応しています
各値を指定するだけで各種計算等は自動で行われます
何種類か作ってみたのでこちらをOBSブラウザソース設定画面中のカスタムCSS欄にコピペしてみてね
気に入ったものをベースにお好みで調整してください
基本的には色や形の変更ですが、最後の--secについては「秒の表示は要らないよ」という時にお使いください
/* 初期設定のオレンジのもの */
:root {
/*
背景色、発光色、通常色の設定
transparent：透過
#fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
rgb(255,0,0)、rgba(255,0,0,128)：RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
*/
--background-color: transparent;
--active-color: #ff5100;
--noactive-color: #0002;
--skew: -5deg; /* 傾き：角度指定（deg） */
--grow: 30px; /* 光彩の範囲 */
--seg-lengnth: 100px; /* セグ1本の長さ */
--seg-thick: 20px; /* セグの太さ */
--seg-radius: 1; /* セグの丸み（0～1） */
--gap: 10px; /* セグ間の距離 */
--sec: 1; /* 秒の透過度 */
}
/* サイバー */
:root {
/*
背景色、発光色、通常色の設定
transparent：透過
#fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
rgb(255,0,0)、rgba(255,0,0,128)：RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
*/
--background-color: transparent;
--active-color: #00ffd5;
--noactive-color: #0005;
--skew: 0deg; /* 傾き：角度指定（deg） */
--grow: 30px; /* 光彩の範囲 */
--seg-lengnth: 100px; /* セグ1本の長さ */
--seg-thick: 5px; /* セグの太さ */
--seg-radius: 0; /* セグの丸み（0～1） */
--gap: 20px; /* セグ間の距離 */
--sec: 1; /* 秒の透過度 */
}
/* キュート */
:root {
/*
背景色、発光色、通常色の設定
transparent：透過
#fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
rgb(255,0,0)、rgba(255,0,0,128)：RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
*/
--background-color: transparent;
--active-color: #e9aff8;
--noactive-color: #0001;
--skew: 0deg; /* 傾き：角度指定（deg） */
--grow: 30px; /* 光彩の範囲 */
--seg-lengnth: 90px; /* セグ1本の長さ */
--seg-thick: 30px; /* セグの太さ */
--seg-radius: 1; /* セグの丸み（0～1） */
--gap: 5px; /* セグ間の距離 */
--sec: 1; /* 秒の透過度 */
}
/* 8bit */
:root {
/*
背景色、発光色、通常色の設定
transparent：透過
#fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
rgb(255,0,0)、rgba(255,0,0,128)：RGB
hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
*/
--background-color: transparent;
--active-color: #5c6b38;
--noactive-color: #0001;
--skew: 0deg; /* 傾き：角度指定（deg） */
--grow: 0; /* 光彩の範囲 */
--seg-lengnth: 120px; /* セグ1本の長さ */
--seg-thick: 30px; /* セグの太さ */
--seg-radius: 0; /* セグの丸み（0～1） */
--gap: 15px; /* セグ間の距離 */
--sec: 1; /* 秒の透過度 */
}
日付機能を追加しました
カスタムCSSの:root内で--date-displayの値をblockにすると表示されます（デフォルトでは非表示）
/* 日付の追加表示 */
:root {
--date-display: block; /* 日付部の表示制御 表示：block 非表示：none */
}
URLパラメータ「timezone」としてタイムゾーンを入力することで現地時間を表示することが出来ます。
https://nmnm.mn/youtube/7segmentclock.html?timezone=UTCとすると、UTCでの時間になります。
https://nmnm.mn/youtube/7segmentclock.html?timezone=Japanで日本時間になりますが、パラメータのない配布URL（https://nmnm.mn/youtube/7segmentclock.html）のように、パラメータが存在しない場合には自動的に「Japan」を入れるようにしていますので、日本時間で使用する場合はパラメータの指定は必要ありません。
任意の地域での時間を表示したい場合はList of tz database time zones（Wikipedia）のTZ database nameを参考にしてください。
例えばニューヨークの時間を表示したい場合は、https://nmnm.mn/youtube/7segmentclock.html?timezone=America/New_Yorkとなります。
日付についてもタイムゾーンの指定が反映されます。