added more buttons, need more styling

This commit is contained in:
dennisdebel 2015-05-19 22:27:23 +02:00
parent 0128c61fea
commit 2ead3f5aaa
2 changed files with 12 additions and 33 deletions

View File

@ -12,7 +12,7 @@
</head>
<body>
<div id="message-page">
<button id="message-back">Back</button>
<button id="message-back" class="back-button">Back</button><br><br>
<form id="message-form" action="" accept-charset="utf-8">
<textarea id="name" rows="1" placeholder="Your Name"></textarea>
<textarea id="message" rows="2" placeholder="Your Message"></textarea>
@ -21,8 +21,8 @@
</form>
</div>
<div id="photo-page" class="photoBox">
<button id="photo-back">Back</button>
<div id="photo-page" class="photo-page">
<button id="photo-back" class="back-button">Back</button><br>
<input id="fileInput" accept="image/*" capture="camera" type="file">
<br>
<p>
@ -40,11 +40,11 @@
<canvas id="canvas3" width="400" height="400"></canvas>
<br>
<button id="rotLeft">Rotate left</button>
<button id="rotRight">Rotate right</button>
<button id="rot-left" class="back-button">Rotate left</button>
<button id="rot-right" class="back-button">Rotate right</button>
<button id="submit-photo" class="photo-buttons">submit</button>
<button id="cancel-photo" class="photo-buttons">cancel</button>
</div>

View File

@ -81,10 +81,10 @@ margin:10px;
box-shadow:0 0 23px #bbb;
}
#back-button{
.back-button{
display:inline;
float:left;
width:30%;
width:100%;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
@ -229,37 +229,16 @@ hr{
}
.photoBox {
width: 98%;
margin: 0 auto;
line-height: 40px;
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color:#fff;
z-index:1002;
overflow: auto;
padding:30px;
width: 100%;
overflow: visible;
-moz-box-shadow:0 0 23px #bbb;
-webkit-box-shadow:0 0 23px #bbb;
box-shadow:0 0 23px #bbb;
-webkit-border-top-left-radius:123px;
-webkit-border-top-right-radius:123px;
-webkit-border-bottom-right-radius:123px;
-webkit-border-bottom-left-radius:123px;
-moz-border-radius-bottomright:123px;
-moz-border-radius-bottomleft:123px;
-moz-border-top-left-radius:123px;
-moz-border-top-right-radius:123px;
border-top-left-radius:123px;
border-top-right-radius:123px;
border-bottom-right-radius:123px;
border-bottom-left-radius:123px;
background:#fff;
}