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.button.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.dialog.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");
|
||||
}
|
||||
</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>
|
||||
|
||||
<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