[dali_2.0.26] Merge branch 'devel/master'
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / styles / 480x800 / dali-toolkit-default-theme.json
1 /*
2  * Copyright (c) 2016 Samsung Electronics Co., Ltd.
3  *
4  * This file is part of Dali Toolkit
5  *
6  * Licensed under the Apache License, Version 2.0 (the "License");
7  * you may not use this file except in compliance with the License.
8  * You may obtain a copy of the License at
9  *
10  * http://www.apache.org/licenses/LICENSE-2.0
11  *
12  * Unless required by applicable law or agreed to in writing, software
13  * distributed under the License is distributed on an "AS IS" BASIS,
14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15  * See the License for the specific language governing permissions and
16  * limitations under the License.
17  */
18
19
20 //******************************************************************************
21 //
22 // Default Reference style theme for a 480x800 resolution, The values determined by UX design specification.
23 // This file can be copied to a new folder within the styles/ directory and amended with new default values.
24 // Can be overriden if StyleManager applies another style sheet.
25 //
26 //******************************************************************************
27
28 {
29   "config":
30   {
31     "brokenImageUrl":"{DALI_IMAGE_DIR}broken.png",
32     "alwaysShowFocus":false,
33     "clearFocusOnEscape":true
34   },
35   "styles":
36   {
37     "Tooltip":
38     {
39       "tooltip":
40       {
41         "content":
42         {
43           "pointSize":12
44         },
45         "waitTime":0.5,
46         "background":
47         {
48           "visual":"{DALI_IMAGE_DIR}tooltip.9.png",
49           "border":[1,5,5,1]
50         },
51         "tail":
52         {
53           "visibility":false,
54           "aboveVisual":"{DALI_IMAGE_DIR}tooltip-tail-above.png",
55           "belowVisual":"{DALI_IMAGE_DIR}tooltip-tail-below.png"
56         },
57         "position":"BELOW",
58         "hoverPointOffset":[10,10],
59         "movementThreshold":5,
60         "disappearOnMovement":false
61       }
62     },
63     "TextLabel":
64     {
65       "pointSize":18,
66       "enableAutoScroll":false,
67       "autoScrollLoopCount":2,
68       "autoScrollGap":50,
69       "autoScrollSpeed":80
70     },
71
72     "TextLabelFontSize0":
73     {
74       "pointSize":8
75     },
76     "TextLabelFontSize1":
77     {
78       "pointSize":10
79     },
80     "TextLabelFontSize2":
81     {
82       "pointSize":15
83     },
84     "TextLabelFontSize3":
85     {
86       "pointSize":19
87     },
88     "TextLabelFontSize4":
89     {
90       "pointSize":25
91     },
92     "TextField":
93     {
94       "pointSize":18,
95       "primaryCursorColor":[0.0,0.72,0.9,1.0],
96       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
97       "cursorWidth":1,
98       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
99       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
100       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
101       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
102       "enableSelection":true
103     },
104
105     "TextFieldFontSize0":
106     {
107       "pointSize":10
108     },
109     "TextFieldFontSize1":
110     {
111       "pointSize":10
112     },
113     "TextFieldFontSize2":
114     {
115       "pointSize":10
116     },
117     "TextFieldFontSize3":
118     {
119       "pointSize":10
120     },
121     "TextFieldFontSize4":
122     {
123       "pointSize":10
124     },
125     "TextSelectionPopup":
126     {
127       "popupMaxSize":[400,100],
128       "optionDividerSize":[2,0],
129       "popupDividerColor":[0.23,0.72,0.8,0.11],
130       "popupIconColor":[1.0,1.0,1.0,1.0],
131       "popupPressedColor":[0.24,0.72,0.8,0.11],
132       "background": {
133         "visualType": "IMAGE",
134         "url": "{DALI_IMAGE_DIR}selection-popup-background.9.png"
135         },
136       "backgroundBorder": {
137         "visualType": "IMAGE",
138         "url": "{DALI_IMAGE_DIR}selection-popup-border.9.png",
139         "mixColor":[0.24,0.72,0.8,1.0]
140         },
141       "popupFadeInDuration":0.25,
142       "popupFadeOutDuration":0.25
143     },
144     "TextSelectionPopupButton":
145     {
146       "label":
147       {
148         "visualType":"TEXT",
149         "pointSize":8
150       },
151       "unselectedBackgroundVisual":
152       {
153         "visualType": "IMAGE",
154         "url": ""
155       },
156       "selectedBackgroundVisual":
157       {
158         "visualType": "IMAGE",
159         "url": ""
160       }
161     },
162     "TextSelectionToolbar":
163     {
164       "enableOvershoot":true,
165       "enableScrollBar":true,
166       "scrollView":
167       {
168         "overshootAnimationSpeed":120.0,
169         "overshootSize":[480.0,42.0]
170       }
171     },
172     "TextSelectionScrollBar":
173     {
174       "indicatorShowDuration":0.25,
175       "indicatorHideDuration":0.25,
176       "indicatorTransientDuration":1.0
177     },
178     "TextSelectionScrollIndicator":
179     {
180       "image":
181       {
182         "visualType":"IMAGE",
183         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png" // designed for HD resolution
184       },
185       "color":[0.0,0.72,0.9,0.7],
186       "scale":[0.625,1.0,1.0] // Note: This reduces height for WVGA resolution
187     },
188     "ScrollView":
189     {
190       "overshootEffectColor":"B018",
191       "overshootAnimationSpeed":120.0,
192       "overshootSize":[480.0,42.0]
193     },
194     "ItemView":
195     {
196       "overshootEffectColor":"B018",
197       "overshootAnimationSpeed":120.0,
198       "overshootSize":[480.0,42.0]
199     },
200     "ScrollBar":
201     {
202       "indicatorShowDuration":0.25,
203       "indicatorHideDuration":0.25
204     },
205     "ScrollBarIndicator":
206     {
207       "image":
208       {
209         "visualType":"IMAGE",
210         "url":"{DALI_IMAGE_DIR}popup_scroll.9.png"
211       }
212     },
213     "TextEditor":
214     {
215       "pointSize":18,
216       "primaryCursorColor":[0.0,0.72,0.9,1.0],
217       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
218       "cursorWidth":1,
219       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
220       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
221       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
222       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
223       "enableScrollBar":true,
224       "scrollBarShowDuration":0.8,
225       "scrollBarFadeDuration":0.5,
226       "enableSelection":true
227     },
228     "Popup":
229     {
230       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
231       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
232       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
233       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
234       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
235       "popupBackgroundBorder":[17,17,13,13]
236     },
237     "ConfirmationPopup":
238     {
239       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
240       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
241       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
242       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
243       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
244       "popupBackgroundBorder":[17,17,13,13]
245     },
246     "Slider":
247     {
248       "showPopup": true,
249       "showValue": true,
250       "valuePrecision": 0,
251       "trackVisual":{
252         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
253         "size":[27,27]
254       },
255       "progressVisual":{
256         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
257         "size":[27,27]
258       },
259       "handleVisual":{
260         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
261         "size":[72,72]
262       },
263       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
264       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
265       "disableColor":[0.5, 0.5, 0.5, 1.0],
266       "popupTextColor":[0.5,0.5,0.5,1.0],
267       "hitRegion":[0, 72],
268       "marks":[],
269       "snapToMarks":false,
270       "markTolerance":0.05
271     },
272     "SliderHandleTextLabel":
273     {
274       "textColor":[0.8,0.8,1,1]
275     },
276     "ProgressBar":
277     {
278       "trackVisual":{
279         "visualType":"IMAGE",
280         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
281       },
282       "progressVisual":{
283         "visualType":"IMAGE",
284         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
285       },
286       "secondaryProgressVisual":{
287         "visualType":"IMAGE",
288         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
289       },
290       "indeterminateVisual":{
291         "visualType":"IMAGE",
292         "pixelArea":[0.0, 0.0, 10.0, 1.0],
293         "wrapModeU":"REPEAT",
294         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
295       },
296       "indeterminateVisualAnimation":
297       [
298         {
299           "target":"indeterminateVisual",
300           "property":"pixelArea",
301           "initialValue":[0.0, 0.0, 10.0, 1.0],
302           "targetValue":[-1.0, 0.0, 10.0, 1.0],
303           "animator":
304           {
305             "alphaFunction":"DEFAULT",
306             "timePeriod":
307             {
308               "duration":0.8,
309               "delay":0
310             }
311           }
312         }
313       ],
314       "labelVisual":{
315         "visualType": "TEXT",
316         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
317         "pointSize" : 12.0, // Point size must always be provided to Text Visual
318         "horizontalAlignment": "CENTER",
319         "verticalAlignment": "CENTER"
320       },
321       "progressValue": 0.0,
322       "secondaryProgressValue":0.0,
323       "indeterminate": false
324     },
325     "CircularProgressBar":
326     {
327       "size":[64,64],
328       "trackVisual":{
329         "visualType":"ARC",
330         "mixColor":[0.0,0.165,0.302,1.0],
331         "thickness":4.0,
332         "startAngle":0.0,
333         "cap":"ROUND"
334       },
335       "progressVisual":{
336         "visualType":"ARC",
337         "mixColor":[0.0,0.549,1.0,1.0],
338         "thickness":4.0,
339         "startAngle":0.0,
340         "cap":"ROUND"
341       },
342       "secondaryProgressVisual":{
343         "visualType":"ARC",
344         "mixColor":[0.0,0.549,1.0,0.3],
345         "thickness":4.0,
346         "startAngle":0.0,
347         "cap":"ROUND"
348       },
349       "indeterminateVisual":{
350         "visualType":"ARC",
351         "mixColor":[0.02,0.71,0.525,1.0],
352         "thickness":4.0,
353         "startAngle":267.0,
354         "sweepAngle":75.0,
355         "cap":"ROUND"
356       },
357       "indeterminateVisualAnimation":
358       [
359         {
360           "target":"trackVisual",
361           "property":"opacity",
362           "targetValue": 0,
363           "animator":
364           {
365             "alphaFunction":"DEFAULT",
366             "timePeriod":
367             {
368               "duration":0,
369               "delay":0
370             }
371           }
372         },
373         {
374           "target":"secondaryProgressVisual",
375           "property":"opacity",
376           "targetValue": 0,
377           "animator":
378           {
379             "alphaFunction":"DEFAULT",
380             "timePeriod":
381             {
382               "duration":0,
383               "delay":0
384             }
385           }
386         },
387         {
388           "target":"progressVisual",
389           "property":"sweepAngle",
390           "initialValue": 75,
391           "targetValue": 180,
392           "animator":
393           {
394             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
395             "timePeriod":
396             {
397               "duration":1.0,
398               "delay":0.0
399             }
400           }
401         },
402         {
403           "target":"progressVisual",
404           "property":"sweepAngle",
405           "targetValue": 75,
406           "animator":
407           {
408             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
409             "timePeriod":
410             {
411               "duration":1.0,
412               "delay":2.0
413             }
414           }
415         },
416         {
417           "target":"progressVisual",
418           "property":"startAngle",
419           "initialValue": 87,
420           "targetValue": 1887,
421           "animator":
422           {
423             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
424             "timePeriod":
425             {
426               "duration":3.0,
427               "delay":0.0
428             }
429           }
430         },
431         {
432           "target":"indeterminateVisual",
433           "property":"sweepAngle",
434           "initialValue": 75,
435           "targetValue": 180,
436           "animator":
437           {
438             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
439             "timePeriod":
440             {
441               "duration":1.0,
442               "delay":0.0
443             }
444           }
445         },
446         {
447           "target":"indeterminateVisual",
448           "property":"sweepAngle",
449           "targetValue": 75,
450           "animator":
451           {
452             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
453             "timePeriod":
454             {
455               "duration":1.0,
456               "delay":2.0
457             }
458           }
459         },
460         {
461           "target":"indeterminateVisual",
462           "property":"startAngle",
463           "initialValue": 267,
464           "targetValue": 2067,
465           "animator":
466           {
467             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
468             "timePeriod":
469             {
470               "duration":3.0,
471               "delay":0.0
472             }
473           }
474         }
475       ],
476       "labelVisual":{
477         "visualType": "TEXT",
478         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
479         "pointSize" : 12.0, // Point size must always be provided to Text Visual
480         "horizontalAlignment": "CENTER",
481         "verticalAlignment": "CENTER"
482       },
483       "progressValue": 0.2,
484       "secondaryProgressValue":0.4,
485       "indeterminate": false
486     },
487     "Button":
488     {
489       "styles":["Tooltip"],
490       "initialAutoRepeatingDelay":2.0,
491       "nextAutoRepeatingDelay":0.9
492       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
493     },
494     "PushButton":
495     {
496       "styles":["Button"],
497       "autoRepeating":false,
498       "togglable":false,
499       "labelPadding":[ 12.0, 12.0, 12.0, 12.0 ],
500       "label":
501        {
502          "visualType": "TEXT",
503          "horizontalAlignment": "CENTER",
504          "pointSize" : 15.0, // Point size must always be provided to Text Visual
505          "verticalAlignment": "CENTER"
506        },
507       "unselectedBackgroundVisual":
508        {
509          "visualType": "IMAGE",
510          "url": "{DALI_IMAGE_DIR}button-up.9.png"
511        },
512        "selectedBackgroundVisual":
513        {
514          "visualType": "IMAGE",
515          "url": "{DALI_IMAGE_DIR}button-down.9.png"
516        },
517        "disabledSelectedBackgroundVisual":
518        {
519          "visualType": "IMAGE",
520          "url": "{DALI_IMAGE_DIR}button-down-disabled.9.png"
521        },
522        "disabledUnselectedBackgroundVisual":
523        {
524          "visualType": "IMAGE",
525          "url": "{DALI_IMAGE_DIR}button-disabled.9.png"
526        }
527     },
528     "ToggleButton":
529     {
530       "styles":["Button"]
531     },
532     "CheckBoxButton":
533     {
534       "styles":["Button"],
535       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
536       "label":
537        {
538          "visualType": "TEXT",
539          "pointSize" : 15.0, // Point size must always be provided to Text Visual
540          "verticalAlignment": "CENTER"
541        },
542       "unselectedVisual":
543       {
544         "visualType": "IMAGE",
545         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
546       },
547       "selectedVisual":
548       {
549         "visualType": "IMAGE",
550         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
551       },
552       "disabledUnselectedVisual":
553       {
554         "visualType": "IMAGE",
555         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
556       },
557       "disabledSelectedVisual":
558       {
559         "visualType": "IMAGE",
560         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
561       }
562     },
563     "RadioButton":
564     {
565       "styles":["Button"],
566       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
567       "label":
568        {
569          "visualType": "TEXT",
570          "pointSize" : 15.0, // Point size must always be provided to Text Visual
571          "verticalAlignment": "CENTER"
572        },
573       "unselectedVisual":
574       {
575         "visualType": "IMAGE",
576         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
577       },
578       "selectedVisual":
579       {
580         "visualType": "IMAGE",
581         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
582       },
583       "disabledUnselectedVisual":
584       {
585         "visualType": "IMAGE",
586         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
587       },
588       "disabledSelectedVisual":
589       {
590         "visualType": "IMAGE",
591         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
592       }
593     }
594   }
595 }