1<?xml version="1.0" encoding="UTF-8"?>
2<!--
3
4Coal skin is based on Ocean skin
5Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
6Except background.jpg, by elisee
7Except stars, by s@f
8
9To make your own skin, I suggest simply duplicating this file and modifying it as needed.
10There are two types of images : some will be simply stretched as a whole, others will
11have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
12for each element type; though, as you will see below, for all "advanced stretching" images
13you can easily fake "simple stretch")
14
15All elements will have at least 2 properties :
16        type="X"                                sets what you're skinning with this entry
17        image="skinDirectory/imageName.png"     sets which image is used for this element
18
19Most elements also support states :
20        state="neutral"
21        state="focused"
22        state="down"
23You can thus give different looks for different states.  Not all widgets support all states,
24see entries and comments below to know what's supported.
25Note that checkboxes are an exception and have the following styles :
26    "neutral+unchecked"
27    "neutral+checked"
28    "focused+unchecked"
29    "focused+checked"
30    "deactivated+unchecked"
31    "deactivated+checked"
32
33"Advanced stretching" images are split this way :
34
35     +----+--------------------+----+
36     |    |                    |    |
37     +----+--------------------+----+
38     |    |                    |    |
39     |    |                    |    |
40     |    |                    |    |
41     +----+--------------------+----+
42     |    |                    |    |
43     +----+--------------------+----+
44
45The center border will be stretched in all directions. The 4 corners will not stretch at all.
46Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
47Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
48the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
49
50In some cases, you may not want vertical stretching to occur (like if the left and right sides
51of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
52parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
53their aspect ratio.
54
55Some components may fill the full inner area with stuff; others will only take a smaller
56area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
57that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
58area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
59the 'v' one is for vertical borders.
60
61Finnally : the image is split, as shown above, into 9 areas. In osme cases, you may not want
62all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
63and explicitely specify which parts you want to see. The 4 corner areas are only visible
64when the border that intersect at this corner are enabled.
65
66-->
67
68<skin name="Coal" author="Alayan">
69
70<!--  Stateless -->
71<element type="background" image="background.jpg" />
72
73<element type="bottom-bar" image="bottom_bar.png" />
74
75<element type="achievement-message" image="achievement.png"
76      left_border="160" right_border="13" top_border="13" bottom_border="13"
77      preserve_h_aspect_ratios="true" hborder_out_portion="0.3" vborder_out_portion="0"/>
78
79<element type="friend-message" image="friend.png"
80      left_border="160" right_border="13" top_border="13" bottom_border="13"
81      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
82
83<element type="error-message" image="error.png"
84      left_border="160" right_border="13" top_border="13" bottom_border="13"
85      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
86
87<element type="generic-message" image="generic.png"
88      left_border="160" right_border="13" top_border="13" bottom_border="13"
89      preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
90
91<element type="button" state="neutral" image="glassbutton.png"
92      left_border="13" right_border="13" top_border="13" bottom_border="13"
93      hborder_out_portion="0" vborder_out_portion="0"/>
94
95<element type="button" state="focused" image="glassbutton_focused.png"
96      left_border="13" right_border="13" top_border="13" bottom_border="13"
97      hborder_out_portion="0" vborder_out_portion="0"/>
98
99<element type="button" state="deactivated" common="y" image="glassbutton_deactivated.png"
100      left_border="13" right_border="13" top_border="13" bottom_border="13"
101      hborder_out_portion="0" vborder_out_portion="0"/>
102
103<!-- TODO : buttons could support 'pressed' state -->
104
105<element type="textbubble" state="neutral" image="textbubble.png"
106      left_border="13" right_border="13" top_border="13" bottom_border="13"
107      hborder_out_portion="0.7" vborder_out_portion="0.3" />
108
109<element type="textbubble" state="focused" image="textbubble2.png"
110      left_border="13" right_border="13" top_border="13" bottom_border="13"
111      hborder_out_portion="0.7" vborder_out_portion="0.3" />
112
113<element type="progress" state="fill" image="glasssgauge_fill.png"
114      left_border="5" right_border="5" top_border="5" bottom_border="5" />
115
116<element type="progress" state="neutral" common="y" image="progress_bg.png"
117      left_border="31" right_border="31" top_border="15" bottom_border="15" />
118
119
120<element type="tab" state="neutral" image="glasstab.png"
121      left_border="11" right_border="11" top_border="6" bottom_border="10"
122      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
123      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
124
125<element type="tab" state="focused" image="glasstab_focus.png"
126      left_border="11" right_border="11" top_border="6" bottom_border="10"
127      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
128      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
129
130<element type="tab" state="down" image="glasstab.png"
131      left_border="11" right_border="11" top_border="6" bottom_border="10"
132      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
133      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
134
135
136<element type="verticalTab" state="neutral" image="glasstab_vert.png"
137      left_border="10" right_border="10" top_border="10" bottom_border="10"
138      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
139      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
140
141<element type="verticalTab" state="focused" image="glasstab_vert_focus.png"
142      left_border="10" right_border="10" top_border="10" bottom_border="10"
143      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
144      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
145
146<element type="verticalTab" state="down" image="glasstab_vert.png"
147      left_border="10" right_border="10" top_border="10" bottom_border="10"
148      preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
149      h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
150
151<!-- Stateless -->
152<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
153      left_border="6" right_border ="6" top_border="6" bottom_border="6"
154      hborder_out_portion="1.0" />
155<element type="squareFocusHalo1" common="y" image="glass_square_focused_black.png"
156      left_border="6" right_border ="6" top_border="6" bottom_border="6"
157      hborder_out_portion="1.0" />
158<element type="squareFocusHalo2" common="y" image="glass_square_focused_cyan.png"
159      left_border="6" right_border ="6" top_border="6" bottom_border="6"
160      hborder_out_portion="1.0" />
161<element type="squareFocusHalo3" common="y" image="glass_square_focused_red.png"
162      left_border="6" right_border ="6" top_border="6" bottom_border="6"
163      hborder_out_portion="1.0" />
164<element type="squareFocusHalo4" common="y" image="glass_square_focused_green.png"
165      left_border="6" right_border ="6" top_border="6" bottom_border="6"
166      hborder_out_portion="1.0" />
167<element type="squareFocusHalo5" common="y" image="glass_square_focused_yellow.png"
168      left_border="6" right_border ="6" top_border="6" bottom_border="6"
169      hborder_out_portion="1.0" />
170
171<!-- Stateless. No splitting into 9 areas is done; the image is just resized. -->
172<element type="selectionHalo" image="bubble.png"  />
173<element type="focusHalo" image="glass_iconhighlight_focus.png"  />
174
175<element type="spinner" state="neutral" common="y" image="glassspinner.png"
176    left_border="110" right_border="110" top_border="0" bottom_border="36"
177    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
178
179<element type="spinner" state="focused" image="glassspinner_focus.png"
180    left_border="110" right_border="110" top_border="0" bottom_border="36"
181    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
182
183<element type="spinner" state="deactivated" common="y" image="glassspinner_deactivated.png"
184    left_border="110" right_border="110" top_border="0" bottom_border="36"
185    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
186
187<!-- player name spinner color in multiplayer-->
188<element type="spinner1" state="neutral" common="y" image="glass_square_black.png"
189      left_border="110" right_border="110" top_border="0" bottom_border="36"
190    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
191<element type="spinner2" state="neutral" common="y" image="glass_square_cyan.png"
192      left_border="110" right_border="110" top_border="0" bottom_border="36"
193    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
194<element type="spinner3" state="neutral" common="y" image="glass_square_red.png"
195      left_border="110" right_border="110" top_border="0" bottom_border="36"
196    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
197<element type="spinner4" state="neutral" common="y" image="glass_square_green.png"
198      left_border="110" right_border="110" top_border="0" bottom_border="36"
199    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
200<element type="spinner5" state="neutral" common="y" image="glass_square_yellow.png"
201      left_border="110" right_border="110" top_border="0" bottom_border="36"
202    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
203
204
205<!-- This one is a bit special. Only area(s) LEFT and/or RIGHT will be rendered. They will be overlaid
206     on top of the spinner's background -->
207<element type="spinner" state="down" image="glassspinner_down.png"
208    left_border="110" right_border="110" top_border="0" bottom_border="36"
209    preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
210
211<!-- For checkboxes, no splitting into 9 areas is done; the image is just stretched -->
212<element type="checkbox" state="neutral+unchecked" image="glasscheckbox.png"/>
213<element type="checkbox" state="neutral+checked" image="glasscheckbox_checked.png"/>
214<element type="checkbox" state="focused+unchecked" image="glasscheckbox_focus.png"/>
215<element type="checkbox" state="focused+checked" image="glasscheckbox_checked_focus.png"/>
216<element type="checkbox" state="deactivated+unchecked" common="y" image="glasscheckbox_deactivated.png"/>
217<element type="checkbox" state="deactivated+checked" common="y" image="glasscheckbox_checked_deactivated.png"/>
218
219<!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
220     Note: the body of a guage is the same as for for spinners. -->
221<element type="gaugefill" image="glasssgauge_fill.png" />
222
223<!-- Lists are always in neutral state for now -->
224<element type="list" image="glass_section.png"
225    left_border="15" right_border="15" top_border="7" bottom_border="7"
226    hborder_out_portion="0.0" vborder_out_portion="0.0" />
227
228<element type="listitem" state="focused" image="select.png"
229    left_border="0" right_border="0" top_border="0" bottom_border="0"
230    hborder_out_portion="0.0" vborder_out_portion="0.0" />
231
232
233<!-- Scrollbars. Background and thumb have no state (always neutral state).
234     The buttons are the top and bottom arrows. Image must be top arrow, will
235     be mirrorred for bottom. Buttons can be in neutral or down state.
236     Advanced stretching is only used for the background and thumb. -->
237<element type="scrollbar_background"          common="y" image="scrollbar_bg.png"
238    left_border="7" right_border="7" top_border="7" bottom_border="7"
239    hborder_out_portion="0.0" vborder_out_portion="0.0" />
240<element type="scrollbar_thumb"               image="scrollbar_thumb.png"
241    left_border="7" right_border="7" top_border="7" bottom_border="7"
242    hborder_out_portion="-1.0" vborder_out_portion="-1.0" />
243<element type="scrollbar_button"              common="y" image="scrollbar_btn.png" />
244<element type="scrollbar_button" state="down" image="scrollbar_btn_down.png" />
245
246<element type="left_arrow"  state="neutral" common="y" image="left_arrow.png" />
247<element type="right_arrow" state="neutral" common="y" image="right_arrow.png" />
248<element type="left_arrow"  state="focus"   image="left_arrow_focus.png" />
249<element type="right_arrow" state="focus"   image="right_arrow_focus.png" />
250
251<element type="list_header"  state="neutral" image="table_header.png" />
252<element type="list_sort_up" state="neutral" common="y" image="list_sort_up.png" />
253<element type="list_sort_down" state="neutral" common="y" image="list_sort_down.png" />
254<element type="list_header"  state="down"    image="table_header_down.png" />
255
256<!-- Stateless -->
257<element type="section" image="glass_section.png"
258      left_border="15" right_border="15" top_border="15" bottom_border="15"
259      hborder_out_portion="0.0" vborder_out_portion="0.0" />
260
261<element type="section" state="selected" image="glassbutton_focused.png"
262      left_border="15" right_border="15" top_border="15" bottom_border="15"
263      hborder_out_portion="0.0" vborder_out_portion="0.0" />
264
265<!-- Stateless -->
266<element type="rounded_section" image="glass_rsection.png"
267      left_border="15" right_border="15" top_border="15" bottom_border="15"
268      hborder_out_portion="0.0" vborder_out_portion="0.0" />
269
270<!-- Stateless -->
271<element type="window" image="dialog.png"
272      left_border="7" right_border="7" top_border="7" bottom_border="7"
273      hborder_out_portion="1.0" vborder_out_portion="0.2" />
274
275<!-- Stateless -->
276<element type="tooltip" common="y" image="tooltip.png"
277    left_border="10" right_border="10" top_border="10" bottom_border="10"
278    hborder_out_portion="1.0" vborder_out_portion="1.0" />
279
280<!--                   Colors                  -->
281<color type="text" state="neutral" r="220" g="220" b="220" />
282<color type="brighttext" state="neutral" r="240" g="240" b="240" />
283
284<!-- For highlighted items, e.g. in list -->
285<color type="text" state="focused" r="255" g="255" b="255" />
286
287<!-- Color used in the credits -->
288<color type="credits_text" state="neutral" r="220" g="220" b="220" />
289
290<!-- Color used for emphasized items in e.g. lists -->
291<color type="emphasis_text" state="neutral" r="230" g="210" b="50" />
292<color type="emphasis_text" state="focused" r="255" g="226" b="56" />
293
294<!-- Color used for red/blue items in list (e.g. player team color in networking) -->
295<color type="list_blue" state="neutral" r="0" g="0" b="180" />
296<color type="list_blue" state="focused" r="0" g="0" b="255" />
297<color type="list_red" state="neutral" r="255" g="0" b="0" />
298<color type="list_red" state="focused" r="255" g="0" b="0" />
299
300<!-- Color used to fade out background when a dialog is shown -->
301<color type="dialog_background" state="neutral" a="120" r="0" g="0" b="0" />
302
303<!-- Color used for tips in the loading screen -->
304<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
305
306<!-- Text field color -->
307<color type="text_field" state="background" a="255" r="35" g="35" b="35" />
308<color type="text_field" state="background_focused" a="255" r="15" g="15" b="15" />
309<color type="text_field" state="background_deactivated" a="255" r="90" g="90" b="90" />
310<color type="text_field" state="background_marked" a="128" r="220" g="220" b="220" />
311<color type="text_field" state="neutral" a="255" r="35" g="35" b="35" />
312<color type="text_field" state="focused" a="255" r="15" g="15" b="15" />
313<color type="text_field" state="deactivated" a="255" r="90" g="90" b="90" />
314
315<!-- Rating star image -->
316<element type="rating" state="neutral" common="y" image="rating_star.png" />
317
318<!-- Font color -->
319<color type="font" state="top" a="255" r="140" g="140" b="140" />
320<color type="font" state="bottom" a="255" r="235" g="235" b="235" />
321<color type="font" state="normal" a="255" r="220" g="220" b="220" />
322
323</skin>
324