.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; }