body > .container:first-child { margin: 3rem auto 0; } a { text-decoration: none; } .list-sort { background: #ddd; border-radius: 1rem; padding: 1.5rem 2rem .5rem; } .list-sort label { display: inline-block; margin: 0 1rem 0 0; } .file-list { list-style: none; } .file-list li { margin: 1rem 0; } .file-list .file-name { line-height: 4rem; display: inline-block; position: relative; padding-left: 4rem; } .file-list .file-name::before { background: no-repeat center center; background-size: contain; width: 3rem; content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; } .file-list .directory .file-name::before { background-image: url(../image/directory.png); } .file-list .file .file-name::before { background-image: url(../image/file.png); } .file-list .other .file-name::before { background-image: url(../image/other.png); } .file-list .parent .file-name::before { background-image: url(../image/parent.png); } .file-list .file-link { } .file-list .file-date { padding: .25rem .5rem; background: #1EAEDB; border-radius: .5rem; font-size: 70%; margin: 0 .5rem; color: #fff; } .file-list .directory .file-date { } .file-list .parent .file-date { display: none; } .file-list .file-size { padding: .25rem .5rem; background: #24db53; border-radius: .5rem; font-size: 70%; margin: 0 .5rem; color: #fff; } .file-list .other .file-size, .file-list .parent .file-size, .file-list .directory .file-size { display: none; } footer { text-align: center; } footer small + small { margin-left: 2rem; }