Will finish UI and make it non-shit later

This commit is contained in:
Dominik V. Salonen 2015-12-23 14:57:03 +01:00
parent 0b376d9478
commit e77154f68b
2 changed files with 18 additions and 5 deletions

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Lato:700,300,400,100); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* Being lazy 101 */ /* Being lazy 101 */
* { * {
@ -46,20 +46,33 @@ body {
} }
.uploadButton { .uploadButton {
position: relative;
margin-right: auto;
margin-left: auto;
max-width: 100%;
cursor: pointer;
background-color: #229922; background-color: #229922;
border-radius: 10px; border-radius: 10px;
transition: background 0.1s ease-out;
overflow: hidden;
}
.uploadButton:hover {
background-color: #33BB33;
} }
.uploadButton p { .uploadButton p {
padding: 20px; padding: 20px;
font-weight: 300;
font-size: 24pt;
} }
.uploadButton input[type="file"] { .uploadButton input[type="file"] {
position: absolute; position: absolute;
top: 0; display: block;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0;
right: 0;
opacity: 0; opacity: 0;
z-index: 900;
} }

View File

@ -2,10 +2,10 @@
{% block body %} {% block body %}
<form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm"> <form action="" id="form" name="fileForm" method="post" enctype="multipart/form-data" class="uploadForm">
<div class="uploadButton"> <div class="uploadButton">
<input id="file" type="file" name="file">
<p> <p>
Select a file Select a file
</p> </p>
<input id="file" type="file" name="file">
</div> </div>
<input type="hidden" name="source" value="web"> <input type="hidden" name="source" value="web">
</form> </form>