RmlUi/Samples/assets/invader.rcss

@spritesheet theme
{
	src: invader.tga;

	/* For high dpi screens, designates the scaling it is intended to be shown at. */
	resolution: 1x;

	/**
		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. With the origin assumed to be at the top left corner.
	*/
	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:    336px 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;

	button-inner: 259px 19px 135px 1px;
	button-inner-hover:  259px 64px 135px 1px;
	button-inner-active: 259px 109px 135px 1px;

	text-l: 162px 192px 14px 31px;
	text-c: 176px 192px 1px 31px;
	text-focus-l: 162px 230px 14px 31px;
	text-focus-c: 176px 230px 1px 31px;
	textarea: 162px 193px 145px 31px;
	textarea-inner: 173px 206px 127px 10px;
	textarea-focus: 162px 231px 145px 31px;
	textarea-focus-inner: 173px 244px 127px 10px;

	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;

	tableheader-l: 127px 192px 16px 31px;
	tableheader-c: 143px 192px 2px 31px;
	tableheader-r: 145px 192px 15px 31px;

	expand: 3px 232px 17px 17px;
	expand-hover: 21px 232px 17px 17px;
	expand-active: 39px 232px 17px 17px;
	expand-collapsed: 3px 250px 17px 17px;
	expand-collapsed-hover: 21px 250px 17px 17px;
	expand-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;

	range-track:             219px 194px  3px 32px;
	range-track-inner:       220px 204px  1px 14px;
	range-track-focus:       219px 232px  3px 32px;
	range-track-focus-inner: 220px 242px  1px 14px;

	range-bar:         127px 191px 34px 32px;
	range-dec:           3px 232px 17px 17px;
	range-dec-hover:    21px 232px 17px 17px;
	range-dec-active:   39px 232px 17px 17px;
	range-inc:           3px 250px 17px 17px;
	range-inc-hover:    21px 250px 17px 17px;
	range-inc-active:   39px 250px 17px 17px;

	progress-l:      103px 267px 13px 34px;
	progress-c:      116px 267px 54px 34px;
	progress-r:      170px 267px 13px 34px;
	progress-fill-l: 110px 302px  6px 34px;
	progress-fill-c: 140px 302px  6px 34px;
	progress-fill-r: 170px 302px  6px 34px;
	gauge:      0px 271px 100px 86px;
	gauge-fill: 0px 356px 100px 86px;
}

body
{
	font-family: LatoLatin;
	font-weight: normal;
	font-style: normal;
	font-size: 15dp;
	color: white;
	nav: auto;
}

body.window
{
	padding-top: 43dp;
	padding-bottom: 20dp;

	min-width: 250dp;
	max-width: 800dp;

	min-height: 135dp;
	max-height: 700dp;
}

div#title_bar
{
	z-index: 1;

	position: absolute;
	top: 7dp;
	left: 0;

	text-align: left;
	vertical-align: bottom;
}

div#title_bar div#icon
{
	position: absolute;
	left: 15dp;
	top: -4dp;

	width: 51dp;
	height: 39dp;
}


div#title_bar span
{
	padding-left: 85dp;
	padding-right: 25dp;
	padding-top: 18dp;
	padding-bottom: 43dp;

	vertical-align: top;

	line-height: 24dp;
	font-size: 20dp;
	font-weight: bold;

	font-effect: glow(1dp black);
	decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );
}

div#window
{
	width: auto;
	height: 100%;
	padding: 10dp 15dp;

	decorator: tiled-box(
		window-tl, window-t, window-tr,
		window-l, window-c, window-r,
		window-bl, window-b, window-br
	);
}

div#content
{
	z-index: 2;

	width: auto;
	height: 100%;

	overflow: hidden auto;

	text-align: center;
}



p
{
	text-align: left;
	margin-bottom: 1em;
}

h1
{
	margin-left: 0.4em;
	margin-bottom: 0.4em;

	text-align: left;
	font-size: 16dp;
	font-weight: bold;

	font-effect: glow(1dp 1dp 1dp 1dp #1117);
}



input,
select
{
	margin-left: 20dp;
}

input.submit
{
	margin-left: 0;
}

input, button, select {
	nav: auto;
}

button,
input.submit
{
	display: inline-block;

	width: 159dp;
	height: 33dp;
	padding-top: 12dp;

	font-size: 16dp;
	text-align: center;
	tab-index: auto;

	decorator: image(button);
}

button:focus,
input.submit:focus
{
	font-effect: blur(3dp #fff);
}

button:hover, button:focus-visible,
input.submit:hover, input.submit:focus-visible
{
	decorator: image(button-hover);
}

button:active,
input.submit:active
{
	decorator: image(button-active);
}

input.submit:disabled
{
	decorator: image(button);
	image-color: rgba(50, 150, 150, 120);
	cursor: unavailable;
}

input.text, input.password
{
	box-sizing: border-box;
	height: 31dp;
	padding: 11dp 10dp 0;
	decorator: tiled-horizontal( text-l, text-c, auto ); /* Right becomes mirrored left */
	cursor: text;
	text-align: left;
}
input.text:focus-visible, input.password:focus-visible
{
	decorator: tiled-horizontal( text-focus-l, text-focus-c, auto );
}

textarea
{
	padding: 5dp 8dp;
	decorator: ninepatch(textarea, textarea-inner, 1.0) border-box;
	cursor: text;
	text-align: left;
	line-height: 1.3;
	border-width: 14dp 12dp 10dp;
	border-color: transparent;
}
textarea:focus-visible
{
	decorator: ninepatch(textarea-focus, textarea-focus-inner, 1.0) border-box;
}

input.text,
input.password,
select,
textarea
{
	color: #333;
	font-size: 13dp;
}

table input.text
{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1dp 5dp;
	height: auto;
	line-height: 16dp;
	text-align: center;

	border-width: 1dp;
	border-color: black;
	background-color: white;

	font-size: 15dp;
}
table input.text, table input.text:focus-visible
{
	decorator: none;
}


select
{
	width: 175dp;
	height: 37dp;
}

select selectvalue
{
	width: auto;
	margin-right: 30dp;

	height: 25dp;
	padding: 12dp 10dp 0dp 10dp;

	decorator: image( selectvalue );
}
select:focus-visible selectvalue {
	decorator: image( selectvalue-hover );
}

select selectarrow
{
	width: 30dp;
	height: 37dp;

	decorator: image( selectarrow );
}

select:hover selectarrow, select:focus-visible selectarrow
{
	decorator: image( selectarrow-hover );
}

select:active selectarrow,
select selectarrow:checked
{
	decorator: image( selectarrow-active );
}

select selectbox
{
	margin-left: 1dp;
	margin-top: -7dp;
	margin-bottom: -10dp;
	width: 162dp;
	padding: 1dp 4dp 4dp 4dp;
}

select selectbox,
tbody
{
	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
{
	width: auto;
	padding: 3dp 0 3dp 6dp;
	background: #DDDD;
}

select selectbox option:nth-child(even),
tr:nth-child(even)
{
	background: #FFFFFFA0;
}
select selectbox option:checked
{
	font-weight: bold;
}
select selectbox option:hover
{
	background: #FF5D5D;
}



input.radio,
input.checkbox
{
	width: 30dp;
	height: 30dp;

	vertical-align: -11dp;
}

input.radio
{
	decorator: image(radio);
}

input.radio:hover, input.radio:focus-visible
{
	decorator: image(radio-hover);
}

input.radio:active
{
	decorator: image(radio-active);
}

input.radio:checked
{
	decorator: image(radio-checked);
}

input.radio:checked:hover, input.radio:checked:focus-visible
{
	decorator: image(radio-checked-hover);
}

input.radio:checked:active
{
	decorator: image(radio-checked-active);
}

input.checkbox
{
	decorator: image(checkbox);
}

input.checkbox:hover, input.checkbox:focus-visible
{
	decorator: image(checkbox-hover);
}

input.checkbox:active
{
	decorator: image(checkbox-active);
}

input.checkbox:checked
{
	decorator: image(checkbox-checked);
}

input.checkbox:checked:hover, input.checkbox:checked:focus-visible
{
	decorator: image(checkbox-checked-hover);
}

input.checkbox:checked:active
{
	decorator: image(checkbox-checked-active);
}

input.range {
	width: 200dp;
	height: 32dp;
	vertical-align: -12dp;
}
input.range slidertrack {
	margin-top: 3dp;
	height: 22dp;
	image-color: #ecc;
	decorator: ninepatch( range-track, range-track-inner, 1.0 );
}
input.range:focus-visible slidertrack {
	decorator: ninepatch( range-track-focus, range-track-focus-inner, 1.0 );
}
input.range sliderprogress {
	background: rgba(100, 0, 0, 80);
	margin-top: 8dp;
	height: 7dp;
}
input.range sliderbar {
	margin-left: -8dp;
	margin-right: -7dp;
	margin-top: -3dp;
	width: 34dp;
	height: 23dp;
	decorator: image( range-bar );
}
input.range sliderbar:hover, input.range slidertrack:hover + sliderbar  {
	image-color: #cc0;
}
input.range sliderbar:active, input.range slidertrack:active + sliderbar  {
	image-color: #c80;
}
input.range sliderarrowdec, input.range sliderarrowinc {
	width: 17dp;
	height: 17dp;
	margin-top: 6dp;
}
input.range sliderarrowdec        { decorator: image( range-dec        ); }
input.range sliderarrowinc        { decorator: image( range-inc        ); }
input.range sliderarrowdec:hover  { decorator: image( range-dec-hover  ); }
input.range sliderarrowinc:hover  { decorator: image( range-inc-hover  ); }
input.range sliderarrowdec:active { decorator: image( range-dec-active ); }
input.range sliderarrowinc:active { decorator: image( range-inc-active ); }

thead tr {
	height: 35dp;
	decorator: tiled-horizontal( tableheader-l, tableheader-c, tableheader-r );
}
thead td {
	padding-top: 11dp;
}

tbody {
	/* Margin left/right only affects the background positioning for the decorator, not the cell placement */
	margin-left: 5dp;
	margin-right: 4dp;
	/* Padding top/bottom adds extra spacing between the header row and the body, and between the body and table bottom */
	padding-top: 4dp;
	padding-bottom: 4dp;
}
tbody tr {
	margin-left: 9dp;
	margin-right: 8dp;
	color: black;
}


expand
{
	display: block;

	margin: 1dp 0 1dp 5dp;
	height: 17dp;
	width: 17dp;

	decorator: image( expand );
}

expand:hover
{
	decorator: image( expand-hover );
}

expand:active
{
	decorator: image( expand-active  );
}

expand.collapsed
{
	decorator: image( expand-collapsed );
}

expand.collapsed:hover
{
	decorator: image( expand-collapsed-hover );
}

expand.collapsed:active
{
	decorator: image( expand-collapsed-active  );
}


scrollbarvertical
{
	margin-top: -6dp;
	margin-bottom: -6dp;
	margin-right: -11dp;
	width: 27dp;
}

scrollbarvertical slidertrack
{
	decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b );
}
scrollbarvertical slidertrack:active
{
	image-color: #aaa;
}

scrollbarvertical sliderbar
{
	margin-left: 4dp;
	width: 23dp;
	min-height: 46dp;

	decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b );
}
scrollbarvertical sliderbar:hover
{
	decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b );
}
scrollbarvertical sliderbar:active
{
	decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b );
}

scrollbarvertical sliderarrowdec,
scrollbarvertical sliderarrowinc
{
	width: 27dp;
	height: 24dp;
}
scrollbarvertical sliderarrowdec
{
	decorator: image( sliderarrowdec );
}
scrollbarvertical sliderarrowdec:hover
{
	decorator: image( sliderarrowdec-hover );
}
scrollbarvertical sliderarrowdec:active
{
	decorator: image( sliderarrowdec-active );
}

scrollbarvertical sliderarrowinc
{
	decorator: image( sliderarrowinc );
}
scrollbarvertical sliderarrowinc:hover
{
	decorator: image( sliderarrowinc-hover );
}
scrollbarvertical sliderarrowinc:active
{
	decorator: image( sliderarrowinc-active );
}

scrollbarhorizontal
{
	width: 0;
	height: 0;
}

textarea scrollbarvertical
{
	cursor: arrow;
	width: 12dp;
	margin: -3dp -7dp -3dp 7dp;
}
textarea scrollbarvertical slidertrack
{
	decorator: none;
	background-color: #eee;
}
textarea scrollbarvertical sliderbar
{
	decorator: none;
	background-color: #bc0000;
	border-left: 5dp #cc7272;
	width: 7dp;
	min-height: 16dp;
	margin: 0;
}
textarea scrollbarvertical sliderbar:hover
{
	decorator: none;
	background-color: #ca3535;
}

textarea scrollbarvertical sliderbar:active
{
	decorator: none;
	background-color: #880000;
}
textarea scrollbarvertical sliderarrowdec,
textarea scrollbarvertical sliderarrowinc
{
	width: 0;
	height: 0;
}

textarea scrollbarhorizontal
{
	cursor: arrow;
	height: 10dp;
	margin: 3dp -7dp -3dp -3dp;
}
textarea scrollbarhorizontal sliderbar
{
	background-color: #bc0000;
	border-top: 4dp #cc7272;
	height: 6dp;
	min-width: 10dp;
}
textarea scrollbarhorizontal sliderbar:hover
{
	background-color: #ca3535;
}
textarea scrollbarhorizontal sliderbar:active
{
	background-color: #880000;
}
textarea scrollbarhorizontal slidertrack
{
	background-color: #eee;
}

textarea scrollbarcorner
{
	cursor: arrow;
	background-color: #ccc;
	margin-top: 3dp;
	margin-left: 7dp;
}