Mercurial > repos > public > wdown

comparison abcjs-midi.css @ 21:dbc7d00fcb7d midi-experiment

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Try to add midi playback of sheet music
author Jonatan Werpers <jonatan@werpers.com>
date Wed, 01 Jul 2020 11:41:39 +0200
parents
children
comparison
equal deleted inserted replaced
20:cb6c79b172d1 21:dbc7d00fcb7d
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 [&#xf07e;] */
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 [&#xf021;] */
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 [&#xf048;] */
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 [&#xf04b;] fa-pause [&#xf04c;] */
73 }
74
75 .abcjs-inline-midi .abcjs-midi-start.abcjs-pushed:before {
76 content: "\f04c"; /* fa-play [&#xf04b;] fa-pause [&#xf04c;] */
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 }