485 lines
8.2 KiB
SCSS
485 lines
8.2 KiB
SCSS
@mixin wide() {
|
|
width : $two-column-width + px;
|
|
}
|
|
|
|
a.logo{
|
|
text-decoration: none;
|
|
color: white;
|
|
&:hover{
|
|
text-decoration: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.no-post-message {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.canvas-frame {
|
|
float : left;
|
|
margin : 10px;
|
|
margin-bottom : 18px;
|
|
|
|
max-width : 100%;
|
|
|
|
/* expand / contract cursor declarations */
|
|
&.x2 .content {
|
|
cursor : nw-resize;
|
|
cursor : -moz-zoom-out;
|
|
cursor : -webkit-zoom-out;
|
|
}
|
|
.content {
|
|
cursor : nwse-resize;
|
|
cursor : -moz-zoom-in;
|
|
cursor : -webkit-zoom-in;
|
|
}
|
|
|
|
.content {
|
|
/* default height to be overridden */
|
|
min-height : $column-width + px;
|
|
}
|
|
|
|
&.has-media .content {
|
|
min-height : 0;
|
|
}
|
|
|
|
.content {
|
|
@include transition(-webkit-transform);
|
|
@include box-shadow(0, 8px, 50px, rgba(0,0,0,0.9));
|
|
|
|
background-image : image_url("texture/paper.jpg");
|
|
|
|
&:hover {
|
|
.info {
|
|
top : 0;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
-webkit-transform : scale(0.99);
|
|
}
|
|
|
|
img {
|
|
border : none;
|
|
}
|
|
|
|
//hax to deal with markdownify
|
|
p {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
position : relative;
|
|
|
|
background-color : #fff;
|
|
|
|
width : $column-width + px;
|
|
max-width : 100%;
|
|
|
|
overflow : hidden;
|
|
|
|
/* used in masking photos with overflow: hidden; */
|
|
.image-container {
|
|
overflow : hidden;
|
|
width : 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width : 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.embed-frame {
|
|
.thumb {
|
|
position : relative;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
iframe {
|
|
height : 100%;
|
|
width : 100%;
|
|
max-height: 222px;
|
|
}
|
|
}
|
|
|
|
.controls{
|
|
position : absolute;
|
|
z-index : 100;
|
|
top : 10px;
|
|
right : 10px;
|
|
|
|
display : none;
|
|
|
|
.edit-mode & {
|
|
display : inline-block;
|
|
}
|
|
|
|
a, span {
|
|
display : inline-block;
|
|
background-size : 30px 30px;
|
|
height : 30px;
|
|
width : 30px;
|
|
text-decoration : none;
|
|
}
|
|
|
|
.delete {
|
|
background-image : image_url('buttons/delete.png');
|
|
|
|
&:hover {
|
|
background-image : image_url('buttons/delete_hover.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
@include transition(top);
|
|
@include box-shadow(0,1px,3px,rgba(0,0,0,0.3));
|
|
@include opacity(0.8);
|
|
|
|
cursor : pointer;
|
|
|
|
background-color : rgba(255,255,255,0.8);
|
|
border-bottom : 1px solid #fff;
|
|
|
|
color : #000;
|
|
|
|
position : absolute;
|
|
top : -32px;
|
|
right : 0;
|
|
text-align : center;
|
|
width : 100%;
|
|
|
|
z-index : 30;
|
|
|
|
padding : 5px 0;
|
|
|
|
&:hover {
|
|
@include opacity(0.9);
|
|
}
|
|
|
|
i {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.avatar {
|
|
position : absolute;
|
|
top : 0;
|
|
left : 0;
|
|
|
|
height : 29px;
|
|
width : 29px;
|
|
}
|
|
|
|
.timestamp,
|
|
.permalink {
|
|
margin : 1px 7px;
|
|
}
|
|
|
|
.timestamp {
|
|
float : left;
|
|
margin-top : 2px;
|
|
}
|
|
|
|
.permalink {
|
|
cursor : pointer;
|
|
float : right;
|
|
}
|
|
}
|
|
|
|
.background-color {
|
|
height : 100%;
|
|
width : 100%;
|
|
position: absolute;
|
|
top : 0;
|
|
left : 0;
|
|
}
|
|
|
|
.text-content {
|
|
position : relative;
|
|
z-index : 10;
|
|
color : #000;
|
|
|
|
text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
|
|
font-size : 1.5em;
|
|
line-height : 1.2em;
|
|
|
|
/* I'D DO ANYTHING FOR TEXT, BUT I WON'T DO THAT (see: http://www.youtube.com/watch?v=9GNhdQRbXhc) */
|
|
max-height : 485.5px;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
p {
|
|
word-break : break-word;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.cyan .background-color { background-color : rgba($cyan, 0.2); }
|
|
&.green .background-color { background-color : rgba($green, 0.2); }
|
|
&.yellow .background-color { background-color : rgba($yellow, 0.2); }
|
|
&.purple .background-color { background-color : rgba($purple, 0.2); }
|
|
&.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
|
|
&.orange .background-color { background-color : rgba($orange, 0.2); }
|
|
&.red .background-color { background-color : rgba($red, 0.2); }
|
|
&.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
|
|
&.sand .background-color { background-color : rgba($sand, 0.8); }
|
|
|
|
&.blog-text {
|
|
.text-content {
|
|
padding : 10px;
|
|
color : #222;
|
|
|
|
p {
|
|
text-shadow : none;
|
|
|
|
font-family : Palatino, Georgia, Times, serif;
|
|
font-weight : normal;
|
|
font-size : 0.8em;
|
|
line-height : 1.5em;
|
|
text-align : justify;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:no-text {
|
|
img {
|
|
border : none;
|
|
}
|
|
}
|
|
|
|
&:not(.wallpaper) {
|
|
img {
|
|
border-bottom : 1px solid #ddd;
|
|
}
|
|
|
|
.text-content {
|
|
padding : 20px;
|
|
font-size : 14px;
|
|
line-height : 18px;
|
|
color : #444;
|
|
}
|
|
}
|
|
|
|
&.editable:not(.has-media),
|
|
&.big-text {
|
|
.text-content {
|
|
display : table;
|
|
height : 225px;
|
|
width : 225px;
|
|
margin: 0px auto;
|
|
|
|
p {
|
|
display : table-cell;
|
|
vertical-align : middle;
|
|
|
|
font-size : 2.0em;
|
|
line-height : 1.1em;
|
|
text-align : center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.editable:not(.has-media) p {
|
|
min-width : 225px;
|
|
min-height : 225px;
|
|
}
|
|
|
|
&.x2.big-text .text-content {
|
|
width : $two-column-width - 40 + px;
|
|
}
|
|
|
|
/* larger declarations */
|
|
&.x2.width .content { @include wide(); }
|
|
|
|
&.sticky-note.x2.height .content {
|
|
min-height : $two-row-height + px;
|
|
}
|
|
|
|
&.wallpaper {
|
|
.image-container {
|
|
background-color: black;
|
|
}
|
|
|
|
&.has-text{
|
|
img {
|
|
//image container background is black, lowering opacity darkens image
|
|
@include opacity(0.7);
|
|
}
|
|
}
|
|
|
|
.text-content {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
top: 40%;
|
|
@include centered-frame();
|
|
font-size: 2em;
|
|
color: white;
|
|
|
|
p {
|
|
text-shadow : none;
|
|
padding : 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* new styles go! */
|
|
&.typist {
|
|
.content {
|
|
background : {
|
|
image : image_url("texture/typist.png");
|
|
color : transparent;
|
|
}
|
|
}
|
|
|
|
.background-color {
|
|
display : none;
|
|
}
|
|
|
|
p {
|
|
font-family : "American Typewriter", "Courier";
|
|
letter-spacing : 1.5px;
|
|
font-size : 0.9em;
|
|
color : #111;
|
|
}
|
|
}
|
|
|
|
&.fridge {
|
|
p {
|
|
font : {
|
|
family : "Noteworthy", "Marker Felt", "Comic Sans";
|
|
style : italic;
|
|
}
|
|
font-size : 2em;
|
|
line-height : 1.4em;
|
|
}
|
|
}
|
|
|
|
&.vanilla {
|
|
.content {
|
|
background :{
|
|
color : #fff;
|
|
image : image_url("texture/vanilla.jpg");
|
|
}
|
|
}
|
|
|
|
.background-color {
|
|
display : none;
|
|
}
|
|
|
|
p {
|
|
color : #111;
|
|
text-shadow : none;
|
|
font : {
|
|
weight : normal;
|
|
family : Roboto-Light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* new stream overrides */
|
|
#stream {
|
|
color : #fff;
|
|
background-color : #222;
|
|
|
|
.background {
|
|
@include box-shadow(-2px, 0, 7px, rgba(0,0,0,0.8));
|
|
@include dark-hatched-bg();
|
|
|
|
position : fixed;
|
|
height : 100%;
|
|
width : 100%;
|
|
}
|
|
|
|
|
|
#stream-interactions,
|
|
#stream-content {
|
|
padding-top : 90px;
|
|
}
|
|
}
|
|
|
|
#stream-content {
|
|
.stream-frame {
|
|
.stream-frame-wrapper {
|
|
position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
|
|
}
|
|
margin-bottom : 40px;
|
|
|
|
.stream-frame-feedback {
|
|
float : right;
|
|
margin-top : 8px;
|
|
}
|
|
|
|
.photo-backdrop .text-content p,
|
|
.status-with-photo-backdrop .text-content p {
|
|
color: #111;
|
|
}
|
|
|
|
.canvas-frame {
|
|
.info {
|
|
display : none;
|
|
}
|
|
}
|
|
|
|
/* a media box object */
|
|
.author {
|
|
margin : 0;
|
|
|
|
.bd {
|
|
margin-top : 11px;
|
|
}
|
|
}
|
|
|
|
.selected-frame {
|
|
.content {
|
|
border: 10px solid red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.canvas-frame {
|
|
width: 100%;
|
|
margin : 0;
|
|
float : none;
|
|
|
|
.content {
|
|
width: 100%;
|
|
|
|
/* cursor overrides */
|
|
cursor : pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* responsive */
|
|
@media (max-width: 767px) {
|
|
body {
|
|
padding : 0;
|
|
}
|
|
|
|
.canvas-frame {
|
|
width : 100%;
|
|
margin-left : 0;
|
|
margin-right : 0;
|
|
|
|
margin-bottom : 10px;
|
|
|
|
.content {
|
|
font-size : 0.9em;
|
|
margin : 0;
|
|
width : auto !important;
|
|
}
|
|
}
|
|
}
|