From 96d994eeeaeeebeace8e9bd37860131cf71414de Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Tue, 29 Oct 2013 09:42:29 +0100
Subject: [PATCH] CSS enhancements for focused elements

---
 public_html/media/css/core.css       |  1 +
 public_html/media/css/paginator.css  |  6 ++++++
 public_html/media/css/post-small.css | 31 ++++++++++++++++------------
 src/Views/post-small.phtml           |  8 +++----
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/public_html/media/css/core.css b/public_html/media/css/core.css
index 871e6c29..641db6a6 100644
--- a/public_html/media/css/core.css
+++ b/public_html/media/css/core.css
@@ -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%); }
diff --git a/public_html/media/css/paginator.css b/public_html/media/css/paginator.css
index 72f05074..140daa3a 100644
--- a/public_html/media/css/paginator.css
+++ b/public_html/media/css/paginator.css
@@ -31,3 +31,9 @@
 .paginator li.disabled a {
 	color: gray;
 }
+
+.paginator li a:focus,
+.paginator li a:hover {
+	border: 1px solid firebrick;
+	background: pink;
+}
diff --git a/public_html/media/css/post-small.css b/public_html/media/css/post-small.css
index d6971d2f..c6a2e55c 100644
--- a/public_html/media/css/post-small.css
+++ b/public_html/media/css/post-small.css
@@ -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;
diff --git a/src/Views/post-small.phtml b/src/Views/post-small.phtml
index 2ce8606c..ae1e53a0 100644
--- a/src/Views/post-small.phtml
+++ b/src/Views/post-small.phtml
@@ -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>