html, body { margin: 0; font-family: Arial, Helvetica, sans-serif; width: 100%; overflow: hidden; } .test-form { position: fixed; top: 0; left: 0; z-index: 500; } #container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90vw; height: 90vh; padding: 0; } #editor { position: absolute; display: none; border: 1px solid tomato; opacity: 0.5; width: 0; height: 0; top: 0; left: 0; z-index: 150; pointer-events: none; } #editor.can-draw { opacity: 1; } #editor.show-editor { display: block; } .label { position: absolute; background-color: rgba(250, 99, 72, 0.2); /* border: 1px solid currentColor; */ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); overflow: hidden; } .label.temporary { background: none; /* border: 1px dashed tomato; */ box-shadow: none; overflow: visible; } .label.temporary form { width: 100%; height: 100%; } .label.temporary textarea { width: 100%; height: 100%; padding: 1ch; border: none; background-color: rgba(255, 255, 255, 0.6); } .label.temporary textarea:focus { outline: 1px dashed tomato; } .label.temporary button { margin-top: 4px; } .label.temporary button + button { margin-left: 4px; } .label.temporary .label--number, .label.temporary .label--close { display: none; } .label--number { display: inline-block; margin: 0; padding: 0 4px; user-select: none; background-color: white; } .label--close { position: absolute; right: 0; border: none; padding: 0 4px; font-size: 1rem; background: none; color: white; cursor: pointer; } .label--text { margin: 1ch 0; padding: 0 1ch; overflow: hidden; width: 100%; height: 100%; text-overflow: ellipsis; overflow-y: auto; white-space: pre-line; } .text-input { display: none; position: absolute; z-index: 200; width: 100%; height: 100vh; justify-content: center; align-items: center; background-color: rgba(255, 99, 71, 0.95); } .text-input.visible { display: flex; } .modal input { font-size: 1.5rem; background: none; border: none; color: white; border-bottom: 1px solid white; } .modal input:focus { outline: none; background-color: rgba(255, 255, 255, 0.25); } .text-input button { color: white; font-weight: bold; background: none; border: none; cursor: pointer; font-size: 1.5rem; } #cancel { font-weight: normal; } .background-container { width: 100%; height: 100%; margin: 0; } #target { position: absolute; top: 0; left: 0; width: 0; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); } .background-container img { width: auto; height: auto; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; user-select: none; position: relative; pointer-events: none; } .background-container img.visible { display: initial; } .hidden { display: none; } .info, .transcription { position: absolute; right: 0; bottom: 0; top: 0; z-index: 50; margin: 0; width: min(50%, 600px); line-height: 1.6; background-color: #111; color: white; transform: translateX(100%); transition: transform 0.4s ease-out; } .info .contents, .transcription .contents { padding: 24px; height: 100vh; overflow-y: auto; } .contents p { white-space: pre-line; } .transcription.active, .info.active { transform: translateX(0); transition: transform 0.6s ease-in; } .transcription .title, .info .title { margin: 0; } .transcription ol { padding: 0; list-style-position: inside; font-size: 1.125rem; margin-bottom: 100px; } #show-info, #show-transcription, .close, button { background: none; display: inline-block; min-width: 24px; height: 24px; border-radius: 24px; padding: 0 4px; border: 1px solid currentColor; color: tomato; cursor: pointer; } #show-transcription:hover, #show-info:hover { border: 1px solid tomato; background-color: tomato; color: white; } .close { position: absolute; right: 24px; top: 32px; color: white; } #export-text:hover, .close:hover { border: 1px solid white; background-color: white; color: #111; } #export-text { color: white; } nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: 24px; text-align: right; pointer-events: none; } nav > * { pointer-events: all; } img.hidden { display: none; } .transcription .options { margin-top: 24px; }