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