From 5e4d826760526c4ffd4ac810a1384cd63836b509 Mon Sep 17 00:00:00 2001
From: Mr-Wiseguy <mrwiseguyromhacking@gmail.com>
Date: Mon, 20 Nov 2023 10:01:45 -0500
Subject: [PATCH] Add scss

---
 assets/invader.scss | 574 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 574 insertions(+)
 create mode 100644 assets/invader.scss

diff --git a/assets/invader.scss b/assets/invader.scss
new file mode 100644
index 0000000..0734c7d
--- /dev/null
+++ b/assets/invader.scss
@@ -0,0 +1,574 @@
+$font-stack: LatoLatin;
+$font-size: 20dp;
+
+body
+{
+	font-family: $font-stack;
+	font-weight: normal;
+	font-style: normal;
+	font-size: $font-size;
+	color: white;
+}
+
+// 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: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10dp 15dp;
+
+	// decorator: tiled-box(
+	// 	window-tl, window-t, window-tr,
+	// 	window-l, window-c, window-r,
+	// 	window-bl, window-b, window-br
+	// );
+	background-color: rgb(0, 65, 100);
+	border-color: rgb(255, 0, 0);
+}
+
+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;
+}
+
+
+
+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,
+input.submit:hover
+{
+	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;
+}
+
+textarea
+{
+	padding: 14dp 12dp 10dp;
+	decorator: ninepatch( textarea, textarea-inner, 1.0 );
+	cursor: text;
+	text-align: left;
+}
+
+input.text,
+input.password,
+select,
+textarea
+{
+	color: #333;
+	font-size: 13dp;
+}
+
+table input.text
+{
+	box-sizing: border-box;
+	width: 100%;
+	height: 18dp;
+	margin: 0;
+	padding: 0 5dp;
+	line-height: 1.0;
+
+	border-width: 1dp;
+	border-color: black;
+	background-color: white;
+
+	font-size: 15dp;
+
+	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 selectarrow
+{
+	width: 30dp;
+	height: 37dp;
+
+	decorator: image( selectarrow );
+}
+
+select:hover 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
+{
+	decorator: image(radio-hover);
+}
+
+input.radio:active
+{
+	decorator: image(radio-active);
+}
+
+input.radio:checked
+{
+	decorator: image(radio-checked);
+}
+
+input.radio:checked:hover
+{
+	decorator: image(radio-checked-hover);
+}
+
+input.radio:checked:active
+{
+	decorator: image(radio-checked-active);
+}
+
+input.checkbox
+{
+	decorator: image(checkbox);
+}
+
+input.checkbox:hover
+{
+	decorator: image(checkbox-hover);
+}
+
+input.checkbox:active
+{
+	decorator: image(checkbox-active);
+}
+
+input.checkbox:checked
+{
+	decorator: image(checkbox-checked);
+}
+
+input.checkbox:checked:hover
+{
+	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 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;
+	margin: 10dp 0 4dp 0;
+	width: 12dp;
+}
+textarea scrollbarvertical slidertrack
+{
+	decorator: none;
+}
+textarea scrollbarvertical sliderbar
+{
+	margin-left: 2dp;
+	width: 10dp;
+	min-height: 16dp;
+}
+textarea scrollbarvertical sliderarrowdec,
+textarea scrollbarvertical sliderarrowinc
+{
+	width: 0;
+	height: 0;
+}
+
+textarea scrollbarhorizontal
+{
+	cursor: arrow;
+	margin-left: 7dp;
+	height: 12dp;
+}
+textarea scrollbarhorizontal sliderbar
+{
+	background-color: #BC0000CC;
+	height: 8dp;
+	min-width: 10dp;
+}
+textarea scrollbarhorizontal sliderbar:hover
+{
+	background-color: #B82500CC;
+}
+textarea scrollbarhorizontal sliderbar:active
+{
+	background-color: #770000CC;
+}