1/* Some basic CSS to make the MIDI controls in abcjs presentable. */
2
3.abcjs-inline-midi {
4	height: 26px;
5	padding: 0 5px;
6	border-radius: 3px;
7	color: #f4f4f4;
8	background-color: #424242;
9	display: flex;
10	align-items: center;
11	box-sizing: border-box;
12}
13
14.abcjs-inline-midi .abcjs-btn {
15	width: 28px;
16	height: 26px;
17	display: inline-block;
18	margin-right: 2px;
19	float: left;
20	padding: 0;
21
22	background: none;
23	font: normal normal normal 14px/1 FontAwesome;
24	font-size: 14px;
25	text-rendering: auto;
26	-webkit-font-smoothing: antialiased;
27	-moz-osx-font-smoothing: grayscale;
28	color: #f4f4f4;
29	border: 1px solid transparent;
30	box-sizing: border-box;
31}
32
33.fa5 .abcjs-inline-midi .abcjs-btn {
34	font-family: "Font Awesome 5 Free";
35	font-weight: 900;
36}
37.abcjs-inline-midi .abcjs-btn:hover {
38	color: #cccccc;
39}
40
41.abcjs-inline-midi .abcjs-midi-selection:before {
42	content: "\f07e"; /* fa-arrows-h [] */
43}
44
45.abcjs-inline-midi .abcjs-midi-selection.abcjs-pushed {
46	border: 1px solid #cccccc;
47	background-color: #666666;
48	box-sizing: border-box;
49}
50
51.abcjs-inline-midi .abcjs-midi-loop:before {
52	content: "\f021"; /*   fa-refresh [] */
53}
54
55.abcjs-inline-midi .abcjs-midi-loop.abcjs-pushed {
56	border: 1px solid #cccccc;
57	background-color: #666666;
58	box-sizing: border-box;
59}
60
61.abcjs-inline-midi .abcjs-midi-reset:before {
62	content: "\f048"; /*   fa-step-backward [] */
63}
64
65.abcjs-inline-midi .abcjs-midi-reset.abcjs-pushed {
66	border: 1px solid #cccccc;
67	background-color: #666666;
68	box-sizing: border-box;
69}
70
71.abcjs-inline-midi .abcjs-midi-start:before {
72	content: "\f04b"; /*   fa-play []    fa-pause [] */
73}
74
75.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed:before {
76	content: "\f04c"; /*   fa-play []    fa-pause [] */
77}
78
79.abcjs-inline-midi .abcjs-midi-start.abcjs-loading {
80	outline: none;
81	animation: a 1s infinite steps(8);
82}
83
84.abcjs-inline-midi .abcjs-midi-start.abcjs-loading:before {
85	content: "\f110"; /*   fa-loading */
86}
87
88.abcjs-inline-midi .abcjs-midi-progress-background {
89	background-color: #424242;
90	height: 10px;
91	border-radius: 5px;
92	border: 2px solid #cccccc;
93	margin: 0 8px 0 15px;
94	position: relative;
95	flex: 1;
96	padding: 0;
97	box-sizing: border-box;
98}
99
100.abcjs-inline-midi .abcjs-midi-progress-indicator {
101	width: 20px;
102	margin-left: -10px; /* half of the width */
103	height: 14px;
104	background-color: #f4f4f4;
105	position: absolute;
106	display: inline-block;
107	border-radius: 6px;
108	top: -4px;
109	left: 0;
110	box-sizing: border-box;
111}
112
113.abcjs-inline-midi .abcjs-midi-clock, .abcjs-inline-midi .abcjs-midi-post {
114	margin-left: 4px;
115	margin-top: 0;
116	display: inline-block;
117	font-family: sans-serif;
118	font-size: 16px;
119	box-sizing: border-box;
120}
121
122.abcjs-inline-midi .abcjs-midi-pre {
123	display: inline-block;
124	box-sizing: border-box;
125}
126
127.abcjs-inline-midi .abcjs-tempo-wrapper {
128	float: right;
129	font-size: 10px;
130	display: inline-block;
131	color: #f4f4f4;
132	box-sizing: border-box;
133}
134
135.abcjs-inline-midi .abcjs-midi-tempo {
136	border-radius: 2px;
137	border: none;
138	margin: 1px 2px 0 4px;
139	width: 32px;
140	padding-left: 2px;
141	box-sizing: border-box;
142}
143
144/* Adding the class "abcjs-large" will make the control easier on a touch device. */
145.abcjs-large .abcjs-inline-midi {
146	height: 52px;
147}
148.abcjs-large .abcjs-btn {
149	width: 56px;
150	height: 52px;
151	font-size: 28px;
152}
153.abcjs-large .abcjs-midi-progress-background {
154	height: 20px;
155	border: 4px solid #cccccc;
156}
157.abcjs-large .abcjs-midi-progress-indicator {
158	height: 28px;
159	top: -8px;
160	width: 40px;
161}
162.abcjs-large .abcjs-midi-clock {
163	font-size: 32px;
164	margin-right: 10px;
165	margin-left: 10px;
166}
167