Files
spot/style/spot.scss

227 lines
2.9 KiB
SCSS
Executable File

@CHARSET "UTF-8";
@import 'fa';
@import 'lightbox';
@import 'common';
#map {
position:absolute;
left:0;
top:0;
bottom:0;
width:70%;
background:#EEE;
.loader {
position:absolute;
font-size:3em;
width:1em;
height:1em;
top:calc(50% - 0.5em);
left:calc(50% - 0.5em);
color:#666;
@extend .flicker;
}
#legend {
background:white;
font-family:Arial;
margin-top:-3em;
margin-left:2em;
background: rgba(255, 255, 255, 0.5);
font-family: Arial;
.line {
display: inline-block;
border-left: 2em solid;
line-height: 2px;
padding-left: 0.5em;
margin: 1em;
font-size: 0.8em;
&.green {
color:#00ff78;
border-color: #00ff78;
}
&.blue {
color:#0000ff;
border-color: #0000ff;
}
&.red {
color:#FF7814;
border-color:#FF7814;
}
+ .line {
margin-top: 1em;
}
}
}
}
#feed {
position:absolute;
right:0;
top:0;
bottom:0;
width:30%;
overflow:auto;
input, button {
border:none;
padding:0.5em 1em;
background:#F7F7F7;
}
button {
background:#CCC;
cursor:pointer;
font-weight:bold;
}
button:hover {
background:#F7F7F7;
}
#poster {
padding:1em;
background:#EEE;
border-bottom:1px solid #DDD;
position:fixed;
width: calc(30% - 2em);
#post {
margin-bottom:1em;
width:calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left:1em;
width: 3em;
}
}
#posts {
font-family: Arial;
overflow:auto;
position:absolute;
top:0;
bottom:0;
width:100%;
.post {
margin:1em;
background: #B4BDFF;
color:#323268;
border-radius: 0.5em;
.message {
margin:0.3em 0 0 0;
}
.signature {
margin:0.5em 0 0 0;
text-align: right;
font-style: italic;
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size:0.8em;
text-align:right;
.index {
float:left;
font-style: normal;
}
.time {
cursor:default;
}
}
.body {
padding: 0em 1em 0.5em;
}
&.picture {
background:#F3EC9F;
color:#635C28;
a {
display:inline-block;
line-height:0;
margin:0;
}
img {
width:100%;
image-orientation:from-image;
border: 1px solid white;
outline:none;
}
}
&.message {
background: #6DFF58;
color:#326526;
p {
font-size:0.9em;
margin:0.5em 0;
}
p:first-child {
margin-top:1em;
}
}
}
.fa.push {
margin-right:0.5em;
}
#next_posts {
margin: 1em;
display:none;
button {
border-radius: 0.5em;
width:100%;
}
}
}
}
/* Info Window */
.info-window h1 {
font-size: 1.2em;
}
.info-window p {
font-size: 1.0em;
}
.info-window i {
padding-right:0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
@extend .fa-fw;
}
.info-window .battery {
text-transform: capitalize;
}
/* Upload */
.bar {
height: 18px;
background: green;
}
/* Other */