Change tag style
This commit is contained in:
parent
e68e261882
commit
645557480c
4 changed files with 82 additions and 48 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -621,33 +621,51 @@ a, .linkdescription a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.linktaglist {
|
||||
line-height: 200%;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.linktag:hover {
|
||||
border-color: #555573;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.linktag a {
|
||||
color: #777;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
background-color: #333;
|
||||
color: #a2dd42;
|
||||
}
|
||||
.tags a:hover:before {
|
||||
border-color: transparent #333 transparent transparent;
|
||||
}
|
||||
|
||||
.linkshort a {
|
||||
|
|
|
|||
|
|
@ -633,36 +633,52 @@ a, .linkdescription a {
|
|||
color: #3465A4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.linktaglist {
|
||||
line-height: 200%;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.linktag:hover {
|
||||
border-color: #555573;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.linktag a {
|
||||
color: #777;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue