2 � Copyright 2008 Nokia Corporation. All rights reserved.
\r
4 IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia
\r
5 Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation
\r
6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If
\r
7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example
\r
10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia
\r
11 grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example
\r
12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,
\r
13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60
\r
16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such
\r
17 redistributions of the WRTKit and Example files.
\r
19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products
\r
20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.
\r
21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by
\r
22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that
\r
23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files
\r
24 may be incorporated.
\r
26 The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO
\r
27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED
\r
28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A
\r
29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION
\r
30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
\r
32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR
\r
33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
\r
34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
\r
35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR
\r
36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY
\r
37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,
\r
38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\r
42 /******************************************************************************/
\r
43 /* Definition of visuals for the WRTKit user interface toolkit */
\r
44 /******************************************************************************/
\r
46 /******************************************************************************/
\r
47 /* Document body rules */
\r
51 background: url("DocumentBackground.png") repeat-x fixed;
\r
52 font: normal 12px Arial, sans-serif;
\r
57 /******************************************************************************/
\r
58 /* Override default WRT styling for HTML form controls */
\r
60 /* Textarea when focused */
\r
65 /* Textarea when hovering */
\r
70 /* Select elements when focused */
\r
75 /* Select elements when hovering */
\r
80 /* Input elements when focused */
\r
85 /* Input elements when hovering */
\r
92 text-decoration: none;
\r
96 /* Links when focused */
\r
102 /* Links when hovering */
\r
109 /******************************************************************************/
\r
110 /* Rules for default view and document scrollbar containers */
\r
112 /* Default view container rules */
\r
114 margin: 0px 0px 0px 0px;
\r
117 /* Default document scrollbar container rules */
\r
118 .DocumentScrollbarContainer {
\r
127 /******************************************************************************/
\r
128 /* View style rules */
\r
130 /* Rules for the list view */
\r
132 margin: 0px 0px 0px 0px;
\r
135 /* Rules for the list view caption */
\r
137 background: url("ListViewCaptionBackground.png");
\r
141 /* Rules for the list view caption text */
\r
142 .ListViewCaptionText {
\r
145 padding: 7px 0px 0px 11px;
\r
148 /* Rules for the list view control list element */
\r
149 .ListViewControlList {
\r
150 margin: 1px 10px 1px 3px;
\r
154 /******************************************************************************/
\r
155 /* Control style rules */
\r
157 /* Rules for control root element (rootElement) */
\r
162 /* Control assembly rules (assemblyElement) */
\r
164 background: url("ControlAssemblyBackground.png") repeat-x;
\r
168 /* Control assembly in normal state */
\r
169 .ControlAssemblyNormal {
\r
170 background-position: 0px 0px;
\r
173 /* Control assembly in focused state */
\r
174 .ControlAssemblyFocus {
\r
175 background-position: 0px -250px;
\r
178 /* Control assembly in hovering state */
\r
179 .ControlAssemblyHover {
\r
180 background-position: 0px -500px;
\r
183 /* Control assembly in disabled state */
\r
184 .ControlAssemblyDisabled {
\r
185 background-position: 0px 0px;
\r
188 /* Caption for controls (captionElement) */
\r
191 padding: 3px 0px 0px 3px;
\r
194 /* Caption for controls in normal state */
\r
195 .ControlCaptionNormal {
\r
199 /* Caption for controls when focused */
\r
200 .ControlCaptionFocus {
\r
201 color: rgb(255,255,255);
\r
204 /* Caption for controls when hovering */
\r
205 .ControlCaptionHover {
\r
209 /* Caption for controls when disabled */
\r
210 .ControlCaptionDisabled {
\r
211 color: rgb(125,125,125);
\r
214 /* Control element rules (controlElement) */
\r
216 padding: 3px 3px 3px 3px;
\r
219 /******************************************************************************/
\r
222 /* Rules for the text value of a Label control */
\r
228 /******************************************************************************/
\r
231 /* Caption area rules for non-foldable content panels */
\r
232 .ContentPanelCaptionNonFoldable {
\r
233 padding: 3px 0px 0px 3px;
\r
236 /* Caption area rules for foldable content panels */
\r
237 .ContentPanelCaptionFoldable {
\r
238 padding: 4px 0px 3px 3px;
\r
241 /* Rules for fold toggling element in content panel */
\r
242 .ContentPanelFoldToggle {
\r
243 background: url("ContentPanelFoldIcons.png") no-repeat;
\r
244 padding-left: 16px;
\r
247 /* Collapsed fold */
\r
248 .ContentPanelFoldToggleCollapsed {
\r
249 background-position: 0px 0px;
\r
252 /* Expanded fold */
\r
253 .ContentPanelFoldToggleExpanded {
\r
254 background-position: 0px -50px;
\r
257 /* Rules for the content panel caption text */
\r
258 .ContentPanelCaptionText {
\r
262 /* Caption text for content panel in normal state */
\r
263 .ContentPanelCaptionTextNormal {
\r
267 /* Caption text for content panel when focused */
\r
268 .ContentPanelCaptionTextFocus {
\r
269 color: rgb(255,255,255);
\r
272 /* Caption text for content panel when hovering */
\r
273 .ContentPanelCaptionTextHover {
\r
277 /* Caption text for content panel when disabled */
\r
278 .ContentPanelCaptionTextDisabled {
\r
279 color: rgb(125,125,125);
\r
282 /* Rules for content in the content panel */
\r
283 .ContentPanelContent {
\r
284 padding: 2px 2px 2px 8px;
\r
288 /******************************************************************************/
\r
291 /* Rules for form button */
\r
296 /* Rules for form button control element */
\r
297 .FormButtonControlElement {
\r
301 /* Rules for form button table (table) */
\r
304 border-spacing: 0px;
\r
306 table-layout: fixed;
\r
309 /* Form button row (tr) */
\r
314 /* Rules for form button left cell (td) */
\r
315 .FormButtonLeftCell {
\r
318 background: url("FormButtonLeft.png") no-repeat;
\r
322 /* Rules for form button center cell (td) */
\r
323 .FormButtonCenterCell {
\r
325 background: url("FormButtonCenter.png") repeat-x;
\r
327 vertical-align: middle;
\r
328 text-align: center;
\r
331 /* Rules for form button right cell (td) */
\r
332 .FormButtonRightCell {
\r
335 background: url("FormButtonRight.png") no-repeat;
\r
339 /* Rules for form button left cell in normal state (td) */
\r
340 .FormButtonLeftCellNormal {
\r
341 background-position: 0px 0px;
\r
344 /* Rules for form button left cell in focused state (td) */
\r
345 .FormButtonLeftCellFocus {
\r
346 background-position: 0px -50px;
\r
349 /* Rules for form button left cell in hover state (td) */
\r
350 .FormButtonLeftCellHover {
\r
351 background-position: 0px -100px;
\r
354 /* Rules for form button left cell in disabled state (td) */
\r
355 .FormButtonLeftCellDisabled {
\r
356 background-position: 0px -150px;
\r
359 /* Rules for form button center cell in normal state (td) */
\r
360 .FormButtonCenterCellNormal {
\r
361 background-position: 0px 0px;
\r
364 /* Rules for form button center cell in focused state (td) */
\r
365 .FormButtonCenterCellFocus {
\r
366 background-position: 0px -50px;
\r
369 /* Rules for form button center cell in hover state (td) */
\r
370 .FormButtonCenterCellHover {
\r
371 background-position: 0px -100px;
\r
374 /* Rules for form button center cell in disabled state (td) */
\r
375 .FormButtonCenterCellDisabled {
\r
376 background-position: 0px -150px;
\r
379 /* Rules for form button left cell in normal state (td) */
\r
380 .FormButtonRightCellNormal {
\r
381 background-position: 0px 0px;
\r
384 /* Rules for form button left cell in focused state (td) */
\r
385 .FormButtonRightCellFocus {
\r
386 background-position: 0px -50px;
\r
389 /* Rules for form button left cell in hover state (td) */
\r
390 .FormButtonRightCellHover {
\r
391 background-position: 0px -100px;
\r
394 /* Rules for form button left cell in disabled state (td) */
\r
395 .FormButtonRightCellDisabled {
\r
396 background-position: 0px -150px;
\r
399 /* Rules for form button text */
\r
404 /* Form button text in normal state */
\r
405 .FormButtonTextNormal {
\r
406 color: rgb(255,255,255);
\r
409 /* Form button text when focused */
\r
410 .FormButtonTextFocus {
\r
411 color: rgb(255,255,255);
\r
414 /* Form button text when hovering */
\r
415 .FormButtonTextHover {
\r
416 color: rgb(255,255,255);
\r
419 /* Form button text when disabled */
\r
420 .FormButtonTextDisabled {
\r
421 color: rgb(200,200,200);
\r
425 /******************************************************************************/
\r
426 /* NavigationButton */
\r
428 /* Rules for navigation button */
\r
429 .NavigationButton {
\r
433 /* Rules for navigation button control element */
\r
434 .NavigationButtonControlElement {
\r
435 padding: 3px 3px 3px 3px;
\r
438 /* Rules for navigation button table (table) */
\r
439 .NavigationButtonTable {
\r
440 border-spacing: 0px;
\r
444 /* Navigation button row (tr) */
\r
445 .NavigationButtonRow {
\r
449 /* Rules for navigation button image cell (td) */
\r
450 .NavigationButtonImageCell {
\r
453 vertical-align: middle;
\r
456 /* Rules for navigation button text cell (td) */
\r
457 .NavigationButtonTextCell {
\r
458 vertical-align: middle;
\r
462 /* Rules for navigation button image */
\r
463 .NavigationButtonImage {
\r
464 padding: 0px 5px 0px 0px;
\r
467 /* Rules for navigation button text */
\r
468 .NavigationButtonText {
\r
472 /* Navigation button text in normal state */
\r
473 .NavigationButtonTextNormal {
\r
477 /* Navigation button text when focused */
\r
478 .NavigationButtonTextFocus {
\r
479 color: rgb(255,255,255);
\r
482 /* Navigation button text when hovering */
\r
483 .NavigationButtonTextHover {
\r
487 /* Navigation button text when disabled */
\r
488 .NavigationButtonTextDisabled {
\r
489 color: rgb(125,125,125);
\r
493 /******************************************************************************/
\r
496 /* Rules for textField */
\r
499 border: 1px solid rgb(0,0,0);
\r
500 background: rgb(255,255,255);
\r
501 margin: 0px 0px 3px 0px;
\r
504 /* TextField in normal state */
\r
509 /* TextField in focus state */
\r
514 /* TextField in hover state */
\r
519 /* TextField in disabled state */
\r
520 .TextFieldDisabled {
\r
521 color: rgb(50,50,50);
\r
522 background: rgb(200,200,200);
\r
526 /******************************************************************************/
\r
529 /* Rules for TextArea */
\r
532 border: 1px solid rgb(0,0,0);
\r
533 background: rgb(255,255,255);
\r
534 margin: 0px 0px 3px 0px;
\r
537 /* TextArea in normal state */
\r
542 /* TextArea in focus state */
\r
547 /* TextArea in hover state */
\r
552 /* TextArea in disabled state */
\r
553 .TextAreaDisabled {
\r
554 color: rgb(50,50,50);
\r
555 background: rgb(200,200,200);
\r
559 /******************************************************************************/
\r
562 /* Rules for Separator (table) */
\r
566 border-spacing: 0px;
\r
567 table-layout: fixed;
\r
571 /* Separator row (tr) */
\r
576 /* Separator left cell (td) */
\r
577 .SeparatorLeftCell {
\r
580 background: url("SeparatorLeft.png") no-repeat;
\r
584 /* Separator center cell (td) */
\r
585 .SeparatorCenterCell {
\r
587 background: url("SeparatorCenter.png") repeat-x;
\r
591 /* Separator right cell (td) */
\r
592 .SeparatorRightCell {
\r
595 background: url("SeparatorRight.png") no-repeat;
\r
600 /******************************************************************************/
\r
601 /* SelectionMenu */
\r
603 /* Rules for SelectionMenu select element */
\r
606 border: 1px solid rgb(0,0,0);
\r
607 background: rgb(255,255,255);
\r
608 margin: 0px 0px 3px 0px;
\r
611 /* SelectionMenu in normal state */
\r
612 .SelectionMenuNormal {
\r
616 /* SelectionMenu in focus state */
\r
617 .SelectionMenuFocus {
\r
621 /* SelectionMenu in hover state */
\r
622 .SelectionMenuHover {
\r
626 /* SelectionMenu in disabled state */
\r
627 .SelectionMenuDisabled {
\r
628 color: rgb(50,50,50);
\r
629 background: rgb(200,200,200);
\r
632 /* Rules for SelectionMenu option elements */
\r
633 .SelectionMenuOption {
\r
634 background: rgb(255,255,255);
\r
637 /* SelectionMenu option in normal state */
\r
638 .SelectionMenuOptionNormal {
\r
642 /* SelectionMenu option in focus state */
\r
643 .SelectionMenuOptionFocus {
\r
647 /* SelectionMenu option in hover state */
\r
648 .SelectionMenuOptionHover {
\r
652 /* SelectionMenu option in disabled state */
\r
653 .SelectionMenuOptionDisabled {
\r
654 color: rgb(50,50,50);
\r
655 background: rgb(200,200,200);
\r
659 /******************************************************************************/
\r
660 /* SelectionList */
\r
662 /* SelectionList option list element */
\r
667 /* SelectionList option list element in normal state */
\r
668 .SelectionListNormal {
\r
672 /* SelectionList option list element in focus state */
\r
673 .SelectionListFocus {
\r
677 /* SelectionList option list element in hover state */
\r
678 .SelectionListHover {
\r
682 /* SelectionList option list element in disabled state */
\r
683 .SelectionListDisabled {
\r
687 /* SelectionList option element in single selection mode */
\r
688 .SelectionListOptionSingle {
\r
689 padding-left: 19px;
\r
690 background: url("RadioButton.png") no-repeat;
\r
694 /* SelectionList option element in single selection mode, unchecked normal state */
\r
695 .SelectionListOptionSingleUncheckedNormal {
\r
696 background-position: 0px 0px;
\r
699 /* SelectionList option element in single selection mode, unchecked focus state */
\r
700 .SelectionListOptionSingleUncheckedFocus {
\r
701 background-position: 0px -50px;
\r
704 /* SelectionList option element in single selection mode, unchecked diabled state */
\r
705 .SelectionListOptionSingleUncheckedDisabled {
\r
706 background-position: 0px -100px;
\r
709 /* SelectionList option element in single selection mode, checked normal state */
\r
710 .SelectionListOptionSingleCheckedNormal {
\r
711 background-position: 0px -150px;
\r
714 /* SelectionList option element in single selection mode, checked focus state */
\r
715 .SelectionListOptionSingleCheckedFocus {
\r
716 background-position: 0px -200px;
\r
719 /* SelectionList option element in single selection mode, checked diabled state */
\r
720 .SelectionListOptionSingleCheckedDisabled {
\r
721 background-position: 0px -250px;
\r
724 /* SelectionList option element in multi selection mode */
\r
725 .SelectionListOptionMulti {
\r
726 padding-left: 19px;
\r
727 background: url("CheckBox.png") no-repeat;
\r
731 /* SelectionList option element in multi selection mode, unchecked normal state */
\r
732 .SelectionListOptionMultiUncheckedNormal {
\r
733 background-position: 0px 0px;
\r
736 /* SelectionList option element in multi selection mode, unchecked focus state */
\r
737 .SelectionListOptionMultiUncheckedFocus {
\r
738 background-position: 0px -50px;
\r
741 /* SelectionList option element in multi selection mode, unchecked diabled state */
\r
742 .SelectionListOptionMultiUncheckedDisabled {
\r
743 background-position: 0px -100px;
\r
746 /* SelectionList option element in multi selection mode, checked normal state */
\r
747 .SelectionListOptionMultiCheckedNormal {
\r
748 background-position: 0px -150px;
\r
751 /* SelectionList option element in multi selection mode, checked focus state */
\r
752 .SelectionListOptionMultiCheckedFocus {
\r
753 background-position: 0px -200px;
\r
756 /* SelectionList option element in multi selection mode, checked diabled state */
\r
757 .SelectionListOptionMultiCheckedDisabled {
\r
758 background-position: 0px -250px;
\r
761 /* SelectionList option text */
\r
762 .SelectionListOptionText {
\r
766 /* SelectionList option text in normal state */
\r
767 .SelectionListOptionTextNormal {
\r
771 /* SelectionList option text in focus state */
\r
772 .SelectionListOptionTextFocus {
\r
773 color: rgb(255,255,255);
\r
776 /* SelectionList option text in hover state */
\r
777 .SelectionListOptionTextHover {
\r
781 /* SelectionList option text in disabled state */
\r
782 .SelectionListOptionTextDisabled {
\r
783 color: rgb(125,125,125);
\r
787 /******************************************************************************/
\r
790 /* Scrollbar root element */
\r
792 position: absolute;
\r
797 /* Top portion of scrollbar track */
\r
798 .ScrollbarTrackTop {
\r
799 position: absolute;
\r
800 background: url("ScrollbarTrackTop.png") no-repeat;
\r
805 /* Middle portion of scrollbar track */
\r
806 .ScrollbarTrackMiddle {
\r
807 position: absolute;
\r
808 background: url("ScrollbarTrackMiddle.png") repeat-y;
\r
812 /* Bottom portion of scrollbar track */
\r
813 .ScrollbarTrackBottom {
\r
814 position: absolute;
\r
815 background: url("ScrollbarTrackBottom.png") no-repeat;
\r
820 /* Top portion of scrollbar thumb */
\r
821 .ScrollbarThumbTop {
\r
822 position: absolute;
\r
823 background: url("ScrollbarThumbTop.png") no-repeat;
\r
828 /* Middle portion of scrollbar thumb */
\r
829 .ScrollbarThumbMiddle {
\r
830 position: absolute;
\r
831 background: url("ScrollbarThumbMiddle.png") repeat-y;
\r
835 /* Bottom portion of scrollbar thumb */
\r
836 .ScrollbarThumbBottom {
\r
837 position: absolute;
\r
838 background: url("ScrollbarThumbBottom.png") no-repeat;
\r
844 /******************************************************************************/
\r
845 /* NotificationPopup */
\r
847 /* Container that defines the area for the popup dialog */
\r
848 .NotificationPopupContainer {
\r
852 margin-left: -115px;
\r
857 /* Notification popup dialog */
\r
858 .NotificationPopup {
\r
859 position: absolute;
\r
862 background: url("NotificationPopupBackground.png") repeat-x;
\r
863 border: 1px solid rgb(0,0,0);
\r
866 /* Notification type indicator */
\r
867 .NotificationPopupTypeIndicator {
\r
868 position: absolute;
\r
873 background: url("NotificationPopupTypeIndicator.png") no-repeat;
\r
876 /* Notification type indicator for notifications of undefined type */
\r
877 .NotificationPopupTypeIndicatorNone {
\r
878 background-position: 0px 0px;
\r
881 /* Notification type indicator for info notifications */
\r
882 .NotificationPopupTypeIndicatorInfo {
\r
883 background-position: 0px -50px;
\r
886 /* Notification type indicator for warning notifications */
\r
887 .NotificationPopupTypeIndicatorWarning {
\r
888 background-position: 0px -100px;
\r
891 /* Notification type indicator for wait notifications */
\r
892 .NotificationPopupTypeIndicatorWait {
\r
893 background-position: 0px -150px;
\r
896 /* Notification text area */
\r
897 .NotificationPopupText {
\r
898 position: absolute;
\r
906 .NotificationPopupProgressBar {
\r
907 position: absolute;
\r