.resource-manager { position: relative; border-radius: 5px; } .resource-manager { user-select: none; } .resource-manager > .preview-pane { display: none; position: absolute; height: 200px; width: 200px; right: -200px; top: 0px; background-color: white; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 2px; } .resource-manager > .resource-list { height: 200px; background-color: #ffffff66; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow-y: scroll; overflow-x: hidden; } .resource-manager > .resource-list > * { display: flex; justify-content: space-between; align-items: center; cursor: pointer; white-space: nowrap; } .resource-manager > .resource-list > * > .resource-title { overflow: hidden; margin: 5px; text-overflow: ellipsis; } .resource-manager > .resource-list > * > .actions { display: flex; align-items: center; } .resource-manager .actions > button { display: flex; align-items: stretch; padding: 0; width: 30px; aspect-ratio: 1; background-color: transparent; border: 0; cursor: pointer; } .resource-manager .actions > button:hover { background-color: rgba(255, 255, 255, 0.5); } .resource-manager .actions > button:active { background-color: rgba(255, 255, 255, 0.7); } .resource-manager .actions > button > *:first-child { flex: 1; margin: 3px; -webkit-mask-size: contain; mask-size: contain; background-color: var(--c-primary); } .resource-manager .actions > .rename-btn > *:first-child { -webkit-mask-image: url("/res/icons/edit.svg"); mask-image: url("/res/icons/edit.svg"); } .resource-manager .actions > .delete-btn > *:first-child { -webkit-mask-image: url("/res/icons/trash.svg"); mask-image: url("/res/icons/trash.svg"); } .resource-manager > .resource-list > .selected:hover, .resource-manager > .resource-list > *:hover { background-color: #fff8; } .resource-manager > .resource-list > .selected { background-color: #fff6; } .resource-manager > .resource-list.dragging { background-color: #ffffff88; transition-duration: 0.3s; } .resource-manager > .upload-button { display: block; width: 100%; padding-left: 0; padding-right: 0; margin-top: 0; text-align: center; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 0px; }