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

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

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

@ -14,9 +14,9 @@
<?php endif ?> <?php endif ?>
<a class="link" href="<?php echo \Chibi\UrlHelper::route('post', 'view', ['id' => $this->context->post->id]) ?>"> <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 ?>"/> <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> </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> </div>