f2e-server/static/css/folder.css

a nodejs based file-system-server with easy-template-engine and several F2E-utils

@charset "utf-8";
body {
  padding: 80px 20px 60px;
  background: #fff;
  font: normal 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a{
  color: #428bca;
  text-decoration: none;
}
li a:hover{
  text-decoration: underline;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
.flash {
  -webkit-animation: flash 2s infinite;
  animation: flash 2s infinite;
}

.fixed-line {
  position: fixed;
  line-height: 40px;
  overflow: visible;
  top: 30px;
  width: 100%;
  left: 0;
  padding-left: 20px;
  z-index: 1;
}
.fixed-line #clock {
  position: absolute;
  right: 30px;
  top: 0px;
}

.btn {
  display: inline-block;
  padding: 8px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}
.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}
.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

@media screen and (max-width: 600px){
  .fixed-line #clock{display: none;}
}
@media screen and (max-width: 360px){
  body{padding-top: 100px;}
}

#list-container{
  padding: 0;
}
#list-container li {
  line-height: 20px;
  height: 20px;
  margin: 4px 0;
  list-style: none;
  padding-left: 20px;
  background: url(../img/fileicon/unknown.gif) no-repeat left center;
}
#ajaxFrame {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
.worn-msg{
  position: absolute;
  right: 1em;
  bottom: 1em;
  border: 1px solid #f60;
  padding: 0 1em;
  font: bold 16px/4 "Arial";
}
.worn-msg a{
  text-decoration: none;
  color: #fff;
}

.see-to-source,
.see-to-source:hover {
  border: 1px solid #42a8e1;
  border-radius: 11px;
  padding: 1px 2px;
  text-decoration: none;
  margin: 1px .2em;
}
<%
    return function(){
        var fs = require("fs");
        fs.readdir(request.util.conf.root+"/static/img/fileicon/",function(error,files){ 
            if(error){
                response.end(  __p );
            }else{
                var expires = new Date(); 
                expires.setTime( expires.getTime() + 1000*60*60*24 );

                response.writeHead(200, {
                  "Content-Type": "text/css",
                  Expires: expires.toUTCString()
                });
                
                files.map(function(file){
                  file = file.replace('.gif','');
                  __p += "#list-container  ."+file+"\{background: url(../img/fileicon/"+file+".gif) no-repeat left center;\}\n"
                });

                response.end(  __p );
            }
        });
    };
%>