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}"> - {$value.url|htmlspecialchars}
{if="$value.tags"}
-
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}"> - {$value.url|htmlspecialchars}
{if="$value.tags"}
-