mirror of https://github.com/FreeTubeApp/FreeTube
128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
.watchVideoInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.videoTitle {
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
margin-block: 0;
|
|
margin-inline: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.videoMetrics, .videoButtons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.videoButtons {
|
|
.profileRow {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.channelThumbnail {
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
margin-inline-end: 10px;
|
|
inline-size: 56px;
|
|
}
|
|
|
|
.channelName {
|
|
color: inherit;
|
|
cursor: pointer;
|
|
display: block;
|
|
margin-inline-start: 6px;
|
|
margin-block-end: 3px;
|
|
position: relative;
|
|
text-decoration: inherit;
|
|
inset-block-start: -2px;
|
|
}
|
|
|
|
.subscribeButton {
|
|
font-size: 14px;
|
|
margin-inline-start: 6px;
|
|
margin-block: 0;
|
|
padding: 6px;
|
|
}
|
|
|
|
.videoOptions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
|
|
@media screen and (max-width: 680px) {
|
|
:deep(.iconDropdown) {
|
|
inset-inline-start: auto;
|
|
inset-inline-end: calc(50% - 20px);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 460px) {
|
|
flex-wrap: nowrap;
|
|
:deep(.iconDropdown) {
|
|
inset-inline-start: auto;
|
|
inset-inline-end: auto;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 460px) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-block-start: 10px;
|
|
}
|
|
}
|
|
|
|
.videoMetrics {
|
|
font-size: 14px;
|
|
color: var(--tertiary-text-color);
|
|
|
|
.likeSection {
|
|
color: var(--tertiary-text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-inline-start: auto;
|
|
margin-block-start: 4px;
|
|
max-inline-size: 210px;
|
|
text-align: end;
|
|
|
|
@media screen and (max-width: 680px) {
|
|
margin-inline-start: 0;
|
|
text-align: start;
|
|
}
|
|
|
|
.likeBar {
|
|
border-radius: 4px;
|
|
block-size: 8px;
|
|
margin-block-end: 4px;
|
|
}
|
|
|
|
.likeCount {
|
|
margin-inline-end: 0;
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
}
|
|
.datePublishedAndViewCount {
|
|
@media only screen and (max-width: 460px) {
|
|
display: flex;
|
|
justify-content: left;
|
|
flex-direction: column;
|
|
|
|
.seperator {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.videoViews {
|
|
white-space: nowrap;
|
|
}
|
|
}
|