.avatar-25 { --avatarSize: 25px !important; } .avatar-and-textarea { display: flex; margin-bottom: 10px; } .avatar-and-textarea my-actor-avatar { margin-inline-end: 10px; } .playlist { min-width: 200px; max-width: 470px; height: 66vh; background-color: var(--mainBackgroundColor); overflow-y: auto; border-bottom: 1px solid rgba(0,0,0,.1); } .playlist .playlist-info { padding: 5px 30px; background-color: #31363b; } .playlist .playlist-info .playlist-display-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .playlist .playlist-info .playlist-by-index { color: var(--greyForegroundColor); display: flex; } .playlist .playlist-info .playlist-by-index .playlist-by { margin-inline-end: 5px; } .playlist .playlist-info .playlist-controls { display: flex; margin: 10px 0; } .playlist .playlist-info .playlist-controls my-global-icon:not(:last-child) { margin-inline-end: .5rem; } .playlist .playlist-info .playlist-controls my-global-icon:not(.active) { opacity: .5; } .playlist .playlist-info .playlist-controls my-global-icon { cursor: pointer; } .video { border-bottom: 1px solid rgba(255,255,255,.1); color: var(--mainForegroundColor); display: flex; min-width: 0; align-items: center; cursor: pointer; } .video.active { background-color: var(--mainColor); } .video .position { margin-inline-end: 10px; font-weight: 600; color: var(--greyForegroundColor); min-width: 25px; } .playlist my-video-playlist-element-miniature .video .position { margin-inline-end: 0; } my-video-thumbnail, .fake-thumbnail { margin-inline-end: 10px; display: flex; } .playlist my-video-playlist-element-miniature my-video-thumbnail .video-thumbnail { width: 90px; height: 50px; } my-video-thumbnail .video-thumbnail { width: 130px; height: 72px; } .video-thumbnail-loli img { width: 90px; height: 50px; } .video-thumbnail-label-overlay { position: absolute; padding: 0 5px; left: 5px; top: 5px; font-weight: 700; } .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay { position: absolute; padding: 0 3px; right: 5px; bottom: 5px; } .video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay { display: inline-block; background-color: #000000b3; color: #fff; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 1.1; z-index: 10; } .video-thumbnail .play-overlay .icon { width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.5); border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 18px solid rgba(255,255,255,.95); } .video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon { transition: all .2s ease; } .video-thumbnail .play-overlay { position: absolute; right: 0; bottom: 0; width: inherit; height: inherit; opacity: 0; background-color: #0000004d; } .video .video-info { display: flex; flex-direction: column; align-self: flex-start; min-width: 0; } .video .video-info .video-info-header { display: flex; align-self: baseline; } .video .video-info .video-info-header a { color: #fcfcfc; width: auto; padding-right: 5px; } .playlist my-video-playlist-element-miniature .video .video-info .video-info-name { font-size: 15px; } .video .video-info-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 600; display: inline-block; } .video .video-info .video-info-account, .video .video-info .video-info-timestamp { color: var(--greyForegroundColor); } my-global-icon { width: inherit; }