0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-10-05 16:28:37 +02:00

overhaul of client files to 'www' dir. This dir will now as a 'bin' dir of sorts. Outside of the 'www' dir there will be old files, temp files and also shell scripts which support continuous compilation and minification of css and js files

This commit is contained in:
Adriaan Wormgoor 2013-10-21 11:40:38 +02:00
parent 66271c5287
commit 4ec660fd74
103 changed files with 2643 additions and 1 deletions

View File

@ -0,0 +1,179 @@
/*.logo {
background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
}
@media screen and (max-width: 500px) {
.logo {
background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
}
}*/
/*body {*/
/*-moz-user-select: none; *//* disable cut copy paste */
/*-webkit-user-select: none; *//* disable cut copy paste */
/*overflow:hidden; *//* This chops off any overhanging divs */
/*}*/
/*img {*/
/*z-index: 5;*/
/*pointer-events:none;*/
/*-webkit-touch-callout: none; *//**//*disable callout, image save panel */
/*-webkit-tap-highlight-color: transparent; *//**//* "turn off" link highlight */
/*}*/
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
/*.btn {*/
/*background-repeat: no-repeat;*/
/* -webkit-user-select: none;*/
/*cursor: pointer*/
/*}*/
/*
INTERFACE BUTTONS
*/
/*
#btnNew {
left: 10px;
top: 10px;
width: 194px;
height: 170px;
background: url('../img/buttons/btnNew.png') no-repeat;
}
#btnPrevious {
left: 20px;
top: 180px;
z-index: 10;
}
#btnNext {
left: 126px;
top: 186px;
z-index: 10;
}
#btnSave {
left: 20px;
top: 240px;
}
#btnOops {
left: 20px;
top: 450px;
width: 146px;
height: 144px;
background: url('../img/buttons/btnOops.png') no-repeat;
}
*/
/*
#btnPrint {
right: 15px;
top: 15px;
}
#btnStop {
right: 20px;
top: 200px;
}
#btnInfo {
right: 25px;
bottom: 90px;
}
#btnSettings {
right: 25px;
bottom: 20px;
}
*/
/*
DRAW AREA
*/
/*#drawAreaContainer > .manipulationBtns {*/
/*
.drawareacontainer > .manipulationBtns {
margin: 5px;
}
.manipulationBtn {
cursor: pointer;
}
#btnsUpDown {
position: absolute;
right: 200px;
bottom: -75px;
}
#btnsUpDown > div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnsTurnLeftRight {
position: absolute;
right: 20px;
bottom: -75px;
}
#btnsTurnLeftRight >div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnMoveUp {
width: 65px;
height: 61px;
background: url('../img/buttons/btnUp.png');
}
#btnMoveDown {
width: 64px;
height: 63px;
background: url('../img/buttons/btnDown.png');
}
#btnTwistLeft {
width: 59px;
height: 61px;
background: url('../img/buttons/btnTurnLeft.png');
}
#btnTwistRight {
width: 64px;
height: 56px;
background: url('../img/buttons/btnTurnRight.png');
}
*/
/*
#displayTemp {
position: absolute;
right: 55px;
top: 334px;
font-weight: bold;
background: white;
display:none;
}
*/
/*
.disabled {
opacity: 0.3;
cursor: default;
}
#btnStop.disabled {
display: none;
}
*/

View File

@ -0,0 +1,93 @@
/*
#drawAreaContainer {
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
width: 65%;
min-width: 500px;
max-width: 650px;
height: 60%;
min-height: 150px;
max-height: 450px;
border: 4px solid #000;
border-radius: 15px;
overflow: hidden;
z-index: 15;
display: none;
}
#canvasContainers {
display:table;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mycanvasContainer {
display:table-cell;
width: auto;
height: 100%;
}
#mycanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-right: 2px solid #333;
}
#previewContainer {
display:table-cell;
width: 150px;
height: 100%;
}
#preview {
width: 150px;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
*/
/* DEBUG THING */
/*
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
*/
/*
Buttons and logo's
*/
/*
.button {
display: table;
}
*/
/*#d3dlogo {*/
/*position: absolute;*/
/*top: 15px;*/
/*left: 31%;*/
/*width: 399px;*/
/*height: 139px;*/
/*background-image: url('../img/logo_full.png');*/
/*cursor: pointer;*/
/*}*/

View File

@ -0,0 +1,74 @@
#contentOverlay {
background-color: rgba(255, 255, 255, 0.65);
z-index: 20;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display:none;
}
#settings {
background-color: #fff;
z-index: 15;
position: absolute;
top: 50%;
left: 50%;
width: 835px;
height: 500px;
margin: -250px 0 0 -417.5px;
/*padding: 25px;*/
/*overflow: scroll;*/
/*overflow-y: hidden;*/
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
border: 2px solid #222;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#settings header {
margin: 25px 25px 0 25px;
height: 44px;
}
div.content {
margin: 15px 25px 25px 25px;
height: 388px;
display: table;
}
div.content > div {
height: 100%;
}
div.content > div.settings {
border: 1px solid rgb(187, 187, 187);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 660px;
overflow: scroll;
max-height: 368px;
overflow-x: hidden;
padding: 10px 10px 10px 10px;
}
div.content > div.manipulationBtns {
display: table-cell;
vertical-align: bottom;
width: 125px;
}
div.content .btnOK {
width: 85px;
height: 86px;
background: url('../img/buttons/btnOk_settings.png') no-repeat;
margin: 0 0 0 10px;
cursor: pointer;
}

View File

@ -0,0 +1,329 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*#landscape {*/
/*position:relative;*/
/*width: 1024px;*/
/*max-height: 768px;*/
/*background-color: #808;*/
/*border: 10px solid #ff0;*/
/*margin: 0px auto;*/
/*}*/
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
/*background-color: #fff;*/
}
.verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px;
/*background-color: #f0f;*/
cursor: pointer;
}
.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 5px;
top: 360px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {
top: 110px;
height: 350px;
}
}

View File

@ -0,0 +1,329 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*#landscape {*/
/*position:relative;*/
/*width: 1024px;*/
/*max-height: 768px;*/
/*background-color: #808;*/
/*border: 10px solid #ff0;*/
/*margin: 0px auto;*/
/*}*/
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
/*background-color: #fff;*/
}
.verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px;
/*background-color: #f0f;*/
cursor: pointer;
}
.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 5px;
top: 360px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {
top: 110px;
height: 350px;
}
}

View File

@ -0,0 +1,323 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*.big {*/
/*background: #a6e19c;*/
/*border: 1px solid #222;*/
/*height: 64px;*/
/*width: 64px;*/
/*display: table-cell;*/
/*vertical-align: middle;*/
/*text-align: center;*/
/*border-radius: 32px;*/
/*-moz-border-radius: 32px;*/
/*-webkit-border-radius: 32px;*/
/*}*/
/*.small {*/
/*background: #a3d5f7;*/
/*border: 1px solid #222;*/
/*height: 40px;*/
/*width: 40px;*/
/*display: table-cell;*/
/*vertical-align: middle;*/
/*text-align: center;*/
/*border-radius: 20px;*/
/*-moz-border-radius: 20px;*/
/*-webkit-border-radius: 20px;*/
/*}*/
#logo {
position: absolute;
/*left: 50%;*/
/*margin-left: -220px;*/
top: 20px;
left: 315px;
width: 400px;
height: 140px;
}
/*ha {*/
/*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
/*}*/
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.container {
position: fixed;
top: 0px;
left: 0px;
border: 2px solid #333;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#svg {
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 25px;
top: 370px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {
top: 110px;
height: 350px;
}
}

View File

@ -0,0 +1,329 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*#landscape {*/
/*position:relative;*/
/*width: 1024px;*/
/*max-height: 768px;*/
/*background-color: #808;*/
/*border: 10px solid #ff0;*/
/*margin: 0px auto;*/
/*}*/
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
/*background-color: #fff;*/
}
.verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px;
/*background-color: #f0f;*/
cursor: pointer;
}
.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 5px;
top: 360px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;