szurubooru/public_html/media/css/post-small.css

128 lines
2.1 KiB
CSS
Raw Normal View History

2013-10-19 20:05:03 +02:00
.post {
padding: 0;
2013-10-19 20:05:03 +02:00
position: relative;
2013-10-19 22:56:56 +02:00
display: inline-block;
}
.post .link {
2013-10-29 09:42:29 +01:00
border: 1px solid #ddd;
box-shadow: 0.25em 0.25em #eee;
color: black;
}
2013-10-25 13:18:03 +02:00
.post-type-youtube:after,
2013-10-22 23:40:36 +02:00
.post-type-flash:after {
position: absolute;
2013-10-29 09:42:29 +01:00
right: 1px; /* border */
top: 1px; /* border */
2013-10-22 23:40:36 +02:00
width: 150px;
height: 150px;
content: ' ';
pointer-events: none;
}
2013-10-25 13:18:03 +02:00
.post-type-flash {
border-color: red;
}
.post-type-youtube {
border-color: red;
}
.post-type-flash:after {
background: url('../img/thumb-overlay-swf.png');
}
.post-type-youtube:after {
background: url('../img/thumb-overlay-yt.png');
}
.post .toggle-tag {
position: absolute;
z-index: 2;
width: 100px;
height: 30px;
background: whitesmoke;
opacity: .5;
border: 1px solid black;
margin: 60px 25px;
line-height: 30px;
}
2013-10-29 09:42:29 +01:00
.post .toggle-tag:focus,
.post .toggle-tag:hover {
opacity: 1;
}
.post.taggable.tagged .toggle-tag {
background-color: #0f0;
color: black;
}
.post.taggable:not(.tagged) .toggle-tag {
background-color: #f00;
color: white;
}
.post .link {
z-index: 1;
}
2013-10-29 09:42:29 +01:00
.post .link:focus,
.post .link:hover {
border: 1px solid firebrick;
box-shadow: 0.25em 0.25em pink;
2013-10-19 20:05:03 +02:00
}
2013-10-29 09:42:29 +01:00
.post .link:focus img.thumb,
.post .link:hover img.thumb {
opacity: .9;
}
2013-10-19 20:05:03 +02:00
.post a {
display: inline-block;
2013-10-25 15:50:29 +02:00
vertical-align: top;
}
2013-10-19 20:05:03 +02:00
.post img.thumb {
display: inline-block;
width: 150px;
height: 150px;
vertical-align: top;
2013-10-19 20:05:03 +02:00
}
.post .info-bar {
display: none;
border-top: 1px solid firebrick;
background: rgba(255, 128, 128, 0.75);
position: absolute;
2013-10-29 09:42:29 +01:00
z-indeX: 3;
left: 1px; /* border */
right: 1px; /* border */
bottom: 1px; /* border */
2013-11-16 22:02:32 +01:00
text-align: center;
2013-10-19 20:05:03 +02:00
}
2013-10-29 09:42:29 +01:00
.post .link:focus .info-bar,
.post .link:hover .info-bar {
2013-10-19 20:05:03 +02:00
display: block;
}
2013-11-16 22:02:32 +01:00
.post .icon-score {
background-position: -85px -1px;
}
2013-10-19 20:05:03 +02:00
.post .icon-comments {
background-position: -64px -1px;
}
.post .icon-favs {
background-position: -43px -1px;
}
2013-10-29 09:42:29 +01:00
.post .link [class^='icon-'] {
2013-10-19 20:05:03 +02:00
opacity: .75;
2013-10-29 09:42:29 +01:00
background-color: transparent;
2013-10-19 20:05:03 +02:00
width: 20px;
height: 20px;
line-height: 20px;
vertical-align: top;
}
2013-10-29 09:42:29 +01:00
.post .link span {
2013-10-19 20:05:03 +02:00
vertical-align: top;
font-size: small;
line-height: 20px;
margin-right: 0.5em;
display: inline-block;
}
2013-11-16 22:02:32 +01:00
.post .link span.inactive {
display: none;
}