subtle pin stripe in list, better pinned style
This commit is contained in:
parent
cc03a2b6dc
commit
0b3d36c64f
14
index.css
14
index.css
|
@ -101,6 +101,10 @@ section.select-list .entry {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
section.select-list .entry:last-child {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
section.select-list .entry:hover {
|
section.select-list .entry:hover {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
@ -129,9 +133,6 @@ section.select-list a.favoritelink {
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
section.select-list a.pinned {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
section.select-list a.favoritelink:hover {
|
section.select-list a.favoritelink:hover {
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
@ -165,6 +166,13 @@ section.select-list .entry a.website:active {
|
||||||
section.select-list a.website:active {
|
section.select-list a.website:active {
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
section.select-list .pinned + .entry:not(.pinned) {
|
||||||
|
border-top-color: #ccc;
|
||||||
|
}
|
||||||
|
section.select-list .pinned a.favoritelink,
|
||||||
|
section.select-list .pinned.entry:hover a.favoritelink {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
section.select-list .details {
|
section.select-list .details {
|
||||||
color: #777;
|
color: #777;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
4
index.js
4
index.js
|
@ -215,12 +215,12 @@ function renderSelectList() {
|
||||||
render_info = ', bitmap';
|
render_info = ', bitmap';
|
||||||
}
|
}
|
||||||
$('#select-font').append(
|
$('#select-font').append(
|
||||||
'<div class="entry" data-alias="' + v.alias + '">' +
|
'<div class="entry' + (favoritesMap[v.alias] ? ' pinned' : '') + '" data-alias="' + v.alias + '">' +
|
||||||
'<a href="#' + v.alias + '">' +
|
'<a href="#' + v.alias + '">' +
|
||||||
'<span class="name">' + v.name + '</span>' +
|
'<span class="name">' + v.name + '</span>' +
|
||||||
'<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
|
'<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
|
||||||
'</a>' +
|
'</a>' +
|
||||||
'<a class="favoritelink' + (favoritesMap[v.alias] ? ' pinned' : '') + '" onclick="toggleFavorite(\'' + v.alias + '\')">' +
|
'<a class="favoritelink" onclick="toggleFavorite(\'' + v.alias + '\')">' +
|
||||||
pinIcon +
|
pinIcon +
|
||||||
'</a>' +
|
'</a>' +
|
||||||
'<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a></div>'
|
'<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a></div>'
|
||||||
|
|
Loading…
Reference in New Issue