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