studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

move comments style to 2.blocks.comments.css

Browse source
This commit is contained in:
Timothée Goguely 2025-02-07 16:55:48 +01:00
parent e55eb48f45
commit 98811bbdfb
4 changed files with 217 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/components/comments/Comment.vue
View file

@ -235,89 +235,3 @@ function unhightlightCorrespondingMarker() {
correspondingMarker.classList.remove("big");
}
</script>
<style scoped>
.comments > .comment:not([data-opened="true"]) {
cursor: pointer;
}
.comment {
--flow-space: var(--space-12);
font-size: var(--text-sm);
border: var(--border);
border-width: 2px;
border-radius: var(--rounded-lg);
padding: var(--space-12);
color: var(--color-grey-400);
transition: border-color 0.1s ease-in-out;
}
.comment.highlight {
border-color: #fff;
}
.comment header p {
display: flex;
gap: var(--space-8);
}
.comment header strong,
.comment footer {
font-weight: 500;
color: var(--color-white);
}
.comment header time {
color: var(--color-primary);
font-weight: 500;
margin-left: auto;
}
.comment[data-status="unread"] {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-grey-700);
}
.comment[data-status="unread"] header p > :first-child::before {
content: "";
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--color-primary);
margin-right: var(--space-8);
margin-bottom: 0.075em;
}
.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
color: var(--color-black);
}
.comment[data-status="unread"] header time {
color: var(--color-primary);
}
.comment[data-opened="true"] {
border-color: transparent;
}
.comment[data-opened="true"] .comment__replies {
color: var(--color-primary);
}
.comment__id,
.comment__page,
.comment__date {
flex-shrink: 0;
}
.comment__body {
width: 100%;
padding: 0;
margin-bottom: 0;
color: var(--color-grey-400);
font: inherit;
letter-spacing: inherit;
}
.comment__ctas > * {
--border-color: transparent;
margin-right: var(--space-4);
}
.comment__edit-ctas {
display: flex;
gap: var(--space-12);
}
.comment__edit-ctas > * {
flex-grow: 1;
}
</style>