0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00

updates css styles

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

View File

@ -5,34 +5,33 @@
*/
body {
background-color: #fcfcfc;
-moz-user-select: none;
/* disable cut copy paste */
-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 */
overflow: hidden; /* This chops off any overhanging divs */
}
img {
z-index: 5;
/*pointer-events:none;*/
/*-webkit-touch-callout: none; */
z-index: 5; /*pointer-events: none;
*/
/*-webkit-touch-callout: none;
*/
/*disable callout, image save panel */
/*-webkit-tap-highlight-color: transparent; */
/*-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;*/
background-repeat: no-repeat; /* -webkit-user-select: none;
*/
cursor: pointer;
}
#landscape {
position: absolute;
background-color: #fff;
@ -47,39 +46,53 @@ img {
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 {
.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 {
.rightpanel img,.leftpanel img {
cursor: pointer;
}
/*
CENTER PANEL
@ -93,9 +106,11 @@ img {
height: 100%;
z-index: 5;
}
.logopanel {
height: 25%;
}
.d3dlogo {
position: relative;
top: 15%;
@ -107,6 +122,7 @@ img {
background: url('../img/logo/logo_full.png') no-repeat center center;
cursor: pointer;
}
.drawareacontainer {
position: relative;
width: 100%;
@ -114,11 +130,15 @@ img {
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: 15;
z-index: 15px;
}
#canvasContainers {
display: table;
position: absolute;
top: 0;
bottom: 0;
@ -129,32 +149,39 @@ img {
padding: 0;
margin: 0;
}
#mycanvasContainer {
display: table-cell;
width: auto;
position: absolute;
top: 0;
left: 0;
width: 78%;
height: 100%;
}
#mycanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/*float: left;*/
border-right: 2px solid #333;
}
#previewContainer {
display: table-cell;
width: 150px;
position: absolute;
top: 0;
right: 0;
width: 22%;
height: 100%;
}
#preview {
width: 150px;
min-width: 50px;
width: 100%;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
/* DEBUG THING */
#preview_tmp {
position: absolute;
@ -164,12 +191,14 @@ img {
border: 1px solid #f80;
display: none;
}
.bottompanel {
position: relative;
bottom: 0px;
width: 100%;
height: 10%;
}
/*
DOODLE UP/DOWN/LEFT/RIGHT buttons
*/
@ -182,41 +211,51 @@ img {
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
*/
@ -224,21 +263,29 @@ img {
.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;
@ -246,14 +293,18 @@ img {
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
@ -261,46 +312,52 @@ img {
*/
.leftpanel {
position: absolute;
width: 17%;
/* background-color: rgba(67, 204, 67, 0.4);*/
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
@ -308,13 +365,13 @@ img {
*/
.rightpanel {
position: absolute;
width: 17%;
/* background-color: rgba(255, 0, 254, 0.4);*/
width: 17%; /* background-color: rgba(255, 0, 254, 0.4);
*/
top: 0px;
right: 0px;
bottom: 0px;
}
.btnPrint {
margin: 1% 5% 5% 0%;
width: 100%;
@ -322,6 +379,7 @@ img {
height: auto;
float: right;
}
.btnStop {
margin: 5% 10% 1% 5%;
float: right;
@ -329,6 +387,7 @@ img {
max-width: 98px;
height: auto;
}
.btnsSettingsInfo {
position: absolute;
bottom: 25px;
@ -337,17 +396,20 @@ img {
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
@ -362,6 +424,7 @@ img {
font-weight: bold;
display: none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
@ -369,26 +432,22 @@ img {
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;*/
#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
@ -399,12 +458,14 @@ img {
right: 25px;
top: 370px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
/*background: #59b2b8;
*/
/*zoom: 2;
*/
}
/*
REST
@ -412,22 +473,20 @@ img {
*/
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
.clearfix:before,.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 only*/
.clearfix {
*zoom: 1;
}
/*
SETTINGS POPUP
@ -445,6 +504,7 @@ img {
height: 100%;
display: none;
}
#contentOverlay #settings {
background-color: #fff;
position: absolute;
@ -458,6 +518,8 @@ img {
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;
@ -465,16 +527,19 @@ img {
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%;
@ -482,17 +547,22 @@ img {
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%;
@ -505,9 +575,11 @@ img {
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
@ -515,27 +587,34 @@ img {
.centerpanel {
left: 0;
margin-left: 0;
width: 100%;
/* background-color: rgba(0, 135, 255, 0.4);*/
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;*/
.doodlecontainer {
/* position: absolute;
*/
height: 85%;
}
/*.bottompanel {
display: none;
}*/
}
*/
/*
LEFT
*/
@ -543,26 +622,38 @@ img {
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
*/
@ -570,35 +661,44 @@ img {
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;*/
position: absolute; /* top: 50%;
*/
/* margin-top: -20px;
*/
top: 0px; /*float: right;
*/
width: 25px;
height: 38px;
border: 1px solid #808;
@ -606,28 +706,35 @@ img {
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
@ -636,34 +743,35 @@ img {
#contentOverlay {
z-index: 200;
}
#contentOverlay #settings {
width: 87%;
height: 82%;
margin: 6% 4%;
}
#contentOverlay #settings > .right {
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) {
#landscape {
display: none;
}
#portrait {
display: block;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
padding: 0px; /*border: 2px solid #f0f;
*/
max-width: 100%;
height: auto;
width: auto;
/* for ie9 */
width: auto; /* for ie9 */
}
}
}

2
css/styles.min.css vendored

File diff suppressed because one or more lines are too long