0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-16 15:47:55 +01:00
doodle3d-client/css_old/_backup20131011/fixedPosInterface.css.BASE.99789.css

324 lines
5.1 KiB
CSS

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;
}
}