75 lines
1.3 KiB
Sass
75 lines
1.3 KiB
Sass
|
.watchVideoInfo
|
||
|
display: grid
|
||
|
grid-template-columns: 2fr 1fr
|
||
|
padding: 16px
|
||
|
|
||
|
@media screen and (max-width: 680px)
|
||
|
grid-template-columns: auto
|
||
|
|
||
|
.videoTitle
|
||
|
font-size: 20px
|
||
|
margin: 0 0 20px
|
||
|
|
||
|
.channelInformation
|
||
|
.profileRow
|
||
|
display: flex
|
||
|
|
||
|
.channelThumbnail
|
||
|
border-radius: 50%
|
||
|
margin-right: 8px
|
||
|
|
||
|
.channelName
|
||
|
margin-left: 6px
|
||
|
margin-bottom: 4px
|
||
|
|
||
|
.subscribeButton
|
||
|
padding: 6px
|
||
|
font-size: 14px
|
||
|
|
||
|
.viewCount
|
||
|
margin: 4px 0px 0px
|
||
|
text-align: right
|
||
|
|
||
|
@media screen and (max-width: 680px)
|
||
|
margin-top: 16px
|
||
|
text-align: left
|
||
|
|
||
|
.likeSection
|
||
|
margin-top: 16px
|
||
|
font-size: 14px
|
||
|
display: grid
|
||
|
grid-template-columns: auto auto
|
||
|
justify-content: space-between
|
||
|
margin-left: auto
|
||
|
max-width: 250px
|
||
|
|
||
|
@media screen and (max-width: 680px)
|
||
|
margin-left: 0
|
||
|
|
||
|
.likeBar
|
||
|
height: 8px
|
||
|
border-radius: 4px
|
||
|
background: red
|
||
|
grid-column: 1 / 3
|
||
|
margin-bottom: 4px
|
||
|
|
||
|
.optionsContainer
|
||
|
margin-top: 16px
|
||
|
display: flex
|
||
|
justify-content: flex-end
|
||
|
|
||
|
@media screen and (max-width: 680px)
|
||
|
justify-content: flex-start
|
||
|
|
||
|
.option
|
||
|
width: 36px
|
||
|
height: 36px
|
||
|
border-radius: 50%
|
||
|
background-color: rgba(255, 255, 255, 0.15)
|
||
|
display: flex
|
||
|
align-items: center
|
||
|
justify-content: center
|
||
|
|
||
|
&:not(:last-child)
|
||
|
margin-right: 4px
|