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; }