LLWiki正在建设中,欢迎加入我们!
MediaWiki:Gadget-uploader.css
跳转到导航
跳转到搜索
注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。
.uploader-container { top: 0; left: 0; width: 100%; height: 100%; z-index: 100; position: fixed; background-color: rgba(0, 0, 0, 0.3); } .uploader-closeBtn { top: 10px; color: white; right: 20px; cursor: pointer; z-index: 10001; position: fixed; font-size: 30px; transition: transform 0.3s; font-family: Simsun; font-weight: bold; } .uploader-closeBtn:hover { transform: rotate(90deg); } .uploader-body { top: 0; left: 0; right: 0; border: 5px #eee solid; bottom: 0; height: 500px; margin: auto; position: absolute; max-width: 930px; min-width: 800px; border-radius: 10px; background-color: white; } .uploader-fileList { cursor: pointer; height: 70%; overflow: auto; position: relative; box-sizing: border-box; border-bottom: 3px #ccc solid; border-radius: 10px 10px 0 0; padding-bottom: 10px; background-color: white; } .uploader-fileList .hintMask { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .uploader-fileList .hintMask::before, .uploader-fileList .hintMask::after { top: 0; left: 0; right: 0; width: 40px; bottom: 0; height: 150px; margin: auto; content: ""; position: absolute; background-color: #ddd; } .uploader-fileList .hintMask::after { width: 150px; height: 40px; } .uploader-fileList .hintMask > .hintText { left: 50%; color: #ddd; bottom: 30px; position: absolute; font-size: 22px; transform: translateX(-50%); white-space: nowrap; } .uploader-fileList > .item { width: 200px; border: 1px #ccc solid; cursor: pointer; height: 150px; display: inline-block; position: relative; box-sizing: border-box; margin-top: 10px; margin-left: 10px; vertical-align: middle; background-color: white; } .uploader-fileList > .item.addFileBox::before, .uploader-fileList > .item.addFileBox::after { top: 0; left: 0; right: 0; width: 15px; bottom: 0; height: 60px; margin: auto; content: ""; position: absolute; background-color: #ddd; } .uploader-fileList > .item.addFileBox::after { width: 60px; height: 15px; } .uploader-fileList > .item[data-selected="true"] { border-color: #4EBE8C; } .uploader-fileList > .item[data-selected="true"]::after { top: 0; left: 0; width: 100%; border: 3px #4EBE8C solid; height: 100%; content: ""; display: block; position: absolute; box-sizing: border-box; pointer-events: none; } .uploader-fileList > .item::before { left: 0; color: white; width: 100%; bottom: 0; height: 25px; content: attr(data-name); display: block; padding: 0 10px; overflow: hidden; position: absolute; font-size: 13px; box-sizing: border-box; text-align: center; line-height: 25px; white-space: nowrap; text-overflow: ellipsis; background-color: rgba(0, 0, 0, 0.5); } .uploader-fileList > .item > img { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: scale-down; } .uploader-fileList > .item > .unablePreviewHint { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #666; font-size: 13px; } .uploader-fileList > .item > .unablePreviewHint > .type { width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uploader-fileList > .item > .removeBtn { top: 5px; right: 5px; width: 20px; height: 20px; position: absolute; text-align: center; font-family: 黑体; font-weight: bold; line-height: 20px; border-radius: 50%; } .uploader-fileList > .item > .removeBtn:hover { color: white; background-color: #666; } .uploader-panel { height: 30%; display: flex; padding: 10px; box-sizing: border-box; } .uploader-panel > .block { flex: 1; height: 100%; display: flex; padding: 0 10px; flex-wrap: wrap; align-items: center; } .uploader-panel > .block .input-container { position: relative; min-width: 240px; } .uploader-panel > .block .input-container > * { font-size: 14px; vertical-align: middle; } .uploader-panel > .block .input-container > input { width: calc(100% - 5em); min-width: 150px; box-sizing: border-box; } .uploader-panel .categoryInput { position: relative; } .uploader-panel .categoryInput .inputHint { left: calc(100% - 7px); border: 1px #ccc solid; bottom: calc(100% - 7px); opacity: 0; padding: 2px 10px; z-index: 1; position: absolute; transition: opacity 0.2s; white-space: nowrap; border-radius: 5px; background-color: #fffeee; } .uploader-panel .categoryInput > input:focus + .inputHint { opacity: 1; } .uploader-panel .categoryHints { min-width: 170px; max-height: 140px; background-color: white; white-space: nowrap; overflow: auto; position: absolute; right: 9px; bottom: 100%; border: 1px #666 solid; box-sizing: border-box; border-bottom: none; display: flex; flex-direction: column-reverse; } .uploader-panel .categoryHints > .item { min-height: 20px; line-height: 20px; box-sizing: border-box; padding: 0 5px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .uploader-panel .categoryHints > .item[data-selected="true"] { background-color: #ccc; } .uploader-panel .categories { width: 100%; border: 1px #ccc solid; height: 23px; overflow: auto; box-sizing: border-box; margin-right: 5px; border-radius: 5px; } .uploader-panel .categories > .item { display: inline-block; line-height: 15px; text-align: center; border: 1px #666 solid; background-color: #eee; margin: 2px 3px; padding: 0 5px; font-size: 14px; cursor: pointer; } .uploader-panel .buttons { width: 100%; } .uploader-panel .buttons > button { margin-top: 5px; }