Vulcan/packages/telescope-theme-hubble/lib/client/sass/modules/_posts.scss

259 lines
4.5 KiB
SCSS
Raw Normal View History

.empty-notice{
text-align:center;
padding:10px 0;
}
2012-09-11 16:27:26 +09:00
.posts{
2012-08-25 11:20:17 +09:00
position:relative;
2012-09-11 16:27:26 +09:00
.post{
2013-03-19 10:54:01 +09:00
position:relative;
2012-09-11 16:27:26 +09:00
width:100%;
@include cf;
&.animate{
@include single-transition(ease-out, top, 400ms, 0ms);
}
&.inactive{
2014-07-03 10:09:22 +09:00
.post-content{
2012-12-24 16:21:56 +01:00
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg==');
}
}
2012-09-11 16:27:26 +09:00
}
2012-08-25 11:20:17 +09:00
}
.post-content{
position:relative;
@extend .grid-block;
padding:0;
min-height:$grid-unit - 30px;
// margin-right:240px;
margin-right:160px;
.post-info{
padding:$grid-padding - 2px $grid-padding;
2012-08-31 18:58:12 +09:00
margin-left:30px;
2012-08-25 11:20:17 +09:00
}
.post-rank{
position:absolute;
top:0px;
left:-50px;
display:block;
height:$grid-unit;
line-height:$grid-unit;
width:30px;
text-align:right;
font-size:30px;
// font-weight:bold;
color:black(0.1);
}
.post-upvote{
position:absolute;
top:0px;
bottom:0px;
.upvote-link{
height:100%;
display:table;
float:left;
2012-08-31 18:58:12 +09:00
width:30px;
// @include background(linear-gradient(#f3f6f8, #dfe3e5));
@include border-radius(3px 0 0 3px);
// background:$light-blue;
// @include box-shadow(inset 0 1px 0 white, inset -1px 0 1px black(0.1));
border-right:1px solid $lightest-grey;
2012-08-25 11:20:17 +09:00
i{
2012-08-31 18:58:12 +09:00
font-size:12px;
2012-08-25 11:20:17 +09:00
display:table-cell;
height:100%;
width:100%;
text-align:center;
// line-height:$grid-unit;
vertical-align:middle;
2012-08-31 18:58:12 +09:00
color:$light-blue2;
color:$red;
2012-08-25 11:20:17 +09:00
text-shadow:0px 1px 0px white;
&.icon-check{
display:none;
}
}
span{
display:none;
}
&.not-voted:hover{
@include box-shadow(none);
2012-08-31 18:58:12 +09:00
background:$highlight-color url("/img/bg-header.png") top center;
2012-08-25 11:20:17 +09:00
i{
color:white;
text-shadow:none;
}
}
&.voted{
cursor:default;
i.icon-up{
display:none;
}
i.icon-check{
2012-08-31 18:58:12 +09:00
color:$blue;
2012-08-25 11:20:17 +09:00
display:table-cell;
}
}
}
}
2012-10-02 10:54:04 +09:00
.post-sticky{
display:block;
position:absolute;
right:20px;
top:16px;
font-size:24px;
i{
color:$light-text;
}
span{
display:none;
}
}
2012-08-25 11:20:17 +09:00
.post-heading{
margin-bottom:0px;
.post-title{
font-size:20px;
color:$text;
font-weight:normal;
line-height:1;
2012-10-02 10:54:04 +09:00
&:visited{
color:$grey;
}
&:hover{
color:$red;
}
2012-08-25 11:20:17 +09:00
}
.post-domain{
color:$light-text;
font-size:14px;
font-weight:normal;
2012-08-25 11:20:17 +09:00
}
2013-02-18 12:13:27 +09:00
.post-category{
display:inline-block;
font-size:11px;
@include border-radius(3px);
background:#eee;
padding:0px 6px;
text-transform:uppercase;
font-weight:normal;
vertical-align:middle;
&:hover{
background:$red;
color:white;
}
}
2012-08-25 11:20:17 +09:00
}
.post-meta{
font-size:13px;
color:$light-text;
line-height:1.5;
}
}
.post-actions{
float:right;
padding:0;
2014-07-03 10:09:22 +09:00
>li{
2012-08-31 18:58:12 +09:00
position:relative;
2012-08-25 11:20:17 +09:00
float:left;
margin-left:$grid-margin;
2014-07-03 10:09:22 +09:00
>a{
2012-08-25 11:20:17 +09:00
@extend .grid-block;
2012-08-31 18:58:12 +09:00
background:$light-blue;
background:white;
2012-08-25 11:20:17 +09:00
position:relative;
display:block;
padding:0;
width:$grid-unit;
height:$grid-unit;
line-height:$grid-unit;
vertical-align:baseline;
text-align:center;
color:$light-text;
font-size:36px;
line-height:50px;
&.edit-link{
color:$red;
}
2012-08-31 18:58:12 +09:00
&.share-link{
color:$blue;
color:$yellow;
}
&.discuss-link{
color:$green;
}
&.more-link{
color:$blue;
}
2012-08-25 11:20:17 +09:00
&:hover{
2012-08-31 18:58:12 +09:00
background:$highlight-color url("/img/bg-header.png") top center;
2012-08-25 11:20:17 +09:00
color:white;
}
&.voted{
2012-08-31 18:58:12 +09:00
background:$highlight-color;
2012-08-25 11:20:17 +09:00
color:white;
cursor: default;
.action{
color: #fff;
}
}
.count{
position:absolute;
top:12px;
display:block;
width:100%;
height:20px;
line-height:20px;
font-size:11px;
}
.points{
display:block;
font-size:30px;
line-height:50px;
}
.action{
display:block;
height:20px;
width:100%;
line-height:20px;
position:absolute;
bottom:5px;
left:0px;
font-size:13px;
2012-08-31 18:58:12 +09:00
color:$light-text;
2012-09-24 15:56:56 +09:00
pointer-events:none;
2012-08-31 18:58:12 +09:00
// color:$red;
2012-08-25 11:20:17 +09:00
}
}
}
}
.post-message{
2012-09-06 11:35:14 +09:00
@extend .grid-block;
2012-08-25 11:20:17 +09:00
padding:20px;
margin-bottom:$grid-margin;
font-size:18px;
2012-09-08 11:54:08 +09:00
.list &{
display:none;
}
2012-08-25 11:20:17 +09:00
}
2014-07-03 10:09:22 +09:00
2012-10-09 15:34:00 +09:00
.post.sticky{
.post-content, .post-actions li a{
background:$light-yellow;
}
.post-actions li a:hover{
background:$highlight-color url("/img/bg-header.png") top center;
}
2012-10-09 16:11:30 +09:00
}
.more-button{
2012-10-17 17:25:10 +09:00
position:relative;
2012-10-09 16:11:30 +09:00
padding-bottom:10px;
a{
2012-10-17 17:25:10 +09:00
width:100%;
2012-10-09 16:11:30 +09:00
display:block;
height:$grid-unit;
background:black(0.075);
text-align:center;
color:white;
line-height:$grid-unit;
font-size:24px;
@include border-radius(3px);
}
2012-10-09 15:34:00 +09:00
}