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