デザインエディター

オーバーレイの見た目を調整し、 OBS のカスタム CSS としてコピーできます。

プレビュー

アルバム
楽曲名
アーティスト名
テキストカラー
フォント
ジャケットサイズ

生成した CSS を、LumiaMusicView ソースの「カスタム CSS」に貼り付けてください。

/* Lumia — generated by folne.net/apps/lumia */
:root {
  --lumia-text-color: #ffffff;
  --lumia-text-bg: transparent;
  --lumia-jacket-size: 180px;
  --lumia-font: "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif;
  --lumia-jacket-radius: 0;
  --lumia-text-radius: 0;
  --lumia-jacket-shadow: none;
}

body,
.text-block {
  font-family: var(--lumia-font) !important;
}

.jacket {
  border-radius: var(--lumia-jacket-radius) !important;
  box-shadow: var(--lumia-jacket-shadow) !important;
  width: min(var(--lumia-jacket-size), 250px) !important;
  height: min(var(--lumia-jacket-size), 250px) !important;
  max-height: 100% !important;
}

.accent {
  height: min(var(--lumia-jacket-size), 250px) !important;
  max-height: 100% !important;
}

.text-block {
  border-radius: var(--lumia-text-radius) !important;
  padding: 0.35rem 0.55rem;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
}

.album,
.title,
.artist {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
}

.duration { display: none !important; }