Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Change tag style

Browse source
This commit is contained in:
Knah Tsaeb 2016-09-14 11:13:49 +02:00
parent e68e261882
commit 645557480c
4 changed files with 82 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
tpl/myShaarli/linklist.html
View file

@ -90,8 +90,8 @@ <h3 class="linktitle">{function="returnFavicon($value.url)"}<a href="{$redirecto
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>

60
tpl/myShaarli/myShaarli.css
View file

@ -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 {

62
tpl/myShaarli_Columns/columns.css
View file

@ -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;

4
tpl/myShaarli_Columns/linklist.html
View file

@ -90,8 +90,8 @@ <h3 class="linktitle">{function="returnFavicon($value.url)"}<a href="{$redirecto
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>