You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
lychee/src/styles/_upload.scss

131 lines
2.9 KiB

/**
* @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 {
display: none;
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);
}
.upload_message .rows .row p.notice {
display: none;
float: left;
padding: 2px 10px 5px;
width: calc(100% - 20px);
color: rgba(255,255,255,.5);
font-size: 12px;
overflow: hidden;
line-height: 16px;
}