public/stylesheet.css
/* Base CSS */
body {
/* background-color: #f6f6f6; */
background-color: #fff;
padding: 40px;
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
color: #888;
}
h1 {
padding-bottom: 40px;
font-family: 'Oleo Script Swash Caps', cursive;
font-size: 70px;
color: #999;
text-shadow: #DDD 4px 4px;
line-height: 80px;
}
.content {
position: relative;
}
.navbar {
margin-bottom: 50px;
}
.auto-content {
margin-right: 350px;
position: relative;
}
#graph {
width: 100%;
height: 500px;
}
#loadingSpinner {
position: absolute;
top: 40%;
left: 45%;
}
/* Zoom control */
.zoom-control .help-block {
text-align: center;
margin-top: 10px;
}
#zoom-slider {
margin-top: 20px;
}
.zoom-box {
text-align: center;
margin: 10px;
width: 40px;
}
#min-zoom {
float: left;
margin-left: -10px;
}
#max-zoom {
float: right;
margin-right: -10px;
}
/* Sidebar */
.fixed-sidebar {
position: absolute;
right: 0px;
top: 0px;
width: 300px;
padding: 25px;
box-sizing: border-box;
}
.lens-data h4 {
height: 40px;
padding-bottom: 15px;
}
.lens-data h4 a {
color: inherit;
}
.lens-data .icon-share {
opacity: 0.3;
}
.lens-data label {
width: 150px;
color: #999;
padding: 2px 0px;
line-height: 30px;
font-size: 20px;
}
.lens-data .uneditable-input {
width: 100%;
height: 40px;
font-size: 22px;
line-height: 30px;
text-align: center;
box-sizing: border-box;
}
.lens-data .preview img {
display: block;
margin: auto;
width: auto;
}
.lens-data img {
height: 120px;
width: 120px;
padding: 9px;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background-color: white;
}
/* Mobile version */
@media only screen
and (max-width : 700px) {
body {
padding: 15px 10px 10px 10px;
}
.fixed-sidebar {
position: static;
width: 100%;
}
.auto-content {
margin: 0px 10px 0px 10px;
}
.navbar .nav li a {
padding: 10px;
}
.navbar-inner {
padding: 0px;
}
.navbar .brand {
display: none;
}
.navbar .navbar-text {
display: none;
}
.zoom-control {
height: 80px;
}
}