html, body { margin: 0px; height: 100%; } .cryptpad-toolbar { margin-bottom: 1px; padding: 0px; display: inline-block; } #file, #dl { display: block; height: 100%; width: 100%; border: 2px solid black; } .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } #upload-form, #download-form { padding: 0px; margin: 0px; position: relative; width: 50vh; height: 50vh; display: block; margin: 50px auto; max-width: 80vw; } #upload-form label, #download-form label { line-height: calc(50vh - 20px); text-align: center; position: relative; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 50vh; box-sizing: border-box; } .hovering { background-color: rgba(255, 0, 115, 0.5) !important; } .block { display: block; } .hidden { display: none; } .inputfile + label { border: 2px solid black; background-color: rgba(50, 50, 50, 0.1); display: block; } .inputfile:focus + label, .inputfile + label:hover { background-color: rgba(50, 50, 50, 0.3); } #progress { position: absolute; top: 0; left: 0; height: 100%; transition: width 500ms; width: 0%; max-width: 100%; max-height: 100%; background-color: rgba(255, 0, 115, 0.75); z-index: 10000; display: block; } #uploadStatus { display: none; width: 80vw; margin-top: 50px; margin-left: 10vw; border: 1px solid black; border-collapse: collapse; } #uploadStatus tr:nth-child(1) { background-color: #ccc; border: 1px solid #999; } #uploadStatus tr:nth-child(1) td { text-align: center; } #uploadStatus td { border-left: 1px solid #BBB; border-right: 1px solid #BBB; padding: 0 10px; } #uploadStatus .upProgress { width: 200px; position: relative; text-align: center; } #uploadStatus .progressContainer { position: absolute; width: 0px; left: 5px; top: 1px; bottom: 1px; background-color: rgba(0, 0, 255, 0.3); } #uploadStatus .upCancel { text-align: center; } #uploadStatus .fa.cancel { color: #ff0073; }