This commit is contained in:
Mr-Wiseguy 2023-11-20 10:01:45 -05:00
parent f324253052
commit 5e4d826760

574
assets/invader.scss Normal file
View File

@ -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;
}