.ytv-canvas { background: var(--bs-light-bg-subtle); } .ytv-list-header>a span { font-weight: 700; } .ytv-canvas a { text-decoration: none !important } .ytv-canvas { display: block; overflow: hidden; margin: 0; width: 100%; margin: 0; width: 100%; } .ytv-canvas ::-webkit-scrollbar { width: 5px } .ytv-video { position: absolute; top: 0; right: 30%; bottom: 0; left: 0; height: 100% } .ytv-video iframe { width: 100%; height: 100%; border: none; outline: none; display: block } .ytv-list { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 30%; } .ytv-list-header:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; font-family: 'Material Icons'; content: "\e89e"; top: 0.85rem; right: 1rem; font-size: 20px; transition: color 0.2s ease-in-out } .ytv-has-playlists.ytv-list-header:after { content: "\e5d2"; } .ytv-list-inner { overflow: auto; position: absolute; top: 60px; right: 0; bottom: 0; left: 0; -webkit-overflow-scrolling: touch } .ytv-list ul { margin: 0; padding: 0; list-style-type: none } .ytv-list a { display: block; text-decoration: none; border-left: none; padding: 1rem; transition: all 0.2s ease-in-out } .ytv-list a b { overflow: hidden; display: block; text-overflow: ellipsis } .ytv-list .ytv-content { padding-left: 130px; line-height: 1.5; } .ytv-list .ytv-thumb-stroke { position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; z-index: 2 } .ytv-list .ytv-thumb { float: left; position: relative } .ytv-list .ytv-thumb img { width: 115px; display: block } .ytv-list .ytv-thumb span { position: absolute; bottom: 5px; right: 5px; font-size: 0.6rem; padding: 4px 6px; line-height: 1; color: #fff; background: rgba(0,0,0,0.5); border-radius: 0.25rem; font-weight: 600 } .ytv-views { display: block; margin-top: 5px; opacity: .7; font-size: 0.875rem; } .ytv-list-header a { position: relative; z-index: 10; padding-right: 30px } .ytv-list-header img, .ytv-list .ytv-playlists .ytv-thumb img { height: 30px; width: auto; vertical-align: middle } .ytv-playlists { z-index: 9; position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: auto; display: none } .ytv-playlists a { padding: 0.75rem 1rem; } .ytv-playlists img, .ytv-list-header img { float: left; display: none !important; } .ytv-playlists a span, .ytv-list-header a span { white-space: nowrap; padding-left: 0 !important; padding-right: 0 !important; display: block; overflow: hidden; text-overflow: ellipsis } .ytv-list-header a span { text-transform: none; transition: color 0.2s ease-in-out } .ytv-list-header>a span { font-size: 1.15rem; line-height: 30px; text-transform: uppercase; padding-right: 20px; line-height: 1.5; } .ytv-list-header .ytv-playlists a { background: none } .ytv-playlist-open .ytv-playlists { display: block; background: var(--bs-light-bg-subtle); } .ytv-relative { position: relative; width: 100%; height: 100% } .ytv-full { position: fixed; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important } .ytv-list-header a:after, .ytv-clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .ytv-list a { border-bottom: 1px solid var(--bs-border-color); } .ytv-list ul li:last-child a { border-bottom: none; } @media only screen and (max-width:1199px) { .ytv-list-header img, .ytv-list .ytv-thumb { display: none } .ytv-list .ytv-content, .ytv-playlists a span, .ytv-list-header a span { padding-left: 0 } } @media only screen and (max-width:991px) { .ytv-canvas { border: 1px solid var(--bs-border-color); } .ytv-list-header:after { top: 7px !important; } .ytv-list a { padding: 10px 20px } .ytv-list-inner, .ytv-playlists { top: 48px } .ytv-list:after { top: 10px; font-size: 16px } .no-playlist .ytv-list:after { top: 10px; font-size: 16px } .ytv-video { right: 0; padding-bottom: 200px } .ytv-list { width: 100%; top: auto; bottom: 0; height: 200px } }