.broadcast-show-page-prev { margin-top: 10px; margin-bottom: -10px; } .broadcast-show-list { margin-top: 20px; max-height: 800px; overflow-y: auto; border-top: 1px solid black; border-bottom: 1px solid black; } .broadcast-show-list__item { position: relative; width: 100%; display: flex; } .broadcast-show-list__item:last-of-type .show-list-item__texts { border-bottom: none; } .show-list-item__listened { height: 10px; width: 12px; margin-top: 15px; margin-left: 6px; position: absolute; } .show-list-item__listened + .show-list-item__texts * { color: #a2a2a2; } .show-list-item__play { padding: 8px 8px 8px 0; /* have to set these absolutely, flex doesnt get along well with nowrap/ellipsis */ width: 32px; box-sizing: border-box; } .show-list-item__play .button-play-icon { margin: 0; } .show-list-item__texts { padding: 10px 10px 10px 0; white-space: nowrap; border-bottom: 1px solid black; line-height: 20px; /* prevent hover-bold wobble */ margin-left: 0; flex-grow: 1; flex-shrink: 1; max-width: calc(100% - 32px); box-sizing: border-box; } .show-list-item__texts a:hover { text-decoration: underline; } .show-list-item-text { display: flex; justify-content: space-between; } .show-list-item-text--inactive { color: #a2a2a2; } .show-list-item-text__title { margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Show page */ .broadcast-show-list--show { height: min-content; border: none; display: flex; flex-wrap: wrap; } .broadcast-show-list--show .show-list-item { width: 50%; } .broadcast-show-list--show .show-list-item__texts { border: none; margin-left: 0; } .broadcast-show-list--show a { display: flex; flex-direction: column; } .broadcast-show-list--show .show-list-item-text__date { order: 0; } .broadcast-show-list--show .show-list-item-text__title { order: 1; text-decoration: underline; margin-top: 1px; } .broadcast-show-list--show .show-list-item__listened { margin-left: 72px; } @media(max-width: 960px) { .broadcast-show-list--show { height: 190px; } }