diff --git a/css/d3d_btns.css b/css/d3d_btns.css
deleted file mode 100644
index da0f5a1..0000000
--- a/css/d3d_btns.css
+++ /dev/null
@@ -1,173 +0,0 @@
-/*.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 */
-}
-
-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;
- 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;
-/* bottom: 150px;*/
- 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 {
- 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');
-}
-
-.btn {
- position: absolute;
- -webkit-user-select: none;
- cursor: pointer;
-}
-#displayTemp {
- position: absolute;
- right: 55px;
- top: 334px;
- font-weight: bold;
- background: white;
- display:none;
-}
-
-.disabled {
- opacity: 0.3;
- cursor: default;
-}
-
-#btnStop.disabled {
- display: none;
-}
\ No newline at end of file
diff --git a/css/debug.css b/css/debug.css
index 7aeaa36..d30fee8 100644
--- a/css/debug.css
+++ b/css/debug.css
@@ -1,15 +1,17 @@
.debugContainer {
position: absolute;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
z-index: 500;
+ background-color: #f0f;
display: none;
}
#debug_textArea {
position:absolute;
bottom: 0;
- width: 800px;
+ /*width: 800px; */
+ z-index: 500;
display: none;
}
diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css
deleted file mode 100644
index 866ccf2..0000000
--- a/css/fixedPosInterface.css
+++ /dev/null
@@ -1,334 +0,0 @@
-body {
-/* This chops off any overhanging divs */
- overflow:hidden;
-}
-
-
- /* 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;
- }
-}
-
-/*
-
- Containers and content blocks
-
-*/
-#landscape {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- max-width: 1024px;
- min-width: 900px;
- min-height: 500px;
- max-height: 768px;
- margin: 0px auto;
-}
-/* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */
-#landscape:before {
- content:' ';
- display:block;
- position:absolute;
- left:0;
- top:0;
- right:0;
- bottom:0;
- border: 2px solid #333;
-}
-
-.uiButtonsContainer {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
-}
-
-#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;
- /*float: left;*/
- 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;
-}
-
-.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);
- }
- #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;
- }
-
- #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 {
- -moz-transform: translate(-5px,-10px);
- }
-
- /*#drawAreaContainer {*/
- /*top: 110px;*/
- /*height: 350px;*/
- /*}*/
-}
-
-
-
diff --git a/css/settings.css b/css/settings.css
index 829c410..55cc34d 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -9,17 +9,28 @@ body,th,td {
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
font-size: 13px;
}
+.settingsContainer {
+ position:relative;
+ max-width: 600px;
+ /*min-width: 370px;*/
+ width: 100%;
+ height: 100%;
+}
+/*form#settingsForm {*/
+ /*width: 100% auto;*/
+/*}*/
form fieldset {
- width: 600px;
+ max-width: 600px;
border: 1px solid rgb(187, 187, 187);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
- padding: 8px 0 8px 8px;
+ padding: 8px;
+ /*padding-right: 8px;*/
}
form fieldset fieldset{
- width: 580px;
+ max-width: 580px;
margin: 15px 0 5px 0;
clear: left;
float: left;
@@ -60,11 +71,15 @@ form textarea {
-moz-border-radius: 5px;
border-radius: 5px;
}
-form textarea.gcode {
- width: 270px;
- height: 150px;
+form .startgcode_left {
+ float:left;
margin-right: 20px;
}
+form textarea.gcode {
+ max-width: 262px;
+ min-width: 200px;
+ height: 150px;
+}
form small {
margin: 3px 0 0 0;
display: block;
diff --git a/css/settingsPopup.css b/css/settingsPopup.css
deleted file mode 100644
index 95b407b..0000000
--- a/css/settingsPopup.css
+++ /dev/null
@@ -1,74 +0,0 @@
-#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;
-}
diff --git a/css/styles.css b/css/styles.css
index 88ba6b9..8c1813b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,243 +1,3 @@
-/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
- display: block;
-}
-audio,
-canvas,
-video {
- display: inline-block;
- *display: inline;
- *zoom: 1;
-}
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-[hidden] {
- display: none;
-}
-html {
- font-size: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-html,
-button,
-input,
-select,
-textarea {
- font-family: sans-serif;
-}
-body {
- margin: 0;
-}
-a:focus {
- outline: thin dotted;
-}
-a:active,
-a:hover {
- outline: 0;
-}
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-h2 {
- font-size: 1.5em;
- margin: 0.83em 0;
-}
-h3 {
- font-size: 1.17em;
- margin: 1em 0;
-}
-h4 {
- font-size: 1em;
- margin: 1.33em 0;
-}
-h5 {
- font-size: .83em;
- margin: 1.67em 0;
-}
-h6 {
- font-size: .67em;
- margin: 2.33em 0;
-}
-abbr[title] {
- border-bottom: 1px dotted;
-}
-b,
-strong {
- font-weight: 700;
-}
-blockquote {
- margin: 1em 40px;
-}
-dfn {
- font-style: italic;
-}
-mark {
- background: #ff0;
- color: #000000;
-}
-p,
-pre {
- margin: 1em 0;
-}
-code,
-kbd,
-pre,
-samp {
- font-family: monospace,serif;
- _font-family: 'courier new', monospace;
- font-size: 1em;
-}
-pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-q {
- quotes: none;
-}
-q:before,
-q:after {
- content: '';
- content: none;
-}
-small {
- font-size: 80%;
-}
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-sup {
- top: -0.5em;
-}
-sub {
- bottom: -0.25em;
-}
-dl,
-menu,
-ol,
-ul {
- margin: 1em 0;
-}
-dd {
- margin: 0 0 0 40px;
-}
-menu,
-ol,
-ul {
- padding: 0 0 0 40px;
-}
-nav ul,
-nav ol {
- list-style: none;
- list-style-image: none;
-}
-img {
- border: 0;
- -ms-interpolation-mode: bicubic;
-}
-svg:not(:root) {
- overflow: hidden;
-}
-figure {
- margin: 0;
-}
-form {
- margin: 0;
-}
-fieldset {
- border: 1px solid silver;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
-}
-legend {
- border: 0;
- padding: 0;
- white-space: normal;
- *margin-left: -7px;
-}
-button,
-input,
-select,
-textarea {
- font-size: 100%;
- margin: 0;
- vertical-align: baseline;
- *vertical-align: middle;
-}
-button,
-input {
- line-height: normal;
-}
-button,
-html input[type=button],
-input[type=reset],
-input[type=submit] {
- -webkit-appearance: button;
- cursor: pointer;
- *overflow: visible;
-}
-button[disabled],
-input[disabled] {
- cursor: default;
-}
-input[type=checkbox],
-input[type=radio] {
- box-sizing: border-box;
- padding: 0;
- *height: 13px;
- *width: 13px;
-}
-input[type=search] {
- -webkit-appearance: textfield;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
-}
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-textarea {
- overflow: auto;
- vertical-align: top;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-.cf {
- *zoom: 1;
-}
-.cf:before,
-.cf:after {
- content: " ";
- display: table;
-}
-.cf:after {
- clear: both;
-}
/*
GLOBAL CONTAINER
@@ -245,6 +5,33 @@ table {
*/
body {
background-color: #fcfcfc;
+ -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;
}
#landscape {
position: absolute;
@@ -328,7 +115,45 @@ body {
border: 4px solid #000;
border-radius: 15px;
box-sizing: border-box;
- z-index: 15px;
+ z-index: 15;
+}
+#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;
+ /*float: left;*/
+
+ 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 {
@@ -345,7 +170,9 @@ body {
width: 100%;
height: 10%;
}
-/* DOODLE UP/DOWN/LEFT/RIGHT buttons */
+/*
+ DOODLE UP/DOWN/LEFT/RIGHT buttons
+*/
.manipulationBtns {
margin: 2px 5px;
position: absolute;
@@ -521,12 +348,70 @@ body {
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;
+ -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;*/
+
+}
/*
REST
*/
/* CLEARFIX */
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
@@ -545,25 +430,83 @@ body {
}
/*
- REST
+ SETTINGS POPUP
*/
-/* CLEARFIX */
-.clearfix:before,
-.clearfix:after {
- content: " ";
- /* 1 */
-
+#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%;
+ box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ border: 2px solid #222;
+ border-radius: 15px;
+ overflow: hidden;
display: table;
- /* 2 */
-
+ padding: 2%;
}
-.clearfix:after {
- clear: both;
+#contentOverlay #settings .settingsLabelContainer {
+ width: 100%;
+ height: auto;
+ margin-bottom: 1%;
}
-/* For IE 6/7 only*/
-.clearfix {
- *zoom: 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;
+ 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) {
/*
@@ -600,7 +543,7 @@ body {
width: 100px;
background-color: #fff;
z-index: 50;
- transition: left 0.15s ease-out;
+ transition: left 0.3s ease-out;
}
.hideleft {
left: -101px;
@@ -627,7 +570,7 @@ body {
width: 100px;
background-color: #fff;
z-index: 50;
- transition: right 0.15s ease-out;
+ transition: right 0.3s ease-out;
}
.hideright {
right: -101px;
@@ -661,6 +604,7 @@ body {
border: 1px solid #808;
background: url('../img/arrows.png') no-repeat;
background-color: #eee;
+ cursor: pointer;
}
.sidebutton:active {
background-color: #aaa;
@@ -673,6 +617,9 @@ body {
left: -27px;
background-position: -25px 0px;
}
+ .sidebuttonin:active {
+ background-color: #888;
+ }
.leftpanel .sidebuttonin {
background-color: #ccc;
background-position: -25px 0px;
@@ -681,29 +628,25 @@ body {
background-color: #ccc;
background-position: 0px 0px;
}
- .sidebuttonin:active {
- background-color: #888;
+ /*
+
+ 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 (min-width: 1000px) and (max-device-pixel-ratio: 1.5), only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5) {
- /*
- .leftpanel {
- background-color: #8F8;
- }
- .rightpanel {
- background-color: #4Fc;
- }
- */
- /*
- .leftpanel {
- background-color: #0FF;
- width: 200px;
- }
- .rightpanel {
- width: 200px;
- }
- */
}
@media only screen and (orientation: portrait) {
#landscape {
@@ -712,4 +655,15 @@ body {
#portrait {
display: block;
}
+ .vertImage {
+ margin: 0px;
+ padding: 0px;
+ /*border: 2px solid #f0f;*/
+
+ max-width: 100%;
+ height: auto;
+ width: auto;
+ /* for ie9 */
+
+ }
}
diff --git a/less/base.less b/less/base.less
index 8e2a3fd..70c6abf 100644
--- a/less/base.less
+++ b/less/base.less
@@ -5,6 +5,21 @@
*/
body {
background-color: #fcfcfc;
+ -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
}
#landscape {
position:absolute;
@@ -83,6 +98,7 @@ body {
*/
/* CLEARFIX */
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
@@ -97,4 +113,3 @@ body {
*zoom: 1;
}
-
diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less
index f68be62..e5cfbc7 100644
--- a/less/base_centerpanel_drawarea.less
+++ b/less/base_centerpanel_drawarea.less
@@ -7,8 +7,48 @@
border: 4px solid #000;
border-radius: 15px;
box-sizing: border-box;
- z-index: 15px;
+ z-index: 15;
}
+#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;
+/*float: left;*/
+ 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;
@@ -25,7 +65,9 @@
height: 10%;
}
-/* DOODLE UP/DOWN/LEFT/RIGHT buttons */
+/*
+ DOODLE UP/DOWN/LEFT/RIGHT buttons
+*/
.manipulationBtns {
margin: 2px 5px;
position: absolute;
@@ -37,9 +79,9 @@
}
.manipulationBtn {
- width: 45%;
- height: auto;
- cursor: pointer;
+ width: 45%;
+ height: auto;
+ cursor: pointer;
}
#btnsUpDown {
diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less
index 0729f10..7b5e498 100644
--- a/less/base_leftpanel.less
+++ b/less/base_leftpanel.less
@@ -7,7 +7,6 @@
left: 0px;
bottom: 0px;
}
-
.btnNew {
margin: 5% 0% 1% 5%;
width: 100%;
diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less
index 713cf7c..5ec7f90 100644
--- a/less/base_rightpanel.less
+++ b/less/base_rightpanel.less
@@ -42,26 +42,58 @@
}
+/*
+ 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;
+}
/*
- REST
+ THERMOMETER
*/
-/* CLEARFIX */
-.clearfix:before,
-.clearfix:after {
- content: " "; /* 1 */
- display: table; /* 2 */
+#thermometerContainer {
+ position: absolute;
+ right: 25px;
+ top: 370px;
}
-.clearfix:after {
- clear: both;
-}
-
-/* For IE 6/7 only*/
-.clearfix {
- *zoom: 1;
-}
-
-
+#thermometerCanvas {
+/*background: #59b2b8;*/
+/*zoom: 2;*/
+}
\ No newline at end of file
diff --git a/less/full.less b/less/full.less
index ed712bf..101f62f 100644
--- a/less/full.less
+++ b/less/full.less
@@ -1,21 +1 @@
-/*
-.leftpanel {
- background-color: #8F8;
-}
-.rightpanel {
- background-color: #4Fc;
-}
-*/
-
-
-
-/*
-.leftpanel {
- background-color: #0FF;
- width: 200px;
-}
-
-.rightpanel {
- width: 200px;
-}
-*/
\ No newline at end of file
+// FULL styles (not sure if going to use...)
\ No newline at end of file
diff --git a/less/mobile.less b/less/mobile.less
index 2d381ec..9ede81f 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -31,17 +31,12 @@
width: 100px;
background-color: #fff;
z-index: 50;
- -webkit-transition: left .15s ease-out;
- -moz-transition: left .15s ease-out;
- -o-transition: left .15s ease-out;
- transition: left .15s ease-out;
+ transition: left .3s ease-out;
}
.hideleft {
left: -101px;
}
.shadowright {
- -moz-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
- -webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
}
.btnNew {
@@ -64,17 +59,12 @@
width: 100px;
background-color: #fff;
z-index: 50;
- -webkit-transition: right .15s ease-out;
- -moz-transition: right .15s ease-out;
- -o-transition: right .15s ease-out;
- transition: right .15s ease-out;
+ transition: right .3s ease-out;
}
.hideright {
right: -101px;
}
.shadowleft {
- -moz-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
- -webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
}
.btnPrint {
@@ -102,29 +92,36 @@
border: 1px solid #808;
background: url('../img/arrows.png') no-repeat;
background-color: #eee;
-}
-.sidebutton:active {
- background-color: #aaa;
+ cursor: pointer;
+
+ &:active {
+ background-color: #aaa;
+ }
+
+ .leftpanel & {
+ right: -27px;
+ background-position: 0px 0px;
+ }
+
+ .rightpanel & {
+ left: -27px;
+ background-position: -25px 0px;
+ }
}
-.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;
-}
-.sidebuttonin:active {
- background-color: #888;
+ .leftpanel & {
+ background-color: #ccc;
+ background-position: -25px 0px;
+ }
+
+ .rightpanel & {
+ background-color: #ccc;
+ background-position: -0px 0px;
+ }
}
diff --git a/less/mobile_settingspopup.less b/less/mobile_settingspopup.less
new file mode 100644
index 0000000..213cc06
--- /dev/null
+++ b/less/mobile_settingspopup.less
@@ -0,0 +1,18 @@
+/*
+
+ SETTINGS POPUP - MOBILE
+
+*/
+#contentOverlay {
+ z-index: 200;
+
+ #settings {
+ width: 87%;
+ height: 82%;
+ margin: 6% 4%;
+
+ > .right {
+ width: 14%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/normalize.css b/less/normalize.css
index 823cc10..4617600 100644
--- a/less/normalize.css
+++ b/less/normalize.css
@@ -501,34 +501,4 @@ textarea {
table {
border-collapse: collapse;
border-spacing: 0;
-}
-
-
-/* http://nicolasgallagher.com/micro-clearfix-hack/ */
-/**
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- * contenteditable attribute is included anywhere else in the document.
- * Otherwise it causes space to appear at the top and bottom of elements
- * that are clearfixed.
- * 2. The use of `table` rather than `block` is only necessary if using
- * `:before` to contain the top-margins of child elements.
- */
-
-/**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-.cf {
- *zoom: 1;
-}
-
-.cf:before,
-.cf:after {
- content: " "; /* 1 */
- display: table; /* 2 */
-}
-
-.cf:after {
- clear: both;
-}
+}
\ No newline at end of file
diff --git a/less/normalize.less b/less/normalize.less
new file mode 100644
index 0000000..4617600
--- /dev/null
+++ b/less/normalize.less
@@ -0,0 +1,504 @@
+/*! normalize.css v1.0.2 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+ display: none;
+}
+
+/* ==========================================================================
+ Base
+ ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ * `em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-size: 100%; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+
+body {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Links
+ ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+ outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+}
+
+h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+}
+
+h4 {
+ font-size: 1em;
+ margin: 1.33em 0;
+}
+
+h5 {
+ font-size: 0.83em;
+ margin: 1.67em 0;
+}
+
+h6 {
+ font-size: 0.67em;
+ margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+ margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+
+q {
+ quotes: none;
+}
+
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* ==========================================================================
+ Lists
+ ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+ margin: 1em 0;
+}
+
+dd {
+ margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+ padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+}
+
+/* ==========================================================================
+ Embedded content
+ ========================================================================== */
+
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+ border: 0; /* 1 */
+ -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* ==========================================================================
+ Figures
+ ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+
+form {
+ margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0;
+ white-space: normal; /* 2 */
+ *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ * and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+ font-size: 100%; /* 1 */
+ margin: 0; /* 2 */
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ * `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ * Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+ *overflow: visible; /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ * 3. Removes excess padding in IE 7.
+ * Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ *height: 13px; /* 3 */
+ *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+ overflow: auto; /* 1 */
+ vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/less/normalize.min.css b/less/normalize.min.css
index 6eb5fd1..5fabfd2 100644
--- a/less/normalize.min.css
+++ b/less/normalize.min.css
@@ -1 +1 @@
-/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.cf{*zoom:1}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}
\ No newline at end of file
+/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
diff --git a/less/normalize.min.less b/less/normalize.min.less
new file mode 100644
index 0000000..5fabfd2
--- /dev/null
+++ b/less/normalize.min.less
@@ -0,0 +1 @@
+/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
diff --git a/less/portrait.less b/less/portrait.less
index 6ead101..728c21b 100644
--- a/less/portrait.less
+++ b/less/portrait.less
@@ -4,4 +4,13 @@
#portrait {
display: block;
-}
\ No newline at end of file
+}
+
+.vertImage {
+ margin: 0px;
+ padding: 0px;
+/*border: 2px solid #f0f;*/
+ max-width: 100%;
+ height: auto;
+ width: auto; /* for ie9 */
+}
diff --git a/less/settingsPopup.less b/less/settingsPopup.less
index 472acaf..b4caf4f 100644
--- a/less/settingsPopup.less
+++ b/less/settingsPopup.less
@@ -1,74 +1,85 @@
+/*
+
+ SETTINGS POPUP
+
+*/
#contentOverlay {
background-color: rgba(255, 255, 255, 0.65);
z-index: 20;
position: absolute;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
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;*/
+ #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%;
+ 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%;
-/*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;
-}
+ .settingsLabelContainer {
+ width: 100%;
+ height: auto;
+ margin-bottom: 1%;
+ }
+ .settingsLabelImg {
+ width: 45%;
+ max-width: 373px;
+ height: auto;
+ }
-div.content {
- margin: 15px 25px 25px 25px;
- height: 388px;
- display: table;
-}
+ > .content {
+ margin: 3% 12%;
+ margin-top: 12%;
+ max-height: 388px;
+ display: table-row;
+ width: 100%;
-div.content > div {
- height: 100%;
-}
+ > .settings {
+ border: 1px solid rgb(187, 187, 187);
+ border-radius: 5px;
+ overflow: scroll;
+ overflow-x: hidden;
+ }
+ > .btnContainer {
+ width: 15%;
+ position:relative;
+ display: table-cell;
-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;
-}
+ > .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;
+ }
+ }
+ > div {
+ height: 100%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/less/styles.less b/less/styles.less
index 23b87c5..ed4d2a5 100644
--- a/less/styles.less
+++ b/less/styles.less
@@ -1,5 +1,7 @@
// IMPORTS
+//@import "normalize.min.less";
@import "base.less";
+@import "settingsPopup.less";
// MOBILE
@@ -7,6 +9,7 @@
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) {
@import "mobile.less";
+ @import "mobile_settingspopup.less";
}
// FULL
diff --git a/lesstocss.sh b/lesstocss.sh
index 3ad7c74..67ca0d9 100755
--- a/lesstocss.sh
+++ b/lesstocss.sh
@@ -3,7 +3,10 @@
echo 'converting LESS to CSS...'
# generate CSS from LESS
lessc less/styles.less css/styles.css
-rm css/styles.min.css
+
+if [ -a css/styles.min.css ]; then
+ rm css/styles.min.css
+fi
if [ -n "$1" ]; then
if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
@@ -12,14 +15,21 @@ if [ -n "$1" ]; then
# prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s
fi
- if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
- echo 'creating minified and prefixed...'
+ if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
- # copy to .min.css to create a minified version as well
- cp css/styles.css css/styles.min.css
+ if [ ! -n "$2" ]; then
+ echo 'creating minified....'
+ lessc --yui-compress less/styles.less css/styles.min.css
+ else
+ echo 'creating minified and prefixed...'
+
+ # copy to .min.css to create a minified version as well
+ cp css/styles.css css/styles.min.css
+
+ # prefixed and minified (-s overwrites existing file)
+ prefixr --input ./css/styles.min.css -s -c
+ fi
- # prefixed and minified (-s overwrites existing file)
- prefixr --input ./css/styles.min.css -s -c
fi
fi
diff --git a/settings.html b/settings.html
index 5d5c826..601ea2d 100755
--- a/settings.html
+++ b/settings.html
@@ -9,7 +9,7 @@
-