// M E D I A // T H U M B .media__thumb { @include thumbnail; border-radius: var(--card-radius); object-fit: cover; &:not(.media__thumb--nsfw) { background-color: $lbry-gray-2; background-position: center; background-repeat: no-repeat; background-size: cover; [data-mode='dark'] & { background-color: var(--dm-color-04); } } } .media__thumb--nsfw { background-color: $lbry-grape-5; background-image: linear-gradient(to bottom right, $lbry-teal-3, $lbry-grape-5 100%); } // M E D I A // T I T L E .media__title { font-weight: 600; white-space: normal; font-size: var(--font-title); } .media__title--large { overflow: hidden; width: 100%; text-overflow: ellipsis; margin-right: var(--spacing-small); } .media__uri { min-width: 0; margin-right: var(--spacing-small); max-width: 100%; } .media__uri--large { margin-bottom: var(--spacing-medium); font-size: var(--font-multiplier-medium); } .media__insufficient-credits { padding: 10px; } // M E D I A // A C T I O N S .media__actions { display: flex; flex-wrap: wrap; margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); &:first-child { margin-top: var(--spacing-miniscule); } } .media__actions--between { justify-content: space-between; &:last-of-type:not(:only-of-type) { margin-bottom: var(--spacing-large); } } .media__actions--nowrap { flex-wrap: nowrap; } .media__action-group { > *:not(:last-child) { margin-right: var(--spacing-medium); } } .media__action-group--large { display: flex; font-size: var(--font-multiplier-medium); > * { &:not(:last-child) { margin-right: var(--spacing-large); } } &:not(:last-child) { margin-right: var(--spacing-large); } } // M E D I A // S U B T I T L E .media__subtitle { align-self: flex-start; color: rgba($lbry-black, 0.6); [data-mode='dark'] & { color: rgba($lbry-white, 0.8); } } .media__subtitle--large { display: block; > button { display: block; } } .media__subtitle__channel { font-weight: 600; margin: var(--spacing-small) 0; } // M E D I A // I N F O .media__info { word-wrap: break-word; [data-mode='dark'] & { border-color: rgba($lbry-gray-5, 0.2); } } .media__info--large { margin-top: var(--spacing-medium); font-size: var(--font-body); [data-mode='dark'] & { border-color: rgba($lbry-gray-5, 0.2); } } .media__info-text { word-break: break-word; &:not(:last-of-type) { margin-bottom: var(--spacing-large); } &.media__info-text--small { max-width: 50rem; } } .media__info-title { font-weight: 500; margin-bottom: var(--spacing-small); }