1
0
Fork 0
NCA-Screens/css/style.css

287 lines
No EOL
4 KiB
CSS

/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
html {
background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
min-height: 100%;
position: relative;
}
body {
color: #fff;
min-height: 600px;
font: 14px/1.3 'Segoe UI',Arial, sans-serif;
}
a, a:visited {
text-decoration: none;
outline: none;
color: #54a6de;
}
a:hover {
text-decoration: underline;
}
header {
display: block;
}
/*-------------------------
Header Styles
--------------------------*/
header{
background-color: #303030;
background-image: url(../img/dark_circles.png);
/*position: fixed;*/
width: 100%;
height: 25px;
top: 0;
left: 0;
/*z-index: 100000;*/
box-shadow: 0 1px 2px #303030;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
}
h1{
height: 40px;
text-align: center;
}
/*-------------------------
Dropbox Element
--------------------------*/
#dropbox {
background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
border-radius: 3px;
position: relative;
margin: 80px auto 90px;
min-height: 290px;
overflow: hidden;
padding-bottom: 40px;
width: 960px;
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}
#dropbox .message{
font-size: 11px;
text-align: center;
padding-top: 160px;
display: block;
color: #00487D;
}
#dropbox .message i{
color: #00487D;
font-size: 10px;
}
#dropbox:before{
border-radius: 3px 3px 0 0;
}
/*-------------------------
Image Previews
--------------------------*/
#dropbox .preview {
width:245px;
height: 245px;
float:left;
margin: 55px 0 0 60px;
position: relative;
text-align: center;
}
#dropbox .preview img {
max-width: 240px;
max-height:180px;
border:3px solid #fff;
display: block;
box-shadow:0 0 2px #000;
}
#dropbox .imageHolder {
display: inline-block;
position:relative;
}
#dropbox .uploaded {
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
display: none;
}
#dropbox .preview.done .uploaded {
display: block;
background: url('../img/success.png') no-repeat center center rgba(255,255,255,0.5);
}
#dropbox .preview.error .uploaded{
display: block;
background: url('../img/error.png') no-repeat center center rgba(255,255,255,0.5);
}
/*-------------------------
Progress Bars
--------------------------*/
#dropbox .progressHolder {
position: absolute;
background-color: #252f38;
height: 12px;
width: 100%;
left: 0;
bottom: 30px;
box-shadow: 0 0 2px #000;
}
#dropbox .progress {
background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
position: absolute;
height: 100%;
left: 0;
width: 0;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;
-moz-transition: 0.25s;
-webkit-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
#dropbox .preview.done .progress{
width:100% !important;
}
/*-------------------------
Link Box
--------------------------*/
#dropbox .linkHolder {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
#dropbox .linkHolder input {
width: 100%;
}
/*-------------------------
Uploaded Image
--------------------------*/
#imageContainer {
width: 100%;
text-align: center;
margin-top: 25px;
}
.image {
max-width: 920px;
}
#message {
background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
border-radius: 3px;
margin: auto;
overflow: hidden;
width: 600px;
padding: 10px;
margin-top: 25px;
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}
/*-------------------------
Navigation Tabs
--------------------------*/
#left {
position: absolute;
left: 0;
top: 30%;
width: 50px;
height: 50px;
background-image: url(../img/leftarrow.png);
}
#right {
position: absolute;
right: 0;
top: 30%;
width: 50px;
height: 50px;
background-image: url(../img/rightarrow.png);
}
.navigation {
display: block;
height: 50px;
width: 50px;
}