ilikecats/stk-code_catmod
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d3f45e84a3
stk-code_catmod/data/skins/coal/stkskin.xml
QwertyChouskie a68e652fa6 Skin padding implementation (#4195) 
* Implement box model spacing for skin elements

* Account for padding when spacing out on-screen keyboard

* Fix padding for Tutorial button on Help screen

* Reduce spacing between tabs
(Also removed a couple duplicated files.)

* Change verticalTab margin as per Benau's request
Uses `vborder_out_portion`, which is how it was done before.

* Remove duplicate files

* Adjust spacings after PNGs were adjusted in a previous commit

* Improve spacing of verticalTabs

* Slightly increase the tabbar width in the Options screens

* Slightly increase the tabbar width in the help screens
2020-01-13 13:02:50 +08:00

322 lines
16 KiB
XML
Raw Blame History

<?xml version="1.0" encoding="UTF-8"?>
<!--
Coal skin is based on Ocean skin
Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In osme cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
-->
<skin name="Coal" author="Alayan">
<!-- Stateless -->
<element type="background" image="background.jpg" />
<element type="bottom-bar" image="bottom_bar.png" />
<element type="achievement-message" image="achievement.png"
left_border="160" right_border="13" top_border="13" bottom_border="13"
preserve_h_aspect_ratios="true" hborder_out_portion="0.3" vborder_out_portion="0"/>
<element type="friend-message" image="friend.png"
left_border="160" right_border="13" top_border="13" bottom_border="13"
preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
<element type="error-message" image="error.png"
left_border="160" right_border="13" top_border="13" bottom_border="13"
preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
<element type="generic-message" image="generic.png"
left_border="160" right_border="13" top_border="13" bottom_border="13"
preserve_h_aspect_ratios="true" hborder_out_portion="0" vborder_out_portion="0"/>
<element type="button" state="neutral" image="glassbutton.png"
left_border="13" right_border="13" top_border="13" bottom_border="13"
hborder_out_portion="0" vborder_out_portion="0"/>
<element type="button" state="focused" image="glassbutton_focused.png"
left_border="13" right_border="13" top_border="13" bottom_border="13"
hborder_out_portion="0" vborder_out_portion="0"/>
<element type="button" state="deactivated" common="y" image="glassbutton_deactivated.png"
left_border="13" right_border="13" top_border="13" bottom_border="13"
hborder_out_portion="0" vborder_out_portion="0"/>
<!-- TODO : buttons could support 'pressed' state -->
<element type="textbubble" state="neutral" image="textbubble.png"
left_border="13" right_border="13" top_border="13" bottom_border="13"
hborder_out_portion="0.7" vborder_out_portion="0.3" />
<element type="textbubble" state="focused" image="textbubble2.png"
left_border="13" right_border="13" top_border="13" bottom_border="13"
hborder_out_portion="0.7" vborder_out_portion="0.3" />
<element type="progress" state="fill" image="glasssgauge_fill.png"
left_border="5" right_border="5" top_border="5" bottom_border="5" />
<element type="progress" state="neutral" common="y" image="progress_bg.png"
left_border="31" right_border="31" top_border="15" bottom_border="15" />
<element type="tab" state="neutral" image="glasstab.png"
left_border="11" right_border="11" top_border="6" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<element type="tab" state="focused" image="glasstab_focus.png"
left_border="11" right_border="11" top_border="6" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<element type="tab" state="down" image="glasstab.png"
left_border="11" right_border="11" top_border="6" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<element type="verticalTab" state="neutral" image="glasstab_vert.png"
left_border="10" right_border="10" top_border="10" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<element type="verticalTab" state="focused" image="glasstab_vert_focus.png"
left_border="10" right_border="10" top_border="10" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<element type="verticalTab" state="down" image="glasstab_vert.png"
left_border="10" right_border="10" top_border="10" bottom_border="10"
preserve_h_aspect_ratios="false" hborder_out_portion="0.0" vborder_out_portion="0.0"
h_inner_padding="0" v_inner_padding="0" h_margin="0" v_margin="0" />
<!-- Stateless -->
<element type="squareFocusHaloBW" common="y" image="glass_square_focused_bw.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<element type="squareFocusHalo1" common="y" image="glass_square_focused_black.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<element type="squareFocusHalo2" common="y" image="glass_square_focused_cyan.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<element type="squareFocusHalo3" common="y" image="glass_square_focused_red.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<element type="squareFocusHalo4" common="y" image="glass_square_focused_green.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<element type="squareFocusHalo5" common="y" image="glass_square_focused_yellow.png"
left_border="6" right_border ="6" top_border="6" bottom_border="6"
hborder_out_portion="1.0" />
<!-- Stateless. No splitting into 9 areas is done; the image is just resized. -->
<element type="selectionHalo" image="bubble.png" />
<element type="focusHalo" image="glass_iconhighlight_focus.png" />
<element type="spinner" state="neutral" common="y" image="glassspinner.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner" state="focused" image="glassspinner_focus.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner" state="deactivated" common="y" image="glassspinner_deactivated.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<!-- player name spinner color in multiplayer-->
<element type="spinner1" state="neutral" common="y" image="glass_square_black.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner2" state="neutral" common="y" image="glass_square_cyan.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner3" state="neutral" common="y" image="glass_square_red.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner4" state="neutral" common="y" image="glass_square_green.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<element type="spinner5" state="neutral" common="y" image="glass_square_yellow.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<!-- This one is a bit special. Only area(s) LEFT and/or RIGHT will be rendered. They will be overlaid
on top of the spinner's background -->
<element type="spinner" state="down" image="glassspinner_down.png"
left_border="110" right_border="110" top_border="0" bottom_border="36"
preserve_h_aspect_ratios="true" hborder_out_portion="0.0" />
<!-- For checkboxes, no splitting into 9 areas is done; the image is just stretched -->
<element type="checkbox" state="neutral+unchecked" image="glasscheckbox.png"/>
<element type="checkbox" state="neutral+checked" image="glasscheckbox_checked.png"/>
<element type="checkbox" state="focused+unchecked" image="glasscheckbox_focus.png"/>
<element type="checkbox" state="focused+checked" image="glasscheckbox_checked_focus.png"/>
<element type="checkbox" state="deactivated+unchecked" common="y" image="glasscheckbox_deactivated.png"/>
<element type="checkbox" state="deactivated+checked" common="y" image="glasscheckbox_checked_deactivated.png"/>
<!-- are always in neutral state for now. No splitting into 9 areas is done; the image is just stretched.
Note: the body of a guage is the same as for for spinners. -->
<element type="gaugefill" image="glasssgauge_fill.png" />
<!-- Lists are always in neutral state for now -->
<element type="list" image="glass_section.png"
left_border="15" right_border="15" top_border="7" bottom_border="7"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<element type="listitem" state="focused" image="select.png"
left_border="0" right_border="0" top_border="0" bottom_border="0"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<!-- Scrollbars. Background and thumb have no state (always neutral state).
The buttons are the top and bottom arrows. Image must be top arrow, will
be mirrorred for bottom. Buttons can be in neutral or down state.
Advanced stretching is only used for the background and thumb. -->
<element type="scrollbar_background" common="y" image="scrollbar_bg.png"
left_border="7" right_border="7" top_border="7" bottom_border="7"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<element type="scrollbar_thumb" image="scrollbar_thumb.png"
left_border="7" right_border="7" top_border="7" bottom_border="7"
hborder_out_portion="-1.0" vborder_out_portion="-1.0" />
<element type="scrollbar_button" common="y" image="scrollbar_btn.png" />
<element type="scrollbar_button" state="down" image="scrollbar_btn_down.png" />
<element type="left_arrow" state="neutral" common="y" image="left_arrow.png" />
<element type="right_arrow" state="neutral" common="y" image="right_arrow.png" />
<element type="left_arrow" state="focus" image="left_arrow_focus.png" />
<element type="right_arrow" state="focus" image="right_arrow_focus.png" />
<element type="list_header" state="neutral" image="table_header.png" />
<element type="list_sort_up" state="neutral" common="y" image="list_sort_up.png" />
<element type="list_sort_down" state="neutral" common="y" image="list_sort_down.png" />
<element type="list_header" state="down" image="table_header_down.png" />
<!-- Stateless -->
<element type="section" image="glass_section.png"
left_border="15" right_border="15" top_border="15" bottom_border="15"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<element type="section" state="selected" image="glassbutton_focused.png"
left_border="15" right_border="15" top_border="15" bottom_border="15"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<!-- Stateless -->
<element type="rounded_section" image="glass_rsection.png"
left_border="15" right_border="15" top_border="15" bottom_border="15"
hborder_out_portion="0.0" vborder_out_portion="0.0" />
<!-- Stateless -->
<element type="window" image="dialog.png"
left_border="7" right_border="7" top_border="7" bottom_border="7"
hborder_out_portion="1.0" vborder_out_portion="0.2" />
<!-- Stateless -->
<element type="tooltip" common="y" image="tooltip.png"
left_border="10" right_border="10" top_border="10" bottom_border="10"
hborder_out_portion="1.0" vborder_out_portion="1.0" />
<!-- Colors -->
<color type="text" state="neutral" r="220" g="220" b="220" />
<color type="brighttext" state="neutral" r="240" g="240" b="240" />
<!-- For highlighted items, e.g. in list -->
<color type="text" state="focused" r="255" g="255" b="255" />
<!-- Color used in the credits -->
<color type="credits_text" state="neutral" r="220" g="220" b="220" />
<!-- Color used for emphasized items in e.g. lists -->
<color type="emphasis_text" state="neutral" r="230" g="210" b="50" />
<color type="emphasis_text" state="focused" r="255" g="226" b="56" />
<!-- Color used for blue items in list (e.g. player team color in networking) -->
<color type="list_blue" state="neutral" r="0" g="0" b="180" />
<color type="list_blue" state="focused" r="0" g="0" b="255" />
<!-- Color used to fade out background when a dialog is shown -->
<color type="dialog_background" state="neutral" a="120" r="0" g="0" b="0" />
<!-- Color used for tips in the loading screen -->
<color type="tips_background" state="neutral" a="120" r="0" g="0" b="0" />
<!-- Text field color -->
<color type="text_field" state="background" a="255" r="35" g="35" b="35" />
<color type="text_field" state="background_focused" a="255" r="15" g="15" b="15" />
<color type="text_field" state="background_deactivated" a="255" r="90" g="90" b="90" />
<color type="text_field" state="background_marked" a="128" r="220" g="220" b="220" />
<color type="text_field" state="neutral" a="255" r="35" g="35" b="35" />
<color type="text_field" state="focused" a="255" r="15" g="15" b="15" />
<color type="text_field" state="deactivated" a="255" r="90" g="90" b="90" />
<!-- Rating star image -->
<element type="rating" state="neutral" common="y" image="rating_star.png" />
<!-- Font color -->
<color type="font" state="top" a="255" r="140" g="140" b="140" />
<color type="font" state="bottom" a="255" r="235" g="235" b="235" />
<color type="font" state="normal" a="255" r="220" g="220" b="220" />
</skin>
Reference in New Issue View Git Blame Copy Permalink