1/* SKINS */ 2.alo{{{cns}}} { 3 border-radius: 10px; 4} 5 6.alo-0600{{{cns}}} { 7 background-image: url(/resources/background.png{{{ns}}}); 8 background-position: center center; 9 background-repeat: no-repeat; 10 height: 205px; 11 position: relative; 12 width: 560px; 13} 14 15 16/* THE AUTHOR */ 17.alo{{{cns}}} .mod-plugin-brand h1 { 18 color: #3c3; 19 font-size: 18px; 20 font-weight: bold; 21 left: 80px; 22 line-height: 1; 23 margin: 0; 24 position: absolute; 25 top: 23px; 26} 27 28/* PLUGIN'S NAME */ 29.alo{{{cns}}} .mod-plugin-name h1 { 30 color: #3c3; 31 font-size: 24px; 32 font-weight: bold; 33 line-height: 1; 34 margin: 0; 35 position: absolute; 36 right: 80px; 37 top: 23px; 38} 39 40/* CONTROLS */ 41.alo{{{cns}}} .mod-control-group { 42 padding: 5px; 43 border-color: #000; 44 border-style: solid; 45 border-radius: 12px; 46 border-width: 1px 1px 1px 1px; 47 bottom: 149px; 48 color: #fff; 49 font-size: 10px; 50 font-weight: bold; 51 height: 80px; 52 left: 40px; 53 position: absolute; 54 right: 40px; 55 top: 47px; 56} 57 58.alo{{{cns}}} .mod-control-group > div { 59 margin-right: 2px; 60 margin-left: 2px; 61} 62 63.alo{{{cns}}} .mod-pedal-input, 64.alo{{{cns}}} .mod-pedal-output { 65 top: 4px; 66} 67 68/* SWITCH ON/OFF GENERAL */ 69.alo{{{cns}}} .mod-switch { 70 cursor: pointer; 71 float: right; 72 height: 71px; 73 position: relative; 74} 75 76.alo{{{cns}}} .mod-switch-image { 77 background-image: url(/resources/switch-001.png{{{ns}}}); 78 background-position: -9px 0px; 79 background-repeat: no-repeat; 80 background-size: auto 71px; 81 height: 71px; 82 width: 61px; 83} 84 85.alo{{{cns}}} .mod-switch-image.on { 86 background-position: -80px 0px; 87} 88 89.alo{{{cns}}} .mod-switch-image.off { 90 background-position: -9px 0px; 91} 92 93/* GREEN LIGHT */ 94.alo{{{cns}}} .mod-green-light { 95 float: left; 96 height: 71px; 97 overflow: hidden; 98 position: relative; 99 text-align: center; 100 width: 74px; 101} 102 103.alo{{{cns}}} .mod-green-light .mod-green-light-image { 104 background-image: url(/resources/greenlight.png{{{ns}}}); 105 background-position: left 0px; 106 background-repeat: no-repeat; 107 background-size: auto 71px; 108 height: 71px; 109 margin-top: 3px; 110 position: relative; 111 width: 71px; 112 z-index: 2; 113} 114 115.alo{{{cns}}} .mod-green-light .mod-black-light-image { 116 background-image: url(/resources/blacklight.png{{{ns}}}); 117 background-position: left 0px; 118 background-repeat: no-repeat; 119 background-size: auto 71px; 120 height: 71px; 121 margin-top: 3px; 122 position: relative; 123 width: 71px; 124 z-index: 2; 125} 126 127.alo{{{cns}}} .mod-green-light .mod-green-light-title { 128 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 129 font-size: 10px; 130 font-weight: bold; 131 height:18px; 132 left: 0; 133 overflow:hidden; 134 position: absolute; 135 right: 0; 136 text-transform: uppercase; 137 top: 0; 138 z-index: 1; 139} 140 141/* KNOBS */ 142.alo{{{cns}}} .mod-control-group .mod-knob { 143 display:inline-block; 144 float: left; 145 height:50px; 146 margin-top: 10px; 147 position:relative; 148} 149.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-image-wrapper { 150 padding: 1px; 151} 152.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-image { 153 background-image: url(/resources/knob.png{{{ns}}}); 154 background-position: left center; 155 background-repeat: no-repeat; 156 background-size: auto 44px; 157 height: 44px; 158 position: relative; 159 overflow: hidden; 160 width: 44px; 161} 162.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-value { 163 border-radius: 0 0 8px 8px; 164 color: #fff; 165 font-size: 22px; 166 font-weight: bold; 167 text-align: center; 168} 169 170.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-title { 171 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 172 color: #fff; 173 font-size: 12px; 174 font-weight: bold; 175 height:18px; 176 text-align: center; 177} 178 179/* ENUMERATED LIST */ 180.alo{{{cns}}} .mod-enumerated { 181 color:#fff; 182 display:inline-block; 183 left:132px; 184 overflow:hidden; 185 position:absolute; 186 top:-27px; 187 width:240px; 188} 189 190.alo{{{cns}}} .mod-enumerated .mod-enumerated-selected { 191 background-color:rgba(0,0,0,.8); 192 background-image:url(/resources/utils/dropdown-arrow-white.png{{{ns}}}); 193 background-position:right center; 194 background-repeat:no-repeat; 195 border-radius:4px; 196 box-shadow:inset 1px 1px 5px #000; 197 color:#fff; 198 font-size:12px; 199 height:24px; 200 line-height:2; 201 margin-right:8px; 202 overflow:hidden; 203 padding:0 9px; 204} 205 206/* WHEN IS HOVER */ 207.alo{{{cns}}} .mod-enumerated:hover .mod-enumerated-selected { 208 border-radius:4px 4px 0 0; 209} 210 211/* THE LIST OF OPTIONS */ 212.alo{{{cns}}} .mod-enumerated .mod-enumerated-list { 213 display:none; 214 font-weight:bold; 215} 216 217.alo{{{cns}}} .mod-enumerated .mod-enumerated-list > div { 218 padding:3px 9px; 219} 220 221.alo{{{cns}}} .mod-enumerated .mod-enumerated-list > div:hover { 222 background:rgba(255,255,255,.2); 223 cursor:pointer; 224} 225 226/* WHEN THE LIST IS SHOWING */ 227.alo{{{cns}}} .mod-enumerated .mod-enumerated-list { 228 background:rgba(0,0,0,.9); 229 display:none; 230 height:85px; 231 overflow:auto; 232 position:relative; 233 width:232px; 234 z-index:3; 235} 236 237 238/* SEPARATOR */ 239.alo{{{cns}}} .mod-separator { 240 background: #000; 241 display: inline-block; 242 float: left; 243 height: 69px; 244 margin-top: 2px; 245 margin-right: 10px; 246 margin-left: 10px; 247 width: 1px; 248} 249