/* Roland U-220 Editor */
/*  */
/*	Copyright 2026 Katsumi Ochiai(ok_rock_gtr) */
/* 	Version 1.0 30/SEP 2026 */

@charset "UTF-8";

/* グローバル ------------------------------------------------ */
:root{
	--color_fg: #575757;	/* メインカラー */
	--color_bg: #464646; 	/* バックグラウンドカラー */
	--color_sel: #818181; 	/* select要素のカラー */
	--color_ind: #47922C; 	/* MIDIインのインディケーターの通常時のカラー */
}

/* 基本要素 ------------------------------------------------*/
body{
	display: flex;				/* Rhythm Inst Listを横に並べるため */
	width: fit-content;			/* ウインド中央に配置するために必要 */
	margin: 0 auto;
	color: #C0C0C0;
	background-color: #FFFFFF;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, Meiryo, sans-serif;
	font-size: 10px;
}

h1, h2, h3, h4, h5, p{
	margin: 0;
	user-select: none;
	text-indent: 5px;
}
h1{
	height: 20px;
	margin-right: 20px;
	line-height: 1;			/* 行送りの余白をなくしてheight内に収める */
	color: #76D6FF;
}
h1, h2{
	font-size: 18px;
}
h3, h4, h5{
	font-size: 10px;
}
h4, h5{
	font-weight: normal;
}
h5{
	text-indent: 0;
	text-align: center;
}

p{
	text-indent: 0;
}
input[type = number], select{
	height: 17px;
	border-radius: 3px;
	font-size: 10px;
	text-align: center;
	color: #FBFBFB;
	background-color: var(--color_sel);
}
input[type = number]{
	box-sizing: border-box;
}
select{
	appearance: none;			/*  右側の矢印を消す（幅狭の表示に邪魔のため） */
}


/* 基本フレーム ------------------------------------------------------- */
#contens{					/* Rhythm Inst Listを横に並べるためにひとまとめにする */
	display: flex;
	flex-direction: column;
	background-color: var(--color_bg);
}
.edit_frame{							/* 外枠を含む横並びの領域 */
	display: flex;
}
.edit_frame2{							/* 操作要素領域 */
	display: flex;
	background-color: var(--color_fg);
}
.edit_frame3{
	display: flex;
	flex-direction: column;				/* 縦並びに配置する */
	justify-content: space-around;		/* 等間隔に配置する */
	background-color: var(--color_fg);
}

/* エディット要素用の共通フレックスボックス --------------- */
.edit_box_small, .edit_box, .edit_box_slider{
	display: flex;
	justify-content: center;
	align-items: center;
}
.edit_box_small{
	width: 45px;
	height: 45px;
}
.edit_box{
	width: 55px;
	height: 55px;
}

/* Div要素ボタン ------------------------------------------------------- */
.button{
	display:flex;			/* テキストなどを中央配置にするために使用する */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;		/* 文字の範囲選択を出来なくする */
	height: 15px;
	border-radius: 3px;
	box-shadow: -1px -1px 1px rgba(187, 187, 187, 0.6), 1px 1px 2px rgba(68, 68, 68, 0.7);
}

/* ヘッダー ------------------------------------------------ */
header{
	position: fixed;		/* 上部に固定する */
    top: 0;
    z-index: 100;
	background-color: var(--color_bg);
	> div{
		align-items: flex-end;
		width: 557px;
		height: 20px;
		margin: 5px 0;
		> div:first-of-type{				/* Bluk dump request*/
			margin: auto 20px auto auto;
			> div:first-of-type{
				width: 80px;
				margin: 0 5px 0 5px;
			}
			> div:last-of-type{
				width: 65px
			}
		}
		#help_open{
			width: 15px;
			height: 15px;
			margin: 0 10px 2px 0;
		}
		p:last-child{
			margin-right: 10px;
		}
	}
}

/* コンテンツ ------------------------------------------------ */
/* Setup & MIDI ------------------------------------------------ */
#contents_setup_midi > div:first-child{
	height:30px;				/* 固定hedader分の空白 */
}
#setup, #midi{
	height: 46px;
	margin-bottom: 5px;
	h2{
		z-index: 1;				/* 右隣の領域にはみ出て表示させるため */
		width: 40px;
		font-size: 13px;
	}
	h4{
		margin-right: 5px;
		letter-spacing: -0.04em;
	}
	> div > div{
		justify-content: flex-end;		/* 各要素を右寄せにする */
	}
}
#setup{
	width: 250px;
	margin-right: 5px;
	> div:first-of-type{
		width: 140px;
	}
	> div:last-of-type{
		width: 65px;
	}
}
#midi{
	width: 302px;
	> div:first-of-type{
		width: 150px;
		select{
			width: 105px;
		}
	}
	> div:nth-of-type(2){
		width: 22px;
		> div{
			height: 23px;
			#midi_in_indicator{
				width: 10px;
				height: 10px;
				margin: auto;
				border-radius: 50%;
				background-color: var(--color_ind);
			}
		}
	}
	> div:last-of-type{
		width: 85px;
		select{
			width: 25px;
		}
	}
}
	
/* Patch Common ------------------------------------------------ */
#patch_common{
	height: 46px;
	margin-bottom: 2px;
	> div:first-child{					/* タイトル領域 */
		width: 88px;
		margin-right: 2px;
		#patch_change{
			width: 55px;
			margin: 0 5px 2px auto;
			padding-left: 14px;			/* Patch名を隠してNoのみを見せるため */
		}
	}
}
#patch_name{
	width: 145px;
	margin-right: 2px;
	> div:first-child{
		justify-content: space-between;
		#patch_name_edit{
			align-self: center;
			width: 40px;
			margin-right: 7px;
		}
	}
	#patch_name_box div{			/* 文字表示：12文字 */
		width: 10px;
		height: 15px;
		margin: 3px 1px 2px 0;
		background-color: #FFFFFF;
		color: #000000;
		font-weight: bold;
		text-align: center;
		&:first-child{
			margin-left: 7px;
		}
	}
}
#controler{
	width: 319px;
	h4{
		margin-right: 5px;
	}
	> div:first-child{
		z-index: 1;		/* 右隣の領域にはみ出て表示させるため */
		width: 20px;
	}
	> div:nth-child(n+2){
		width: 90px;
		margin-left: 8px;
		> div:first-child{
			justify-content: flex-end;
		}
	}
}

/* Patch Effect ------------------------------------------------ */
#effect{
	height: 83px;
	margin-bottom: 2px;
	> div:first-child{			/* タイトル領域 */
		width: 88px;
		margin-right: 2px;
	}
}
#chorus, #reverb{
	h3{
		width: 48px;
	}
	> div > div:first-child{		/* Chorus、Reverb共用：上段 */
		height: 23px;
		justify-content: flex-end;
		align-items: center;
		margin-right: 5px;
		h4{
			margin-right: 5px;
		}
	}
}
#chorus{
	margin-right: 2px;
	> div{
		width: 230px;
	}
}
#reverb > div{
	width: 138px;
}

/* Patch Part ------------------------------------------------ */
#part{
	margin-bottom: 5px;
	> div{						/* タイトル領域、Part1〜6、Ryhthm共通 */
		margin-right: 2px;
		> div:first-child{
			height: 39px;
		}
		>div:nth-child(n + 2){
			height: 23px;
		}
		>div:nth-child(6){
			height: 21px;
		}
		>div:nth-child(8){
			height: 55px;
		}
		>div:nth-child(9){
			height: 100px;
		}
		>div:last-child{
			height: 16px;
		}
	}
	> div:first-child{			/* タイトル領域 */
		width: 88px;
		h4{
			text-indent: 10px;
		}
		h5{
			margin-right: 3px;
			letter-spacing: -0.04em;
		}
		> div{
			justify-content: space-between;		/* h4、h5：一つは左寄せ、二つは両端に寄せる */
			align-items: center;
		}
		> div:nth-child(n+4):nth-child(-n+6), > div:nth-child(n+8){		/*h5：右寄せ */
			justify-content: flex-end;
		}
	}
	> div:nth-child(n+2){			/* Part1〜6、Ryhthm */
		width: 65px;
		> div{							/* 全エディット要素共通 */
			justify-content: center;
		}
		> div:first-child > div{		/* Timbre（Ryhthm）No & Name */
			align-items: center;			/* 左右中央揃え */
			margin: 0;
			select{
				margin-top: 2px;
				padding-left: 12px;			/* Timbre名を隠してNoのみを見せるため */
			}
			> div{							/* Name */
				white-space: nowrap;     	/* 改行しない */
				letter-spacing: -0.04em;
			}
		}
		> div:nth-child(n+2):nth-child(-n+7){		/* Voice Reserve 〜 Assign */
			justify-content: space-between;
			align-items: center;
			> select:first-child, > div:first-child{
				margin-left: 5px;
			}
			> select:last-child, > div:last-child{
				margin-right: 5px;
			}
		}
		> div:nth-child(9){				/* Level */
			align-items: flex-end;			/* JSで挿入するパラメーター値とメーターを下端に揃えるため */
			margin-bottom: 5px;
		}
		> div:nth-child(10){			/* Timbre/Rhythm切り替え */
			box-shadow: none;
		}
	}
	> div:last-child{			/* Ryhthm専用 */
		margin-right: 0;
		> div:first-child > div select{		/* Rhythm Setup No & Name */
			padding-left: 15px;					/* Rhythm Setup名を隠してNoのみを見せるため */
		}
		> div:nth-child(8){			/* Boost */
			align-items:end;
			h4{
				margin-right: 5px;
			}
		}
	}
}

/* Timbre （& Rhythm Setup）------------------------------------------------ */
#contents_timbre{
	display: none;					/* 表示・非表示を切り替える */
		&.is_show_timbre{
			display: block;
		}
}
#contents_timbre, #contents_rhythm{			/* Rhythm Setupと共用 */
	> div:first-child{			/* タイトル領域 */
		height: 46px;
		margin-bottom: 2px;
		> div:first-child{
			width: 88px;
			margin-right: 2px;
		}
	}
}

#timbre_name, #rhythm_name{				/* Rhythm Setupと共用 */
	width: 145px;
	margin-right: 2px;
	> div:first-child{
		justify-content: space-between;
		#timbre_name_edit, #rhythm_name_edit{
			align-self: center;
			width: 40px;
			margin-right: 7px;
		}
	}
	#timbre_name_box, #rhythm_name_box{
		div{				/* 文字表示：12文字 */
			width: 10px;
			height: 15px;
			margin: 3px 1px 2px 0;
			background-color: #FFFFFF;
			color: #000000;
			font-weight: bold;
			text-align: center;
			&:first-child{
				margin-left: 7px;
			}
		}
	}
}
#timbre_tone{
	width: 320px;
	> div{
		align-items: center;
		height: 23px;
	}
	> div:first-child{					/* 上段 */
		justify-content: space-between;
		h3{
			margin-right: 5px;
		}
		select{
			width: 90px;
			margin-right: 5px;
		}
	}
	> div:last-child{					/* 下段 */
		select:first-of-type{
			margin-left: 5px;
		}
		p{
			width: 10px;
			text-align: center;
		}
		#play_timbre{
			width: 25px;
			margin-left: 10px;
		}
	}
}

#timbre_level, #timbre_pitch, #timbre_vibrate, 
	#rhythm_inst, #rhythm_level, #rhythm_pitch{			/* 共通領域、Rhythm Setupと共用 */
	height: 73px;
	margin-bottom: 2px;
	h4{
		height: 13px;
	}
	> div:first-child{				/* タイトル領域 */
		width: 88px;
		height: 100%;
		margin-right: 2px;
	}
	> div:nth-child(n+2){			/* エディーター領域 */
		width: 467px;
		> div:nth-child(n+2){		/* ２項目以降の余白*/
			margin-left: 10px;
		}
	}
}
#timbre_level{
	> div:nth-child(2){
		> div:first-child{				/* Level */
			justify-content: flex-end;
		}
	}
}
#timbre_pitch{
	> div:nth-child(2){
		> div:first-child > div{		/* Pitch Shift */
			justify-content: flex-end;

		}
		> div:nth-child(2){				/* Bender Range */
			justify-content: space-between;
			align-items: center;
			width: 35px;
			h4{
				text-indent: 0;
			}
		}
	}
	
}
#timbre_vibrate{
	margin-bottom: 5px;
	> div:nth-child(2){
		> div:first-child{				/* Rate/Depth */
			align-items: flex-end;
		}
		> div:nth-child(2){					/* Wave Form */
			justify-content: space-between;
			h4{
				letter-spacing: -0.1em;
				text-indent: 0;
			}
		}
	}
}


/* Rhythm Setup ------------------------------------------------ */
#contents_rhythm{
	display: none;					/* 表示・非表示を切り替える */
		&.is_show_rhythm{
			display: block;
		}
	h2{
		line-height: 1;
		&:last-of-type{
			text-align: right;
		}
	}
}
#rhythm_bend{
	justify-content: space-between;
	width: 123px;
	margin-right: 2px;
	h3{
		width: 90px;
	}
}
#card_list{
	justify-content: space-around;
	width: 195px;
	select{					/* Card Selectボタン*/
		width: 90px;
		margin-left: 5px;
	}
}

#rhythm_inst{
	height: 38px;
	#rhythm_inst_disp{
		margin: 0 5px 4px auto;
	}
}
#rhythm_tone{
	h4{
		height: 15px;			/* h3と高さを合わせる */
		text-indent: 0;
	}
	> div > div, > div select{		/* 各２段目 */
		margin: auto 0 auto 0;
	}
	> div:first-child > div{
		margin-left: 5px;
		p{
			width: 10px;
			text-align: center;
		}
	}
}

#rhythm_level{
	> div:nth-child(2){	
		width: 325px;
		margin-right: 2px;
		> div:nth-child(3) > div > div:first-child{		/* Envelope Mode */
			justify-content: flex-end;
			margin-right: 5px;
		}
	}
	#rhythm_output{
		width: 140px;
		> div:first-child{
			justify-content: space-between;
			> div{						/* Output Assign */
				margin: 0 5px 0 10px;
			}
		}
		> div:last-child{
			margin-left: 0;
		}
	}
}

#rhythm_pitch{
	margin-bottom: 5px;
	> div:nth-child(2){
		> div:first-child > div{		/* Pitch Shift */
			justify-content: flex-end;

		}
	}
}


/* Rhythm Instリスト ------------------------------------------------ */
/* Rhythm Partを選択時に表示する */
#rhythm_inst_window{
	display: none;						/* 表示・非表示を切り替える */
		&.is_show_inst_window{
			display: flex;
		}
	width: 200px;
		&.is_wide{
			width: 300px;			/* 幅を切り替える */
		}
	height: 811px;						/* メインの高さと合わせる */
	overflow: auto;						/* 念の為、スクロールバーを設定する */
	background-color: var(--color_bg);
	> div{
		width: 100%;
		margin: 0 10px;
		background-color: var(--color_bg);
		> div:first-child{					/* タイトル欄 */
			justify-content: flex-end;
			align-items: center;
			height: 20px;
			margin-top: 5px;
			h3{
				margin: 0 auto;
				text-align: center;
			}
			#list_wide, #list_narrow{
				width: 15px;
				margin-left: 5px;
			}
			#play_rhythm{
				width: 20px;
				margin: 0 5px 0 10px;
			}
		}
		#rhythm_inst_list{			/* インスト表示欄 */
			margin: auto 0;
			font-family: Consolas, 'Courier New', Courier, Monaco, 'Osaka-mono', monospace;	/* リストへ等幅フォントを指定する */
			p{							/* リストの項目、JSで作成する */
				cursor: pointer;
				user-select: none;
				white-space: pre;		/* 連続するスペース（空白）を一つにまとめない */
				height: 12px;
			}
		}
	}
}


/* ネーム編集エリア ------------------------------------------------ */
/* Nameのエディット時のみ固定表示する、位置はJSによる */
#name_edit_window{
	position: absolute;
	width: 215px;
	box-shadow: 0 0 10px #FBFBFB;
	display: none;					/* 表示・非表示を切り替える */
		&.is_show_name_edit{
			display: flex;
		}
	> div:first-child{
		text-align: center;
	}
	> div:last-child{
		justify-content: space-between;
		align-items: center;
		#input_name{
			width: 110px;
			height: 15px;
			margin: 5px 0 5px 15px;
			font-size: 12px;
		}
		#name_ok{
			width: 40px;
			margin-right: 10px;
		}
	}
}


/* フッター ------------------------------------------------ */