vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

updates css styles

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-11 11:44:28 +02:00
parent 0a44087989
commit 65f43f197f
2 changed files with 634 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
css/styles.css
View File

@ -5,34 +5,33 @@
*/ */
body { body {
background-color: #fcfcfc; background-color: #fcfcfc;
-moz-user-select: none;
/* disable cut copy paste */
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; /* disable cut copy paste */
/* disable cut copy paste */ /* disable cut copy paste */
overflow: hidden; /* This chops off any overhanging divs */
overflow: hidden;
/* This chops off any overhanging divs */
} }
img { img {
z-index: 5; z-index: 5; /*pointer-events: none;
/*pointer-events:none;*/ */
/*-webkit-touch-callout: none;
/*-webkit-touch-callout: none; */ */
/*disable callout, image save panel */ /*disable callout, image save panel */
/*-webkit-tap-highlight-color: transparent;
/*-webkit-tap-highlight-color: transparent; */ */
/* "turn off" link highlight */ /* "turn off" link highlight */
} }
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */ /* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
.btn { .btn {
background-repeat: no-repeat; background-repeat: no-repeat; /* -webkit-user-select: none;
/* -webkit-user-select: none;*/ */
cursor: pointer; cursor: pointer;
} }
#landscape { #landscape {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
@ -47,39 +46,53 @@ img {
overflow: hidden; overflow: hidden;
margin: 0px auto; margin: 0px auto;
outline: 2px solid #5e8c71; 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); box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
} }
#portrait { #portrait {
display: none; display: none;
} }
.bgContainer { .bgContainer {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.bgTop,
.bgMiddle, .bgTop,.bgMiddle,.bgBottom {
.bgBottom { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0; 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; transition: opacity .35s linear;
position: absolute; position: absolute;
left: 0px; left: 0px;
z-index: -5; z-index: -5;
} }
.bgTop { .bgTop {
top: 0px; top: 0px;
} }
.bgMiddle { .bgMiddle {
top: 30%; top: 30%;
} }
.bgBottom { .bgBottom {
bottom: 0px; bottom: 0px;
} }
.rightpanel img,
.leftpanel img { .rightpanel img,.leftpanel img {
cursor: pointer; cursor: pointer;
} }
/* /*
CENTER PANEL CENTER PANEL
@ -93,9 +106,11 @@ img {
height: 100%; height: 100%;
z-index: 5; z-index: 5;
} }
.logopanel { .logopanel {
height: 25%; height: 25%;
} }
.d3dlogo { .d3dlogo {
position: relative; position: relative;
top: 15%; top: 15%;
@ -107,6 +122,7 @@ img {
background: url('../img/logo/logo_full.png') no-repeat center center; background: url('../img/logo/logo_full.png') no-repeat center center;
cursor: pointer; cursor: pointer;
} }
.drawareacontainer { .drawareacontainer {
position: relative; position: relative;
width: 100%; width: 100%;
@ -114,11 +130,15 @@ img {
background-color: #fff; background-color: #fff;
border: 4px solid #000; border: 4px solid #000;
border-radius: 15px; border-radius: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
z-index: 15; z-index: 15px;
} }
#canvasContainers { #canvasContainers {
display: table;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -129,32 +149,39 @@ img {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#mycanvasContainer { #mycanvasContainer {
display: table-cell; position: absolute;
width: auto; top: 0;
left: 0;
width: 78%;
height: 100%; height: 100%;
} }
#mycanvas { #mycanvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
/*float: left;*/
border-right: 2px solid #333; border-right: 2px solid #333;
} }
#previewContainer { #previewContainer {
display: table-cell; position: absolute;
width: 150px; top: 0;
right: 0;
width: 22%;
height: 100%; height: 100%;
} }
#preview { #preview {
width: 150px; min-width: 50px;
width: 100%;
height: 100%; height: 100%;
float: right;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* DEBUG THING */ /* DEBUG THING */
#preview_tmp { #preview_tmp {
position: absolute; position: absolute;
@ -164,12 +191,14 @@ img {
border: 1px solid #f80; border: 1px solid #f80;
display: none; display: none;
} }
.bottompanel { .bottompanel {
position: relative; position: relative;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
height: 10%; height: 10%;
} }
/* /*
DOODLE UP/DOWN/LEFT/RIGHT buttons DOODLE UP/DOWN/LEFT/RIGHT buttons
*/ */
@ -182,41 +211,51 @@ img {
max-height: 70px; max-height: 70px;
width: 45%; width: 45%;
} }
.manipulationBtn { .manipulationBtn {
width: 45%; width: 45%;
height: auto; height: auto;
cursor: pointer; cursor: pointer;
} }
#btnsUpDown { #btnsUpDown {
float: left; float: left;
width: 45%; width: 45%;
} }
#btnsUpDown > div { #btnsUpDown > div {
float: left; float: left;
padding-right: 8px; padding-right: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#btnsTurnLeftRight { #btnsTurnLeftRight {
float: right; float: right;
width: 45%; width: 45%;
} }
#btnsTurnLeftRight > div { #btnsTurnLeftRight > div {
float: left; float: left;
padding-right: 8px; padding-right: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#btnMoveUp { #btnMoveUp {
max-width: 65px; max-width: 65px;
} }
#btnMoveDown { #btnMoveDown {
max-width: 64px; max-width: 64px;
} }
#btnTwistLeft { #btnTwistLeft {
max-width: 59px; max-width: 59px;
} }
#btnTwistRight { #btnTwistRight {
max-width: 64px; max-width: 64px;
} }
/* /*
HEIGHT-related RESPONSIVE STUFF HEIGHT-related RESPONSIVE STUFF
*/ */
@ -224,21 +263,29 @@ img {
.logopanel { .logopanel {
height: 22%; height: 22%;
} }
.doodlecontainer { .doodlecontainer {
height: 68%; height: 68%;
} }
.d3dlogo { .d3dlogo {
top: 25%; top: 25%;
max-width: 399px; max-width: 399px;
height: 74px; height: 74px;
background-image: url('../img/logo/logo_small.png'); background-image: url('../img/logo/logo_small.png');
} }
} }
@media screen and (max-height: 655px) { @media screen and (max-height: 655px) {
.bgMiddle { .bgMiddle {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0; opacity: 0;
} }
} }
@media screen and (max-height: 525px) { @media screen and (max-height: 525px) {
.d3dlogo { .d3dlogo {
max-width: 399px; max-width: 399px;
@ -246,14 +293,18 @@ img {
height: 57px; height: 57px;
background-image: url('../img/logo/logo_smaller_wide.png'); background-image: url('../img/logo/logo_smaller_wide.png');
} }
} }
@media screen and (max-height: 375px) { @media screen and (max-height: 375px) {
.d3dlogo { .d3dlogo {
max-width: 399px; max-width: 399px;
height: 40px; height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png'); background-image: url('../img/logo/logo_smallest_wide.png');
} }
} }
/* /*
LEFT PANEL LEFT PANEL
@ -261,46 +312,52 @@ img {
*/ */
.leftpanel { .leftpanel {
position: absolute; position: absolute;
width: 17%; width: 17%; /* background-color: rgba(67, 204, 67, 0.4);
/* background-color: rgba(67, 204, 67, 0.4);*/ */
top: 0px; top: 0px;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
} }
.btnNew { .btnNew {
margin: 5% 0% 1% 5%; margin: 5% 0% 1% 5%;
width: 100%; width: 100%;
max-width: 180px; max-width: 180px;
height: auto; height: auto;
} }
.btnsPrevNext { .btnsPrevNext {
margin: 1% 7%; margin: 1% 7%;
max-width: 160px; max-width: 160px;
} }
.btnPrevious { .btnPrevious {
width: 40%; width: 40%;
max-width: 56px; max-width: 56px;
height: auto; height: auto;
} }
.btnNext { .btnNext {
width: 40%; width: 40%;
max-width: 56px; max-width: 56px;
height: auto; height: auto;
float: right; float: right;
} }
.btnSave { .btnSave {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
width: 90%; width: 90%;
max-width: 144px; max-width: 144px;
height: auto; height: auto;
} }
.btnOops { .btnOops {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
width: 90%; width: 90%;
max-width: 144px; max-width: 144px;
height: auto; height: auto;
} }
/* /*
RIGHT PANEL RIGHT PANEL
@ -308,13 +365,13 @@ img {
*/ */
.rightpanel { .rightpanel {
position: absolute; position: absolute;
width: 17%; width: 17%; /* background-color: rgba(255, 0, 254, 0.4);
/* background-color: rgba(255, 0, 254, 0.4);*/ */
top: 0px; top: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
} }
.btnPrint { .btnPrint {
margin: 1% 5% 5% 0%; margin: 1% 5% 5% 0%;
width: 100%; width: 100%;
@ -322,6 +379,7 @@ img {
height: auto; height: auto;
float: right; float: right;
} }
.btnStop { .btnStop {
margin: 5% 10% 1% 5%; margin: 5% 10% 1% 5%;
float: right; float: right;
@ -329,6 +387,7 @@ img {
max-width: 98px; max-width: 98px;
height: auto; height: auto;
} }
.btnsSettingsInfo { .btnsSettingsInfo {
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
@ -337,17 +396,20 @@ img {
margin: 1% 5%; margin: 1% 5%;
max-width: 160px; max-width: 160px;
} }
.btnInfo { .btnInfo {
width: 40%; width: 40%;
max-width: 53px; max-width: 53px;
height: auto; height: auto;
} }
.btnSettings { .btnSettings {
width: 40%; width: 40%;
max-width: 53px; max-width: 53px;
height: auto; height: auto;
float: right; float: right;
} }
/* /*
PRINT PROGRESS DISPLAY PRINT PROGRESS DISPLAY
@ -362,6 +424,7 @@ img {
font-weight: bold; font-weight: bold;
display: none; display: none;
} }
#progressbarContainer { #progressbarContainer {
margin: 3px 0px; margin: 3px 0px;
width: inherit; width: inherit;
@ -369,26 +432,22 @@ img {
background-color: #fff; background-color: #fff;
border: 2px solid #333; border: 2px solid #333;
border-radius: 5px; border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
.progressAmount { .progressAmount {
margin: 0px 5px; margin: 0px 5px;
} }
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
#progressbar {
position: relative; /*margin-bottom: -20px;
*/
width: 0%; width: 0%;
height: 100%; height: 100%;
background-color: #4c4; background-color: #4c4;
border: 0px solid #f0f; border: 0px solid #f0f;
border-radius: 3px; border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
} }
/* /*
THERMOMETER THERMOMETER
@ -399,12 +458,14 @@ img {
right: 25px; right: 25px;
top: 370px; top: 370px;
} }
#thermometerCanvas { #thermometerCanvas {
/*background: #59b2b8;*/ /*background: #59b2b8;
*/
/*zoom: 2;*/ /*zoom: 2;
*/
} }
/* /*
REST REST
@ -412,22 +473,20 @@ img {
*/ */
/* CLEARFIX */ /* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */ /* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:before,.clearfix:after {
.clearfix:after { content: " "; /* 1 */
content: " "; display: table; /* 2 */
/* 1 */
display: table;
/* 2 */
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
/* For IE 6/7 only*/ /* For IE 6/7 only*/
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
/* /*
SETTINGS POPUP SETTINGS POPUP
@ -445,6 +504,7 @@ img {
height: 100%; height: 100%;
display: none; display: none;
} }
#contentOverlay #settings { #contentOverlay #settings {
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
@ -458,6 +518,8 @@ img {
width: 80%; width: 80%;
height: 75%; height: 75%;
margin: 7% 8%; 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); box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
border: 2px solid #222; border: 2px solid #222;
border-radius: 15px; border-radius: 15px;
@ -465,16 +527,19 @@ img {
display: table; display: table;
padding: 2%; padding: 2%;
} }
#contentOverlay #settings .settingsLabelContainer { #contentOverlay #settings .settingsLabelContainer {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 1%; margin-bottom: 1%;
} }
#contentOverlay #settings .settingsLabelImg { #contentOverlay #settings .settingsLabelImg {
width: 45%; width: 45%;
max-width: 373px; max-width: 373px;
height: auto; height: auto;
} }
#contentOverlay #settings > .content { #contentOverlay #settings > .content {
margin: 3% 12%; margin: 3% 12%;
margin-top: 12%; margin-top: 12%;
@ -482,17 +547,22 @@ img {
display: table-row; display: table-row;
width: 100%; width: 100%;
} }
#contentOverlay #settings > .content > .settings { #contentOverlay #settings > .content > .settings {
border: 1px solid #bbbbbb; border: 1px solid #bbbbbb;
border-radius: 5px; border-radius: 5px;
overflow: scroll; overflow: scroll;
-ms-overflow-x: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
#contentOverlay #settings > .content > .btnContainer { #contentOverlay #settings > .content > .btnContainer {
width: 15%; width: 15%;
position: relative; position: relative;
display: table-cell; display: table-cell;
} }
#contentOverlay #settings > .content > .btnContainer > .btnOK { #contentOverlay #settings > .content > .btnContainer > .btnOK {
position: absolute; position: absolute;
bottom: 3%; bottom: 3%;
@ -505,9 +575,11 @@ img {
cursor: pointer; cursor: pointer;
float: right; float: right;
} }
#contentOverlay #settings > .content > div { #contentOverlay #settings > .content > div {
height: 100%; 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) { @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 TOP LOGO
@ -515,27 +587,34 @@ img {
.centerpanel { .centerpanel {
left: 0; left: 0;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%; /* background-color: rgba(0, 135, 255, 0.4);
/* background-color: rgba(0, 135, 255, 0.4);*/ */
} }
.logopanel { .logopanel {
height: 40px; height: 40px;
} }
.d3dlogo { .d3dlogo {
top: 0; top: 0;
max-width: 399px; max-width: 399px;
height: 40px; height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png'); background-image: url('../img/logo/logo_smallest_wide.png');
} }
.doodlecontainer {
/* position: absolute;*/
.doodlecontainer {
/* position: absolute;
*/
height: 85%; height: 85%;
} }
/*.bottompanel { /*.bottompanel {
display: none; display: none;
}*/
}
*/
/* /*
LEFT LEFT
*/ */
@ -543,26 +622,38 @@ img {
width: 100px; width: 100px;
background-color: #fff; background-color: #fff;
z-index: 50; 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; transition: left 0.3s ease-out;
} }
.hideleft { .hideleft {
left: -101px; left: -101px;
} }
.shadowright { .shadowright {
-webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
} }
.btnNew { .btnNew {
margin: 5% 5% 1% 5%; margin: 5% 5% 1% 5%;
width: 90%; width: 90%;
} }
.btnSave { .btnSave {
margin-left: 9%; margin-left: 9%;
width: 75%; width: 75%;
} }
.btnOops { .btnOops {
margin-left: 6%; margin-left: 6%;
width: 71%; width: 71%;
} }
/* /*
RIGHT RIGHT
*/ */
@ -570,35 +661,44 @@ img {
width: 100px; width: 100px;
background-color: #fff; background-color: #fff;
z-index: 50; 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; transition: right 0.3s ease-out;
} }
.hideright { .hideright {
right: -101px; right: -101px;
} }
.shadowleft { .shadowleft {
-webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
} }
.btnPrint { .btnPrint {
margin: 1% 5% 5% 5%; margin: 1% 5% 5% 5%;
width: 90%; width: 90%;
} }
.btnStop { .btnStop {
margin: 5% 6% 1% 5%; margin: 5% 6% 1% 5%;
width: 70%; width: 70%;
} }
/* /*
REST REST
*/ */
.sidebutton { .sidebutton {
display: block; display: block;
position: absolute; position: absolute; /* top: 50%;
/* top: 50%;*/ */
/* margin-top: -20px;
/* margin-top: -20px;*/ */
top: 0px; /*float: right;
top: 0px; */
/*float:right;*/
width: 25px; width: 25px;
height: 38px; height: 38px;
border: 1px solid #808; border: 1px solid #808;
@ -606,28 +706,35 @@ img {
background-color: #eee; background-color: #eee;
cursor: pointer; cursor: pointer;
} }
.sidebutton:active { .sidebutton:active {
background-color: #aaa; background-color: #aaa;
} }
.leftpanel .sidebutton { .leftpanel .sidebutton {
right: -27px; right: -27px;
background-position: 0px 0px; background-position: 0px 0px;
} }
.rightpanel .sidebutton { .rightpanel .sidebutton {
left: -27px; left: -27px;
background-position: -25px 0px; background-position: -25px 0px;
} }
.sidebuttonin:active { .sidebuttonin:active {
background-color: #888; background-color: #888;
} }
.leftpanel .sidebuttonin { .leftpanel .sidebuttonin {
background-color: #ccc; background-color: #ccc;
background-position: -25px 0px; background-position: -25px 0px;
} }
.rightpanel .sidebuttonin { .rightpanel .sidebuttonin {
background-color: #ccc; background-color: #ccc;
background-position: 0px 0px; background-position: 0px 0px;
} }
/* /*
SETTINGS POPUP -MOBILE SETTINGS POPUP -MOBILE
@ -636,34 +743,35 @@ img {
#contentOverlay { #contentOverlay {
z-index: 200; z-index: 200;
} }
#contentOverlay #settings { #contentOverlay #settings {
width: 87%; width: 87%;
height: 82%; height: 82%;
margin: 6% 4%; margin: 6% 4%;
} }
#contentOverlay #settings > .right { #contentOverlay #settings > .right {
width: 14%; width: 14%;
} }
}
@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) {
} }
@media only screen and (orientation: portrait) { @media only screen and (orientation: portrait) {
#landscape { #landscape {
display: none; display: none;
} }
#portrait { #portrait {
display: block; display: block;
} }
.vertImage { .vertImage {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px; /*border: 2px solid #f0f;
/*border: 2px solid #f0f;*/ */
max-width: 100%; max-width: 100%;
height: auto; height: auto;
width: auto; width: auto; /* for ie9 */
/* for ie9 */ }
} }
}

2
css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long