comments + images
This commit is contained in:
206
style/_lightbox.scss
Normal file
206
style/_lightbox.scss
Normal file
@@ -0,0 +1,206 @@
|
||||
/* Preload images */
|
||||
body:after {
|
||||
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-container {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
100
style/spot.css
100
style/spot.css
@@ -2746,7 +2746,7 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 70%;
|
||||
background: #EEE; }
|
||||
|
||||
/* line 15, spot.scss */
|
||||
@@ -2759,24 +2759,114 @@
|
||||
left: calc(50% - 0.5em);
|
||||
color: #666; }
|
||||
|
||||
/* line 26, spot.scss */
|
||||
#feed {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 30%;
|
||||
overflow: auto; }
|
||||
/* line 34, spot.scss */
|
||||
#feed #poster {
|
||||
padding: 1em;
|
||||
background: #EEE;
|
||||
border-bottom: 1px solid #DDD; }
|
||||
/* line 39, spot.scss */
|
||||
#feed #poster #post, #feed #poster #name, #feed #poster #submit {
|
||||
width: calc(100% - 2em);
|
||||
border: none;
|
||||
padding: 0.5em 1em; }
|
||||
/* line 45, spot.scss */
|
||||
#feed #poster #post {
|
||||
margin-bottom: 1em; }
|
||||
/* line 49, spot.scss */
|
||||
#feed #poster #name {
|
||||
width: calc(100% - 5.5em); }
|
||||
/* line 53, spot.scss */
|
||||
#feed #poster #submit {
|
||||
width: 3em;
|
||||
background: #CCC;
|
||||
cursor: pointer;
|
||||
font-weight: bold; }
|
||||
/* line 61, spot.scss */
|
||||
#feed #posts {
|
||||
font-family: Arial; }
|
||||
/* line 64, spot.scss */
|
||||
#feed #posts .post {
|
||||
margin: 1em;
|
||||
background: #B4BDFF;
|
||||
color: #323268;
|
||||
border-radius: 0.5em; }
|
||||
/* line 70, spot.scss */
|
||||
#feed #posts .post .message {
|
||||
margin: 0.3em 0 0 0; }
|
||||
/* line 73, spot.scss */
|
||||
#feed #posts .post .signature {
|
||||
margin: 0.5em 0 0 0;
|
||||
text-align: right; }
|
||||
/* line 79, spot.scss */
|
||||
#feed #posts .header {
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
text-align: right; }
|
||||
/* line 85, spot.scss */
|
||||
#feed #posts .header .index {
|
||||
float: left;
|
||||
font-style: normal; }
|
||||
/* line 91, spot.scss */
|
||||
#feed #posts .body {
|
||||
padding: 0em 1em 0.5em; }
|
||||
/* line 95, spot.scss */
|
||||
#feed #posts .post.picture {
|
||||
background: #F3EC9F;
|
||||
color: #635C28; }
|
||||
/* line 99, spot.scss */
|
||||
#feed #posts .post.picture a {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin: 0; }
|
||||
/* line 105, spot.scss */
|
||||
#feed #posts .post.picture img {
|
||||
width: 100%;
|
||||
image-orientation: from-image;
|
||||
border: 1px solid white;
|
||||
outline: none; }
|
||||
/* line 113, spot.scss */
|
||||
#feed #posts .post.message {
|
||||
background: #6DFF58;
|
||||
color: #326526; }
|
||||
/* line 118, spot.scss */
|
||||
#feed #posts .fa.push {
|
||||
margin-right: 0.5em; }
|
||||
|
||||
/* Info Window */
|
||||
/* line 28, spot.scss */
|
||||
/* line 126, spot.scss */
|
||||
.info-window h1 {
|
||||
font-size: 1.2em; }
|
||||
|
||||
/* line 31, spot.scss */
|
||||
/* line 129, spot.scss */
|
||||
.info-window p {
|
||||
font-size: 1.0em; }
|
||||
|
||||
/* line 35, spot.scss */
|
||||
/* line 133, spot.scss */
|
||||
.info-window i {
|
||||
padding-right: 0.5em;
|
||||
font-size: 1.33333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%; }
|
||||
|
||||
/* line 43, spot.scss */
|
||||
/* line 141, spot.scss */
|
||||
.info-window .battery {
|
||||
text-transform: capitalize; }
|
||||
|
||||
/* Upload */
|
||||
/* line 147, spot.scss */
|
||||
.bar {
|
||||
height: 18px;
|
||||
background: green; }
|
||||
|
||||
/* Other */
|
||||
|
||||
/*# sourceMappingURL=spot.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
103
style/spot.scss
103
style/spot.scss
@@ -8,7 +8,7 @@
|
||||
left:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
width:70%;
|
||||
background:#EEE;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,104 @@
|
||||
@extend .flicker;
|
||||
}
|
||||
|
||||
#feed {
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:30%;
|
||||
overflow:auto;
|
||||
|
||||
#poster {
|
||||
padding:1em;
|
||||
background:#EEE;
|
||||
border-bottom:1px solid #DDD;
|
||||
|
||||
#post, #name, #submit {
|
||||
width:calc(100% - 2em);
|
||||
border:none;
|
||||
padding:0.5em 1em;
|
||||
}
|
||||
|
||||
#post {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
#name {
|
||||
width: calc(100% - 5.5em);
|
||||
}
|
||||
|
||||
#submit {
|
||||
width: 3em;
|
||||
background:#CCC;
|
||||
cursor:pointer;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
|
||||
#posts {
|
||||
font-family: Arial;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
font-size:0.8em;
|
||||
text-align:right;
|
||||
|
||||
.index {
|
||||
float:left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0em 1em 0.5em;
|
||||
}
|
||||
|
||||
.post.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;
|
||||
}
|
||||
|
||||
}
|
||||
.post.message {
|
||||
background: #6DFF58;
|
||||
color:#326526;
|
||||
}
|
||||
|
||||
.fa.push {
|
||||
margin-right:0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Info Window */
|
||||
|
||||
.info-window h1 {
|
||||
@@ -50,3 +148,6 @@
|
||||
height: 18px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user