384 lines
7.8 KiB
Sass
Executable File
384 lines
7.8 KiB
Sass
Executable File
$_theme: () !default
|
|
|
|
@use "sass:map"
|
|
@use "video-list-item" as *
|
|
|
|
.video-page
|
|
display: grid
|
|
grid-auto-flow: row
|
|
|
|
@media screen and (min-width: 1000px)
|
|
grid-template-columns: 1fr 400px
|
|
|
|
&--recommended-below, &--recommended-hidden
|
|
grid-template-columns: none
|
|
|
|
.related-videos
|
|
height: fit-content
|
|
|
|
&--recommended-side
|
|
.related-videos
|
|
border-left: 1px solid map.get($_theme, "edge-grey")
|
|
padding-left: 12px
|
|
padding-right: 20px
|
|
background-color: map.get($_theme, "bg-4")
|
|
padding-top: 12px
|
|
|
|
&--recommended-below
|
|
.related-videos
|
|
padding: 20px
|
|
|
|
&--recommended-hidden
|
|
.related-videos
|
|
display: none
|
|
|
|
#below-video-container
|
|
height: fit-content
|
|
|
|
input[type=radio]
|
|
display: none
|
|
|
|
&[id="radio-comments"]:checked ~ .below-video-radio-container label[for="radio-comments"],
|
|
&[id="radio-recommended"]:checked ~ .below-video-radio-container label[for="radio-recommended"]
|
|
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
|
|
|
&[id="radio-recommended"]:checked ~ aside#recommended-videos,
|
|
&[id="radio-comments"]:checked ~ aside#comments
|
|
display: inline
|
|
|
|
.below-video-radio-container
|
|
display: flex
|
|
margin-bottom: 20px
|
|
|
|
label
|
|
font-size: 32px
|
|
flex-grow: 1
|
|
cursor: pointer
|
|
|
|
& ~ aside
|
|
display: none
|
|
|
|
#comments
|
|
// padding-left: 2em
|
|
padding-right: 2em
|
|
|
|
> h1
|
|
margin-top: 0
|
|
|
|
.main-video-section
|
|
padding: 20px
|
|
|
|
.video-container
|
|
text-align: center
|
|
position: relative
|
|
|
|
.video-container-inner
|
|
height: 100%
|
|
display: grid
|
|
|
|
.video
|
|
align-self: center
|
|
position: relative
|
|
display: inline-block
|
|
width: 100%
|
|
height: 100%
|
|
|
|
max-height: 80vh
|
|
|
|
// For custom captions
|
|
&.hasCustomCaptions::cue
|
|
display: none
|
|
font-size: 0px
|
|
background: transparent
|
|
color: transparent
|
|
|
|
&.hideCursor
|
|
cursor: none
|
|
|
|
&.fullscreen
|
|
.video
|
|
max-height: 100%
|
|
|
|
// SponsorBlock
|
|
#sb-skip-prompt
|
|
background-color: map.get($_theme, "bg-4")
|
|
border-radius: 4px
|
|
position: absolute
|
|
right: 1em
|
|
bottom: 4em
|
|
cursor: pointer
|
|
|
|
&.hidden
|
|
display: none
|
|
|
|
.row
|
|
display: flex
|
|
margin: 8px
|
|
|
|
&:not(:last-child)
|
|
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
|
|
|
*
|
|
padding: 8px
|
|
|
|
&:nth-child(2)
|
|
flex-grow: 1
|
|
|
|
.sponsorblock-logo-video
|
|
height: 20px
|
|
|
|
// Custom captions
|
|
.caption-box
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: calc(100% - 35px)
|
|
pointer-events: none
|
|
z-index: 1
|
|
|
|
.caption-inner
|
|
position: relative
|
|
width: calc(100% - 2em) // 95%
|
|
height: calc(100% - 2em) // 95%
|
|
inset: 0px
|
|
line-height: normal
|
|
top: 1em // 2.5%
|
|
bottom: 1em // 2.5%
|
|
left: 1em // 2.5%
|
|
right: 1em // 2.5%
|
|
|
|
.cue-container
|
|
display: flex
|
|
flex-direction: row
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.cue-container-v
|
|
display: flex
|
|
flex-direction: column
|
|
// position: absolute
|
|
flex-grow: 1
|
|
|
|
.cue-inner
|
|
unicode-bidi: plaintext
|
|
overflow-wrap: break-word
|
|
text-wrap: balance
|
|
text-align: center
|
|
flex-grow: 1
|
|
color: white
|
|
fill: white
|
|
|
|
*
|
|
display: inline-block
|
|
white-space: pre-wrap
|
|
background: rgba(8, 8, 8, 0.75)
|
|
font-size: 39px
|
|
font-family: "YouTube Noto", Roboto, Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif
|
|
|
|
.stream-notice
|
|
background: map.get($_theme, "bg-0")
|
|
padding: 4px
|
|
|
|
.info
|
|
display: flex
|
|
margin: 8px 4px 16px
|
|
font-size: 17px
|
|
|
|
@media screen and (max-width: 499px)
|
|
display: block
|
|
|
|
.info-main
|
|
flex: 1
|
|
|
|
.video-title-area
|
|
display: flex
|
|
|
|
.dearrow-button-video
|
|
min-width: 26px
|
|
height: 26px
|
|
appearance: none
|
|
cursor: pointer
|
|
background-color: transparent
|
|
background-image: url(/static/images/dearrow-logo.svg)
|
|
background-size: contain
|
|
|
|
&:not(:checked)
|
|
filter: grayscale(1)
|
|
|
|
&:checked ~ .title:not(.alt)
|
|
display: none
|
|
&:not(:checked) ~ .title.alt
|
|
display: none
|
|
|
|
.title
|
|
margin: 0px 0px 4px
|
|
font-size: 30px
|
|
font-weight: normal
|
|
color: map.get($_theme, "fg-bright")
|
|
word-break: break-word
|
|
|
|
.author-link
|
|
color: map.get($_theme, "fg-main")
|
|
text-decoration: none
|
|
|
|
&:hover, &:active
|
|
color: map.get($_theme, "fg-bright")
|
|
text-decoration: underline
|
|
|
|
.info-secondary
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: flex-end
|
|
text-align: right
|
|
margin-top: 6px
|
|
margin-left: 6px
|
|
|
|
@media screen and (max-width: 499px)
|
|
align-items: flex-start
|
|
margin-left: 0px
|
|
|
|
.continuous
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
margin: 16px 4px
|
|
padding: 12px
|
|
border-radius: 4px
|
|
background-color: map.get($_theme, "bg-0")
|
|
|
|
&__description
|
|
margin-left: 12px
|
|
|
|
&__title
|
|
font-size: 20px
|
|
|
|
&__script-warning
|
|
font-size: 15px
|
|
color: map.get($_theme, "fg-warning")
|
|
|
|
&__buttons
|
|
display: flex
|
|
flex-shrink: 0
|
|
|
|
// - Eir
|
|
.button-container
|
|
display: flex
|
|
|
|
.button-container-left,
|
|
.button-container-right
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
height: min-content
|
|
.button-container-left
|
|
flex-grow: 1
|
|
.button-container-right
|
|
margin-left: 2em
|
|
flex-direction: column
|
|
.button-container-right-top,
|
|
.button-container-right-bottom
|
|
display: flex
|
|
flex-direction: row
|
|
align-self: flex-end
|
|
|
|
#quality-select-noscript-parent
|
|
display: contents
|
|
|
|
.description
|
|
position: relative
|
|
font-size: 17px
|
|
line-height: 1.4
|
|
word-break: break-word
|
|
margin: 16px 4px 4px 4px
|
|
background-color: map.get($_theme, "bg-5")
|
|
padding: 12px
|
|
border-radius: 4px
|
|
|
|
--regular-background: #{map.get($_theme, "bg-5")}
|
|
--highlight-background: #{map.get($_theme, "bg-1")}
|
|
white-space: pre-line
|
|
*
|
|
white-space: pre-line
|
|
|
|
.subscribe-form
|
|
display: inline-block
|
|
|
|
.related-cols
|
|
display: flex
|
|
align-items: center
|
|
margin-bottom: 8px
|
|
|
|
.continuous-start
|
|
font-size: 18px
|
|
|
|
.related-header
|
|
margin: 4px 0px 4px 2px
|
|
font-weight: normal
|
|
font-size: 26px
|
|
flex-grow: 1
|
|
|
|
.related-video
|
|
@include video-list-item
|
|
word-break: break-word
|
|
|
|
.video-error-page
|
|
padding: 40px 20px 20px
|
|
margin: 0 auto
|
|
max-width: 600px
|
|
line-height: 1.4
|
|
|
|
.blocked-explanation
|
|
text-align: center
|
|
margin-bottom: 32px
|
|
|
|
@media screen and (max-width: 600px)
|
|
display: none
|
|
|
|
img
|
|
width: 552px
|
|
height: 96px
|
|
|
|
.rows
|
|
display: grid
|
|
grid-template-columns: 22% 20% 20% 20%
|
|
grid-gap: 4%
|
|
justify-content: center
|
|
|
|
.row
|
|
margin: 0
|
|
|
|
.actor
|
|
margin: 4px 0px 10px
|
|
|
|
.takedown-footer
|
|
margin-top: 80px
|
|
|
|
// Chapter highlights
|
|
|
|
.timestamp--active
|
|
margin: 4px 0px
|
|
display: inline-block
|
|
|
|
&::after
|
|
display: block
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
height: -webkit-calc(1.4em + 4px)
|
|
height: calc(1.4em + 4px)
|
|
transform: translateY(-1.4em) translateY(-4px)
|
|
|
|
padding-right: 6px
|
|
text-align: right
|
|
content: "⮜"
|
|
line-height: 1.6
|
|
color: #fff
|
|
|
|
border: solid black
|
|
border-width: 2px 0px
|
|
|
|
.fetch-status
|
|
white-space: pre-wrap
|