From 4d54dc56d99103a853897f8591394750e64cdc5a Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Wed, 9 Oct 2013 18:15:47 +0200 Subject: [PATCH] started using LESS for stylesheeting --- less/base.less | 100 +++++++++++++++++++++ less/base_centerpanel.less | 54 ++++++++++++ less/base_centerpanel_drawarea.less | 79 +++++++++++++++++ less/base_centerpanel_logo.less | 15 ++++ less/base_leftpanel.less | 43 +++++++++ less/base_rightpanel.less | 67 ++++++++++++++ less/full.less | 21 +++++ less/mobile.less | 130 ++++++++++++++++++++++++++++ less/portrait.less | 7 ++ less/styles.less | 21 +++++ lesstocss.sh | 45 ++++++++++ 11 files changed, 582 insertions(+) create mode 100644 less/base.less create mode 100644 less/base_centerpanel.less create mode 100644 less/base_centerpanel_drawarea.less create mode 100644 less/base_centerpanel_logo.less create mode 100644 less/base_leftpanel.less create mode 100644 less/base_rightpanel.less create mode 100644 less/full.less create mode 100644 less/mobile.less create mode 100644 less/portrait.less create mode 100644 less/styles.less create mode 100755 lesstocss.sh diff --git a/less/base.less b/less/base.less new file mode 100644 index 0000000..8e2a3fd --- /dev/null +++ b/less/base.less @@ -0,0 +1,100 @@ +/* + + GLOBAL CONTAINER + +*/ +body { + background-color: #fcfcfc; +} +#landscape { + position:absolute; + background-color: #fff; + width: 100%; + max-width: 1024px; + max-height: 768px; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 5; + overflow: hidden; + margin: 0px auto; + outline: 2px solid #5e8c71; + box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); +} +#portrait { + display: none; +} +.bgContainer { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.bgTop, .bgMiddle, .bgBottom { + opacity: 1.0; + transition: opacity .35s linear; + position: absolute; + left: 0px; + z-index: -5; +} +.bgTop { + top: 0px; +} +.bgMiddle { + top: 30%; +} +.bgBottom { + bottom: 0px; +} +.rightpanel, .leftpanel { + img { + cursor: pointer; + } +} + +/* + + CENTER PANEL + +*/ +@import "base_centerpanel.less"; + +/* + + LEFT PANEL + +*/ +@import "base_leftpanel.less"; + +/* + + RIGHT PANEL + +*/ +@import "base_rightpanel.less"; + + + + +/* + + REST + +*/ +/* CLEARFIX */ +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} +.clearfix:after { + clear: both; +} + +/* For IE 6/7 only*/ +.clearfix { + *zoom: 1; +} + + diff --git a/less/base_centerpanel.less b/less/base_centerpanel.less new file mode 100644 index 0000000..10cac8b --- /dev/null +++ b/less/base_centerpanel.less @@ -0,0 +1,54 @@ +// CENTER PANEL +.centerpanel { + position: absolute; + left: 50%; + margin-left: -33%; + width: 66%; + height: 100%; + z-index: 5; +} + + +// top panel +@import "base_centerpanel_logo.less"; + +// draw area stuff (plus up/down/left/right buttons) +@import "base_centerpanel_drawarea.less"; + + +/* + HEIGHT-related RESPONSIVE STUFF +*/ +@media screen and (max-height: 700px) { + .logopanel { + height: 22%; + } + .doodlecontainer { + height: 68%; + } + .d3dlogo { + top: 25%; + max-width: 399px; + height: 74px; + background-image: url('../img/logo/logo_small.png'); + } +} +@media screen and (max-height: 655px) { + .bgMiddle { opacity: 0; } +} + +@media screen and (max-height: 525px) { + .d3dlogo { + max-width: 399px; + top: 20%; + height: 57px; + background-image: url('../img/logo/logo_smaller_wide.png'); + } +} +@media screen and (max-height: 375px) { + .d3dlogo { + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); + } +} \ No newline at end of file diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less new file mode 100644 index 0000000..f68be62 --- /dev/null +++ b/less/base_centerpanel_drawarea.less @@ -0,0 +1,79 @@ +// DRAW AREA +.drawareacontainer { + position: relative; + width: 100%; + height: 65%; + background-color: #fff; + border: 4px solid #000; + border-radius: 15px; + box-sizing: border-box; + z-index: 15px; +} +/* DEBUG THING */ +#preview_tmp { + position: absolute; + top: 0px; + left: 0px; + z-index: 500; + border: 1px solid #f80; + display: none; +} +.bottompanel { + position: relative; + bottom: 0px; + width: 100%; + height: 10%; +} + +/* DOODLE UP/DOWN/LEFT/RIGHT buttons */ +.manipulationBtns { + margin: 2px 5px; + position: absolute; + right: 0; + top: 0; + max-width: 340px; + max-height: 70px; + width: 45%; +} + +.manipulationBtn { + width: 45%; + height: auto; + cursor: pointer; +} + +#btnsUpDown { + float: left; + width: 45%; +} +#btnsUpDown > div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnsTurnLeftRight { + float: right; + width: 45%; +} +#btnsTurnLeftRight >div { + float: left; + padding-right: 8px; + background-repeat: no-repeat; +} + +#btnMoveUp { + max-width: 65px; +} + +#btnMoveDown { + max-width: 64px; +} + +#btnTwistLeft { + max-width: 59px; +} + +#btnTwistRight { + max-width: 64px; +} \ No newline at end of file diff --git a/less/base_centerpanel_logo.less b/less/base_centerpanel_logo.less new file mode 100644 index 0000000..a84a3fd --- /dev/null +++ b/less/base_centerpanel_logo.less @@ -0,0 +1,15 @@ +.logopanel { + height: 25%; +} +.d3dlogo { + position: relative; + top: 15%; + width: 100%; + height: 100%; + margin: 0px auto; + max-width: 399px; + height: 139px; + background: url('../img/logo/logo_full.png') no-repeat center center; + cursor: pointer; +} + diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less new file mode 100644 index 0000000..0729f10 --- /dev/null +++ b/less/base_leftpanel.less @@ -0,0 +1,43 @@ +// LEFT PANEL +.leftpanel { + position: absolute; + width: 17%; +/* background-color: rgba(67, 204, 67, 0.4);*/ + top: 0px; + left: 0px; + bottom: 0px; +} + +.btnNew { + margin: 5% 0% 1% 5%; + width: 100%; + max-width: 180px; + height: auto; +} +.btnsPrevNext { + margin: 1% 7%; + max-width: 160px; +} +.btnPrevious { + width: 40%; + max-width: 56px; + height: auto; +} +.btnNext { + width: 40%; + max-width: 56px; + height: auto; + float: right; +} +.btnSave { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} +.btnOops { + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; +} diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less new file mode 100644 index 0000000..713cf7c --- /dev/null +++ b/less/base_rightpanel.less @@ -0,0 +1,67 @@ +// RIGHT PANEL +.rightpanel { + position: absolute; + width: 17%; +/* background-color: rgba(255, 0, 254, 0.4);*/ + top: 0px; + right: 0px; + bottom: 0px; +} +.btnPrint { + margin: 1% 5% 5% 0%; + width: 100%; + max-width: 163px; + height: auto; + float: right; +} +.btnStop { + margin: 5% 10% 1% 5%; + float: right; + width: 90%; + max-width: 98px; + height: auto; +} +.btnsSettingsInfo { + position: absolute; + bottom: 25px; + right: 5px; + width: 80%; + margin: 1% 5%; + max-width: 160px; +} +.btnInfo { + width: 40%; + max-width: 53px; + height: auto; +} +.btnSettings { + width: 40%; + max-width: 53px; + height: auto; + float: right; +} + + + + +/* + + REST + +*/ +/* CLEARFIX */ +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} +.clearfix:after { + clear: both; +} + +/* For IE 6/7 only*/ +.clearfix { + *zoom: 1; +} + + diff --git a/less/full.less b/less/full.less new file mode 100644 index 0000000..ed712bf --- /dev/null +++ b/less/full.less @@ -0,0 +1,21 @@ +/* +.leftpanel { + background-color: #8F8; +} +.rightpanel { + background-color: #4Fc; +} +*/ + + + +/* +.leftpanel { + background-color: #0FF; + width: 200px; +} + +.rightpanel { + width: 200px; +} +*/ \ No newline at end of file diff --git a/less/mobile.less b/less/mobile.less new file mode 100644 index 0000000..2d381ec --- /dev/null +++ b/less/mobile.less @@ -0,0 +1,130 @@ +/* + TOP LOGO +*/ +.centerpanel { + left: 0; + margin-left: 0; + width: 100%; +/* background-color: rgba(0, 135, 255, 0.4);*/ +} +.logopanel { + height: 40px; +} +.d3dlogo { + top: 0; + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); +} +.doodlecontainer { +/* position: absolute;*/ + height: 85%; +} +/*.bottompanel { + display: none; +}*/ + +/* + LEFT +*/ +.leftpanel { + width: 100px; + background-color: #fff; + z-index: 50; + -webkit-transition: left .15s ease-out; + -moz-transition: left .15s ease-out; + -o-transition: left .15s ease-out; + transition: left .15s ease-out; +} +.hideleft { + left: -101px; +} +.shadowright { + -moz-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); + -webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); + box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnNew { + margin: 5% 5% 1% 5%; + width: 90%; +} +.btnSave { + margin-left: 9%; + width: 75%; +} +.btnOops { + margin-left: 6%; + width: 71%; +} + +/* + RIGHT +*/ +.rightpanel { + width: 100px; + background-color: #fff; + z-index: 50; + -webkit-transition: right .15s ease-out; + -moz-transition: right .15s ease-out; + -o-transition: right .15s ease-out; + transition: right .15s ease-out; +} +.hideright { + right: -101px; +} +.shadowleft { + -moz-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); + -webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); + box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); +} +.btnPrint { + margin: 1% 5% 5% 5%; + width: 90%; +} +.btnStop { + margin: 5% 6% 1% 5%; + width: 70%; +} + + +/* + REST +*/ +.sidebutton { + display: block; + position:absolute; +/* top: 50%;*/ +/* margin-top: -20px;*/ + top: 0px; + /*float:right;*/ + width: 25px; + height: 38px; + border: 1px solid #808; + background: url('../img/arrows.png') no-repeat; + background-color: #eee; +} +.sidebutton:active { + background-color: #aaa; +} + +.leftpanel .sidebutton { + right: -27px; + background-position: 0px 0px; +} +.rightpanel .sidebutton { + left: -27px; + background-position: -25px 0px; +} + + +.leftpanel .sidebuttonin { + background-color: #ccc; + background-position: -25px 0px; +} +.rightpanel .sidebuttonin { + background-color: #ccc; + background-position: -0px 0px; +} +.sidebuttonin:active { + background-color: #888; +} diff --git a/less/portrait.less b/less/portrait.less new file mode 100644 index 0000000..6ead101 --- /dev/null +++ b/less/portrait.less @@ -0,0 +1,7 @@ +#landscape { + display: none; +} + +#portrait { + display: block; +} \ No newline at end of file diff --git a/less/styles.less b/less/styles.less new file mode 100644 index 0000000..23b87c5 --- /dev/null +++ b/less/styles.less @@ -0,0 +1,21 @@ +// IMPORTS +@import "base.less"; + + +// MOBILE +@media only screen and (max-width: 480px), + only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5), + only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) { + @import "mobile.less"; +} + +// FULL +@media only screen and (min-width: 1000px) and (max-device-pixel-ratio : 1.5), + only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio : 1.5) { + @import "full.less"; +} + +// PORTRAIT +@media only screen and (orientation:portrait) { + @import "portrait.less"; +} diff --git a/lesstocss.sh b/lesstocss.sh new file mode 100755 index 0000000..3ad7c74 --- /dev/null +++ b/lesstocss.sh @@ -0,0 +1,45 @@ +#!/bin/bash + +echo 'converting LESS to CSS...' +# generate CSS from LESS +lessc less/styles.less css/styles.css +rm css/styles.min.css + +if [ -n "$1" ]; then + if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $1 = '--minify' ] || [ $1 = '-m' ]; then + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi +fi + + + +if [ -n "$2" ]; then + if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then + echo 'applying prefixr...' + + # prefixed (-s overwrites existing file) + prefixr --input ./css/styles.css -s + fi + if [ $2 = '--minify' ] || [ $2 = '-m' ]; then + echo 'creating minified and prefixed...' + + # copy to .min.css to create a minified version as well + cp css/styles.css css/styles.min.css + + # prefixed and minified (-s overwrites existing file) + prefixr --input ./css/styles.min.css -s -c + fi +fi +