@font-face { font-family: "Roboto"; src: local("Roboto"), url("/resources/fonts/Roboto.woff2"); } @font-face { font-family: "Fira Code"; src: local("Fira Code"), url("/resources/fonts/FiraCode.woff2"); } body { font-family: "Roboto", sans-serif; font-size: 12pt; font-optical-sizing: auto; } center { margin: auto; max-width: 500px; } footer { display: flex; width: fit-content; p { border-right: 2px dotted grey; padding: 0 10px; } p:last-child { border-right: none; } } hr { background-color: gray; width: 100%; height: 2px; display: block; border: none; } h1 { font-size: 3em; font-weight: bolder; } p { line-height: 1.5; } button p { margin: 0; } button { display: block; width: fit-content; padding: 2px; border: 1px solid grey; background-color: #EEE; cursor: pointer; margin: 5px; border-radius: 5px; } button.button { width: 50px; height: 50px; } button:hover { filter: brightness(0.9); } button.main_file_upload { border: 1px solid grey; border-radius: 10px; margin: 20px 0; width: 250px; height: 75px; cursor: pointer; background-color: #84E5FF; margin-bottom: 0; h4 { margin: 0; font-size: 1.9em; font-weight: bold; } } .button.selected { background-color: #84FFAE; border: 2px dashed grey; } pre { font-family: "Fira Code", monospace; color: white; background-color: #161b22; font-size: 11pt; padding: 10px; overflow: auto; tab-size: 4; } p code { font-family: "Fira Code", monospace; background-color: lightgray; font-size: 12pt; padding: 2px; } h2 code { font-family: "Fira Code", monospace; font-size: 15pt; } #durationBox { margin-top: 0; display: flex; flex-direction: row; width: fit-content; gap: 10px; } #durationBox > p { font-size: 10pt; width: 40px; height: 40px; vertical-align: center; } #uploadedFilesDisplay { text-align: left; min-height: 2em; } #uploadedFilesDisplay p.file_name { width: 50%; overflow: clip; text-overflow: ellipsis; white-space: nowrap; display: block; } #uploadedFilesDisplay p.status { font-family: "Fira Code", monospace; font-weight: 500; font-size: 11pt; overflow: clip; text-overflow: ellipsis; white-space: nowrap; text-align: right; margin: auto 0; margin-left: auto; width: min-content; flex-shrink: 2; display: block; } #uploadedFilesDisplay div { display: flex; flex-direction: row; gap: 10px; padding: 10px; margin-bottom: 10px; justify-content: end; } #uploadedFilesDisplay > div > progress { height: 20px; margin: auto; flex-grow: 2; display: block; } #uploadedFilesDisplay button { height: 30px; width: 30px; margin: auto 0; background-color: white; } .upload_inprogress { } .upload_failed { color: black; background-color: #ffb2ae; a:link { all: revert; } a:visited { all: revert; } a:hover { all: revert; } } .upload_done { color: black; background-color: #a4ffbb; a:link { all: revert; } a:visited { all: revert; } a:hover { all: revert; } } progress { --color: #84FFAE; /* the progress color */ --background: lightgrey; /* the background color */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5px; background-color: var(--background); position: relative; } progress::-moz-progress-bar { background-color: var(--color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } progress::-webkit-progress-bar { background-color: var(--background); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } progress::-webkit-progress-value { border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; background-color: var(--color); } progress:not([value])::-webkit-progress-bar { background-color: var(--color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } progress:not([value])::-webkit-progress-value { width: 20%; position: absolute; left: 50%; } progress:not([value])::-moz-progress-bar { background-color: var(--color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; width: 20%; animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(.17,.67,.83,.67); } @keyframes bounce { from {margin-left: 0%} to {margin-left: 80%} } @media (prefers-color-scheme: dark) { body { background-color: #131316; color: #ededed; } a:link { color: #3c9fe5; } a:visited { color: #37d6a7; } a:hover { color: #79d646; } p code { color: black; white-space: pre; background-color: lightgray; font-size: 12pt; padding: 2px; } }