.page.loading { padding: 1rem; } .tile { position: absolute; } .tile.image { display: block; } .tile.image.is_tiled { width: 100%; height: 100%; } .tile.text { display: block; white-space: break-spaces; } .tile.top_left { top: 0; left: 0; } .tile.center_left { top: 50%; left: 0; } .tile.bottom_left { bottom: 0; left: 0; } .tile.top_center { top: 0; left: 50%; } .tile.center_center { top: 50%; left: 50%; } .tile.bottom_center { bottom: 0; left: 50%; } .tile.top_right { top: 0; right: 0; } .tile.center_right { top: 50%; right: 0; } .tile.bottom_right { bottom: 0; right: 0; } .tileList .row { justify-content: flex-start; align-items: center; min-height: 2.5rem; margin-bottom: 0.5rem; box-shadow: 4px 4px 6px rgba(0,0,0,0.5); } .tileList .row:last-child { margin-bottom: 0; } .tileList .row:nth-child(odd) { background: rgba(0,0,0,0.2); } .tileList .row:nth-child(even) { background: rgba(255,255,255,0.2); } .tileList span { display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; padding: 0.25rem; } .tileList .thumb { width: 100%; height: 2.5rem; background-position: center center; background-size: cover; background-repeat: no-repeat; } .tileList .row.sortable-chosen { background-color: #000; } .tileList .row.sortable-ghost { } .tileList .row.sortable-drag { opacity: 0.6; } .row.imageUrl label { width: 13rem; } .row.imageUrl .thumb { display: flex; justify-content: center; align-items: center; height: 1.5rem; width: 2rem; margin-right: 0.5rem; } .row.imageUrl img { max-width: 100%; max-height: 100%; } .box .row.buttons { justify-content: space-between; } .box .row.pair { justify-content: space-between; } .box .pair label:last-child { margin-right: 0; }