478 lines
6.9 KiB
SCSS
478 lines
6.9 KiB
SCSS
body {
|
|
background-image : image_url("pattern.png");
|
|
}
|
|
|
|
/* gross hax */
|
|
#container {
|
|
position : absolute;
|
|
height : 100%;
|
|
width : 100%;
|
|
|
|
left : 0;
|
|
top : 0;
|
|
}
|
|
|
|
/* new link color */
|
|
a { color : rgb(42,156,235) }
|
|
|
|
/* bootstrap extentions */
|
|
.icon-red { background-image: image_url("img/glyphicons-halflings-red.png"); }
|
|
.icon-blue { background-image: image_url("img/glyphicons-halflings-blue.png"); }
|
|
|
|
.photoset {
|
|
@include center(horizontal);
|
|
width: 100%;
|
|
}
|
|
|
|
.rich-media {
|
|
//z-index : -5000; //so the framer controls don't get lost
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
text-align: center;
|
|
background-color: $night-background-color;
|
|
|
|
p {
|
|
@include media-text();
|
|
color: #999;
|
|
|
|
a {
|
|
font-weight: normal;
|
|
font-size: smaller;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
@include box-shadow(0, 3px, 15px, #000);
|
|
|
|
width: 857px;
|
|
height: 480px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.rich-media-container {
|
|
display: table;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.rich-media-container2 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.avatar {
|
|
&.micro {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
&.small {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
}
|
|
|
|
.author-name {
|
|
font-family : Roboto;
|
|
color: inherit;
|
|
}
|
|
|
|
#author-info {
|
|
position : absolute;
|
|
z-index : 300;
|
|
|
|
.author-name {
|
|
color: #555;
|
|
}
|
|
|
|
.bd {
|
|
margin-top : 5px;
|
|
}
|
|
|
|
.post-time,
|
|
.icon-retweet {
|
|
color: #555;
|
|
@include opacity(0.5);
|
|
}
|
|
}
|
|
|
|
#post-author {
|
|
margin : 0;
|
|
padding : 10px;
|
|
|
|
&.status-with-photo-backdrop,
|
|
&.Wallpaper {
|
|
.author-name {
|
|
color : #fff;
|
|
}
|
|
|
|
.post-time,
|
|
.icon-retweet {
|
|
color: #fff;
|
|
@include opacity(0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-view {
|
|
display: table;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#post-content {
|
|
display: table;
|
|
position: absolute;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
img {
|
|
@include photo-shadow();
|
|
}
|
|
}
|
|
|
|
article { //mood posts
|
|
//default frame show styles
|
|
$big-text-size : 2.5em;
|
|
$medium-text-size : 1.5em;
|
|
$small-text-size: 1em;
|
|
width: 960px;
|
|
margin: 0 auto;
|
|
|
|
img {
|
|
max-height: 70%;
|
|
border : 10px solid #fff;
|
|
}
|
|
|
|
.photo_viewer {
|
|
margin-bottom : 20px;
|
|
}
|
|
|
|
@include centered-frame();
|
|
.container {
|
|
padding: 70px 0;
|
|
max-width: 85%;
|
|
}
|
|
|
|
header {
|
|
padding : 0 100px;
|
|
}
|
|
|
|
header, header p{
|
|
//big text
|
|
@include media-text();
|
|
font-size: $big-text-size;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
section.body{
|
|
p { font-size: $small-text-size; }
|
|
|
|
&.short_body{
|
|
p{
|
|
font-size: $medium-text-size;
|
|
margin-top: .5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.night{
|
|
background-color : $night-background-color;
|
|
color : $night-text-color;
|
|
|
|
#author-info {
|
|
color : $night-text-color;
|
|
}
|
|
|
|
.photo-viewer {
|
|
img {
|
|
max-height: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.newspaper {
|
|
@include newspaper-type();
|
|
|
|
text-align: left;
|
|
|
|
.container {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.photo_viewer {
|
|
float: right;
|
|
margin-left: 20px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 1em;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
.body p {
|
|
@include newspaper-type();
|
|
font-size: 1.2em;
|
|
line-height: 1.7em;
|
|
margin-bottom: 1.2em;
|
|
}
|
|
}
|
|
|
|
&.wallpaper{
|
|
color : #fff;
|
|
}
|
|
|
|
&.multi-photo {
|
|
p {
|
|
@include media-text();
|
|
}
|
|
|
|
.img-bounding-box {
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
padding: 20px;
|
|
max-height: 400px;
|
|
width: 300px;
|
|
}
|
|
|
|
img {
|
|
@include photo-shadow();
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba(0,0,0,0.3);
|
|
|
|
display: table;
|
|
|
|
.darken-content {
|
|
@include centered-frame();
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.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)
|
|
}
|
|
}
|
|
|
|
$bring-dark-accent-forward-color: #DDD;
|
|
|
|
|
|
|
|
div[data-template=flow] {
|
|
display : table;
|
|
width : 100%;
|
|
height : 100%;
|
|
position : absolute;
|
|
}
|
|
|
|
.flow-content {
|
|
display : table;
|
|
width : 100%;
|
|
height : 100%;
|
|
}
|
|
|
|
.post-form {
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.flow-controls {
|
|
@include info-container-base();
|
|
z-index: 999;
|
|
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
|
|
padding: 20px 0;
|
|
max-height: 68px;
|
|
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
|
.controls {
|
|
margin: 0 auto;
|
|
max-width: 960px;
|
|
|
|
text-align: center;
|
|
|
|
button {
|
|
float : right;
|
|
}
|
|
#controls-wrapper {
|
|
margin: 0 9%;
|
|
}
|
|
}
|
|
|
|
.aspect-selector {
|
|
float: left;
|
|
|
|
i {
|
|
display: none;
|
|
}
|
|
|
|
.selected i {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left : 3px;
|
|
margin-top : 1px;
|
|
}
|
|
|
|
a {
|
|
display : block;
|
|
|
|
span:not(.caret) {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-selector {
|
|
float: left;
|
|
margin-left: 100px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
bottom : 0;
|
|
top: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
a.mood {
|
|
@include border-radius();
|
|
margin-right: 11px;
|
|
padding: 7px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
line-height: 2em;
|
|
|
|
&#selected_mood {
|
|
background-color: #222;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #222;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
|
|
// if you change this, check toggling the new publisher service broadcasts is still sensible
|
|
// the checkbox should be hidden, and in the off state the service icons should be lighter
|
|
// when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
|
|
.magic-service-selector {
|
|
label { display : inline;}
|
|
|
|
img {
|
|
cursor : pointer;
|
|
height : 28px;
|
|
width : 28px;
|
|
|
|
&:hover {
|
|
@include opacity(0.6);
|
|
}
|
|
}
|
|
|
|
input:not(:checked) + label {
|
|
@include opacity(0.4);
|
|
}
|
|
|
|
input {
|
|
display : none;
|
|
}
|
|
}
|
|
|
|
|
|
#top-right-nav {
|
|
z-index: 10;
|
|
position : absolute;
|
|
right : 10px;
|
|
top : 10px;
|
|
|
|
& > a {
|
|
@include transition(opacity);
|
|
@include opacity(0.4);
|
|
|
|
margin-left : 5px;
|
|
|
|
&:hover {
|
|
@include opacity(0.75);
|
|
text-decoration : none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* bootstrap label fixes for Roboto */
|
|
.label {
|
|
padding : 2px 5px;
|
|
padding-bottom : 3px;
|
|
|
|
span {
|
|
display : inline-block;
|
|
position : relative;
|
|
top : 1px;
|
|
font-family : Roboto-Bold;
|
|
}
|
|
}
|