mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-25 18:47:57 +01:00
58b3a12c6b
---------------------------------------------------------------------- Merge branch 'new_layouting_approach' into feature/printerdriver * new_layouting_approach: (22 commits) changed chmod adjustments to make preview be initialized and updated better (when resizing) updates css styles changes to how the draw and preview canvasses are positioned and initted many updates CSS and LESS files and generally a responsive scaling overhaul of the settings page new LESS simple js lib for managing the folded in/out state of the sidebars on the minimal interface arrow file used in the minimal doodle3d interface the resulting css files which LESS outputs removed this because it's being rolled into the styles.css by LESS moved logos to their own dir + removed a few redundant ones copy normalize.css to the LESS dir since it's a source file smallest size of the doodle3d logo started using LESS for stylesheeting commit of current state of this branch. It's a work-in-progress (comitting because I need to change to other branch) a lot of changes -> almost there but the drawing is not consistent yet across devices. Drawing on the draw canvas is going OK but the preview is not drawing well now. Giving up for now. changes (sry) intermediary progress commented out part of the css (not final solution) added todo for future ...
810 lines
12 KiB
CSS
810 lines
12 KiB
CSS
/*
|
|
|
|
GLOBAL CONTAINER
|
|
|
|
*/
|
|
body {
|
|
background-color: #fcfcfc;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none; /* disable cut copy paste */
|
|
/* 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;
|
|
}
|
|
|
|
#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;
|
|
|
|
-webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
|
|
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 {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
filter: alpha(opacity=100);
|
|
opacity: 1.0;
|
|
|
|
-webkit-transition: opacity .35s linear;
|
|
-moz-transition: opacity .35s linear;
|
|
-o-transition: opacity .35s linear;
|
|
-ms-transition: opacity .35s linear;
|
|
transition: opacity .35s linear;
|
|
position: absolute;
|
|
left: 0px;
|
|
z-index: -5;
|
|
}
|
|
|
|
.bgTop {
|
|
top: 0px;
|
|
}
|
|
|
|
.bgMiddle {
|
|
top: 30%;
|
|
}
|
|
|
|
.bgBottom {
|
|
bottom: 0px;
|
|
}
|
|
|
|
.rightpanel img,.leftpanel img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
|
|
CENTER PANEL
|
|
|
|
*/
|
|
.centerpanel {
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -33%;
|
|
width: 66%;
|
|
height: 100%;
|
|
z-index: 5;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#verticalShapes {
|
|
position: absolute;
|
|
right: -56px;
|
|
bottom: 15px;
|
|
}
|
|
|
|
#verticalShapes .verticalshape {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 2px solid #333;
|
|
border-radius: 0px 5px 5px 0px;
|
|
margin-top: 4px; /*background-color: #f0f;
|
|
*/
|
|
cursor: pointer;
|
|
}
|
|
|
|
#verticalShapes .verticalshape.straight {
|
|
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
}
|
|
|
|
#verticalShapes .verticalshape.diverging {
|
|
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
}
|
|
|
|
#verticalShapes .verticalshape.converging {
|
|
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
}
|
|
|
|
#verticalShapes .verticalshape.sinus {
|
|
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
}
|
|
|
|
.drawareacontainer {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 65%;
|
|
background-color: #fff;
|
|
border: 4px solid #000;
|
|
border-radius: 15px;
|
|
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
z-index: 15px;
|
|
}
|
|
|
|
#canvasContainers {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#mycanvasContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 78%;
|
|
height: 100%;
|
|
}
|
|
|
|
#mycanvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-right: 2px solid #333;
|
|
}
|
|
|
|
#previewContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 22%;
|
|
height: 100%;
|
|
}
|
|
|
|
#preview {
|
|
min-width: 50px;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*
|
|
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 {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity=0);
|
|
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');
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
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;
|
|
}
|
|
|
|
/*
|
|
|
|
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;
|
|
}
|
|
|
|
/*
|
|
|
|
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;
|
|
}
|
|
|
|
.progressAmount {
|
|
margin: 0px 5px;
|
|
}
|
|
|
|
#progressbar {
|
|
position: relative; /*margin-bottom: -20px;
|
|
*/
|
|
width: 0%;
|
|
height: 100%;
|
|
background-color: #4c4;
|
|
border: 0px solid #f0f;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/*
|
|
|
|
THERMOMETER
|
|
|
|
*/
|
|
#thermometerContainer {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 370px;
|
|
}
|
|
|
|
#thermometerCanvas {
|
|
/*background: #59b2b8;
|
|
*/
|
|
/*zoom: 2;
|
|
*/
|
|
}
|
|
|
|
/*
|
|
|
|
REST
|
|
|
|
*/
|
|
/* CLEARFIX */
|
|
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
|
|
.clearfix:before,.clearfix:after {
|
|
content: " "; /* 1 */
|
|
display: table; /* 2 */
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
|
|
/* For IE 6/7 only*/
|
|
.clearfix {
|
|
*zoom: 1;
|
|
}
|
|
|
|
/*
|
|
|
|
SETTINGS POPUP
|
|
|
|
*/
|
|
#contentOverlay {
|
|
background-color: rgba(255, 255, 255, 0.65);
|
|
z-index: 20;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
|
|
#contentOverlay #settings {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 15;
|
|
max-width: 835px;
|
|
max-height: 540px;
|
|
width: 80%;
|
|
height: 75%;
|
|
margin: 7% 8%;
|
|
|
|
-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;
|
|
overflow: hidden;
|
|
display: table;
|
|
padding: 2%;
|
|
}
|
|
|
|
#contentOverlay #settings .settingsLabelContainer {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
#contentOverlay #settings .settingsLabelImg {
|
|
width: 45%;
|
|
max-width: 373px;
|
|
height: auto;
|
|
}
|
|
|
|
#contentOverlay #settings > .content {
|
|
margin: 3% 12%;
|
|
margin-top: 12%;
|
|
max-height: 388px;
|
|
display: table-row;
|
|
width: 100%;
|
|
}
|
|
|
|
#contentOverlay #settings > .content > .settings {
|
|
border: 1px solid #bbbbbb;
|
|
border-radius: 5px;
|
|
overflow: scroll;
|
|
|
|
-ms-overflow-x: hidden;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#contentOverlay #settings > .content > .btnContainer {
|
|
width: 15%;
|
|
position: relative;
|
|
display: table-cell;
|
|
}
|
|
|
|
#contentOverlay #settings > .content > .btnContainer > .btnOK {
|
|
position: absolute;
|
|
bottom: 3%;
|
|
right: 3%;
|
|
max-width: 85px;
|
|
min-width: 42px;
|
|
width: 91%;
|
|
height: auto;
|
|
margin: 0 2% 2% 0;
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
|
|
#contentOverlay #settings > .content > div {
|
|
height: 100%;
|
|
}
|
|
|
|
@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) {
|
|
/*
|
|
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 0.3s ease-out;
|
|
-moz-transition: left 0.3s ease-out;
|
|
-o-transition: left 0.3s ease-out;
|
|
-ms-transition: left 0.3s ease-out;
|
|
transition: left 0.3s ease-out;
|
|
}
|
|
|
|
.hideleft {
|
|
left: -101px;
|
|
}
|
|
|
|
.shadowright {
|
|
-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 0.3s ease-out;
|
|
-moz-transition: right 0.3s ease-out;
|
|
-o-transition: right 0.3s ease-out;
|
|
-ms-transition: right 0.3s ease-out;
|
|
transition: right 0.3s ease-out;
|
|
}
|
|
|
|
.hideright {
|
|
right: -101px;
|
|
}
|
|
|
|
.shadowleft {
|
|
-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;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebutton:active {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
.leftpanel .sidebutton {
|
|
right: -27px;
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
.rightpanel .sidebutton {
|
|
left: -27px;
|
|
background-position: -25px 0px;
|
|
}
|
|
|
|
.sidebuttonin:active {
|
|
background-color: #888;
|
|
}
|
|
|
|
.leftpanel .sidebuttonin {
|
|
background-color: #ccc;
|
|
background-position: -25px 0px;
|
|
}
|
|
|
|
.rightpanel .sidebuttonin {
|
|
background-color: #ccc;
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
/*
|
|
|
|
SETTINGS POPUP -MOBILE
|
|
|
|
*/
|
|
#contentOverlay {
|
|
z-index: 200;
|
|
}
|
|
|
|
#contentOverlay #settings {
|
|
width: 87%;
|
|
height: 82%;
|
|
margin: 6% 4%;
|
|
}
|
|
|
|
#contentOverlay #settings > .right {
|
|
width: 14%;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
#landscape {
|
|
display: none;
|
|
}
|
|
|
|
#portrait {
|
|
display: block;
|
|
}
|
|
|
|
.vertImage {
|
|
margin: 0px;
|
|
padding: 0px; /*border: 2px solid #f0f;
|
|
*/
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: auto; /* for ie9 */
|
|
}
|
|
|
|
}
|