git.maemo.org Git - ptas/blob - wrt/misc/rss/preview/css/style.css

   1 @charset "utf-8";\r
   2 body {\r
   3         background-image: url(../images/Gradient0Background.png);\r
   4         background-repeat: repeat-x;\r
   5         margin: 0px;\r
   6         font-family: "Nokia Sans", "Nokia Sans SemiBold", "Arial Narrow";\r
   7         padding: 0px;\r
   8         overflow: hidden;\r
   9 }\r
  10 .hide{\r
  11         display:none;\r
  12 }\r
  13 .show{\r
  14         display:block;\r
  15 }\r
  16 \r
  17 code{\r
  18         background-color: #ffffa6;\r
  19         color: #000000;\r
  20         padding: 3px;\r
  21         display: block;\r
  22         font-size: 110%;\r
  23         margin: 3px 0px;\r
  24 }\r
  25 \r
  26 #DisplaySFKWrapper{\r
  27         overflow: hidden;\r
  28 }\r
  29 #DisplayArea {\r
  30         margin-right: auto;\r
  31         margin-left: auto;\r
  32         overflow: hidden;\r
  33 \r
  34 }\r
  35 \r
  36 #WidgetArea{\r
  37         position: relative;\r
  38         z-index: 99;\r
  39 }\r
  40 #WidgetArea iframe{\r
  41         width: 100%;\r
  42         height: 100%;\r
  43         border: 0px;\r
  44         margin-left: auto;\r
  45         margin-top: auto;\r
  46 }\r
  47 \r
  48 #WidgetArea.hs_portrait{\r
  49         background-image: url(../images/device/360x640/hs-portrait.png);\r
  50         background-repeat: no-repeat;\r
  51 }\r
  52 \r
  53 #WidgetArea.hs_landscape{\r
  54         background-image: url(../images/device/360x640/hs-landscape.png);\r
  55         background-repeat: no-repeat;\r
  56 }\r
  57 #WidgetArea.hs_portrait iframe{\r
  58         width: 306px;\r
  59         height: 76px;\r
  60         margin-left: 26px;\r
  61         margin-top: 321px;\r
  62         overflow: hidden !important;\r
  63 }\r
  64 \r
  65 #WidgetArea.hs_landscape iframe{\r
  66         width: 306px;\r
  67         height: 76px;\r
  68         margin-left: 322px !important;\r
  69         margin-top: 151px !important;\r
  70         overflow: hidden !important;\r
  71 }\r
  72 \r
  73 #iframeMask\r
  74 {\r
  75         width: 328px;\r
  76         height: 100px;\r
  77         position: absolute;\r
  78         z-index: 900;\r
  79         background-image: url(../images/hs-iframeMask.png);\r
  80         background-repeat: no-repeat;\r
  81         background-position: top left;\r
  82 }\r
  83 \r
  84 #iframeMask:hover\r
  85 {\r
  86         background-repeat: no-repeat;\r
  87         background-position: bottom left;\r
  88 }\r
  89 \r
  90 \r
  91 #WidgetArea.hs_portrait #iframeMask{\r
  92         margin-left: 16px !important;\r
  93         margin-top: 310px !important;\r
  94 }\r
  95 #WidgetArea.hs_landscape #iframeMask{\r
  96         margin-left: 312px !important;\r
  97         margin-top: 140px !important;\r
  98 }\r
  99 \r
 100 \r
 101 #SoftKeys{\r
 102         height: 50px;\r
 103         width: 240px;\r
 104         margin-right: auto;\r
 105         margin-left: auto;\r
 106         margin-top: 10px;\r
 107 }\r
 108 \r
 109 div.clear{\r
 110         clear: both;\r
 111 }\r
 112 #DeviceDisplayLayout {\r
 113         background-repeat: no-repeat;\r
 114         background-position: center center;\r
 115         margin-right: auto;\r
 116         margin-left: auto;\r
 117         margin-top: 0px;\r
 118         overflow: hidden;\r
 119 }\r
 120 \r
 121 #DeviceDisplayLayout.portrait_240x320 {\r
 122         background-image: url(../images/device/240x320/Portrait.png);\r
 123         width: 600px;\r
 124         height: 536px;\r
 125 }\r
 126 \r
 127 #DeviceDisplayLayout.landscape_240x320 {\r
 128         background-image: url(../images/device/240x320/Landscape.png);\r
 129         width: 848px;\r
 130         height: 408px;\r
 131 }\r
 132 \r
 133 #SoftKeysArea{\r
 134         z-index: 101;\r
 135         position: relative;\r
 136 /*      background-image: url(../images/device/menuKeys-bg.png);\r
 137         background-repeat: no-repeat;\r
 138         background-position: center top;\r
 139 */\r
 140         background-color: #666666;\r
 141 }\r
 142 \r
 143 #SoftKeysArea ul{\r
 144         list-style: none;\r
 145         margin: 0px;\r
 146         padding: 0px;\r
 147         \r
 148 }\r
 149 \r
 150 #SoftKeysArea ul li{\r
 151         margin: 0px;\r
 152         font-weight: bold;\r
 153         font-size: 15px;\r
 154         float: left;\r
 155         padding: 5px;\r
 156 }\r
 157 \r
 158 \r
 159 #SoftKeysArea ul li a{\r
 160         color: #FFFFFF;\r
 161         text-decoration: none;\r
 162         display: block;\r
 163 }\r
 164 \r
 165 li#RskLabel{\r
 166         text-align: right;\r
 167 }\r
 168 \r
 169 #MenuItemsArea{\r
 170         z-index: 100;\r
 171         display: none;\r
 172 }       \r
 173 \r
 174 #MenuItemsArea ul{\r
 175         margin: 0px;\r
 176         padding: 5px;\r
 177         list-style-position: inside;\r
 178         list-style-image: none;\r
 179         list-style-type: none;\r
 180         background-color: #CCCCCC;\r
 181 }\r
 182 \r
 183 #MenuItemsArea ul li{\r
 184         font-size: 13px;\r
 185         font-weight: bold;\r
 186 }\r
 187 \r
 188 #MenuItemsArea li.active{\r
 189         background-color: #75ea00;\r
 190 }\r
 191 \r
 192 #MenuItemsArea a{\r
 193         color: #000;\r
 194         text-decoration: none;\r
 195         display: block;\r
 196         padding: 5px;\r
 197         height: 14px;\r
 198 }\r
 199 #MenuItemsArea a:hover{\r
 200         background-color: #75ea00;\r
 201 }\r
 202 \r
 203 #MenuItemsArea a.subMenuItem{\r
 204         background-image: url(../images/sub-menu-arrow.png);\r
 205         background-repeat: no-repeat;\r
 206         background-position: right 0px;\r
 207 }\r
 208 \r
 209 #MenuItemsArea a.subMenuItem:hover{\r
 210         background-position: right -20px;\r
 211 }\r
 212 #MenuItemsArea a.subMenuItem:active{\r
 213         background-position: right -40px;\r
 214 }\r
 215 \r
 216 #MenuItemsArea li.active a.subMenuItem{\r
 217         background-position: right -20px;\r
 218 }\r
 219 div#IconArea{\r
 220         display: none;\r
 221         font-size: 0.9em;\r
 222         font-weight: bold;\r
 223         background-repeat: no-repeat;\r
 224 }\r
 225 \r
 226 div#IconArea.portrait240x320{\r
 227         background-image: url(../images/statusBar_240x320.png);\r
 228 }\r
 229 div#IconArea.landscape240x320{\r
 230         background-image: url(../images/statusBar_320x240.png);\r
 231 }\r
 232 \r
 233 div#IconArea.portrait320x240{\r
 234         background-image: url(../images/statusBar_320x240.png);\r
 235 }\r
 236 div#IconArea.landscape320x240{\r
 237         background-image: url(../images/statusBar_240x320.png);\r
 238 }\r
 239 \r
 240 div#IconArea.portrait360x640{\r
 241         background-image: url(../images/statusBar_360x640.png);\r
 242 }\r
 243 div#IconArea.landscape360x640{\r
 244         background-image: url(../images/statusBar_640x360.png);\r
 245 }\r
 246 \r
 247 div#IconArea.landscape800x352{\r
 248         background-image: url(../images/statusBar_800x352.png);\r
 249 }\r
 250 \r
 251 \r
 252 div.IconFile{\r
 253         margin-left: auto;\r
 254         margin-right: auto;\r
 255         text-align: center;\r
 256         padding: 20px;\r
 257 }\r
 258 \r
 259 div.IconFile:hover{\r
 260         background-image: url(../images/IconArea-hover.png);\r
 261         background-position: center center;\r
 262         background-repeat: no-repeat;\r
 263 }\r
 264 \r
 265 div.IconFile p{\r
 266         margin: 0px;\r
 267 }\r
 268 \r
 269 \r
 270 \r
 271 p.highlight span{\r
 272         background-color: #fbf7a2;\r
 273         font-weight: normal;\r
 274         font-size: 0.8em;\r
 275         padding: 3px;\r
 276 }\r
 277 \r
 278 /*\r
 279         preferences CSS\r
 280 */\r
 281 \r
 282 div#PreferencesBtn{\r
 283         width: 75px;\r
 284         height: 85px;\r
 285         background-image: url(../images/settings-icon.png);\r
 286         position: absolute;\r
 287         top: 10px;\r
 288         left: 10px;\r
 289         background-position: left bottom;\r
 290         z-index: 200;\r
 291 }\r
 292 \r
 293 div#PreferencesBtn:hover{\r
 294         background-position: left top;\r
 295 }\r
 296 \r
 297 div#loaderDiv{\r
 298         padding: 10px;\r
 299         font-size: 1.1em;\r
 300         position: absolute;\r
 301         top: 0px;\r
 302         right: 0px;\r
 303         display: none;\r
 304         z-index: 202;\r
 305 }\r
 306 \r
 307 div#loaderDiv.green{\r
 308         background-color: #5abd2b;\r
 309         color: #FFFFFF;\r
 310 }\r
 311 \r
 312 div#loaderDiv.yellow{\r
 313         background-color: #ffff00;\r
 314         color: #000000;\r
 315 }\r
 316 \r
 317 div#orientationIcon{\r
 318         background-image: url(../images/normal-orientation-icon.png);\r
 319         background-repeat: no-repeat;\r
 320         width: 191px;\r
 321         height: 72px;\r
 322         float: left;\r
 323         position: absolute;\r
 324         left: 10px;\r
 325         top: 0px;\r
 326         display: none;\r
 327 }\r
 328 div#orientationIcon:hover{\r
 329         background-image: url(../images/active-orientation-icon.png);\r
 330 }\r
 331 \r
 332 table{\r
 333         border-top: 1px solid #808080;\r
 334         border-left: 1px solid #808080;\r
 335 }\r
 336 \r
 337 table a.link{\r
 338         background-color: #20c41c;\r
 339         color: #ffffff;\r
 340         font-weight: bold;\r
 341         border: 1px solid #4e872c;\r
 342         padding: 3px 2px;\r
 343         text-decoration: none;\r
 344         font-size: 80%;\r
 345 }\r
 346 \r
 347 table th, table td{\r
 348         padding: 6px 5px;\r
 349         border-bottom: 1px solid #808080;\r
 350         border-right: 1px solid #808080;\r
 351         font-size: 0.9em;\r
 352 }\r
 353 table th{\r
 354         width: 150px;\r
 355         text-align: left;\r
 356         background-image: url(../images/th-bg-gradient.png);\r
 357         background-repeat: repeat-x;\r
 358         background-position: left bottom;\r
 359 }\r
 360 \r
 361 #NotificationDiv p{\r
 362         color: #ffffff;\r
 363         font-size: 95%;\r
 364         padding: 5px;\r
 365 }\r
 366 \r
 367 strong{\r
 368         color: #eee46c;\r
 369 }\r
 370 \r
 371 #BrowserNotificationBar{\r
 372         z-index: 2000;\r
 373         background-color: #f2eb8e;\r
 374         border-bottom: 2px solid #f0d25e;\r
 375         display: none;\r
 376         position: absolute;\r
 377         left: 0;\r
 378         top: 0;\r
 379         width: 100%;\r
 380         font-size: 80%;\r
 381         font-weight: bolder;\r
 382         text-align: right;\r
 383         margin: 0px;\r
 384         opacity: 0.9;\r
 385 }\r
 386 #BrowserNotificationBar a{\r
 387         height: 10px;\r
 388         width: 10px;\r
 389         float: right;\r
 390         background-image: url(../images/BrowserNotificationBar-Toogle.gif);\r
 391         background-position: 0px -10px;\r
 392         margin : 4px 15px 0px 10px;\r
 393         cursor: hand;\r
 394         overflow: hidden;\r
 395 }\r
 396 /*\r
 397         Event Triggering CSS\r
 398 */\r
 399 \r
 400 h2{\r
 401         font-size: 120%;\r
 402         margin: 3px 0px;\r
 403         padding: 0px;\r
 404 }\r
 405 \r
 406 #tabs-1, #tabs-2{\r
 407         height: 223px;\r
 408         overflow: auto;\r
 409 }\r
 410 \r
 411 #connect-charger-icon, #dis-connect-charger-icon{\r
 412         background-repeat: no-repeat;\r
 413         background-position: left top;\r
 414         width: 165px;\r
 415         height: 36px;\r
 416         margin: 5px auto;\r
 417 }\r
 418 \r
 419 #connect-charger-icon{\r
 420         background-image: url(../images/connect-charger-icon.png);\r
 421 }\r
 422 \r
 423 #dis-connect-charger-icon{\r
 424         background-image: url(../images/dis-connect-charger-icon.png);\r
 425 }\r
 426 \r
 427 #connect-charger-icon:hover, #dis-connect-charger-icon:hover{\r
 428         background-position: left bottom;\r
 429 }\r
 430 \r
 431 div#event-battery, div#event-messaging, div#event-memory{\r
 432         float: left;\r
 433         width: 150px;\r
 434         height: 50px;\r
 435         background-position: left top;\r
 436         margin: 10px;\r
 437         background-repeat: no-repeat;\r
 438         border: 1px solid #6f6f6f;\r
 439 }\r
 440 \r
 441 div#event-battery.active:hover, div#event-messaging.active:hover, div#event-memory.active:hover{\r
 442         background-position: 0px -50px;\r
 443         border: 1px solid #75ea4f;\r
 444 }\r
 445 \r
 446 div#event-messaging.inactive, div#event-memory.inactive{\r
 447         background-position: 0px -100px;\r
 448         border: 1px solid #676767;\r
 449 }\r
 450 \r
 451 \r
 452 div#event-battery{\r
 453         background-image: url(../images/battery-icon.png);\r
 454 }\r
 455 \r
 456 div#event-messaging{\r
 457         background-image: url(../images/messaging-icon.png);\r
 458 }\r
 459 \r
 460 div#event-memory{\r
 461         background-image: url(../images/memory-icon.png);\r
 462 }\r
 463 \r
 464 div.ui-panel{\r
 465         height:30px;    \r
 466 }\r
 467 \r
 468 a.ui-button, a.ui-button-fixed {\r
 469         background:#555555 url(../script/jquery-ui/css/ui-darkness/images/555555_40x100_textures_02_glass_20.png) repeat-x scroll 0 50%;\r
 470         border:1px solid #666666;\r
 471         color:#EEEEEE;\r
 472         cursor:pointer;\r
 473         font-size:0.9em;\r
 474         font-weight:bolder;\r
 475         line-height:1.4em;\r
 476         margin:0.5em 8px 0.5em 0;\r
 477         padding:0.2em 0.6em 0.3em;\r
 478         text-decoration: none;\r
 479 }\r
 480 a.ui-button:hover, a.ui-button-fixed:hover {\r
 481         background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%;\r
 482         border:1px solid #4bd94b;\r
 483         color:#FFFFFF;\r
 484 }\r
 485 \r
 486 a.ui-button-fixed{\r
 487         float: left;\r
 488         padding: 0.4em 0.6em 0.8em;\r
 489         text-align: center;\r
 490         width: 145px !important;\r
 491 }\r
 492 \r
 493 div#slider-value-panel{\r
 494         text-align: center;\r
 495         margin-top: 10px;\r
 496 }\r
 497 \r
 498 div#slider-value-panel span{\r
 499         padding: 3px;\r
 500         background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%;\r
 501         border:1px solid #4bd94b;\r
 502         color:#FFFFFF;\r
 503         font-weight: bolder;\r
 504 }\r
 505 \r
 506 \r
 507 /*\r
 508         Console UI\r
 509 */\r
 510 #preview-ui-top{\r
 511         overflow:auto;\r
 512 }\r
 513 \r
 514 #preview-ui-bottom{\r
 515         overflow:hidden;\r
 516         display: none;\r
 517 }\r
 518 #preview-ui-bottom-header{\r
 519         background-color: #aeaeae;\r
 520         background-image: url(../images/console-icon.gif);\r
 521         background-repeat: repeat-x;\r
 522         background-position: 0px -28px;\r
 523 }\r
 524 span#Console-Toggle-Button{\r
 525         height: 9px;\r
 526         width: 15px;\r
 527         float: right;\r
 528         background-repeat: no-repeat;\r
 529         margin : 12px 8px 0px 0px;\r
 530         cursor: hand;\r
 531 }\r
 532 \r
 533 span#Console-Toggle-Button.open{\r
 534         background-position: 0px 0px;\r
 535         background-image: url(../images/console-close-icon.png);\r
 536 }\r
 537 \r
 538 span#Console-Toggle-Button.open:hover{\r
 539         background-position: 0px -9px;\r
 540 }\r
 541 \r
 542 span#Console-Toggle-Button.open:active{\r
 543         background-position: 0px -18px;\r
 544 }\r
 545 \r
 546 \r
 547 span#Console-Toggle-Button.close{\r
 548         background-position: 0px 0px;\r
 549         background-image: url(../images/console-open-icon.png);\r
 550 }\r
 551 \r
 552 span#Console-Toggle-Button.close:hover{\r
 553         background-position: 0px -9px;\r
 554 }\r
 555 \r
 556 span#Console-Toggle-Button.close:active{\r
 557         background-position: 0px -18px;\r
 558 }\r
 559 \r
 560 \r
 561 span#Console-Clear-Button{\r
 562         height: 16px;\r
 563         width: 39px;\r
 564         float: right;\r
 565         background-image: url(../images/console-clear-button.png);\r
 566         background-repeat: no-repeat;\r
 567         margin : 10px 10px 0px 0px;\r
 568         cursor: hand;\r
 569 }\r
 570 span#Console-Clear-Button:hover{\r
 571         background-position: -0px -16px;\r
 572 }\r
 573 \r
 574 #preview-ui-bottom-body{\r
 575         overflow:auto;\r
 576         background-color: #ffffff;\r
 577         display: none;\r
 578 }\r
 579 \r
 580 #preview-ui-bottom-body p{\r
 581         font-family: "Courier New", Courier, monospace;\r
 582         font-size: 11px;\r
 583         padding: 2px 5px;\r
 584         border-bottom: 1px solid silver;\r
 585         margin: 0px;\r
 586 }\r
 587 \r
 588 #preview-ui-bottom-body p.log{\r
 589 \r
 590 }\r
 591 \r
 592 #preview-ui-bottom-body p.info{\r
 593         background-image: url(../images/infoIcon.png);\r
 594         background-repeat: no-repeat;\r
 595         background-position: 5px center;\r
 596         padding-left: 26px;\r
 597 }\r
 598 #preview-ui-bottom-body p.warn{\r
 599         background: #00ffff url(../images/warningIcon.png);\r
 600         background-repeat: no-repeat;\r
 601         background-position: 5px center;\r
 602         padding-left: 26px;\r
 603 }\r
 604 #preview-ui-bottom-body p.error{\r
 605         background: #ffffe0 url(../images/errorIcon.png);\r
 606         background-repeat: no-repeat;\r
 607         background-position: 5px center;\r
 608         padding-left: 26px;\r
 609         color: #ff0000;\r
 610 }\r
 611 \r
 612 \r
 613 #preview-ui-bottom-header div{\r
 614         float: left;\r
 615         margin: 9px;\r
 616         color: #ffffff;\r
 617         font-size: 11px;\r
 618         font-weight: bolder;\r
 619         font-family: "Arial";\r
 620 }\r
 621 \r
 622 \r
 623 span#wrt-help{\r
 624         height: 28px;\r
 625         width: 28px;\r
 626         float: right;\r
 627         background-repeat: no-repeat;\r
 628         background-image: url(../images/wrt-help-icon.png);\r
 629 }\r
 630 \r
 631 span#wrt-help:hover{\r
 632         background-position: -28px 0px;\r
 633 }