/* .scrollable { contain: strict; } */ .scrollable { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; will-change: transform; background-color: #fff; } .peertube-timeline__header { width: 100vw; overflow-x: auto; padding-left: 15px; padding-right: 15px; margin-bottom: 10px; } .actor, .actor-info { width: 100%; } .actor { display: -webkit-box; display: flex; margin-top: 20px; margin-bottom: 20px; } .actor img { -o-object-fit: cover; object-fit: cover; border-radius: 50%; width: 80px; height: 80px; min-width: 80px; margin-right: 20px; } .actor .actor-info { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; } .actor .actor-display-link { text-decoration: none; } .actor .actor-info .actor-names .actor-display-name { font-size: 23px; font-weight: 700; } .actor-info .actor-names .actor-name { margin-left: 7px; position: relative; top: 3px; font-size: 14px; color: #777272; } .video { margin-bottom: 1.5em; } .videos .video-miniature { padding-right: 0; height: auto; width: 100%; margin-bottom: 5px; } .video-thumbnail { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; border-radius: 3px; overflow: hidden; background-color: #ececec; -webkit-transition: -webkit-filter .2s; transition: -webkit-filter .2s ease; transition: filter .2s ease; transition: filter .2s ease,-webkit-filter .2s ease; } .videos .video-miniature .video-thumbnail { margin: 0; width: 100%; height: auto; border-radius: 0; } .videos .video-miniature .video-thumbnail img { width: 100%; height: auto; } .video-thumbnail .play-overlay { position: absolute; right: 0; bottom: 0; width: inherit; height: inherit; opacity: 0; background-color: rgba(0,0,0,.7); } .video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon { -webkit-transition: .2s; transition: all .2s ease; } .video-thumbnail .play-overlay .icon { width: 0; height: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%) scale(.5); 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-miniature .video-bottom { display: -webkit-box; display: flex; } .video-thumbnail .video-thumbnail-duration-overlay { display: inline-block; background-color: rgba(0,0,0,.7); color: #fff; position: absolute; right: 5px; bottom: 5px; padding: 0 5px; border-radius: 3px; font-size: 12px; font-weight: 700; } .video-miniature-name{ font-weight: 600; margin: 0 0 5px; text-decoration: none; text-overflow: ellipsis; } .video-miniature-created-at-views { font-size: 0.75em; } .video-miniature-created-at-views .views::before { content: ' - ' } .video-miniature-account { hite-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 0.75em; color: #585858; }