/** * @name upload.css * @author Tobias Reich * @copyright 2014 by Tobias Reich */ #upload { display: none; } .upload_overlay { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgba(0,0,0,.85); z-index: 1000; } .upload_message { position: absolute; display: inline-block; width: 450px; margin-left: -225px; margin-top: -170px; background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); border-radius: 5px; box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08), inset 1px 0px 0px rgba(255,255,255,.03), inset -1px 0px 0px rgba(255,255,255,.03); animation-name: moveUp; animation-duration: .3s; animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); } /* Header ------------------------------------------------*/ .upload_message h1 { float: left; width: 100%; padding: 12px 0px; color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0px -1px 0px #222; text-align: center; } .upload_message .close { position: absolute; top: 0px; right: 0px; padding: 11px 14px 6px 7px; color: #aaa; font-size: 20px; text-shadow: 0px -1px 0px #222; cursor: pointer; } .upload_message .close:hover { color: #fff; } /* Rows ------------------------------------------------*/ .upload_message .rows { float: left; margin: 3px 8px 8px 8px; width: calc(100% - 16px); height: 300px; background-color: rgba(0, 0, 0, .5); overflow: hidden; overflow-y: scroll; border-radius: 3px; box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .8); } /* Row ------------------------------------------------*/ .upload_message .rows .row { float: left; display: inline-block; padding: 8px 0px; width: 100%; background-color: rgba(255, 255, 255, .02); } .upload_message .rows .row:nth-child(2n) { background-color: rgba(255, 255, 255, 0); } .upload_message .rows .row a.name { float: left; padding: 5px 10px; width: calc(70% - 20px); color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; } .upload_message .rows .row a.status { float: left; padding: 5px 10px; width: calc(30% - 20px); color: rgba(255, 255, 255, .5); font-size: 14px; text-align: right; } .upload_message .rows .row a.status { animation-name: pulse; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .upload_message .rows .row a.status.error, .upload_message .rows .row a.status.success { animation: none; } .upload_message .rows .row a.status.error { color: rgb(213, 24, 24); } .upload_message .rows .row a.status.success { color: rgb(42, 213, 0); }