.metaradio_songfinder { position: relative; } .metaradio_songfinder form { display: flex; align-items: center; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 10px 0; } .metaradio_songfinder form input, .metaradio_songfinder form select { display: block; border-radius: 5px; flex: 1 1 auto; width: auto; } .metaradio_songfinder form > *:first-child { margin-left: 0; } .metaradio_songfinder form > *:last-child { margin-right: 0; } .metaradio_songfinder .metaradio_songfinder_nosongs { text-align: center; font-weight: 800; } .metaradio_songfinder table { border-collapse: collapse; border: none; } div.metaradio_songfinder table td, div.metaradio_songfinder table th { padding: 5px; text-align: left; vertical-align: middle; border: none; } .metaradio_songfinder table tr th { font-weight: 900; color: #110E20; background-color: #F4F3F3; } .metaradio_songfinder table tr.day th { background-color: #E4E4E4; color: #110E20; padding: 10px; text-align: center; } .metaradio_songfinder table tr.row_even { background-color: #F9F9F9; } .metaradio_songfinder table tr.row_odd { background-color: #FFF; } .metaradio_songfinder table tr.track_notes_row { background-color: #EFEFEF; } .metaradio_songfinder table tr.track_hasnotes { cursor: pointer; } .metaradio_songfinder table td.col-image { width: 120px;  } .metaradio_songfinder table td.col-image .field-albumart { position: relative; width: 100px; height: 100px; } .metaradio_songfinder table td.col-image .field-albumart .field-buylinks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; transition: opacity ease-in-out 0.2s; } .metaradio_songfinder table td.col-image .field-albumart:hover .field-buylinks { opacity: 1; } .metaradio_songfinder table td.col-time { white-space: nowrap; } .metaradio_songfinder table td.col-title span.field-album { display: block; font-size: 0.9em; opacity: 0.8; } .metaradio_songfinder h3.metaradio_songfinder_datetime { text-align: center; margin: 20px; } .metaradio_songfinder .metaradio_songfinder_layout_cards { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card { display: flex; flex-direction: column; min-height: 350px; color: #110E20; background-color: #F9F9F9; border-radius: 20px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card.track_hasnotes { cursor: pointer; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card .col-image { position: relative; min-height: 150px; margin-bottom: 15px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card .col-image img { width: 100%; max-width: none; height: auto; border-top-left-radius: 20px; border-top-right-radius: 20px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card .col-image .field-albumart .field-buylinks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; transition: opacity ease-in-out 0.2s; border-top-left-radius: 20px; border-top-right-radius: 20px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card .col-image .field-albumart:hover .field-buylinks { opacity: 1; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div:not(.col-image) { margin: 0 10px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.col-title { font-weight: 800; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.col-artist { color: #3C3C3C; font-size: 0.9em; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.col-composer { color: #3C3C3C; font-size: 0.9em; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.col-album { margin-top: 10px; margin-bottom: 10px; font-size: 0.8em; font-style: italic; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.col-time { font-size: 0.8em; color: #686868; margin-top: auto; margin-bottom: 15px; } .metaradio_songfinder .metaradio_songfinder_layout_cards .track_card > div.track_notes p { font-size: 0.8em; } @media screen and (max-width: 600px) { .metaradio_songfinder .metaradio_songfinder_layout_cards { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 300px) { .metaradio_songfinder .metaradio_songfinder_layout_cards { grid-template-columns: 1fr; } } .metaradio_songfinder img.albumart { max-width: 100px; height: auto; } .metaradio_songfinder .loading_display { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; transition: opacity ease-in-out 0.2s; pointer-events: none; } .metaradio_songfinder.songfinder_loading .loading_display { opacity: 1; pointer-events: all; } .metaradio_songfinder .loading_display img { animation: spin 4s linear infinite; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .metaradio-track-history-block-preview { pointer-events: none; }