|
|
@@ -1,3 +1,110 @@
|
|
|
+@spritesheet theme
|
|
|
+{
|
|
|
+ src: invader.tga;
|
|
|
+
|
|
|
+ /**
|
|
|
+ The following specifies a list of sprite names and associated rectangles into the image given above.
|
|
|
+ Any sprite given here can be specified in a decorator. Their names must be globally unique.
|
|
|
+ Rectangles are specified as: x y width height.
|
|
|
+ */
|
|
|
+ title-bar-l: 147px 0px 82px 85px;
|
|
|
+ title-bar-c: 229px 0px 1px 85px;
|
|
|
+ title-bar-r: 231px 0px 15px 85px;
|
|
|
+
|
|
|
+ /* huditems are vertically flipped titlebars */
|
|
|
+ huditem-l: 147px 55px 82px -55px;
|
|
|
+ huditem-c: 229px 55px 1px -55px;
|
|
|
+ huditem-r: 231px 55px 15px -55px;
|
|
|
+
|
|
|
+ icon-help: 128px 152px 51px 39px;
|
|
|
+ icon-invader: 179px 152px 51px 39px;
|
|
|
+ icon-game: 230px 152px 51px 39px;
|
|
|
+ icon-hiscore: 281px 152px 51px 39px;
|
|
|
+ icon-waves: 332px 152px 51px 39px;
|
|
|
+ icon-flag: 332px 191px 51px 39px;
|
|
|
+ icon-lives: 383px 152px 51px 39px;
|
|
|
+ icon-score: 434px 152px 51px 39px;
|
|
|
+
|
|
|
+ window-tl: 0px 0px 133px 140px;
|
|
|
+ window-t: 134px 0px 1px 140px;
|
|
|
+ window-tr: 136px 0px 10px 140px;
|
|
|
+ window-l: 0px 139px 10px 1px;
|
|
|
+ window-c: 11px 139px 1px 1px;
|
|
|
+ window-r: 10px 139px -10px 1px; /* mirrored left */
|
|
|
+ window-bl: 0px 140px 11px 11px;
|
|
|
+ window-b: 11px 140px 1px 11px;
|
|
|
+ window-br: 136px 140px 10px 11px;
|
|
|
+
|
|
|
+ button: 247px 0px 159px 45px;
|
|
|
+ button-hover: 247px 45px 159px 45px;
|
|
|
+ button-active: 247px 90px 159px 45px;
|
|
|
+
|
|
|
+ text-l: 162px 192px 14px 31px;
|
|
|
+ text-c: 176px 192px 1px 31px;
|
|
|
+
|
|
|
+ selectbox-tl: 281px 275px 11px 9px;
|
|
|
+ selectbox-t: 292px 275px 1px 9px;
|
|
|
+ selectbox-tr: 294px 275px 11px 9px;
|
|
|
+ selectbox-l: 281px 283px 11px 1px;
|
|
|
+ selectbox-c: 292px 283px 1px 1px;
|
|
|
+ selectbox-bl: 281px 285px 11px 11px;
|
|
|
+ selectbox-b: 292px 285px 1px 11px;
|
|
|
+ selectbox-br: 294px 285px 11px 11px;
|
|
|
+
|
|
|
+ selectvalue: 162px 192px 145px 37px;
|
|
|
+ selectvalue-hover: 162px 230px 145px 37px;
|
|
|
+ selectarrow: 307px 192px 30px 37px;
|
|
|
+ selectarrow-hover: 307px 230px 30px 37px;
|
|
|
+ selectarrow-active: 307px 268px 30px 37px;
|
|
|
+
|
|
|
+ radio: 407px 0px 30px 30px;
|
|
|
+ radio-hover: 437px 0px 30px 30px;
|
|
|
+ radio-active: 467px 0px 30px 30px;
|
|
|
+ radio-checked: 407px 30px 30px 30px;
|
|
|
+ radio-checked-hover: 437px 30px 30px 30px;
|
|
|
+ radio-checked-active: 467px 30px 30px 30px;
|
|
|
+
|
|
|
+ checkbox: 407px 60px 30px 30px;
|
|
|
+ checkbox-hover: 437px 60px 30px 30px;
|
|
|
+ checkbox-active: 467px 60px 30px 30px;
|
|
|
+ checkbox-checked: 407px 90px 30px 30px;
|
|
|
+ checkbox-checked-hover: 437px 90px 30px 30px;
|
|
|
+ checkbox-checked-active: 467px 90px 30px 30px;
|
|
|
+
|
|
|
+ datagridheader-l: 127px 192px 16px 31px;
|
|
|
+ datagridheader-c: 143px 192px 2px 31px;
|
|
|
+ datagridheader-r: 145px 192px 15px 31px;
|
|
|
+
|
|
|
+ datagridexpand: 3px 232px 17px 17px;
|
|
|
+ datagridexpand-hover: 21px 232px 17px 17px;
|
|
|
+ datagridexpand-active: 39px 232px 17px 17px;
|
|
|
+ datagridexpand-collapsed: 3px 250px 17px 17px;
|
|
|
+ datagridexpand-collapsed-hover: 21px 250px 17px 17px;
|
|
|
+ datagridexpand-collapsed-active: 39px 250px 17px 17px;
|
|
|
+
|
|
|
+ slidertrack-t: 70px 199px 27px 2px;
|
|
|
+ slidertrack-c: 70px 201px 27px 1px;
|
|
|
+ slidertrack-b: 70px 202px 27px 2px;
|
|
|
+
|
|
|
+ sliderbar-t: 56px 152px 23px 23px;
|
|
|
+ sliderbar-c: 56px 175px 23px 1px;
|
|
|
+ sliderbar-b: 56px 176px 23px 22px;
|
|
|
+ sliderbar-hover-t: 80px 152px 23px 23px;
|
|
|
+ sliderbar-hover-c: 80px 175px 23px 1px;
|
|
|
+ sliderbar-hover-b: 80px 176px 23px 22px;
|
|
|
+ sliderbar-active-t: 104px 152px 23px 23px;
|
|
|
+ sliderbar-active-c: 104px 175px 23px 1px;
|
|
|
+ sliderbar-active-b: 104px 176px 23px 22px;
|
|
|
+
|
|
|
+ sliderarrowdec: 0px 152px 27px 24px;
|
|
|
+ sliderarrowdec-hover: 0px 177px 27px 24px;
|
|
|
+ sliderarrowdec-active: 0px 202px 27px 24px;
|
|
|
+
|
|
|
+ sliderarrowinc: 28px 152px 27px 24px;
|
|
|
+ sliderarrowinc-hover: 28px 177px 27px 24px;
|
|
|
+ sliderarrowinc-active: 28px 202px 27px 24px;
|
|
|
+}
|
|
|
+
|
|
|
body
|
|
|
{
|
|
|
font-family: Delicious;
|
|
|
@@ -19,8 +126,6 @@ body.window
|
|
|
max-height: 700px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
div#title_bar
|
|
|
{
|
|
|
z-index: 1;
|
|
|
@@ -40,17 +145,15 @@ div#title_bar div#icon
|
|
|
|
|
|
width: 51px;
|
|
|
height: 39px;
|
|
|
-
|
|
|
- icon-decorator: image;
|
|
|
- icon-image-src: invader.tga;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
div#title_bar span
|
|
|
{
|
|
|
padding-left: 85px;
|
|
|
padding-right: 25px;
|
|
|
padding-top: 17px;
|
|
|
- padding-bottom: 48px;
|
|
|
+ padding-bottom: 51px;
|
|
|
|
|
|
font-size: 22px;
|
|
|
font-weight: bold;
|
|
|
@@ -59,28 +162,19 @@ div#title_bar span
|
|
|
outline-width: 1px;
|
|
|
outline-color: black;
|
|
|
|
|
|
- background-decorator: tiled-horizontal;
|
|
|
- background-left-image: invader.tga 147px 0px 229px 85px;
|
|
|
- background-center-image: invader.tga stretch 229px 0px 230px 85px;
|
|
|
- background-right-image: invader.tga 231px 0px 246px 85px;
|
|
|
+ decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
div#window
|
|
|
{
|
|
|
width: auto;
|
|
|
padding: 10px 15px;
|
|
|
-
|
|
|
- background-decorator: tiled-box;
|
|
|
- background-top-left-image: invader.tga 0px 0px 133px 140px;
|
|
|
- background-top-right-image: invader.tga 136px 0px 146px 140px;
|
|
|
- background-top-image: invader.tga stretch 134px 0px 135px 140px;
|
|
|
- background-bottom-left-image: invader.tga 0px 140px 11px 151px;
|
|
|
- background-bottom-right-image: invader.tga 136px 140px 146px 151px;
|
|
|
- background-bottom-image: invader.tga stretch 11px 140px 12px 151px;
|
|
|
- background-left-image: invader.tga stretch 0px 139px 10px 140px;
|
|
|
- background-center-image: invader.tga stretch 11px 139px 12px 140px;
|
|
|
+
|
|
|
+ decorator: tiled-box(
|
|
|
+ window-tl, window-t, window-tr,
|
|
|
+ window-l, window-c, window-r,
|
|
|
+ window-bl, window-b, window-br
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
div#content
|
|
|
@@ -148,8 +242,7 @@ input.submit
|
|
|
text-align: center;
|
|
|
tab-index: auto;
|
|
|
|
|
|
- background-decorator: image;
|
|
|
- background-image: invader.tga 247px 0px 406px 45px;
|
|
|
+ decorator: image(button);
|
|
|
}
|
|
|
|
|
|
button:focus,
|
|
|
@@ -165,18 +258,18 @@ input.submit:focus
|
|
|
button:hover,
|
|
|
input.submit:hover
|
|
|
{
|
|
|
- background-image-t: 45px 90px;
|
|
|
+ decorator: image(button-hover);
|
|
|
}
|
|
|
|
|
|
button:active,
|
|
|
input.submit:active
|
|
|
{
|
|
|
- background-image-t: 90px 135px;
|
|
|
+ decorator: image(button-active);
|
|
|
}
|
|
|
|
|
|
input.submit:disabled
|
|
|
{
|
|
|
- background-image-t: 0px 45px;
|
|
|
+ decorator: image(button);
|
|
|
image-color: rgba(50, 150, 150, 120);
|
|
|
cursor: unavailable;
|
|
|
}
|
|
|
@@ -188,9 +281,7 @@ input.text
|
|
|
height: 31px;
|
|
|
padding: 10px 10px 0px;
|
|
|
|
|
|
- background-decorator: tiled-horizontal;
|
|
|
- background-left-image: invader.tga 162px 192px 176px 223px;
|
|
|
- background-center-image: invader.tga stretch 176px 192px 177px 223px;
|
|
|
+ decorator: tiled-horizontal( text-l, text-c, auto ); /* Right becomes mirrored left */
|
|
|
}
|
|
|
|
|
|
input.text,
|
|
|
@@ -214,7 +305,7 @@ datagrid input.text
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
- background-decorator: none;
|
|
|
+ decorator: none;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -235,14 +326,13 @@ dataselect selectvalue
|
|
|
height: 28px;
|
|
|
padding: 9px 10px 0px 10px;
|
|
|
|
|
|
- background-decorator: image;
|
|
|
- background-image: invader.tga 162px 192px 307px 229px;
|
|
|
+ decorator: image( selectvalue );
|
|
|
}
|
|
|
|
|
|
select selectvalue:hover,
|
|
|
dataselect selectvalue:hover
|
|
|
{
|
|
|
- background-image-t: 230px 267px;
|
|
|
+ decorator: image( selectvalue-hover );
|
|
|
}
|
|
|
|
|
|
select selectarrow,
|
|
|
@@ -251,14 +341,13 @@ dataselect selectarrow
|
|
|
width: 30px;
|
|
|
height: 37px;
|
|
|
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 307px 192px 337px 229px;
|
|
|
+ decorator: image( selectarrow );
|
|
|
}
|
|
|
|
|
|
select selectarrow:hover,
|
|
|
dataselect selectarrow:hover
|
|
|
{
|
|
|
- icon-image-t: 230px 267px;
|
|
|
+ decorator: image( selectarrow-hover );
|
|
|
}
|
|
|
|
|
|
select selectarrow:active,
|
|
|
@@ -266,7 +355,7 @@ select selectarrow:checked,
|
|
|
dataselect selectarrow:active,
|
|
|
dataselect selectarrow:checked
|
|
|
{
|
|
|
- icon-image-t: 268px 305px;
|
|
|
+ decorator: image( selectarrow-active );
|
|
|
}
|
|
|
|
|
|
select selectbox,
|
|
|
@@ -282,15 +371,11 @@ select selectbox,
|
|
|
dataselect selectbox,
|
|
|
datagrid datagridbody
|
|
|
{
|
|
|
- background-decorator: tiled-box;
|
|
|
- background-top-left-image: invader.tga 281px 275px 292px 284px;
|
|
|
- background-top-right-image: invader.tga 294px 275px 305px 284px;
|
|
|
- background-top-image: invader.tga stretch 292px 275px 293px 284px;
|
|
|
- background-bottom-left-image: invader.tga 281px 285px 292px 296px;
|
|
|
- background-bottom-right-image: invader.tga 294px 285px 305px 296px;
|
|
|
- background-bottom-image: invader.tga stretch 292px 285px 293px 296px;
|
|
|
- background-left-image: invader.tga stretch 281px 283px 292px 284px;
|
|
|
- background-center-image: invader.tga stretch 292px 283px 293px 284px;
|
|
|
+ decorator: tiled-box(
|
|
|
+ selectbox-tl, selectbox-t, selectbox-tr,
|
|
|
+ selectbox-l, selectbox-c, auto, /* auto mirrors left */
|
|
|
+ selectbox-bl, selectbox-b, selectbox-br
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
select selectbox option,
|
|
|
@@ -326,82 +411,71 @@ input.checkbox
|
|
|
|
|
|
input.radio
|
|
|
{
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 407px 0px 437px 30px;
|
|
|
+ decorator: image(radio);
|
|
|
}
|
|
|
|
|
|
input.radio:hover
|
|
|
{
|
|
|
- icon-image-s: 437px 467px;
|
|
|
+ decorator: image(radio-hover);
|
|
|
}
|
|
|
|
|
|
input.radio:active
|
|
|
{
|
|
|
- icon-image-s: 467px 497px;
|
|
|
+ decorator: image(radio-active);
|
|
|
}
|
|
|
|
|
|
input.radio:checked
|
|
|
{
|
|
|
- icon-image-t: 30px 60px;
|
|
|
+ decorator: image(radio-checked);
|
|
|
}
|
|
|
|
|
|
input.radio:checked:hover
|
|
|
{
|
|
|
- icon-image-s: 437px 467px;
|
|
|
- icon-image-t: 30px 60px;
|
|
|
+ decorator: image(radio-checked-hover);
|
|
|
}
|
|
|
|
|
|
input.radio:checked:active
|
|
|
{
|
|
|
- icon-image-s: 467px 497px;
|
|
|
- icon-image-t: 30px 60px;
|
|
|
+ decorator: image(radio-checked-active);
|
|
|
}
|
|
|
|
|
|
input.checkbox
|
|
|
{
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 407px 60px 437px 90px;
|
|
|
+ decorator: image(checkbox);
|
|
|
}
|
|
|
|
|
|
input.checkbox:hover
|
|
|
{
|
|
|
- icon-image-s: 437px 467px;
|
|
|
+ decorator: image(checkbox-hover);
|
|
|
}
|
|
|
|
|
|
input.checkbox:active
|
|
|
{
|
|
|
- icon-image-s: 467px 497px;
|
|
|
+ decorator: image(checkbox-active);
|
|
|
}
|
|
|
|
|
|
input.checkbox:checked
|
|
|
{
|
|
|
- icon-image-t: 90px 120px;
|
|
|
+ decorator: image(checkbox-checked);
|
|
|
}
|
|
|
|
|
|
input.checkbox:checked:hover
|
|
|
{
|
|
|
- icon-image-s: 437px 467px;
|
|
|
- icon-image-t: 90px 120px;
|
|
|
+ decorator: image(checkbox-checked-hover);
|
|
|
}
|
|
|
|
|
|
input.checkbox:checked:active
|
|
|
{
|
|
|
- icon-image-s: 467px 497px;
|
|
|
- icon-image-t: 90px 120px;
|
|
|
+ decorator: image(checkbox-checked-active);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
datagrid datagridheader
|
|
|
{
|
|
|
width: auto;
|
|
|
height: 25px;
|
|
|
padding: 5px 10px 0px 10px;
|
|
|
|
|
|
- background-decorator: tiled-horizontal;
|
|
|
- background-left-image: invader.tga 127px 192px 143px 223px;
|
|
|
- background-center-image: invader.tga stretch 143px 192px 145px 223px;
|
|
|
- background-right-image: invader.tga 145px 192px 160px 223px;
|
|
|
+ decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
|
|
|
}
|
|
|
|
|
|
datagrid datagridbody
|
|
|
@@ -423,25 +497,33 @@ datagridexpand
|
|
|
height: 17px;
|
|
|
width: 17px;
|
|
|
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 3px 232px 20px 249px;
|
|
|
+ decorator: image( datagridexpand );
|
|
|
}
|
|
|
|
|
|
datagridexpand:hover
|
|
|
{
|
|
|
- icon-image-s: 21px 38px;
|
|
|
+ decorator: image( datagridexpand-hover );
|
|
|
}
|
|
|
|
|
|
datagridexpand:active
|
|
|
{
|
|
|
- icon-image-s: 39px 56px;
|
|
|
+ decorator: image( datagridexpand-active );
|
|
|
}
|
|
|
|
|
|
datagridexpand.collapsed
|
|
|
{
|
|
|
- icon-image-t: 250px 267px;
|
|
|
+ decorator: image( datagridexpand-collapsed );
|
|
|
}
|
|
|
|
|
|
+datagridexpand.collapsed:hover
|
|
|
+{
|
|
|
+ decorator: image( datagridexpand-collapsed-hover );
|
|
|
+}
|
|
|
+
|
|
|
+datagridexpand.collapsed:active
|
|
|
+{
|
|
|
+ decorator: image( datagridexpand-collapsed-active );
|
|
|
+}
|
|
|
|
|
|
|
|
|
scrollbarvertical
|
|
|
@@ -454,10 +536,11 @@ scrollbarvertical
|
|
|
|
|
|
scrollbarvertical slidertrack
|
|
|
{
|
|
|
- background-decorator: tiled-vertical;
|
|
|
- background-top-image: invader.tga 70px 199px 97px 201px;
|
|
|
- background-center-image: invader.tga stretch 70px 201px 97px 202px;
|
|
|
- background-bottom-image: invader.tga 70px 203px 97px 204px;
|
|
|
+ decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
|
|
|
+}
|
|
|
+scrollbarvertical slidertrack:active
|
|
|
+{
|
|
|
+ image-color: #aaa;
|
|
|
}
|
|
|
|
|
|
scrollbarvertical sliderbar
|
|
|
@@ -466,57 +549,51 @@ scrollbarvertical sliderbar
|
|
|
width: 23px;
|
|
|
min-height: 46px;
|
|
|
|
|
|
- background-decorator: tiled-vertical;
|
|
|
- background-top-image: invader.tga 56px 152px 79px 175px;
|
|
|
- background-center-image: invader.tga stretch 56px 175px 79px 175px;
|
|
|
- background-bottom-image: invader.tga 56px 176px 79px 198px;
|
|
|
+ decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
|
|
|
}
|
|
|
|
|
|
scrollbarvertical sliderbar:hover
|
|
|
{
|
|
|
- background-top-image-s: 80px 103px;
|
|
|
- background-center-image-s: 80px 103px;
|
|
|
- background-bottom-image-s: 80px 103px;
|
|
|
+ decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
|
|
|
}
|
|
|
|
|
|
scrollbarvertical sliderbar:active
|
|
|
{
|
|
|
- background-top-image-s: 104px 127px;
|
|
|
- background-center-image-s: 104px 127px;
|
|
|
- background-bottom-image-s: 104px 127px;
|
|
|
+ decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
|
|
|
}
|
|
|
|
|
|
-scrollbarvertical sliderarrowdec
|
|
|
+scrollbarvertical sliderarrowdec,
|
|
|
+scrollbarvertical sliderarrowinc
|
|
|
{
|
|
|
width: 27px;
|
|
|
height: 24px;
|
|
|
-
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 0px 152px 27px 176px;
|
|
|
}
|
|
|
|
|
|
-scrollbarvertical sliderarrowdec:hover,
|
|
|
-scrollbarvertical sliderarrowinc:hover
|
|
|
+scrollbarvertical sliderarrowdec
|
|
|
{
|
|
|
- icon-image-t: 177px 201px;
|
|
|
+ decorator: image( sliderarrowdec );
|
|
|
}
|
|
|
-
|
|
|
-scrollbarvertical sliderarrowdec:active,
|
|
|
-scrollbarvertical sliderarrowinc:active
|
|
|
+scrollbarvertical sliderarrowdec:hover
|
|
|
{
|
|
|
- icon-image-t: 202px 226px;
|
|
|
+ decorator: image( sliderarrowdec-hover );
|
|
|
+}
|
|
|
+scrollbarvertical sliderarrowdec:active
|
|
|
+{
|
|
|
+ decorator: image( sliderarrowdec-active );
|
|
|
}
|
|
|
|
|
|
scrollbarvertical sliderarrowinc
|
|
|
{
|
|
|
- width: 27px;
|
|
|
- height: 24px;
|
|
|
-
|
|
|
- icon-decorator: image;
|
|
|
- icon-image: invader.tga 28px 152px 55px 176px;
|
|
|
+ decorator: image( sliderarrowinc );
|
|
|
+}
|
|
|
+scrollbarvertical sliderarrowinc:hover
|
|
|
+{
|
|
|
+ decorator: image( sliderarrowinc-hover );
|
|
|
+}
|
|
|
+scrollbarvertical sliderarrowinc:active
|
|
|
+{
|
|
|
+ decorator: image( sliderarrowinc-active );
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
|
|
|
scrollbarhorizontal
|
|
|
{
|