/*
Theme Name: Yumurawaki Song Catalog
Description: 楽曲カタログ専用の最小構成テーマ。yumurawaki.com/song/ 用のサブディレクトリWordPressにインストールして使う。
Version: 1.0
Author: yumurawaki
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0e0c1a;
}

a {
  color: inherit;
}

/* 音域の鍵盤グラフィック(詳細ページ) */
.vrp-keyboard-scroll.vrp-static {
  overflow-x: auto;
  border: 0.5px solid rgba(245, 239, 230, 0.14);
  border-radius: 8px;
  padding: 6px;
  background: #262242;
  margin: 4px 0 0;
}
.vrp-keyboard {
  position: relative;
  display: flex;
  height: 56px;
  min-width: 560px;
}
.vrp-key {
  position: relative;
}
.vrp-white {
  flex: 1;
  border: 1px solid rgba(245, 239, 230, 0.2);
  background: #F5EFE6;
}
.vrp-black {
  position: absolute;
  top: 0;
  width: 2.2%;
  height: 60%;
  background: #14121f;
  border-radius: 0 0 2px 2px;
}
.vrp-white.vrp-active-low,
.vrp-white.vrp-active-high {
  background: #E0527A;
}
.vrp-black.vrp-active-low,
.vrp-black.vrp-active-high {
  background: #E0527A;
}
.vrp-white.vrp-in-range {
  background: #E8B04B;
}
.vrp-black.vrp-in-range {
  background: #B33D5E;
}

/* 音域のバー表示(一覧ページ) */
.vrb-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(245, 239, 230, 0.14);
  margin-top: 6px;
}
.vrb-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: #E0527A;
}