149 lines
2.7 KiB
CSS
149 lines
2.7 KiB
CSS
.video-metadata{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto 1fr auto;
|
|
}
|
|
.video-metadata > .video-metadata-thumbnail-box{
|
|
grid-row: 1 / span 3;
|
|
}
|
|
.video-metadata > .title{
|
|
word-wrap:break-word;
|
|
grid-row: 1;
|
|
}
|
|
.video-metadata > h2{
|
|
grid-row: 2;
|
|
font-size: 0.875rem;
|
|
}
|
|
.video-metadata > span{
|
|
grid-row:3;
|
|
}
|
|
.video-metadata > hr{
|
|
grid-row: 4;
|
|
grid-column: 1 / span 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.comment-form{
|
|
display: grid;
|
|
align-content: start;
|
|
justify-items: start;
|
|
align-items: start;
|
|
}
|
|
#comment-account-options{
|
|
display:grid;
|
|
grid-auto-flow: column;
|
|
grid-column-gap: 10px;
|
|
margin-top:10px;
|
|
margin-bottom:10px;
|
|
}
|
|
#comment-account-options a{
|
|
margin-left:10px;
|
|
}
|
|
|
|
.comments-area{
|
|
display:grid;
|
|
}
|
|
.comments-area textarea{
|
|
resize: vertical;
|
|
justify-self:stretch;
|
|
}
|
|
.post-comment-button{
|
|
margin-top:10px;
|
|
justify-self:end;
|
|
}
|
|
.comment-links{
|
|
display:grid;
|
|
grid-auto-flow: column;
|
|
grid-column-gap: 10px;
|
|
justify-content:start;
|
|
}
|
|
|
|
.comments{
|
|
margin-top:10px;
|
|
grid-row-gap: 10px;
|
|
display: grid;
|
|
align-content:start;
|
|
}
|
|
|
|
.comment{
|
|
display:grid;
|
|
grid-template-columns: auto auto 100px 1fr;
|
|
grid-template-rows: 0fr 0fr 0fr 0fr;
|
|
background-color: var(--interface-color);
|
|
justify-content: start;
|
|
}
|
|
|
|
.comment .author-avatar{
|
|
grid-column: 1;
|
|
grid-row: 1 / span 3;
|
|
align-self: start;
|
|
margin-right: 5px;
|
|
height:32px;
|
|
width:32px;
|
|
}
|
|
.comment .author-avatar-img{
|
|
max-height: 100%;
|
|
}
|
|
|
|
.comment address{
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin-right:15px;
|
|
white-space: nowrap;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.comment .text{
|
|
grid-column: 2 / span 3;
|
|
grid-row: 2;
|
|
white-space: pre-wrap;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.comment .permalink{
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.comment .likes{
|
|
grid-column:2;
|
|
grid-row:3;
|
|
font-weight:bold;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comment .bottom-row{
|
|
grid-column:2 / span 3;
|
|
grid-row:4;
|
|
justify-self:start;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-column-gap: 10px;
|
|
}
|
|
|
|
details.replies > summary{
|
|
background-color: var(--interface-color);
|
|
border-style: outset;
|
|
border-width: 1px;
|
|
font-weight: bold;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.replies-open-new-tab{
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
details.replies .comment{
|
|
width: 600px;
|
|
}
|
|
|
|
.more-comments{
|
|
justify-self:center;
|
|
margin-top:10px;
|
|
margin-bottom: 10px;
|
|
}
|