@charset 'utf-8';
/* CSS Document */



/* file-list */
div.dino-file-list {}
div.dino-file-list > ul {margin-bottom: 5px;}
div.dino-file-list > ul > li {position: relative; border: 1px solid #dfe8f1; border-radius: 3px; height: 30px; box-sizing: border-box; line-height: 28px; font-size: 12px; color: #8da0aa; transition: all 0.2s; overflow: hidden;}
div.dino-file-list > ul > li + li {margin-top: 3px;}
div.dino-file-list > ul > li > a {display: block; transition: background 0.2s, color 0.3s;}
div.dino-file-list > ul > li > a > i {position: absolute; right: 90px; top: -10px; font-size: 16px; color: #65a6ff; opacity: 0;}
div.dino-file-list > ul > li span.name {display: block; padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 200px;}
div.dino-file-list > ul > li span.name > i {color: #ffcc00; margin-right: 8px;}
div.dino-file-list > ul > li span.name > img {margin-right: 8px;}
div.dino-file-list > ul > li span.size {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 11px; min-width: 60px; line-height: 20px; background: #ffcc00; color: #ffffff; text-align: center; border-radius: 3px; box-sizing: border-box; padding: 0 5px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);}
div.dino-file-list > ul > li p.function {position: absolute; right: 90px; top: 50%; transform: translate(0, -50%); overflow: hidden;}
div.dino-file-list > ul > li p.function a {float: left; width: 25px; height: 25px; text-align: center; line-height: 24px; border-radius: 50px; overflow: hidden; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); color: #ffffff; transform: scale(0); opacity: 0; transition: all 0.3s;}
div.dino-file-list > ul > li p.function a + a {margin-left: 3px;}
div.dino-file-list > ul > li p.function a span {position: absolute; left: -500px;}
div.dino-file-list > ul > li p.function a.delete {background: #e74c3c;}
div.dino-file-list > input[type=file].hidden {display: none;}
div.dino-file-list > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.05);}
div.dino-file-list > ul > li:hover > .function a {transform: scale(1); opacity: 1;}
div.dino-file-list > ul > li > a:hover {color: #00bca4;}
div.dino-file-list > ul > li > a:hover > i {animation: download-file 0.5s ease-out 0s infinite normal forwards;}
div.dino-file-list > ul > li > a:active {background: rgba(0, 0, 0, 0.01);}
div.dino-file-list > ul > li > .function a:hover {background: rgba(0, 0, 0, 0.6);}
@keyframes download-file {
    0% {opacity: 0; top: -10px;}
    100% {opacity: 1; top: 30px;}
}

/* dino-image-list */
div.dino-image-list {}
div.dino-image-list > ul {font-size: 12px;}
div.dino-image-list > ul > li {position: relative; display: inline-block; width: 200px; height: 190px; box-sizing: border-box; padding: 5px; border: 1px solid #dfe8f1; border-radius: 3px; vertical-align: top; line-height: 1.4em; margin-right: 3px; margin-bottom: 5px; overflow: hidden; background: #fafcfe; color: #8da0aa; transition: all 0.2s;}
div.dino-image-list ul > li > span.image {position: relative; display: block; height: calc(100% - 55px); box-sizing: border-box; border: 1px solid #dfe8f1; border-radius: 3px; overflow: hidden; background: #ffffff; text-align: center;}
div.dino-image-list ul > li > span.image > i {position: relative; top: 30%; color: #ffcc00; font-size: 48px; opacity: 0.6;}
div.dino-image-list ul > li > span.image > img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}
div.dino-image-list ul > li > span.image > span.dimension {position: absolute; left: 0; bottom: -25px; width: 100%; line-height: 25px; background: rgba(0, 0, 0, 0.6); color: #ffffff; transition: bottom 0.3s;}
div.dino-image-list ul > li > span.info {position: relative; display: block; margin-top: 5px;}
div.dino-image-list ul > li > span.info span.name {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.dino-image-list ul > li > span.info span.name > i {margin-right: 8px; color: #ffcc00;}
div.dino-image-list ul > li > span.info span.name > img {margin-right: 8px;}
div.dino-image-list ul > li > span.info span.size {position: absolute; left: 0; top: 28px; font-size: 11px; min-width: 60px; line-height: 20px; background: #ffcc00; color: #ffffff; text-align: center; border-radius: 3px; box-sizing: border-box; padding: 0 5px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);}
div.dino-image-list ul > li > .function a {position: absolute; width: 25px; height: 25px; text-align: center; line-height: 23px; border-radius: 50px; overflow: hidden; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); color: #ffffff; transform: scale(0); opacity: 0; transition: all 0.3s;}
div.dino-image-list ul > li > .function a span {position: absolute; left: -500px;}
div.dino-image-list ul > li > .function a.prev {left: 10px; top: 10px;}
div.dino-image-list ul > li > .function a.next {right: 10px; top: 10px;}
div.dino-image-list ul > li > .function a.original {width: 34px; height: 34px; line-height: 32px; top: 25%; left: 30%; transform: scale(0); font-size: 16px;}
div.dino-image-list ul > li > .function a.download {width: 34px; height: 34px; line-height: 32px; top: 25%; right: 30%; transform: scale(0); font-size: 16px;}
div.dino-image-list ul > li > .function a.delete {right: 5px; bottom: 5px; background: #e74c3c;}
div.dino-image-list > input[type=file].hidden {display: none;}
div.dino-image-list > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.05);}
div.dino-image-list ul > li:hover > span.image > span.dimension {bottom: 0;}
div.dino-image-list ul > li:hover > .function a {transform: scale(1); opacity: 1;}
div.dino-image-list ul > li > .function a:hover {background: rgba(0, 0, 0, 0.6);}
div.dino-image-list ul > li > .function a.delete:hover {background: #e74c3c;}










#original-image-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000;}
#original-image-mask a.close {font-size: 50px; color: #ffffff; text-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6); position: absolute; right: 3%; top: 3%;}
#original-image {position: fixed; left: 50%; top: 50%; max-width: 80%; max-height: 80%; transform: translate(-50%, -50%); background: #ffffff; overflow: auto; z-index: 10001;}
#original-image img {max-width: none;}

#loading-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); z-index: 10000;}
#loading-mask span {position: absolute; left: 50%; top: 50%; width: 150px; line-height: 150px; font-size: 60px; transform: translate(-50%, -50%); color: #ffffff; background: rgba(0, 0, 0, 0.4); border-radius: 10px; text-align: center;}