.livestream { flex: 1; width: 100%; padding-top: var(--aspect-ratio-standard); position: relative; border-radius: var(--border-radius); iframe { overflow: hidden; border-radius: var(--border-radius); height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } .livestream__discussion { min-height: 0%; width: 100%; margin-top: var(--spacing-m); @media (min-width: $breakpoint-small) { width: 35rem; margin-left: var(--spacing-m); margin-top: 0; } } .livestream__comments-wrapper { overflow-y: scroll; } .livestream__comments-wrapper--with-height { height: 40vh; } .livestream__comments { display: flex; flex-direction: column-reverse; font-size: var(--font-small); } .livestream__comment { margin-top: var(--spacing-s); display: flex; flex-wrap: wrap; > :first-child { margin-right: var(--spacing-s); } } .livestream__comment-author { font-weight: var(--font-weight-bold); color: #888; } .livestream__comment-author--streamer { color: var(--color-primary); } .livestream__comment-create { margin-top: var(--spacing-s); } .livestream__channel-link { margin-bottom: var(--spacing-xl); box-shadow: 0 0 0 rgba(246, 72, 83, 0.4); animation: livePulse 2s infinite; &:hover { cursor: pointer; } } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(246, 72, 83, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(246, 72, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 72, 83, 0); } } .livestream__publish-checkbox { margin: var(--spacing-l) 0; .checkbox, .radio { margin-top: var(--spacing-m); label { color: #444; } } } .livestream__creator-message { background-color: #fde68a; padding: var(--spacing-m); color: black; border-radius: var(--border-radius); h4 { font-weight: bold; font-size: var(--font-small); margin-bottom: var(--spacing-s); } } .livestream__emoji-actions { margin-bottom: var(--spacing-m); > *:not(:last-child) { margin-right: var(--spacing-s); } } .livestream__embed-page { display: flex; .file-viewer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; iframe { max-height: none; } } } .livestream__embed-wrapper { height: 100vh; width: 100vw; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: #000000; .livestream { margin-top: auto; margin-bottom: auto; } } .livestream__embed-countdown { @extend .livestream__embed-wrapper; justify-content: center; } .livestream__embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; width: 100vw; } .livestream__embed-comments { width: 30vw; height: 100vh; display: none; .livestream__discussion { height: 100vh; margin-left: 0; } .card { border-radius: 0; } .card__main-actions { height: 100%; width: 30vw; } .livestream__comments-wrapper--with-height { height: calc(100% - 200px - (var(--spacing-l))); } @media (min-width: $breakpoint-small) { display: inline-block; } }