From f009176f861ef77feef551e8aa3640da4bd81fcc Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Fri, 27 May 2016 07:18:09 +0100 Subject: css: attach icons to the , not the . This has the downside that they are no longer clickable. It slightly alters both the vertical alignment of the icon and the link text; the link is now alligned with the other row text (though because of the space between them, it wasn't really perceptible). The icon is now actually aligned with a 4px vertical padding, which is what I always wanted. --- style.css | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/style.css b/style.css index 1521b48..03a5bec 100644 --- a/style.css +++ b/style.css @@ -23,33 +23,31 @@ tr:hover { box-shadow: inset 0 0 0 1px #bcd; } -/* Make room for a 16x16 icon on the left, with 4px padding between it - * and the text. */ -td a:first-of-type { +/* Make room for a 16x16 icon on the left, with 4px padding on either + * side */ +tr td:first-of-type { + padding-left: 24px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: 4px 4px; margin-left: 20px; } -td a:first-of-type::before { - width: 16px; - height: 16px; - margin-left: -20px; - margin-right: 4px; -} /* generic inode information ---------------------------------------- */ tr.hidden { /*opacity: 0.5;*/ display: none; } tr.dir a::after { content: "/"; } -tr.dir a:first-of-type::before { content: url("dir.png"); } -tr.dir.parent a:first-of-type::before { content: url("parent.png"); } -tr.link a:first-of-type::before { content: url("link.png"); } -tr.file a:first-of-type::before { content: url("file.png"); } +tr.dir td:first-of-type { background-image: url("dir.png"); } +tr.dir.parent td:first-of-type { background-image: url("parent.png"); } +tr.link td:first-of-type { background-image: url("link.png"); } +tr.file td:first-of-type { background-image: url("file.png"); } /* domain-specific information -------------------------------------- */ -tr.dir.repo a:first-of-type::before { content: url("repo.png"); } -tr.arch td { background:#7fc3e5; } -tr.para td { background:#9fa6e3; } +tr.dir.repo td:first-of-type { background-image: url("repo.png"); } +tr.arch td { background-color:#7fc3e5; } +tr.para td { background-color:#9fa6e3; } tr.community { /* TODO: we should indicate this somehow */ } /* file extension information --------------------------------------- */ -tr.file.pkg.tar a:first-of-type::before { content: url("pkg.png"); } -tr.file.iso a:first-of-type::before { content: url("iso.png"); } -tr.file.tar a:first-of-type::before { content: url("tar.png"); } -tr.file.txt a:first-of-type::before { content: url("txt.png"); } -tr.file.torrent a:first-of-type::before { content: url("torrent.png"); } +tr.file.pkg.tar td:first-of-type { background-image: url("pkg.png"); } +tr.file.iso td:first-of-type { background-image: url("iso.png"); } +tr.file.tar td:first-of-type { background-image: url("tar.png"); } +tr.file.txt td:first-of-type { background-image: url("txt.png"); } +tr.file.torrent td:first-of-type { background-image: url("torrent.png"); } -- cgit v1.2.2