* { font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; } /* upload */ #upload { position: relative; } #drop { position: relative; width: 99%; min-height: 260px; border: 1px dotted #000000; z-index: 2; text-align: center; } #drop.in { border: 2px solid #000000; } #drop a { left: 33%; top: 105px; z-index: 15; position: absolute; } #drop input { display: none; } #upload-msg { list-style-type: none; padding-left: 0px; margin-left: 0px; position: absolute; top: 0; right: 10px; width: 300px; max-height: 240px; overflow: auto; z-index: 3; } /**/ .tab-pane { padding: 10px; } #paginationContainer { text-align: right; } #imageList { margin: 0; margin-top: 10px; padding: 0; height: 196px; } #imageList li { display: inline-block; float: left; padding: 0; margin: 0 3px 3px 0; position: relative; height: 90px; width: 122px; overflow: hidden; border: 1px solid #eee; } #imageList li .a-img { line-height: 80px; display: block; text-align: center; } #imageList li:hover { border: 1px solid #FF7300; } #imageList li.selected { border: solid 2px #FF7300; } #imageList li img { max-width: 100%; vertical-align: middle; } #imageList li .tools { position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; padding-right: 2px; text-align: right; opacity: 0.7; } .tools .file-title { width: 100px; height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; } #imageList li:hover .tools { display: block; opacity: 0.9; } .alert { padding: 5px; margin-bottom: 3px; } .tabs { /*height: 350px;*/ } #preview { margin: 0; padding: 0; margin-left: 10px; margin-top: 3px; margin-bottom: 3px; padding-top: 5px; border-top: 1px solid #eee; } #preview li { position: relative; display: inline-block; float: left; border: solid 1px #E6E5E3; background-color: #FFF; width: 64px; height: 64px; overflow: hidden; margin-right: 10px; line-height: 64px; text-align: center; /*font-style: italic;*/ color: #E1E1E1; font-size: 28px; cursor: pointer; } #preview li:hover { border: 1px solid #FF7300; } #preview li.selected { border: solid 2px #FF7300; } #preview li .tools { position: absolute; bottom: 0; right: 0; left: 0; height: 15px; line-height: 15px; font-size: 14px; text-align: right; } #preview li .tools a { color: red; } /**/ #imagePage { position: relative; } #imageMask { position: absolute; background: #fff; left: 0; right: 0; top: 0; bottom: 20px; font-size: 18px; text-align: center; display: none; z-index: 2; } /**/ #previewAttrs .form-control { width: auto; } #previewAttrs label { font-weight: normal; } @media screen and (max-width:700px) { #previewAttrs { display: none; } #drop { min-height: initial; padding: 10px 0; } #drop a { position: initial; margin: auto; } #url form { margin: 0 !important; margin: auto; } .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .form-inline .form-control { width: auto; display: inline-block; } #preview li:nth-child(3n), #preview li:nth-child(4n), #preview li:nth-child(5), #preview li:nth-child(7), #preview li:nth-child(10) { display: none; } #imageList li { width: 90px; } } #imageUrlForm { min-height: 260px; text-align: center; padding-top: 100px; } .md { position: relative; height: 350px; overflow: hidden; } .md #previewAttrs { display: none; } .md #preview { border: none; position: absolute; bottom: 0; left: 0; z-index: 3; } .md #drop { min-height: 250px; } #albumsForUpload { width: 150px; }