1/*
2 * CSS styleshet for the "Madsonic 4k" theme.
3 */
4
5@import "font-Montserrat.css";
6
7@import "default.css";
8
9@import "scrollbar-px.css";
10
11@import "playericons/playericons4klight.css";
12
13
14.browse-index-shortcut {
15    font-size: 150% !important;
16}
17
18.maincontrol a {
19    font-weight: bold;
20}
21
22.maincontrol a img {
23	padding-bottom: 3px;
24	padding-right: 1px;
25	padding-left: 1px;
26}
27
28.leftpanel p.dense{
29    clear: both;
30    padding: 4px;
31    border-bottom: 1px dotted #ccc;
32    line-height: 1.1em;
33    font-family: 'Montserrat', sans-serif !important;
34    font-weight: 400;
35    font-size: 8pt;
36}
37
38.mainframe #content_artist  #anchor_list a{
39    font-size: 16pt;
40}
41
42h2 {
43    margin: 10px 0 0 5px;
44   font-size: 10pt;
45}
46
47.album {
48    font-size: 9pt;
49    font-weight: 700;
50}
51
52::-webkit-scrollbar {
53    width: 14px;
54    height: 14px;
55    /* background: #ECECEC; */
56}
57
58/* Custom */
59span.off {
60    background: #FFF !important;
61}
62
63span.on {
64    background: #33B5E5 !important;
65    color: #fff !important;
66}
67
68span.off:hover {
69    background: #33B5E5 !important;
70    border: solid 1px #333  !important;
71    }
72
73span.on:hover  {
74    background: #44B5E5 !important;
75    border: solid 1px #333  !important;
76    }
77
78
79span.off2 {
80    background: #333;
81    cursor: pointer;
82    float:left;
83    padding: 4px 9px;
84    margin: 2px;
85    color: #FFF;
86    -webkit-border-radius: 7px;
87    -moz-border-radius: 7px;
88    border-radius: 7px;
89    border: solid 1px #333;
90    -webkit-transition-duration: 0.1s;
91    -moz-transition-duration: 0.1s;
92    transition-duration: 0.1s;
93    -webkit-user-select:none;
94    -moz-user-select:none;
95    -ms-user-select:none;
96    user-select:none;
97    white-space: nowrap;
98    font-size: 8pt;
99}
100
101span.on2 {
102    	cursor: pointer;
103		float:left;
104		padding: 4px 9px;
105		margin: 2px;
106        background: #33B5E5;
107		color: #FFF;
108		-webkit-border-radius: 7px;
109		-moz-border-radius: 7px;
110		border-radius: 7px;
111        border: solid 1px #ccc;
112		-webkit-transition-duration: 0.1s;
113		-moz-transition-duration: 0.1s;
114		transition-duration: 0.1s;
115		-webkit-user-select:none;
116		-moz-user-select:none;
117		-ms-user-select:none;
118		user-select:none;
119		white-space: nowrap;
120
121    font-size: 8pt;
122}
123
124span.on2:hover  {
125    background: #33B5E5 !important;
126    border: solid 1px #444 !important;
127}
128
129span.off2:hover  {
130    background: #000 !important;
131    border: solid 1px #444 !important;
132}
133
134table.music tr {
135    line-height: 30px !important;
136}
137
138table.music tr:nth-of-type(even) { background: rgba(0,0,0,.02); }
139table.music tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); }
140
141table.content tr:nth-of-type(even) { background: rgba(0,0,0,.02); }
142table.content tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); }
143
144table.content tr { border-bottom: 1px solid rgba(128,128,128,0.05) !important; }
145
146#playlistBody tr:nth-of-type(even) { background: rgba(0,0,0,.02); border-bottom: 1px solid rgba(128,128,128,0.05) !important; }
147#playlistBody tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); border-bottom: 1px solid rgba(128,128,128,0.05) !important; }
148
149
150#startButton, #stopButton {
151    cursor:pointer; font-size:30px; color:#0090BB !important;
152}
153
154.playlistframe #progress, #progress-slider, #volume, #volume-slider {
155    background: #ccc !important;
156}
157
158.ui-slider-range-min {
159    background: #0090BB !important;
160}
161
162.ui-slider .ui-slider-handle {
163    background: #0090BB !important;
164}
165
166#cc-on, #cast-active {
167    color: #0090BB !important;
168}
169
170#play, #pause, #buffer {
171    font-size: 24px !important;
172    color: #0090BB !important;
173}
174
175.flowplayer, .flowplayer.is-playing, .flowplayer.is-fullscreen .fp-player {
176    background-color: #ECECEC !important;
177}
178
179
180.starred {
181    color: #009BCA !important;
182}
183
184.loved {
185    color: #009BCA !important;
186}
187
188.control {
189    color: #888 !important;
190}
191
192.hot {
193    color: orange !important;
194}
195
196.custom-icon-rank {
197  font-size:10px;
198  font-family: 'Montserrat', Arial, serif  !important;
199  /* padding:7px 4px 2px 4px; */
200}
201
202.custom-icon {
203  font-size:7px;
204  background:#fff;
205  padding: 7px 5px 4px 5px !important;
206  margin:3px 1px 3px 1px;
207  /* background:rgba(0,0,0,0.2); */
208  -webkit-border-radius:25%;
209  -moz-border-radius:25%;
210  -o-border-radius:25%;
211  border-radius:25%;
212  border:1px solid #ccc !important;
213  color:#888;
214 	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
215  text-align:center;
216  display:table-cell;
217  vertical-align:middle;
218  width:15px;
219  height:15px;
220  -moz-transition:.5s;
221  -webkit-transition:.5s;
222  -o-transition:.5s;
223  transition:.5s;
224}
225
226.custom-icon:hover {
227  background:rgba(1,1,1,0.1);
228  border:1px solid #8cce38;
229  box-shadow: 0 1px 5px rgba(25, 31, 31, 0.8) !important;
230  color: #009BCA;
231}
232
233
234.custom-icon:active {
235  background:rgba(0,0,0,0.4);
236  border:1px solid #fff !important;
237  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46) !important;
238  color: orange !important;
239}
240
241.custom-icon-header {
242  font-size:20px !important;
243  background:#fff;
244  padding:7px 4px 3px 4px;
245  margin:0 0 8px 0;
246  -webkit-border-radius:25%;
247  -moz-border-radius:25%;
248  -o-border-radius:25%;
249  border-radius:25%;
250  border:1px solid #ccc !important;
251  text-align:center;
252  display:table-cell;
253  vertical-align:middle;
254  width:24px;
255  height:24px;
256  -moz-transition:.5s;
257  -webkit-transition:.5s;
258  -o-transition:.5s;
259  transition:.5s;
260}
261
262.custom-icon-main {
263  font-size:14px !important;
264  background:#fff;
265  padding: 7px 6px 5px 6px;
266  margin:0 0 8px 0;
267  -webkit-border-radius:25%;
268  -moz-border-radius:25%;
269  -o-border-radius:25%;
270  border-radius:25%;
271  border:1px solid #ccc !important;
272  text-align:center;
273  display:table-cell;
274  vertical-align:middle;
275  width:16px;
276  height:16px;
277  -moz-transition:.5s;
278  -webkit-transition:.5s;
279  -o-transition:.5s;
280  transition:.5s;
281}
282
283.custom-icon-main:hover {
284  border:1px solid #eee !important;
285  color: orange !important;
286}
287
288.custom-icon-main:active {
289  border:1px solid #fff !important;
290  color: orange !important;
291}
292.custom-icon-nohover {
293  font-size:7px;
294  background:#fff;
295  padding:6px 4px 2px 4px;
296  margin:0px;
297  /* background:rgba(0,0,0,0.2); */
298  -webkit-border-radius:25%;
299  -moz-border-radius:25%;
300  -o-border-radius:25%;
301  border-radius:25%;
302  border:1px solid #ddd !important;
303  color:#888;
304  text-align:center;
305  display:table-cell;
306  vertical-align:middle;
307  width:15px;
308  height:15px;
309  -moz-transition:.5s;
310  -webkit-transition:.5s;
311  -o-transition:.5s;
312  transition:.5s;
313}
314
315.custom-icon-nohover:hover {
316  color: orange;
317}
318
319.fix-editor {
320  display:none;
321}
322.icon-wrapper {
323  display:inline-block;
324}
325
326.detail {
327    font-size: 9pt;
328}
329
330.detailmini {
331    font-size: 8pt;
332}
333
334.detailcolordark {
335    font-size: 8pt;
336}
337
338.dd-theme-classic, .dd-all {
339    background-color: #fff !important;
340}
341
342input {
343    background: none repeat scroll 0 0 #FFFFFF;
344    color: #333;
345    border-radius: 5px;
346    font-family: 'Montserrat', Arial, serif;
347    font-size: 8.5pt;
348    padding: 7px 10px 7px 10px;
349    border: 1px solid #bbb;
350}
351
352select {
353    background: none repeat scroll 0 0 #FFFFFF;
354    border-radius: 5px;
355    color: #333;
356    font-family: 'Montserrat', Arial, serif;
357    font-size: 8.5pt;
358    padding: 7px 10px 7px 10px;
359    border: 1px solid #bbb;
360}
361
362button {
363    /* background: none repeat scroll 0 0 #FFFFFF; */
364    /* background-color: #333; */
365    color: #eee;
366    border-radius: 5px;
367    font-family: 'Montserrat', Arial, serif;
368    font-size: 8.5pt;
369    font-weight: 400;
370    padding: 7px 10px 7px 10px;
371	margin-left: 4px;
372    border: 1px solid #444;
373}
374
375.jumbotron {
376    color: #333  !important;
377    background-color: #888 !important;
378}
379
380.playingframe .songTitle{
381    line-height: 20px;
382    font-weight: 700;
383    font-size: 110%;
384}
385
386.playingframe .songYear {
387    line-height: 25px;
388    font-weight: 700;
389    font-size: 130%;
390}
391
392.playingframe .songDuration {
393    line-height: 30px;
394    font-weight: 700;
395    font-size: 100%;
396}
397.playingframe .detailmini {
398    display: inline-table;
399}
400
401.leftpanel p.dense{
402    border-bottom: 1px dotted #ddd;
403    clear: both;
404    padding: 4px;
405    line-height: 1.4em;
406    font-size: 9pt;
407}
408.dropshadowXXX {
409    border: 0px solid #111;
410    -webkit-border-radius: 2px;
411    -moz-border-radius: 2px;
412    border-radius: 2px;
413    opacity:0.95;
414    filter:alpha(opacity=95);
415    -moz-box-shadow:    2px 2px 15px 0 #111;
416    -webkit-box-shadow: 2px 2px 15px 0 #111;
417    box-shadow:         2px 2px 15px 0 #111;
418}
419
420.accent {
421    color: #7B9DB6 !important;
422    font-weight: 700 !important;
423
424}
425