ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS enhancements for focused elements

Browse source
This commit is contained in:
Marcin Kurczewski 2013-10-29 09:42:29 +01:00
parent bc43883339
commit 96d994eeea
4 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public_html/media/css/core.css
View file

@ -108,6 +108,7 @@ body {
#top-nav li.safety span {
display: none;
}
#top-nav li.safety a:focus,
#top-nav li.safety a:hover { opacity: .7; }
#top-nav li.safety a.inactive { opacity: 1; }
#top-nav li.safety .safety-safe .enabled { background: #cfe6c2; background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }

6
public_html/media/css/paginator.css
View file

@ -31,3 +31,9 @@
.paginator li.disabled a {
color: gray;
}
.paginator li a:focus,
.paginator li a:hover {
border: 1px solid firebrick;
background: pink;
}

31
public_html/media/css/post-small.css
View file

@ -1,19 +1,19 @@
.post {
border: 1px solid #ddd;
box-shadow: 0.25em 0.25em #eee;
padding: 0;
position: relative;
display: inline-block;
}
.post .link {
border: 1px solid #ddd;
box-shadow: 0.25em 0.25em #eee;
color: black;
}
.post-type-youtube:after,
.post-type-flash:after {
position: absolute;
right: 0;
top: 0;
right: 1px; /* border */
top: 1px; /* border */
width: 150px;
height: 150px;
content: ' ';
@ -44,6 +44,7 @@
margin: 60px 25px;
line-height: 30px;
}
.post .toggle-tag:focus,
.post .toggle-tag:hover {
opacity: 1;
}
@ -60,13 +61,13 @@
}
.post:focus,
.post:hover {
.post .link:focus,
.post .link:hover {
border: 1px solid firebrick;
box-shadow: 0.25em 0.25em pink;
}
.post:focus img.thumb,
.post:hover img.thumb {
.post .link:focus img.thumb,
.post .link:hover img.thumb {
opacity: .9;
}
@ -84,13 +85,16 @@
.post .info-bar {
display: none;
height: 20px;
width: 100%;
border-top: 1px solid firebrick;
background: rgba(255, 128, 128, 0.75);
position: absolute;
bottom: 0;
z-indeX: 3;
left: 1px; /* border */
right: 1px; /* border */
bottom: 1px; /* border */
}
.post:hover .info-bar {
.post .link:focus .info-bar,
.post .link:hover .info-bar {
display: block;
}
@ -101,14 +105,15 @@
.post .icon-favs {
background-position: -43px -1px;
}
.post [class^='icon-'] {
.post .link [class^='icon-'] {
opacity: .75;
background-color: transparent;
width: 20px;
height: 20px;
line-height: 20px;
vertical-align: top;
}
.post span {
.post .link span {
vertical-align: top;
font-size: small;
line-height: 20px;

8
src/Views/post-small.phtml
View file

@ -14,9 +14,9 @@
<?php endif ?>
<a class="link" href="<?php echo \Chibi\UrlHelper::route('post', 'view', ['id' => $this->context->post->id]) ?>">
<img class="thumb" src="<?php echo \Chibi\UrlHelper::route('post', 'thumb', ['name' => $this->context->post->name]) ?>" alt="@<?php echo $this->context->post->id ?>"/>
<div class="info-bar">
<i class="icon-comments"></i> <span><?php echo $this->context->post->countOwn('comment') ?></span>
<i class="icon-favs"></i> <span><?php echo $this->context->post->countOwn('favoritee') ?></span>
</div>
</a>
<div class="info-bar">
<i class="icon-comments"></i> <span><?php echo $this->context->post->countOwn('comment') ?></span>
<i class="icon-favs"></i> <span><?php echo $this->context->post->countOwn('favoritee') ?></span>
</div>
</div>