From 645557480c74d62aa65374f1f08ad0abde18f2b8 Mon Sep 17 00:00:00 2001
From: Knah Tsaeb <Knah-Tsaeb@knah-tsaeb.org>
Date: Wed, 14 Sep 2016 11:13:49 +0200
Subject: [PATCH] Change tag style

---
 tpl/myShaarli/linklist.html         |  4 +-
 tpl/myShaarli/myShaarli.css         | 60 ++++++++++++++++++----------
 tpl/myShaarli_Columns/columns.css   | 62 ++++++++++++++++++-----------
 tpl/myShaarli_Columns/linklist.html |  4 +-
 4 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/tpl/myShaarli/linklist.html b/tpl/myShaarli/linklist.html
index bbc4f46..50efaa1 100644
--- a/tpl/myShaarli/linklist.html
+++ b/tpl/myShaarli/linklist.html
@@ -90,8 +90,8 @@
               onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code" alt="qrcode logo"></a></span> - <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span>
             <br>
             {if="$value.tags"}
-            <div class="linktaglist">
-              {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
+            <div class="tags">
+              {loop="value.taglist"}<a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a> {/loop}
             </div>
             {/if}
           </div>
diff --git a/tpl/myShaarli/myShaarli.css b/tpl/myShaarli/myShaarli.css
index 5245934..3c6a335 100644
--- a/tpl/myShaarli/myShaarli.css
+++ b/tpl/myShaarli/myShaarli.css
@@ -621,33 +621,51 @@ a, .linkdescription a {
   text-decoration: none;
 }
 
-.linktaglist {
-  line-height: 200%;
-  padding-top: 0.3em;
+.tags a {
+	float: left;
+	background: #777;
+	color: #fff;
+	text-decoration: none;
+	margin: 0 0 10px 18px;
+	padding: 2px 10px 1px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	position: relative;
+	transition: all .25s linear;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+	white-space: nowrap;
+	line-height: 21px;
 }
 
-.linktag {
-  background: linear-gradient(#F2F2F2,#ffffff);
-  background-color: #ffffff;
-  background-image: url(../../images/tag_blue.png);
-  background-position: 3px center;
-  background-repeat: no-repeat;
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0 0 2px rgba(0,0,0,0.5);
-  cursor: pointer;
-  font-size: 9pt;
-  height: 20px;
-  padding: 3px 3px 3px 20px;
+.tags a:before {
+	content: "";
+	border-style: solid;
+	border-color: transparent #777 transparent transparent;
+	border-width: 12px 13px 12px 0;
+	position: absolute;
+	left: -13px;
+	top: 0;
+	transition: all .25s linear;
 }
 
-.linktag:hover {
-  border-color: #555573;
-  color: #000;
+.tags a:after {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-radius: 50% 50% 50% 50%;
+    box-shadow: 0 1px 1px #737373 inset;
+    content: "";
+    height: 5px;
+    left: -1px;
+    position: absolute;
+    top: 10px;
+    width: 5px;
 }
 
-.linktag a {
-  color: #777;
-  text-decoration: none;
+.tags a:hover {
+	background-color: #333;
+  color: #a2dd42;
+}
+.tags a:hover:before {
+	 border-color: transparent #333 transparent transparent;
 }
 
 .linkshort a {
diff --git a/tpl/myShaarli_Columns/columns.css b/tpl/myShaarli_Columns/columns.css
index fab3b4e..4972f6f 100644
--- a/tpl/myShaarli_Columns/columns.css
+++ b/tpl/myShaarli_Columns/columns.css
@@ -633,36 +633,52 @@ a, .linkdescription a {
   color: #3465A4;
   text-decoration: none;
 }
-
-.linktaglist {
-  line-height: 200%;
-  padding-top: 0.3em;
+.tags a {
+	float: left;
+	background: #777;
+	color: #fff;
+	text-decoration: none;
+	margin: 0 0 10px 18px;
+	padding: 2px 10px 1px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	position: relative;
+	transition: all .25s linear;
+	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+	white-space: nowrap;
+	line-height: 21px;
 }
 
-.linktag {
-  background: linear-gradient(#F2F2F2,#ffffff);
-  background-color: #ffffff;
-  background-image: url(../../images/tag_blue.png);
-  background-position: 3px center;
-  background-repeat: no-repeat;
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0 0 2px rgba(0,0,0,0.5);
-  cursor: pointer;
-  font-size: 9pt;
-  height: 20px;
-  padding: 3px 3px 3px 20px;
+.tags a:before {
+	content: "";
+	border-style: solid;
+	border-color: transparent #777 transparent transparent;
+	border-width: 12px 13px 12px 0;
+	position: absolute;
+	left: -13px;
+	top: 0;
+	transition: all .25s linear;
 }
 
-.linktag:hover {
-  border-color: #555573;
-  color: #000;
+.tags a:after {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-radius: 50% 50% 50% 50%;
+    box-shadow: 0 1px 1px #737373 inset;
+    content: "";
+    height: 5px;
+    left: -1px;
+    position: absolute;
+    top: 10px;
+    width: 5px;
 }
 
-.linktag a {
-  color: #777;
-  text-decoration: none;
+.tags a:hover {
+	background-color: #333;
+  color: #a2dd42;
+}
+.tags a:hover:before {
+	 border-color: transparent #333 transparent transparent;
 }
-
 .linkshort a {
   color: #393964;
   text-decoration: none;
diff --git a/tpl/myShaarli_Columns/linklist.html b/tpl/myShaarli_Columns/linklist.html
index f808920..f4c30c9 100644
--- a/tpl/myShaarli_Columns/linklist.html
+++ b/tpl/myShaarli_Columns/linklist.html
@@ -90,8 +90,8 @@
               onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" title="QR-Code" alt="qrcode logo"></a></span> - <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span>
             <br>
             {if="$value.tags"}
-            <div class="linktaglist">
-              {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
+            <div class="tags">
+              {loop="value.taglist"}<a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a> {/loop}
             </div>
             {/if}
           </div>