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

move comments style to .css

Browse source
This commit is contained in:
isUnknown 2025-02-08 11:10:59 +01:00
parent 2abd2831ba
commit 66987b5086
1 changed files with 0 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/components/comments/Comments.vue
View file

@ -329,135 +329,3 @@ function showCorrespondingView() {
); );
} }
</script> </script>
<<<<<<< HEAD
<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>
=======
>>>>>>> comments