theme/thexy/theme.css

   1 /*
   2         Site: Thexy Theme v1.0
   3         Date: Jan 12, 2008
   4         Author: Gianni Chiappetta
   5         Website: www.runlevel6.org
   6         E-Mail: gianni@runlevel6.org
   7         Description: base style sheet
   8         Author Notes:
   9
  10 */
  11
  12 /************/
  13 /* ELEMENTS */
  14 /************/
  15
  16 body {
  17         color: #000;
  18         background: #e8e8e8 url(images/bkg.jpg) left top repeat-x fixed;
  19         font-family: "Bitstream Vera Sans","Verdana";
  20         text-decoration: none;
  21         word-spacing: Normal;
  22         text-align: left;
  23         letter-spacing: 0;
  24         text-indent: 0px;
  25         line-height: 14px;
  26         font-size: 13px;
  27 }
  28
  29 a:link { text-decoration: none; color: #000; }
  30 a:visited { text-decoration: none; color: #000; }
  31 a:hover { text-decoration: none; color: #7d7d7d; }
  32 a:active { text-decoration: none; color: #000; }
  33
  34 a img { border: 0; }
  35
  36 hr { padding: 0 !important; }
  37
  38 /*------------------------- Player Control -------------------------*/
  39 #player_control {
  40         position: fixed;
  41         background: #e8e8e8 url(images/bkg.jpg) left top repeat-x fixed;
  42         top: 0px;
  43         left: 0px;
  44         margin: 0;
  45         padding: 0 0 0 0;
  46         height: 125px;
  47         width: 100%;
  48         overflow: visible;
  49 }
  50
  51 /* Status Bar */
  52 #status_bar {
  53         top: 95px;
  54         left: 155px;
  55         display: block;
  56         height: auto;
  57         padding: 0;
  58         width: 372px;
  59         text-align: left;
  60         font-size: 10px;
  61 }
  62
  63 /* Album Art */
  64 #player_control #albumart {
  65         margin: 25px 25px 25px 0;
  66         padding: 0;
  67         float: right;
  68 }
  69
  70 #player_control .thumbnailart {
  71         margin: 0;
  72         padding: 0;
  73         border: 0;
  74 }
  75
  76 #albumart_show p.fakelink {
  77         display: block !important;
  78         height: 16px !important;
  79         width: 16px !important;
  80         text-indent: -9999px;
  81         background: transparent url(images/fileclose.png) top left no-repeat;
  82 }
  83
  84 /* LCD */
  85 #player_control div.pc_artist {
  86         top: 0px;
  87         left: 150px;
  88         margin: 0;
  89         padding: 20px 10px;
  90         width: 382px;
  91         height: 105px;
  92         background: transparent url(images/lcd.jpg) top left no-repeat;
  93 }
  94
  95 #player_control div.pc_artist p {
  96         margin: 0;
  97         padding: 0 0 10px 0;
  98 }
  99
 100 /* Controls */
 101 #player_control div.pc_ci {
 102         top: 20px;
 103         left: 14px;
 104         width: 122px;
 105         height: 125px;
 106         /*background: transparent url(images/control_bkg.jpg) top left no-repeat;*/
 107         overflow: visible;
 108 }
 109
 110 #player_control div.pc_ci > div.nomargin {
 111         position: fixed !important;
 112 }
 113
 114 #player_control div.pc_ci .act_button {
 115         margin: 0 !important;
 116         padding: 0 !important;
 117         height: 32px !important;
 118         float: left;
 119 }
 120
 121 #player_control div.pc_ci #previous_button, #player_control div.pc_ci #stop_button, #player_control div.pc_ci #next_button {
 122         width: 31px !important;
 123 }
 124
 125 #player_control div.pc_ci #pp_button {
 126         width: 29px !important;
 127 }
 128
 129 #player_control div.pc_ci #previous_button:hover, #player_control div.pc_ci #stop_button:hover, #player_control div.pc_ci #pp_button:hover, #player_control div.pc_ci #next_button:hover { opacity: 0.7; }
 130
 131 /* Bitrate */
 132 #player_control div.pc_ci #disp_info {
 133         display: block;
 134         margin: 65px 0 0 0;
 135         padding: 10px;
 136         width: 520px;
 137         text-align: right;
 138         font-size: 10px;
 139 }
 140
 141 /* Quick Add */
 142 #player_control div.pc_ci #quickadd {
 143         left: 15px;
 144         width: 110px;
 145         height: 15px;
 146         border: 1px solid #707070;
 147         padding: 5px;
 148         margin: -80px 0 0 0 !important;
 149         -moz-border-radius: 4px;
 150         -khtml-border-radius: 4px;
 151         line-height: 14px;
 152         font-size: 13px;
 153         vertical-align: middle;
 154 }
 155
 156 #player_control div.pc_ci #qa_suggestions {
 157         margin: -34px 0 0 0;
 158         padding: 5px 0;
 159         border: 1px solid #707070;
 160         background-color: #FFF;
 161         -moz-border-radius-bottomleft: 4px;
 162         -moz-border-radius-bottomright: 4px;
 163         -moz-border-radius-topright: 4px;
 164         -khtml-border-radius-bottomleft: 4px;
 165         -khtml-border-radius-bottomright: 4px;
 166         -khtml-border-radius-topright: 4px;
 167         line-height: 14px;
 168         font-size: 13px;
 169 }
 170
 171 span.qa_element { padding: 5px; }
 172 span.qa_element[qa_selected] {  background-color: #e8e8e8; }
 173
 174 /* Sliders */
 175 #player_control div.pc_sliders {
 176         top: 0px;
 177         left: 572px;
 178 }
 179
 180 #player_control div.pc_sliders > div {
 181         margin-top: 15px;
 182 }
 183
 184 #player_control div.pc_sliders .slider_txt {
 185         padding: 5px 0 10px 0;
 186 }
 187
 188 #player_control div.pc_sliders .slider_main {
 189         height: 10px !important;
 190         background-color: #666;
 191         -moz-border-radius: 5px;
 192         -khtml-border-radius: 5px;
 193 }
 194
 195 div.slider_pointer {
 196         width: 15px;
 197         height: 10px;
 198         background: transparent url(images/slider.png) top left no-repeat;
 199         cursor: pointer;
 200 }
 201
 202 [slider_moving] {
 203         cursor: move;
 204 }
 205
 206 /* Media */
 207 div.selection_menu {
 208         top: 140px;
 209         left: 0px;
 210         margin: 0;
 211         padding: 0;
 212         width: 150px;
 213 }
 214
 215 #player_control div.selection_menu .menu_button, img.menu_button {
 216         display: block !important;
 217         margin: 0 auto 5px auto;
 218         width: 128px !important;
 219         height: 34px !important;
 220 }
 221
 222 /* Tools */
 223 #player_control div.pc_other {
 224         top: 265px;
 225         left: 0px;
 226         margin: 0;
 227         width: 150px;
 228         padding: 30px 0 0 20px;
 229         background: transparent url(images/tools_bkg.jpg) top left no-repeat;
 230 }
 231
 232 #player_control div.pc_other li, li.menuitem {
 233         padding: 3px 0;
 234         list-style-type: none;
 235         line-height: 14px;
 236         font-size: 13px;
 237 }
 238
 239 div.popup {
 240         margin: 0 0 0 50px !important;
 241         padding: 5px;
 242         background-color: #e8e8e8;
 243         border: 1px solid #707070;
 244         width: 300px;
 245 }
 246
 247 div.popup:hover { color: #000; }
 248
 249 /* Settings */
 250 #player_control div.pc_settings {
 251         top: 280px;
 252         left: 0px;
 253         margin: 0 !important;
 254         padding: 0 !important;
 255         width: 150px;
 256 }
 257
 258 #settings_header p {
 259         padding: 0 0 0 20px !important;
 260         margin: 0 !important;
 261 }
 262 #settings_header p:hover { color: #7d7d7d; }
 263
 264 #settings_container {
 265         background-color: #e8e8e8;
 266         margin: 0 !important;
 267         padding: 0 !important;
 268         overflow: visible !important;
 269         width: 149px !important;
 270 }
 271
 272 #settings_content {
 273         background: transparent url(images/content_bkg.jpg) top left repeat-x !important;
 274         width: 145px !important;
 275         margin: -5px 0 0 0 !important;
 276         padding: 0 0 5px 6px !important;
 277         font-size: 13px !important;
 278         line-height: 14px !important;
 279 }
 280
 281 .server_settings {
 282         padding: 3px 0;
 283         cursor: pointer;
 284 }
 285
 286 /* Streaming */
 287 #streaming_display {
 288         margin: 15px 0 0 0 !important;
 289         padding: 0 !important;
 290         width: 100px !important;
 291 }
 292
 293 #streaming_display li {
 294         padding: 3px 0;
 295         list-style-type: none;
 296         line-height: 14px;
 297         font-size: 13px;
 298 }
 299
 300 /* Content */
 301 #content {
 302         position: absolute !important;
 303         top: 125px !important;
 304         left: 151px !important;
 305         margin: 0 !important;
 306         padding: 15px 0 0 0 !important;
 307         /*background: transparent url(images/content_bkg.jpg) top left repeat-x fixed !important;*/
 308         border-left: 1px solid #acacac !important;
 309 }
 310
 311 tr[playing] { color: #FFF; background-color: #66BBCC; border-top: 1px solid #33BBCC; border-bottom: 1px solid #33BBCC; }
 312 ul.browser_field li[selected], tr[selected] { color: #FFF; background-color: #BBB; }
 313
 314 /* Browser */
 315 .overlay {
 316         top: 125px !important;
 317         left: 151px !important;
 318         margin: 0 !important;
 319         padding: 15px 0 0 0 !important;
 320         position: fixed;
 321         background: transparent url(images/browse_bkg.png) top left repeat-x !important;
 322         border-right: 1px solid #acacac !important;
 323         border-left: 1px solid #acacac !important;
 324 }
 325
 326 p.browse_type, input.browse_type, select.browse_type {
 327         border: 1px outset #666;
 328         cursor: pointer;
 329         background-color: transparent;
 330 }
 331 input.browse_type { cursor: text; }
 332
 333 span.plse { padding: 2px 0 2px 18px; }
 334 ul.browser_field li { background: transparent left middle no-repeat !important; padding: 3px 0 3px 18px !important; cursor: pointer; }
 335 span.plse[dirtype=file], li[dirtype=file] { background-image: url(images/file.png); }
 336 span.plse[dirtype=directory], li[dirtype=directory] { background-image: url(images/directory.png); }
 337 span.plse[dirtype=artist], li[dirtype=artist] { background-image: url(images/artist.png); }
 338 span.plse[dirtype=album], li[dirtype=album] { background-image: url(images/album.png); }
 339 span.plse[dirtype=playlist], li[dirtype=playlist] { background-image: url(images/playlist.png); }
 340 li[dirtype=parent] { background-image: url(images/back.png); }
 341 li.browser_button_add { padding-left: 18px !important; background: transparent url(images/add.png) no-repeat !important; cursor: pointer !important; }
 342
 343 /* Sidebar */
 344 #sidebar_header, #sidebar_display {
 345         position: fixed !important;
 346         right: 0 !important;
 347         margin: 0 !important;
 348         border-left: 1px solid #acacac !important;
 349 }
 350
 351 #sidebar_header {
 352         top: 125px !important;
 353         padding-top: 15px !important;
 354         font-size: 10px;
 355         font-weight: bold;
 356         background: transparent url(images/content_bkg.jpg) top left repeat-x !important;
 357         z-index: 10 !important;
 358         overflow: visible;
 359 }
 360
 361 #sidebar_header span[class=fakelink], #metadata_close {
 362         display: block;
 363         margin-top: -16px;
 364         padding: 0 3px;
 365         text-indent: -9999px;
 366         width: 16px;
 367         height: 16px;
 368         background: transparent url(images/fileclose.png) top left no-repeat;
 369         float: right;
 370 }
 371
 372 #metadata_close { float: left !important; margin: 0 !important; }
 373
 374 #metadata_open_lyrics, #metadata_open_description, #metadata_open_review {
 375         display: block;
 376         float: left !important;
 377         margin: 0 !important;
 378         padding: 0 3px;
 379         text-indent: 0px !important;
 380         width: auto !important;
 381         background-image: none !important;
 382 }
 383
 384 #sidebar_display {
 385         top: 160px !important;
 386         width: 270px;
 387         max-width: 270px;
 388         overflow: scroll;
 389         font-size: small;
 390         background-color: #e8e8e8 !important;
 391         z-index: 9 !important;
 392 }
 393
 394 #sidebar_display #sidebar_display_txt {
 395         padding-left: 20px;
 396 }
 397
 398 #sidebar_display ul {
 399         list-style-position: inside;
 400 }
 401
 402 /*------------------------- Misc -------------------------*/
 403 .nomargin { margin: 0 !important; padding: 0 !important; }
 404 .fakelink { cursor: pointer; color: #000; }
 405 .fakelink:hover { color: #7d7d7d; }