| * { |
| margin: 0; |
| padding: 0; |
| outline: 0; |
| } |
| |
| body { |
| padding: 80px 100px; |
| font: 13px "Helvetica Neue", "Lucida Grande", "Arial"; |
| background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9)); |
| background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9); |
| background-repeat: no-repeat; |
| color: #555; |
| -webkit-font-smoothing: antialiased; |
| } |
| h1, h2, h3 { |
| font-size: 22px; |
| color: #343434; |
| } |
| h1 em, h2 em { |
| padding: 0 5px; |
| font-weight: normal; |
| } |
| h1 { |
| font-size: 60px; |
| } |
| h2 { |
| margin-top: 10px; |
| } |
| h3 { |
| margin: 5px 0 10px 0; |
| padding-bottom: 5px; |
| border-bottom: 1px solid #eee; |
| font-size: 18px; |
| } |
| ul li { |
| list-style: none; |
| } |
| ul li:hover { |
| cursor: pointer; |
| color: #2e2e2e; |
| } |
| ul li .path { |
| padding-left: 5px; |
| font-weight: bold; |
| } |
| ul li .line { |
| padding-right: 5px; |
| font-style: italic; |
| } |
| ul li:first-child .path { |
| padding-left: 0; |
| } |
| p { |
| line-height: 1.5; |
| } |
| a { |
| color: #555; |
| text-decoration: none; |
| } |
| a:hover { |
| color: #303030; |
| } |
| #stacktrace { |
| margin-top: 15px; |
| } |
| .directory h1 { |
| margin-bottom: 15px; |
| font-size: 18px; |
| } |
| ul#files { |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| } |
| ul#files li { |
| float: left; |
| width: 30%; |
| line-height: 25px; |
| margin: 1px; |
| } |
| ul#files li a { |
| display: block; |
| height: 25px; |
| border: 1px solid transparent; |
| -webkit-border-radius: 5px; |
| -moz-border-radius: 5px; |
| border-radius: 5px; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| ul#files li a:focus, |
| ul#files li a:hover { |
| background: rgba(255,255,255,0.65); |
| border: 1px solid #ececec; |
| } |
| ul#files li a.highlight { |
| -webkit-transition: background .4s ease-in-out; |
| background: #ffff4f; |
| border-color: #E9DC51; |
| } |
| #search { |
| display: block; |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| width: 90px; |
| -webkit-transition: width ease 0.2s, opacity ease 0.4s; |
| -moz-transition: width ease 0.2s, opacity ease 0.4s; |
| -webkit-border-radius: 32px; |
| -moz-border-radius: 32px; |
| -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03); |
| -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03); |
| -webkit-font-smoothing: antialiased; |
| text-align: left; |
| font: 13px "Helvetica Neue", Arial, sans-serif; |
| padding: 4px 10px; |
| border: none; |
| background: transparent; |
| margin-bottom: 0; |
| outline: none; |
| opacity: 0.7; |
| color: #888; |
| } |
| #search:focus { |
| width: 120px; |
| opacity: 1.0; |
| } |
| |
| /*views*/ |
| #files span { |
| display: inline-block; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| text-indent: 10px; |
| } |
| #files .name { |
| background-repeat: no-repeat; |
| } |
| #files .icon .name { |
| text-indent: 28px; |
| } |
| |
| /*tiles*/ |
| .view-tiles .name { |
| width: 100%; |
| background-position: 8px 5px; |
| } |
| .view-tiles .size, |
| .view-tiles .date { |
| display: none; |
| } |
| |
| /*details*/ |
| ul#files.view-details li { |
| float: none; |
| display: block; |
| width: 90%; |
| } |
| ul#files.view-details li.header { |
| height: 25px; |
| background: #000; |
| color: #fff; |
| font-weight: bold; |
| } |
| .view-details .header { |
| border-radius: 5px; |
| } |
| .view-details .name { |
| width: 60%; |
| background-position: 8px 5px; |
| } |
| .view-details .size { |
| width: 10%; |
| } |
| .view-details .date { |
| width: 30%; |
| } |
| .view-details .size, |
| .view-details .date { |
| text-align: right; |
| direction: rtl; |
| } |
| |
| /*mobile*/ |
| @media (max-width: 768px) { |
| body { |
| font-size: 13px; |
| line-height: 16px; |
| padding: 0; |
| } |
| #search { |
| position: static; |
| width: 100%; |
| font-size: 2em; |
| line-height: 1.8em; |
| text-indent: 10px; |
| border: 0; |
| border-radius: 0; |
| padding: 10px 0; |
| margin: 0; |
| } |
| #search:focus { |
| width: 100%; |
| border: 0; |
| opacity: 1; |
| } |
| .directory h1 { |
| font-size: 2em; |
| line-height: 1.5em; |
| color: #fff; |
| background: #000; |
| padding: 15px 10px; |
| margin: 0; |
| } |
| ul#files { |
| border-top: 1px solid #cacaca; |
| } |
| ul#files li { |
| float: none; |
| width: auto !important; |
| display: block; |
| border-bottom: 1px solid #cacaca; |
| font-size: 2em; |
| line-height: 1.2em; |
| text-indent: 0; |
| margin: 0; |
| } |
| ul#files li:nth-child(odd) { |
| background: #e0e0e0; |
| } |
| ul#files li a { |
| height: auto; |
| border: 0; |
| border-radius: 0; |
| padding: 15px 10px; |
| } |
| ul#files li a:focus, |
| ul#files li a:hover { |
| border: 0; |
| } |
| #files .header, |
| #files .size, |
| #files .date { |
| display: none !important; |
| } |
| #files .name { |
| float: none; |
| display: inline-block; |
| width: 100%; |
| text-indent: 0; |
| background-position: 0 50%; |
| } |
| #files .icon .name { |
| text-indent: 41px; |
| } |
| } |