mirror of https://gitlab.com/tildes/tildes.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
3.0 KiB
191 lines
3.0 KiB
// Copyright (c) 2018 Tildes contributors <code@tildes.net>
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
.comment {
|
|
border-left: 1px solid;
|
|
margin-bottom: 0.4rem;
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 0.7rem;
|
|
line-height: 0.7rem;
|
|
|
|
// no padding on mobile - the collapse button will do the job
|
|
padding: 0 0.2rem 0 0;
|
|
@media (min-width: $size-md) {
|
|
padding: 0.2rem;
|
|
}
|
|
}
|
|
|
|
&:target > .comment-itself {
|
|
border-left: 3px solid $yellow !important;
|
|
}
|
|
}
|
|
|
|
.comment[data-comment-depth="0"] {
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.comment-user-info {
|
|
margin-left: 0.2rem;
|
|
}
|
|
|
|
.comment-posted-time {
|
|
margin-left: 0.4rem;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.comment-edited-time {
|
|
font-size: 0.6rem;
|
|
font-style: italic;
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.comment-excerpt {
|
|
display: none;
|
|
|
|
font-style: italic;
|
|
margin-left: 0.4rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.comment-branch-counter {
|
|
display: none;
|
|
|
|
margin-right: 0.4rem;
|
|
}
|
|
|
|
.comment-nav-link {
|
|
font-size: 0.6rem;
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.comment-replies {
|
|
margin-left: 0.4rem;
|
|
padding-top: 0.4rem;
|
|
|
|
@media (min-width: $size-md) {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.comment-tags {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0 0 0 0.4rem;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.comment-tag-buttons {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0 1rem;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
@media (min-width: $size-md) {
|
|
justify-content: left;
|
|
}
|
|
}
|
|
|
|
.comment-tag-count {
|
|
font-weight: bold;
|
|
font-size: 0.5rem;
|
|
margin-right: 0.4rem;
|
|
}
|
|
|
|
.comment-text {
|
|
padding: 0.2rem;
|
|
padding-left: 0.4rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.comment-removed-warning {
|
|
color: $warning-color;
|
|
font-weight: bold;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.comment-votes {
|
|
font-size: 0.6rem;
|
|
font-weight: bold;
|
|
margin: 0 0.4rem;
|
|
}
|
|
|
|
.is-comment-by-op {
|
|
& > .comment-itself {
|
|
margin-left: -2px;
|
|
border-left: 3px solid !important;
|
|
|
|
.comment-user-info {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
%collapsed {
|
|
.comment-edited-time,
|
|
.comment-nav-link,
|
|
.comment-posted-time,
|
|
.comment-replies,
|
|
.comment-text,
|
|
.comment-tags,
|
|
.comment-votes,
|
|
.post-buttons {
|
|
display: none;
|
|
}
|
|
|
|
.comment-excerpt {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.is-comment-by-op .comment-user-info {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.is-comment-collapsed {
|
|
@extend %collapsed;
|
|
|
|
&[data-comment-depth="0"] {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.comment-branch-counter {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
// uses @extend to only collapse everything inside the collapsed comment itself and
|
|
// not its replies
|
|
.is-comment-collapsed-individual {
|
|
& > .comment-itself {
|
|
@extend %collapsed;
|
|
}
|
|
}
|
|
|
|
.is-comment-deleted, .is-comment-removed {
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.is-comment-mine {
|
|
& > .comment-itself {
|
|
margin-left: -2px;
|
|
border-left: 3px solid $violet !important;
|
|
}
|
|
}
|
|
|
|
.is-comment-new {
|
|
& > .comment-itself {
|
|
margin-left: -2px;
|
|
border-left: 3px solid $orange !important;
|
|
}
|
|
}
|