kopia lustrzana https://github.com/wagtail/wagtail
123 wiersze
2.3 KiB
SCSS
123 wiersze
2.3 KiB
SCSS
.comment-header {
|
|
position: relative;
|
|
|
|
&__avatar {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 15px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
&__author,
|
|
&__date {
|
|
max-width: calc(
|
|
100% - 110px
|
|
); // Leave room for actions to the right and avatar to the left
|
|
margin: 0;
|
|
margin-inline-start: 45px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 130%;
|
|
color: theme('colors.text-label');
|
|
}
|
|
|
|
&__date {
|
|
color: theme('colors.text-meta');
|
|
}
|
|
|
|
&__actions {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
&__action {
|
|
float: inline-start;
|
|
margin-inline-start: 5px;
|
|
border-radius: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
> button,
|
|
> details > summary {
|
|
list-style-type: none; // Hides triangle on Firefox
|
|
width: 30px;
|
|
height: 30px;
|
|
position: relative;
|
|
background-color: unset;
|
|
border: unset;
|
|
padding: 0;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none; // Hides triangle on Chrome
|
|
}
|
|
|
|
svg {
|
|
position: absolute;
|
|
top: 7.5px;
|
|
inset-inline-start: 7.5px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
> details {
|
|
position: relative;
|
|
|
|
> div {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
top: 35px;
|
|
}
|
|
}
|
|
|
|
&--more {
|
|
> button,
|
|
> details > summary {
|
|
color: theme('colors.text-meta');
|
|
}
|
|
}
|
|
}
|
|
|
|
&__more-actions {
|
|
background-color: theme('colors.surface-menus');
|
|
color: theme('colors.text-label-menus-default');
|
|
position: absolute;
|
|
z-index: 1000;
|
|
list-style: none;
|
|
text-align: start;
|
|
border-radius: 3px;
|
|
|
|
&:before {
|
|
content: '';
|
|
border: 6px solid transparent;
|
|
border-bottom-color: theme('colors.surface-menus');
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
inset-inline-end: 9px;
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
background: none;
|
|
border: 0;
|
|
color: theme('colors.text-label-menus-default');
|
|
padding: 5px 10px;
|
|
font-size: 13px;
|
|
width: 100px;
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment--mode-deleting .comment-header,
|
|
.comment-reply--mode-deleting .comment-header {
|
|
opacity: 0.5;
|
|
}
|