mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 09:17:56 +01:00
started using LESS for stylesheeting
This commit is contained in:
Adriaan Wormgoor
parent
dd2ca8a1cb
commit
4d54dc56d9
100
less/base.less
Normal file
100
less/base.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
54
less/base_centerpanel.less
Normal file
54
less/base_centerpanel.less
Normal file
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
79
less/base_centerpanel_drawarea.less
Normal file
79
less/base_centerpanel_drawarea.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
15
less/base_centerpanel_logo.less
Normal file
15
less/base_centerpanel_logo.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
43
less/base_leftpanel.less
Normal file
43
less/base_leftpanel.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
67
less/base_rightpanel.less
Normal file
67
less/base_rightpanel.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
21
less/full.less
Normal file
21
less/full.less
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
/*
|
||||||
|
.leftpanel {
|
||||||
|
background-color: #8F8;
|
||||||
|
}
|
||||||
|
.rightpanel {
|
||||||
|
background-color: #4Fc;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.leftpanel {
|
||||||
|
background-color: #0FF;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightpanel {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
*/
|
||||||
130
less/mobile.less
Normal file
130
less/mobile.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
7
less/portrait.less
Normal file
7
less/portrait.less
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
#landscape {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#portrait {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
21
less/styles.less
Normal file
21
less/styles.less
Normal file
@ -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";
|
||||||
|
}
|
||||||
45
lesstocss.sh
Executable file
45
lesstocss.sh
Executable file
@ -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
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user