717 lines
11 KiB
SCSS
717 lines
11 KiB
SCSS
/* variables */
|
|
|
|
$light-grey: #999;
|
|
$pane-width: 420px;
|
|
|
|
/* mixins */
|
|
@mixin center($orient:vertical) {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: $orient;
|
|
-webkit-box-pack: center;
|
|
-webkit-box-align: center;
|
|
|
|
display: -moz-box;
|
|
-moz-box-orient: $orient;
|
|
-moz-box-pack: center;
|
|
-moz-box-align: center;
|
|
|
|
display: box;
|
|
box-orient: $orient;
|
|
box-pack: center;
|
|
box-align: center;
|
|
}
|
|
|
|
@mixin box-shadow($left, $top, $blur, $color) {
|
|
-webkit-box-shadow: $left $top $blur $color;
|
|
-moz-box-shadow: $left $top $blur $color;
|
|
box-shadow: $left $top $blur $color;
|
|
}
|
|
|
|
@mixin background-cover() {
|
|
background: no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
@mixin opacity($val) {
|
|
-moz-opacity: $val;
|
|
filter:alpha(opacity=$val*100);
|
|
opacity: $val;
|
|
}
|
|
|
|
@mixin border-radius($top:3px, $bottom:$top) {
|
|
-webkit-border-radius: $top $top $bottom $bottom;
|
|
-moz-border-radius: $top $top $bottom $bottom;
|
|
border-radius: $top $top $bottom $bottom;
|
|
}
|
|
|
|
@mixin transition($type, $speed:0.2s) {
|
|
-o-transition: $type $speed;
|
|
-moz-transition: $type $speed;
|
|
-webkit-transition: $type $speed;
|
|
transition: $type $speed;
|
|
}
|
|
|
|
@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
|
|
-webkit-animation: $name $speed $easing;
|
|
-moz-animation: $name $speed $easing;
|
|
-ms-animation: $name $speed $easing;
|
|
}
|
|
|
|
@mixin info-container() {
|
|
@include box-shadow(0, 6px, 20px, #000);
|
|
@include border-radius(3px, 0px);
|
|
@include dark-hatched-bg();
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
border-top: 1px solid #555;
|
|
border-right: 1px solid #444;
|
|
border-left: 1px solid #444;
|
|
|
|
padding-top: 25px;
|
|
|
|
width: $pane-width;
|
|
|
|
color: #ddd;
|
|
|
|
/* webkit acceleration */
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
@mixin dark-hatched-bg() {
|
|
background-color: #444;
|
|
background-image: url("../images/hatched-bg-dark.png");
|
|
}
|
|
|
|
@mixin photo-shadow() {
|
|
@include box-shadow(0, 3px, 15px, #999);
|
|
}
|
|
|
|
/* keyframes */
|
|
|
|
@-webkit-keyframes bump-left {
|
|
0% { left: 0; }
|
|
40% { left: 20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
@-moz-keyframes bump-left {
|
|
0% { left: 0; }
|
|
40% { left: 20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
@-ms-keyframes bump-left {
|
|
0% { left: 0; }
|
|
40% { left: 20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
@-webkit-keyframes bump-right {
|
|
0% { left: 0; }
|
|
40% { left: -20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
@-moz-keyframes bump-right {
|
|
0% { left: 0; }
|
|
40% { left: -20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
@-ms-keyframes bump-right {
|
|
0% { left: 0; }
|
|
40% { left: 20px; }
|
|
100% { left: 0; }
|
|
}
|
|
|
|
/* bootstrap extentions */
|
|
.icon-red {
|
|
background-image: url(../img/glyphicons-halflings-red.png);
|
|
}
|
|
|
|
.icon-green {
|
|
background-image: url(../img/glyphicons-halflings-green.png);
|
|
}
|
|
|
|
.icon-blue {
|
|
background-image: url(../img/glyphicons-halflings-blue.png);
|
|
}
|
|
|
|
/* styles */
|
|
.multi-photo {
|
|
display: table;
|
|
|
|
.img-bounding-box {
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
padding: 20px;
|
|
height: 400px;
|
|
width: 300px;
|
|
}
|
|
|
|
img {
|
|
@include photo-shadow();
|
|
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.photoset {
|
|
@include center(horizontal);
|
|
width: 100%;
|
|
}
|
|
|
|
.note-content {
|
|
min-width: 350px;
|
|
max-width: 550px;
|
|
padding-bottom: 50px;
|
|
display: inline-block;
|
|
text-align: left;
|
|
|
|
p {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
font-family: georgia, times, serif;
|
|
}
|
|
}
|
|
|
|
.status,
|
|
.status-with-photo-backdrop
|
|
{
|
|
p {
|
|
font-weight: bold;
|
|
font-size: 40px;
|
|
line-height: 45px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.status-with-photo-backdrop {
|
|
p {
|
|
color: #fff;
|
|
|
|
a {
|
|
@include transition(background-color, 0.3s);
|
|
|
|
color: #000;
|
|
background-color: #fff;
|
|
background-color: rgba(255,255,255,0.7);
|
|
padding: 0 5px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: #fff;
|
|
background-color: rgba(255,255,255,1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.darken {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
|
|
display: table;
|
|
|
|
.darken-content {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
|
|
padding: 70px 10%;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.post {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.photo-fill {
|
|
@include background-cover();
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.photo-backdrop {
|
|
p {
|
|
color: #fff;
|
|
z-index: 2;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
}
|
|
|
|
.photo-fill {
|
|
@include opacity(0.2)
|
|
}
|
|
}
|
|
|
|
.rich-media {
|
|
text-align: center;
|
|
background-color: #333;
|
|
|
|
h3 {
|
|
color: #999;
|
|
}
|
|
|
|
iframe {
|
|
@include box-shadow(0, 3px, 15px, #000);
|
|
|
|
width: 857px;
|
|
height: 480px;
|
|
}
|
|
}
|
|
|
|
#post-nav {
|
|
@include transition(opacity, 0.5s);
|
|
@include opacity(1);
|
|
}
|
|
|
|
body.idle {
|
|
#post-nav {
|
|
@include opacity(0);
|
|
|
|
.nav-arrow{
|
|
&.right {
|
|
margin-right: -40px;
|
|
}
|
|
|
|
&.left {
|
|
margin-left: -40px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.nav-arrow {
|
|
@include opacity(0.8);
|
|
@include transition(all, 0.3s);
|
|
|
|
display: table;
|
|
|
|
position: fixed;
|
|
height: 100%;
|
|
z-index: 3;
|
|
top: 0;
|
|
padding: 0 13px;
|
|
background-color: rgba(0,0,0,0);
|
|
|
|
.nav-arrow-inner {
|
|
padding: 0; margin: 0;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
@include opacity(0.5);
|
|
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
&.left {
|
|
left: 0;
|
|
padding-right: 19px;
|
|
}
|
|
|
|
&.right {
|
|
right: 0;
|
|
padding-left: 19px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(0,0,0,0.1)
|
|
}
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
width: 100%;
|
|
}
|
|
|
|
#header-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.avatar {
|
|
&.micro {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
&.small {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
}
|
|
|
|
.author-name {
|
|
color: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#post-author {
|
|
@include border-radius();
|
|
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
border-top: 1px solid rgba(255,255,255,0.5);
|
|
|
|
float: left;
|
|
margin: 0;
|
|
|
|
padding: 5px;
|
|
padding-right: 10px;
|
|
|
|
background-color: rgba(255,255,255,0.6);
|
|
max-height: 35px;
|
|
|
|
.avatar {
|
|
@include border-radius();
|
|
}
|
|
|
|
.post-time,
|
|
.icon-retweet {
|
|
color: #000;
|
|
@include opacity(0.5);
|
|
}
|
|
}
|
|
|
|
#post-interactions {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
#post-reactions {
|
|
max-height: 350px;
|
|
overflow: auto;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#post-info,
|
|
#post-info-sneaky {
|
|
text-align: center;
|
|
z-index: 10;
|
|
|
|
margin-top: -33px;
|
|
|
|
#post-info-container {
|
|
@include info-container();
|
|
}
|
|
|
|
.well {
|
|
-webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
|
|
-moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
|
|
box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
|
|
|
|
margin: 5px;
|
|
padding: 5px;
|
|
text-align: left;
|
|
|
|
max-height: 20px;
|
|
overflow: hidden;
|
|
|
|
background: {
|
|
color: #222;
|
|
color: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
border: {
|
|
left: 1px solid #444;
|
|
right: 1px solid #444;
|
|
bottom: 1px solid #555;
|
|
top: 1px solid #111;
|
|
}
|
|
|
|
.img {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
i {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.avatar {
|
|
@include border-radius();
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
#post-comments {
|
|
text-align: left;
|
|
padding-top: 0;
|
|
}
|
|
|
|
#new-post-comment {
|
|
-webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
|
|
-moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
|
|
box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
|
|
|
|
border-top: 1px solid #444;
|
|
text-align: left;
|
|
background-image: url("../images/hatched-bg-dark.png");
|
|
}
|
|
|
|
#new-post-comment-container {
|
|
position: relative;
|
|
|
|
padding: 10px;
|
|
|
|
textarea{
|
|
height: 18px;
|
|
width: 318px;
|
|
}
|
|
|
|
form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#post-info-sneaky {
|
|
@include transition(all, 0.2s);
|
|
|
|
z-index: 1;
|
|
position: fixed;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0;
|
|
|
|
margin-bottom: -60px;
|
|
min-height: 20px;
|
|
|
|
#post-info-container-sneaky {
|
|
@include info-container();
|
|
|
|
padding: 10px 0;
|
|
min-height: 20px;
|
|
}
|
|
}
|
|
|
|
.home-button {
|
|
@include transition(opacity, 0.3s);
|
|
@include opacity(0.6);
|
|
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 4px;
|
|
|
|
padding: 4px 6px;
|
|
|
|
&:hover {
|
|
@include opacity(1);
|
|
}
|
|
}
|
|
|
|
.invoker {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#post-feedback:hover {
|
|
#post-info-sneaky:not(.passive) {
|
|
@include opacity(1);
|
|
margin-bottom: -13px;
|
|
}
|
|
}
|
|
|
|
.post-comment {
|
|
-moz-box-shadow: 0 1px 2px -2px #999;
|
|
-webkit-box-shadow: 0 1px 2px -2px #999;
|
|
box-shadow: 0 1px 2px -2px #999;
|
|
|
|
border-bottom: 1px solid #333;
|
|
|
|
&:last-child {
|
|
box-shadow: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
padding: 10px;
|
|
padding-right: 40px;
|
|
margin: 0px;
|
|
|
|
.avatar {
|
|
@include border-radius();
|
|
|
|
border: {
|
|
top: 1px solid #222;
|
|
right: 1px solid #444;
|
|
left: 1px solid #444;
|
|
bottom: 1px solid #666;
|
|
}
|
|
}
|
|
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
|
|
a:hover {
|
|
color: #99CCFF
|
|
}
|
|
|
|
time {
|
|
color: #666;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.controls {
|
|
@include transition(opacity);
|
|
@include opacity(0);
|
|
|
|
float: right;
|
|
margin-right: -40px;
|
|
|
|
a {
|
|
padding: 3px 5px;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.controls {
|
|
@include opacity(0.4);
|
|
|
|
&:hover {
|
|
@include opacity(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#user-controls {
|
|
height: 30px;
|
|
|
|
.avatar {
|
|
vertical-align: top;
|
|
height: 27px;
|
|
width: 27px;
|
|
}
|
|
|
|
.label {
|
|
@include opacity(0.6);
|
|
@include transition(opacity, 0.3s);
|
|
@include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
|
|
|
|
position: relative;
|
|
|
|
z-index: 20;
|
|
|
|
padding: 5px;
|
|
margin-right: 5px;
|
|
line-height: 24px;
|
|
|
|
padding-top: 3px;
|
|
padding-right: 2px;
|
|
|
|
i {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
background-color: #000;
|
|
color: #fff;
|
|
|
|
&.comment {
|
|
padding-right: 5px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
@include opacity(1);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#post-content {
|
|
display: table;
|
|
|
|
padding: 70px 10%;
|
|
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
img {
|
|
@include photo-shadow();
|
|
}
|
|
}
|
|
|
|
#post-feedback {
|
|
/* fixes flicker on hover... no idea as to why */
|
|
position: relative;
|
|
z-index: 30;
|
|
}
|
|
|
|
#close-reactions-pane {
|
|
display: none;
|
|
|
|
text-align: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: -3px;
|
|
|
|
#close-reactions-pane-container {
|
|
width: $pane-width;
|
|
top: 0;
|
|
|
|
min-height: 30px;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
#post-interactions.active #close-reactions-pane {
|
|
display: block;
|
|
}
|
|
|
|
.info-tick {
|
|
@include opacity(0.8);
|
|
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 8px;
|
|
}
|