move comments style to 2.blocks.comments.css
This commit is contained in:
parent
e55eb48f45
commit
98811bbdfb
4 changed files with 217 additions and 215 deletions
|
|
@ -18,6 +18,7 @@
|
||||||
@import 'src/2.blocks.badge.css';
|
@import 'src/2.blocks.badge.css';
|
||||||
@import 'src/2.blocks.button.css';
|
@import 'src/2.blocks.button.css';
|
||||||
@import 'src/2.blocks.card.css';
|
@import 'src/2.blocks.card.css';
|
||||||
|
@import 'src/2.blocks.comments.css';
|
||||||
@import 'src/2.blocks.design-to-light.css';
|
@import 'src/2.blocks.design-to-light.css';
|
||||||
@import 'src/2.blocks.dialog.css';
|
@import 'src/2.blocks.dialog.css';
|
||||||
@import 'src/2.blocks.header.css';
|
@import 'src/2.blocks.header.css';
|
||||||
|
|
|
||||||
216
src/assets/css/src/2.blocks.comments.css
Normal file
216
src/assets/css/src/2.blocks.comments.css
Normal file
|
|
@ -0,0 +1,216 @@
|
||||||
|
/* COMMENTS BLOCK */
|
||||||
|
|
||||||
|
#toggle-comments {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--space-16);
|
||||||
|
bottom: var(--space-16);
|
||||||
|
padding: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#comments-container {
|
||||||
|
background-color: black;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 4.5rem;
|
||||||
|
width: var(--dialog-comments-w);
|
||||||
|
padding: var(--space-24) var(--space-32);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: calc(100% - 3.5rem);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-right: -2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments.empty::after {
|
||||||
|
content: "Partagez vos idées en ajoutant des commentaires";
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 24ch;
|
||||||
|
margin: auto;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-grey-400);
|
||||||
|
}
|
||||||
|
.comments.empty::before {
|
||||||
|
--icon-size: 1.25rem;
|
||||||
|
--icon-color: var(--color-white);
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, calc(-50% - 4.5rem));
|
||||||
|
width: var(--icon-size);
|
||||||
|
height: var(--icon-size);
|
||||||
|
background: var(--icon-color, currentColor);
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
mask-size: var(--icon-size);
|
||||||
|
mask-image: var(--icon-comment);
|
||||||
|
}
|
||||||
|
|
||||||
|
#new-comment {
|
||||||
|
position: absolute;
|
||||||
|
bottom: var(--space-24);
|
||||||
|
left: var(--space-32);
|
||||||
|
right: var(--space-32);
|
||||||
|
}
|
||||||
|
#new-comment [data-icon] {
|
||||||
|
--column-gap: var(--space-12);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#comments-container form {
|
||||||
|
--flow-space: 0.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 5.5rem;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
#comments-container textarea:not(.comment__body) {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
#comments-container textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
#comments-container textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
::placeholder {
|
||||||
|
color: var(--color-white-50);
|
||||||
|
}
|
||||||
|
#comments-container form footer {
|
||||||
|
gap: var(--space-12);
|
||||||
|
}
|
||||||
|
#comments-container form footer > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track.waiting-comment,
|
||||||
|
.track.waiting-comment .drag-zone,
|
||||||
|
.vpv-pages-inner-container.waiting-comment .page-inner-container,
|
||||||
|
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
|
||||||
|
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
|
||||||
|
cursor: var(--icon-comment-cursor) -2 28, cell !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-marker {
|
||||||
|
--marker-size: 1.75rem;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: var(--marker-size);
|
||||||
|
height: var(--marker-size);
|
||||||
|
background: var(--icon-comment-default) no-repeat center / contain;
|
||||||
|
scroll-margin-block-start: 4rem;
|
||||||
|
cursor: pointer !important;
|
||||||
|
z-index: 999;
|
||||||
|
overflow: visible;
|
||||||
|
transition: transform 0.1s ease-out;
|
||||||
|
transform-origin: bottom left;
|
||||||
|
margin-left: calc(var(--marker-size) * -0.025);
|
||||||
|
margin-top: calc(var(--marker-size) / -1.025);
|
||||||
|
}
|
||||||
|
.comment-marker:hover,
|
||||||
|
.comment-marker.big {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.comment-marker.active,
|
||||||
|
.comment-marker:focus {
|
||||||
|
background-image: var(--icon-comment-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -235,89 +235,3 @@ function unhightlightCorrespondingMarker() {
|
||||||
correspondingMarker.classList.remove("big");
|
correspondingMarker.classList.remove("big");
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -325,132 +325,3 @@ function showCorrespondingView() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Comments */
|
|
||||||
#toggle-comments {
|
|
||||||
position: absolute;
|
|
||||||
right: var(--space-16);
|
|
||||||
bottom: var(--space-16);
|
|
||||||
padding: 0.625rem;
|
|
||||||
}
|
|
||||||
#comments-container {
|
|
||||||
background-color: black;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 4.5rem;
|
|
||||||
width: var(--dialog-comments-w);
|
|
||||||
padding: var(--space-24) var(--space-32);
|
|
||||||
}
|
|
||||||
.comments {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: calc(100% - 3.5rem);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
margin-right: -2rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
.comments.empty::after {
|
|
||||||
content: "Partagez vos idées en ajoutant des commentaires";
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 24ch;
|
|
||||||
margin: auto;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--color-grey-400);
|
|
||||||
}
|
|
||||||
.comments.empty::before {
|
|
||||||
--icon-size: 1.25rem;
|
|
||||||
--icon-color: var(--color-white);
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, calc(-50% - 4.5rem));
|
|
||||||
width: var(--icon-size);
|
|
||||||
height: var(--icon-size);
|
|
||||||
background: var(--icon-color, currentColor);
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
mask-size: var(--icon-size);
|
|
||||||
mask-image: var(--icon-comment);
|
|
||||||
}
|
|
||||||
#new-comment {
|
|
||||||
position: absolute;
|
|
||||||
bottom: var(--space-24);
|
|
||||||
left: var(--space-32);
|
|
||||||
right: var(--space-32);
|
|
||||||
}
|
|
||||||
#new-comment [data-icon] {
|
|
||||||
--column-gap: var(--space-12);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
#comments-container form {
|
|
||||||
--flow-space: 0.5rem;
|
|
||||||
flex-direction: column;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
bottom: 5.5rem;
|
|
||||||
background: #333;
|
|
||||||
}
|
|
||||||
#comments-container textarea:not(.comment__body) {
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
margin: 0;
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
color: var(--color-white);
|
|
||||||
}
|
|
||||||
#comments-container textarea {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
#comments-container textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
::placeholder {
|
|
||||||
color: var(--color-white-50);
|
|
||||||
}
|
|
||||||
#comments-container form footer {
|
|
||||||
gap: var(--space-12);
|
|
||||||
}
|
|
||||||
#comments-container form footer > * {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track.waiting-comment,
|
|
||||||
.track.waiting-comment .drag-zone,
|
|
||||||
.vpv-pages-inner-container.waiting-comment .page-inner-container,
|
|
||||||
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
|
|
||||||
.vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
|
|
||||||
cursor: var(--icon-comment-cursor) -2 28, cell !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-marker {
|
|
||||||
--marker-size: 1.75rem;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: var(--marker-size);
|
|
||||||
height: var(--marker-size);
|
|
||||||
background: var(--icon-comment-default) no-repeat center / contain;
|
|
||||||
scroll-margin-block-start: 4rem;
|
|
||||||
cursor: pointer !important;
|
|
||||||
z-index: 999;
|
|
||||||
overflow: visible;
|
|
||||||
transition: transform 0.1s ease-out;
|
|
||||||
transform-origin: bottom left;
|
|
||||||
margin-left: calc(var(--marker-size) * -0.025);
|
|
||||||
margin-top: calc(var(--marker-size) / -1.025);
|
|
||||||
}
|
|
||||||
.comment-marker:hover,
|
|
||||||
.comment-marker.big {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.comment-marker.active,
|
|
||||||
.comment-marker:focus {
|
|
||||||
background-image: var(--icon-comment-focus);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue