.upload_view{ text-align: center; color: var(--text-500); } .upload_dragdrop{ display: block; padding: 3vh; margin: 0px auto 2vh; /* Align center + 2vh margin bottom*/ width: 60vw; border: 2px dashed var(--accent-600); border-radius: 20px; cursor: grab; } .upload_dragdrop > img { margin-top: 1vh; width: 3vw; height: auto; } .upload_dragdrop > p{ margin-top: 1vh; margin-bottom: 0px; } .upload_dragdrop_info{ color: color-mix(in srgb, var(--text-900), transparent 80%); } .upload_input{ display: None; } .upload_button{ color: var(--text-700); background-color: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 100px; margin: 0px auto 0px; /* Align center */ cursor: pointer; } .upload_file_preview{ --space-between-elems: 1vw; padding-left: var(--space-between-elems); display: inline-flex; /* Makes elements go side by side */ width: 50vw; margin: 0px auto 1vh; /* Align center */ text-align: left; border: 2px solid var(--accent-500); border-radius: 20px; } .upload_file_preview_img_bg{ --img-size: 3vw; position: relative; margin: auto 0px auto; /* Align center vertically */ background-color: rgb(25, 25, 25); border-radius: 50%; width: var(--img-size); height: var(--img-size); } .upload_file_preview_img_bg > img{ width: calc(var(--img-size) /2); position: absolute; top: 25%; left: 25%; } .upload_file_preview_info{ padding-left: var(--space-between-elems); } .upload_file_preview_delete_button_wrapper{ --img-size: 2vw; margin: 0px 0px auto auto; } .upload_file_preview_delete_button{ --img-size: 2vw; position: relative; margin: auto 0px auto; /* Align center vertically */ border-radius: 50%; width: var(--img-size); height: var(--img-size); background-color: rgb(25, 25, 25); border: none; } .upload_file_preview_delete_button > img{ width: var(--img-size); position: absolute; top: 0px; left: 0px; }