1
2/* inherit SVG colours from the template settings */
3.abc2-plugin svg,
4.abc-render svg {
5  color: @ini_text;
6  background-color: @ini_background;
7  height: auto;
8}
9
10/* the SVGs abc2svg (and abc-ui) produce are not responsive and get cut off */
11/* this makes the SVG readable by making it possible for it to break out of the page */
12/* for the default 'dokuwiki' template, other templates might need other fixes */
13.dokuwiki div.page {
14  overflow: visible !important;
15}
16
17/* abcjs (original from abcjs-midi.css, MIT license)
18********************************************************************/
19
20/* changes from Anika Henke <anika@selfthinker.org>:
21   * removed references to Font Awesome
22   * added Unicode characters for player icons instead
23*/
24
25.abcjs-inline-midi {
26	height: 26px;
27	padding: 0 5px;
28	border-radius: 3px;
29	color: #f4f4f4;
30	background-color: #424242;
31	display: flex;
32	align-items: center;
33	box-sizing: border-box;
34  margin-bottom: 1.4em;
35}
36
37.abcjs-inline-midi .abcjs-btn {
38	width: 28px;
39	height: 26px;
40	display: inline-block;
41	margin-right: 2px;
42	float: left;
43	padding: 0;
44
45	background: none;
46	font: normal normal normal 14px/1 inherit;
47	font-size: 14px;
48	text-rendering: auto;
49	-webkit-font-smoothing: antialiased;
50	-moz-osx-font-smoothing: grayscale;
51	color: #f4f4f4;
52	border: 1px solid transparent;
53	box-sizing: border-box;
54}
55
56.abcjs-inline-midi .abcjs-btn:hover {
57	color: #cccccc;
58}
59
60.abcjs-inline-midi .abcjs-midi-selection:before {
61	content: "↔";
62}
63
64.abcjs-inline-midi .abcjs-midi-selection.abcjs-pushed {
65	border: 1px solid #cccccc;
66	background-color: #666666;
67	box-sizing: border-box;
68}
69
70.abcjs-inline-midi .abcjs-midi-loop:before {
71	content: "��";
72}
73
74.abcjs-inline-midi .abcjs-midi-loop.abcjs-pushed {
75	border: 1px solid #cccccc;
76	background-color: #666666;
77	box-sizing: border-box;
78}
79
80.abcjs-inline-midi .abcjs-midi-reset:before {
81	content: "⏮️";
82}
83
84.abcjs-inline-midi .abcjs-midi-reset.abcjs-pushed {
85	border: 1px solid #cccccc;
86	background-color: #666666;
87	box-sizing: border-box;
88}
89
90.abcjs-inline-midi .abcjs-midi-start:before {
91	content: "▶️";
92}
93
94.abcjs-inline-midi .abcjs-midi-start.abcjs-pushed:before {
95	content: "⏸";
96}
97
98.abcjs-inline-midi .abcjs-midi-start.abcjs-loading {
99	outline: none;
100	animation: a 1s infinite steps(8);
101}
102
103.abcjs-inline-midi .abcjs-midi-start.abcjs-loading:before {
104	content: "◌";
105}
106
107.abcjs-inline-midi .abcjs-midi-progress-background {
108	background-color: #424242;
109	height: 10px;
110	border-radius: 5px;
111	border: 2px solid #cccccc;
112	margin: 0 8px 0 15px;
113	position: relative;
114	flex: 1;
115	padding: 0;
116	box-sizing: border-box;
117}
118
119.abcjs-inline-midi .abcjs-midi-progress-indicator {
120	width: 20px;
121	margin-left: -10px; /* half of the width */
122	height: 14px;
123	background-color: #f4f4f4;
124	position: absolute;
125	display: inline-block;
126	border-radius: 6px;
127	top: -4px;
128	left: 0;
129	box-sizing: border-box;
130}
131
132.abcjs-inline-midi .abcjs-midi-clock, .abcjs-inline-midi .abcjs-midi-post {
133	margin-left: 4px;
134	margin-top: 0;
135	display: inline-block;
136	font-family: sans-serif;
137	font-size: 16px;
138	box-sizing: border-box;
139}
140
141.abcjs-inline-midi .abcjs-midi-pre {
142	display: inline-block;
143	box-sizing: border-box;
144}
145
146.abcjs-inline-midi .abcjs-tempo-wrapper {
147	float: right;
148	font-size: 10px;
149	display: inline-block;
150	color: #f4f4f4;
151	box-sizing: border-box;
152}
153
154.abcjs-inline-midi .abcjs-midi-tempo {
155	border-radius: 2px;
156	border: none;
157	margin: 1px 2px 0 4px;
158	width: 32px;
159	padding-left: 2px;
160	box-sizing: border-box;
161}
162
163/* Adding the class "abcjs-large" will make the control easier on a touch device. */
164.abcjs-large .abcjs-inline-midi {
165	height: 52px;
166}
167.abcjs-large .abcjs-btn {
168	width: 56px;
169	height: 52px;
170	font-size: 28px;
171}
172.abcjs-large .abcjs-midi-progress-background {
173	height: 20px;
174	border: 4px solid #cccccc;
175}
176.abcjs-large .abcjs-midi-progress-indicator {
177	height: 28px;
178	top: -8px;
179	width: 40px;
180}
181.abcjs-large .abcjs-midi-clock {
182	font-size: 32px;
183	margin-right: 10px;
184	margin-left: 10px;
185}
186
187.abcjs-highlight {
188  fill: #0a9ecc;
189}
190.abcjs-cursor {
191  stroke: red;
192}
193