1/* 2 * CSS styleshet for the "Back In Black" theme. 3 */ 4 5@import "default.css"; 6 7@import "midnight.css"; 8 9@import url(//fonts.googleapis.com/css?family=Montserrat:400,700); 10 11@import "theme/madsonic/jquery-ui-1.10.4.custom.css"; 12 13@import "playericons/playericonsHTML5.css"; 14 15@import "jquery.mCustomScrollbar3.css"; 16 17@import "videoPlayerLight.css"; 18 19@import "scrollbar-px.css"; 20 21body, form, label, table, a { 22 font-family: 'Montserrat', Arial, serif; 23} 24 25body { 26 font-size: 9pt; 27} 28 29h2, h1, h1 a, .logo { 30 font-family: 'Montserrat', Arial, serif; 31} 32 33h2 { 34 font-family: 'Montserrat', Arial, serif; 35 font-size: 10pt; 36} 37 38table { 39 font-size: 100%; 40 line-height: 150%; 41 padding: 0; 42 border: 0; 43 margin: 0 0 0.4em 0; 44} 45 46.mainframe #content_artist #anchor_list a{ 47 font-size: 16pt; 48} 49 50.divIdCoverBack { 51top: -58px; 52left: 1px; 53} 54 55.logo { 56 padding-right:0.8em; 57} 58 59.topframe .logo img{ 60 width:155px; 61 height:38px; 62 margin-top: -20px; 63} 64 65.maincontrol a { 66 font-weight: 700; 67} 68 69.maincontrol a img { 70 padding-bottom: 5px; 71 padding-right: 1px; 72 padding-left: 1px; 73 /* display:none; */ 74 width:0px; 75 hight:0px; 76 opacity:0.30; 77 filter:alpha(opacity=30); /* For IE8 and earlier */ 78} 79 80.playlistframe .songTitle { 81 font-size: 11px; 82} 83 84.songTitle { 85 font-size: 100%; v 86 87} 88 89.mainframe .controls { 90 margin: 0px 1px 1px 1px; 91 padding: 0 0 0 0; 92} 93 94.playlistframe .controls { 95 margin: 0 0 1px; 96} 97 98.playlistframe .starSong { 99 margin: 0 4px 1px 2px; 100} 101 102.leftpanel .bgcolor2 { 103 background: url("../icons/xmas/left.png") repeat-x fixed; 104} 105 106.leftpanel { 107 background-image:url( "../icons/xmas/background-left.png" ); 108 background-repeat:repeat; 109 background-attachment:fixed; 110 background-color:#5D053A; 111} 112 113/* Link color */ 114a:link, a:active, a:visited, a:link *, a:active *, a:visited * { 115 color: #E0EBF4; 116} 117 118a:hover, a:hover * { 119 text-decoration: none; 120 color: orange; 121 text-shadow: 0.0em 0.0em 0.2em #111; 122} 123 124.topframe a:hover, .topframe a:hover * { 125 opacity:0.85; 126 filter:alpha(opacity=85); 127} 128 129/* Main frame image & colour */ 130.loginsplash { 131 background: #222 url('../icons/madsonic_black/backgroundalpha.png') no-repeat top left; 132 background-size: cover; 133 134 border: 5px solid #111; 135 -webkit-border-radius: 3px; 136 -moz-border-radius: 3px; 137 border-radius: 3px; 138 opacity:0.95; 139 filter:alpha(opacity=95); /* For IE8 and earlier */ 140 -moz-box-shadow: 0 0 35px 15px #222; 141 -webkit-box-shadow: 0 0 35px 15px #222; 142 box-shadow: 0 0 35px 15px #222; 143} 144 145/* Main frame image & colour 146.mainframe { 147 background-image:url('../icons/xmas/background.png'); 148 background-repeat:no-repeat; 149 background-attachment:fixed; 150 background-color: #033A36; 151 background-position: top left; 152}*/ 153 154.topframe { 155 background: url("../icons/xmas/top.png") no-repeat fixed; 156} 157 158.artistindex { 159 background-color: #222; 160} 161 162#artistBio { 163 line-height: 18px; 164 padding-bottom: 15px; 165 border-top: 1px dotted #888; 166 padding-top: 15px; 167 font-size: 9.0pt; 168} 169 170 171.ruleTableHeaderPlaylists { 172 padding-right:1em; 173 border-top: 1px dotted #333; 174 border-bottom: 1px dotted #333; 175} 176 177.ruleTableCellPlaylists { 178 padding-top: 4px; 179 padding-right:1em; 180 border-top: 1px dotted #333; 181 border-bottom: 1px dotted #333; 182} 183 184/* table.music tr { line-height: 16px; } */ 185 186table.music tr:nth-of-type(even) { background: rgba(0,0,0,.4); } 187table.music tr:nth-of-type(odd) { background: rgba(0,0,0,.2); } 188 189 190/* #playlistBody tr:nth-of-type(even) { background: #0d0d0d; } */ 191 192/* The primary background color (light gray). */ 193.bgcolor1 { 194 background-color: #0F3939; 195 /* 196 background-image: url("../icons/xmas/bg-noise.jpg"); 197 background-repeat: repeat; 198 background-size: 550px 250px; 199 */ 200} 201 202.playingframe.bgcolor1 { 203 /* 204 background-image:url( "../icons/xmas/bg-noise.jpg" ); 205 background-repeat: repeat; 206 background-size: 550px 250px; 207 */ 208} 209 210.ui-widget input { 211 color: #888 !important; 212} 213 214#content_left .bgcolor2 { 215 background-color: #0F3939; 216} 217 218h2.bgcolor2 { 219 background-color: #0F3939; 220} 221 222.mainframe .bgcolor2 { 223 background-color: #0F2D2D; 224} 225 226.topframe.bgcolor2 { 227 background-color: #0F3939; 228} 229 230.bgcolor2, .log { 231 background-color: #0F3939; 232} 233 234.ruleTableHeader { 235 background-color: #012724; 236} 237 238table.editor .ruleTableHeader, 239table.editor .ruleTableCellHeader, 240table.editor .ruleTableCell { 241 border: 0px solid #012724; 242} 243.ruleTableHeader, 244.ruleTableCellHeader, 245.ruleTableCell , 246.border1, 247.log { 248 border: 1px solid #444; 249} 250 251.leftpanel p.dense{ 252 clear: both; 253 padding: 4px; 254 border-bottom: 1px dashed rgba(29, 29, 29, 0.5); 255 /* text-shadow: 2px 2px #080808; */ 256 line-height: 1.1em; 257} 258 259.leftpanel p.dense:last-child{ 260 border: none; 261} 262.leftpanel p.dense:first-child{ 263 padding-top: 10px; 264} 265 266.leftpanel th img{ 267 display: none; 268} 269 270/* Main frame image & colour */ 271.mainframe.splash { 272 /* 273 background-repeat:no-repeat; 274 background-attachment:fixed; 275 background-position: top right; 276 */ 277} 278 279/* Back image */ 280.back, .forward { 281 font-size: 9pt; 282 background: url("../icons/madsonic_black/back.png") no-repeat center left; 283 padding-left: 20px; 284 line-height: 20px; 285} 286 287/* Forward image */ 288.forward { 289 font-size: 9pt; 290 padding-left: 20px; 291 line-height: 20px; 292 background: url("../icons/madsonic_black/forward.png") no-repeat center left; 293} 294 295/* Forward image */ 296.forwardright { 297 font-size: 9pt; 298 padding-right: 20px; 299 line-height: 20px; 300 background: url("../icons/madsonic_black/forward.png") no-repeat center right; 301} 302/* 303::-webkit-scrollbar { 304width: 10px; 305height: 10px; 306} 307 308::-webkit-scrollbar-track-piece { 309background-color: #333; 310} 311 312::-webkit-scrollbar-thumb:vertical { 313height: 30px; 314background-color: #5A5A5A; 315} 316 317::-webkit-scrollbar-thumb:horizontal { 318width: 30px; 319background-color: #5A5A5A; 320} 321*/ 322 323#content_artst .innerbox:hover { 324 opacity: 0.75; 325 filter: alpha(opacity=75); 326 border: 0; 327} 328 329#content_artst .innerbox { 330 opacity: 0.90; 331 filter: alpha(opacity=90); 332 border: 0; 333} 334 335#content_left .bgcolor2 { 336/* background-color: #1F1F1F; 337 opacity: 0.80; */ 338} 339 340#content_playqueue .bgcolor2 { 341 background-color: #111; 342} 343 344#content_playqueue .bgcolor1 { 345} 346 347#content_artst .bgcolor2 { 348 background-color: #1F1F1F; 349 opacity: 0.80; 350} 351 352#content_artst .bgcolor1 { 353 background-color: #333; 354 opacity: 0.90; 355} 356 357.dropshadow { 358 border: 1px solid #222; 359 -webkit-border-radius: 3px; 360 -moz-border-radius: 3px; 361 border-radius: 3px; 362 opacity:0.85; 363 filter:alpha(opacity=85); 364 -moz-box-shadow: 0 0 15px 5px #222; 365 -webkit-box-shadow: 0 0 15px 5px #222; 366 box-shadow: 0 0 15px 5px #222; 367} 368 369.dropshadow:hover { 370 opacity:0.95; 371 filter:alpha(opacity=95); 372 border: 1px solid #666; 373} 374 375.rankex { 376 white-space: nowrap; 377 font-size: 6pt; 378 line-height: 1.40em; 379 background: url('../icons/madsonic_black/rank.png') no-repeat right; 380 padding: 8px 3px 8px 8px; 381 margin-left: -2px; 382 color: #FFC200; 383 font-family: verdana, arial, sans-serif; 384} 385 386 387/* Custom */ 388span.off { 389 background: #FFF !important; 390 border: solid 1px #FFFFFF !important; 391 font-size: 8pt; 392} 393 394span.on { 395 background: #33B5E5 !important; 396 border: solid 1px #FFFFFF !important; 397 font-size: 8pt; 398} 399 400span.off:hover { 401 background: #33B5E5 !important; 402 border: solid 1px #777777 !important; 403 font-size: 8pt; 404 } 405 406span.off2 { 407 border: solid 1px #777777 !important; 408 font-size: 8pt; 409} 410 411span.on2 { 412 background: #33B5E5 !important; 413 border: solid 1px #777777 !important; 414 font-size: 8pt; 415} 416 417span.off2:hover { 418 background: #33B5E5 !important; 419 border: solid 1px #777777 !important; 420 font-size: 8pt; 421 } 422 423 424.ruleTableCellDB { 425 border: 1px solid #222; 426 white-space: nowrap; 427 font-size: 7pt; 428 margin: 1px; 429 padding: 2px; 430} 431 432.maincontrol { 433 line-height: 30px; 434} 435 436 437img.starSong { 438 margin-top: 4px; 439 margin-right: 8px; 440} 441 442img#starImage { 443 padding-left: 1px; 444 padding-right: 8px; 445 padding-bottom: 3px; 446} 447 448 449 450#bitrate_menu { 451 color: #999 !important; 452} 453 454 #toogleGenre { 455 top: 75px; 456} 457 458input { 459 background: none repeat scroll 0 0 #FFFFFF; 460 border-radius: 5px; 461 font-family: 'Montserrat', Arial, serif; 462 font-weight: 400; 463 padding: 6px 8px 6px 8px; 464 margin-left: 4px; 465 font-size: 12px; 466 color: #fff !important; 467 background-color: #0D3A3D; 468 border: 1px solid #006158; 469 background-repeat: repeat; 470 background-size: 140px 140px; 471} 472 473select { 474 background: none repeat scroll 0 0 #FFFFFF; 475 border: 1px solid #E1DBDB; 476 border-radius: 5px; 477 color: #444444 !important; 478 font-family: 'Montserrat', Arial, serif; 479 font-weight: 400; 480 font-size: 8pt; 481 padding: 5px 5px 5px 5px; 482 margin-left: 4px; 483 font-size: 11px; 484 color: #fff !important; 485 background-color: #0D3A3D; 486 border: 1px solid #006158; 487 background-repeat: repeat; 488 background-size: 140px 140px; 489} 490 491 492button{ 493 background: #7d7e7d; /* Old browsers */ 494 background: -moz-linear-gradient(top, #7d7e7d 0%, #4c4c4c 50%, #3d3d3d 53%, #2b2b2b 100%); /* FF3.6+ */ 495 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(50%,#4c4c4c), color-stop(53%,#3d3d3d), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */ 496 background: -webkit-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */ 497 background: -o-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Opera 11.10+ */ 498 background: -ms-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* IE10+ */ 499 background: linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* W3C */ 500 border: 1px solid #111; 501} 502 503input[type=button]{ 504 background: #7d7e7d; /* Old browsers */ 505 background: -moz-linear-gradient(top, #7d7e7d 0%, #4c4c4c 50%, #3d3d3d 53%, #2b2b2b 100%); /* FF3.6+ */ 506 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(50%,#4c4c4c), color-stop(53%,#3d3d3d), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */ 507 background: -webkit-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */ 508 background: -o-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Opera 11.10+ */ 509 background: -ms-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* IE10+ */ 510 background: linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* W3C */ 511 border: 1px solid #111; 512} 513input[type=submit]{ 514 background: #3567a0; /* Old browsers */ 515 background: -moz-linear-gradient(top, #3567a0 0%, #1c5396 50%, #1f4c87 53%, #0b3c74 100%); /* FF3.6+ */ 516 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3567a0), color-stop(50%,#1c5396), color-stop(53%,#1f4c87), color-stop(100%,#0b3c74)); /* Chrome,Safari4+ */ 517 background: -webkit-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* Chrome10+,Safari5.1+ */ 518 background: -o-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* Opera 11.10+ */ 519 background: -ms-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* IE10+ */ 520 background: linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* W3C */ 521 border: 1px solid #06203e; 522} 523 524 525#listRows { 526 font-size: 11px; 527 float: left; 528 color: #fff !important; 529 display: block; 530 border: 1px solid #006158; 531} 532 533#listColumns { 534 font-size: 11px; 535 float: left; 536 color: #fff !important; 537 display: block; 538 border: 1px solid #006158; 539} 540 541#query { 542 font-size: 11px; 543 color: #222 !important; 544 border: 1px solid #eee; 545 background-image: url("../icons/madsonic_black/bg-white.jpg"); 546} 547 548#j_username { 549 color: #222 !important; 550 border: 1px solid #ddd; 551 background-image: url("../icons/madsonic_black/bg-white.jpg"); 552} 553 554#j_password { 555 color: #222 !important; 556 border: 1px solid #ddd; 557 background-image: url("../icons/madsonic_black/bg-white.jpg"); 558} 559 560#moreActions option { 561 color:white !important; 562} 563 564#moreActions optgroup { 565 color:lightblue !important; 566 font-style:normal; 567} 568 569.mainframe .dense { 570white-space: nowrap; 571font-size: 10pt; 572margin: 8px; 573/* line-height: 1.5em; */ 574} 575 576.mainframe .dense a { 577white-space: nowrap; 578font-size: 10pt; 579font-weight: 700; 580/* line-height: 1.5em; */ 581} 582 583span { 584font-size: 10pt; 585} 586 587.online { 588 font-size: 8pt; 589 color: #83B578; 590} 591 592.offline { 593 font-size: 8pt; 594 color: #FAE157; 595} 596 597.easyPieChartBarColor { 598 color:#33B5E5; 599} 600.easyPieChartScaleColor { 601 color:#7E7E7A; 602} 603.easyPieChartTrackColor { 604 color:#41565D; 605} 606 607.highlight { 608 color: rgb(180, 220, 228); 609} 610 611.dd-theme-classic, .dd-all { 612 border-color:#006158 !important; 613 font-size: 9pt !important; 614 color: #eee !important; 615 padding: 8px 15px 8px 15px !important; 616} 617 618.ad { 619box-shadow: 0px 0px 15px #000; 620background-color: #181818; 621border-radius: 5px; 622} 623 624.mainframe.splash { 625 background-color:#134441 !important; 626} 627 628.nowPlaying { 629 padding: 0px 0px 5px 10px; 630 background-color: rgba(24, 24, 24, 0.33); 631} 632 633/* Color for warning messages. */ 634.warning { 635 color: orange; 636} 637 638.status { 639 color: #FAE157; 640} 641 642.accent { 643 color: #7B9DB6; 644} 645 646.info { 647 color: rgb(44, 180, 44); 648} 649 650.error { 651 color: red; 652} 653 654.online { 655 color: #83B578; 656} 657 658.offline { 659 color: #FAE157; 660} 661 662.starred { 663 color: #009BCA !important; 664} 665 666.loved { 667 color: #009BCA !important; 668} 669 670.control { 671 color: #DDDDDD !important; 672} 673 674.hot { 675 color: orange !important; 676} 677 678img.tv { 679 padding: 25px 40px 25px 40px; 680 background-color: rgb(55, 54, 54); 681} 682 683#media_control { 684 background-color: #101010 !important; 685} 686 687.ui-button-text { 688 color: #FFF !important; 689} 690 691.detailyear { 692 color: #fff !important; 693} 694 695option { 696 background-color: #222; 697 color: #ffffff; 698} 699 700.playlistframe .bgcolor2 { 701 background-color: #081B1B; 702} 703 704#content_main table.music tr { line-height: 25px; border-bottom: 1px solid #0E3535 !important; } 705 706#content_main table.content tr:nth-of-type(even) { line-height: 25px;background: #0E3535; } 707#content_main table.content tr:nth-of-type(odd) { line-height: 25px;background: #124C4C; } 708 709#content_home table.music tr:nth-of-type(even) { line-height: 25px;background: #0E3535; } 710#content_home table.music tr:nth-of-type(odd) { line-height: 25px;background: #124C4C; } 711 712#content_main table th { line-height:25px;} 713#content_main table tr { border-bottom: 1px solid rgba(0,0,0,.08) !important; } 714 715#playlistBody tr { line-height:25px; border-bottom: 1px solid rgba(0,0,0,.08) !important; } 716 717#playlistBody tr:nth-of-type(even) {line-height:25px;background: #0E3535; } 718#playlistBody tr:nth-of-type(odd) {line-height:25px;background: #124C4C; } 719 720#startButton, #stopButton { 721 cursor:pointer; font-size:30px; color:#0090BB !important; 722} 723#previousButton, #nextButton ,#fastpreviousButton, #fastnextButton { 724 color:#000 !important; 725} 726#bufferButton { 727 font-size:30px; color:#0090BB !important; 728} 729 730 731 732.custom-icon-rank { 733 font-size:10px; 734 font-family: 'Montserrat', Arial, serif !important; 735} 736 737 738.custom-icon-header { 739 font-size:20px !important; 740 background:#fff; 741 padding:6px 4px 3px 4px; 742 margin:0 10px 6px 5px; 743 background:rgba(0,0,0,0.2); 744 -webkit-border-radius:25%; 745 -moz-border-radius:25%; 746 -o-border-radius:25%; 747 border-radius:25%; 748 border:1px solid #111 !important; 749 color:#fff; 750 box-shadow: 0 1px 5px rgba(16, 16, 16, 0.46); 751 text-align:center; 752 display:table-cell; 753 vertical-align:middle; 754 width:24px; 755 height:24px; 756 -moz-transition:.5s; 757 -webkit-transition:.5s; 758 -o-transition:.5s; 759 transition:.5s; 760} 761 762.custom-icon { 763 font-size:7px; 764 background:#fff; 765 padding:6px 4px 3px 4px; 766 margin:3px 1px 3px 1px; 767 background:rgba(0,0,0,0.2); 768 -webkit-border-radius:25%; 769 -moz-border-radius:25%; 770 -o-border-radius:25%; 771 border-radius:25%; 772 border:1px solid #111 !important; 773 color:#fff; 774 box-shadow: 0 1px 5px rgba(16, 16, 16, 0.46); 775 text-align:center; 776 display:table-cell; 777 vertical-align:middle; 778 width:14px; 779 height:14px; 780 -moz-transition:.5s; 781 -webkit-transition:.5s; 782 -o-transition:.5s; 783 transition:.5s; 784} 785 786.custom-icon-main { 787 font-size:14px !important; 788 background:#fff; 789 padding:7px 4px 4px 5px; 790 margin:0 0 8px 0; 791 background:rgba(0,0,0,0.2); 792 -webkit-border-radius:25%; 793 -moz-border-radius:25%; 794 -o-border-radius:25%; 795 border-radius:25%; 796 border:1px solid #111 !important; 797 text-align:center; 798 display:table-cell; 799 vertical-align:middle; 800 width:16px; 801 height:16px; 802 -moz-transition:.5s; 803 -webkit-transition:.5s; 804 -o-transition:.5s; 805 transition:.5s; 806} 807 808.custom-icon:hover { 809 background:rgba(0,0,0,0.8); 810 color: orange; 811} 812 813.custom-icon-nohover { 814 font-size:7px; 815 background:#fff; 816 padding:6px 4px 4px 4px; 817 margin:0px; 818 background:rgba(0,0,0,0.2); 819 -webkit-border-radius:25%; 820 -moz-border-radius:25%; 821 -o-border-radius:25%; 822 border-radius:25%; 823 border:1px solid #111 !important; 824 color:#fff; 825 text-align:center; 826 display:table-cell; 827 vertical-align:middle; 828 width:14px; 829 height:14px; 830 -moz-transition:.5s; 831 -webkit-transition:.5s; 832 -o-transition:.5s; 833 transition:.5s; 834} 835.fix-editor { 836 display:none; 837} 838.icon-wrapper { 839 display:inline-block; 840} 841 842.browse-index-shortcut { 843 font-size: 150% !important; 844}