From 20392dc3f279dc9b4abe806f8537a27ea7c578e1 Mon Sep 17 00:00:00 2001 From: SoRaang Date: Fri, 29 Nov 2024 18:20:55 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=8C=88=20Design:=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85=20(#28)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stylesheets/components/_articleItem.scss | 64 + .../stylesheets/components/_formElements.scss | 70 +- .../stylesheets/components/_mainModal.scss | 220 ++- .../components/_mainModalCover.scss | 29 +- .../stylesheets/components/_mallangsItem.scss | 60 +- .../components/_modalFormInput.scss | 75 + .../stylesheets/components/_reviewItem.scss | 49 + .../stylesheets/components/_totalSearch.scss | 30 + src/assets/stylesheets/layouts/_headers.scss | 2 +- src/assets/stylesheets/style.css | 1259 +++++++++++------ src/assets/stylesheets/style.scss | 13 +- src/components/MainModal.jsx | 77 +- src/components/common/ArticleItem.jsx | 51 + src/components/common/EmptyList.jsx | 10 +- src/components/common/MainModalCover.jsx | 6 + src/components/common/MallangItem.jsx | 14 +- src/components/common/ModalDateSeparator.jsx | 13 + src/components/common/ModalFormInput.jsx | 73 + src/components/common/ModalInstruction.jsx | 19 + src/components/common/ModalSectionTitle.jsx | 13 + src/components/common/ReviewItem.jsx | 36 + src/components/common/ReviewTotalScore.jsx | 48 + src/components/layout/BaseLayout.jsx | 3 + src/components/layout/Header.jsx | 2 +- src/components/layout/TotalSearch.jsx | 8 +- 25 files changed, 1732 insertions(+), 512 deletions(-) create mode 100644 src/assets/stylesheets/components/_articleItem.scss create mode 100644 src/assets/stylesheets/components/_modalFormInput.scss create mode 100644 src/assets/stylesheets/components/_reviewItem.scss create mode 100644 src/assets/stylesheets/components/_totalSearch.scss create mode 100644 src/components/common/ArticleItem.jsx create mode 100644 src/components/common/ModalDateSeparator.jsx create mode 100644 src/components/common/ModalFormInput.jsx create mode 100644 src/components/common/ModalInstruction.jsx create mode 100644 src/components/common/ModalSectionTitle.jsx create mode 100644 src/components/common/ReviewItem.jsx create mode 100644 src/components/common/ReviewTotalScore.jsx diff --git a/src/assets/stylesheets/components/_articleItem.scss b/src/assets/stylesheets/components/_articleItem.scss new file mode 100644 index 0000000..b5a5286 --- /dev/null +++ b/src/assets/stylesheets/components/_articleItem.scss @@ -0,0 +1,64 @@ +/* _articleItem.scss */ + +.article-item { + display: flex; + gap: 0.8rem; + + &:has(input:checked) { + > .article-item-descriptions { + background-color: rgb(var(--clr-alert) / 0.05); + outline: 0.2rem solid rgb(var(--clr-alert) / 0.25); + } + } +} + +.article-item-checkbox-wrapper { + flex-shrink: 0; + display: flex; + align-items: center; + height: 2.4rem; +} + +.article-item-descriptions { + display: flex; + flex-flow: column nowrap; + gap: 0.4rem; + flex: 1; + padding: 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100) / 0.05); +} + +@mixin sub-descriptions { + display: flex; + align-items: center; + gap: 0.2rem; + font-size: var(--fnt-sm); + font-weight: 200; +} + +.article-item-title { + @include sub-descriptions(); +} + +.article-item-title-text { + font-size: var(--fnt-md); + font-weight: 900; +} + +.article-replies-counter { + font-weight: 400; + opacity: 0.5; +} + +.article-item-category { + @include sub-descriptions(); +} + +.article-item-datetime { + @include sub-descriptions(); + + opacity: 0.5; +} + +/* _articleItem.scss */ diff --git a/src/assets/stylesheets/components/_formElements.scss b/src/assets/stylesheets/components/_formElements.scss index 766961d..6dc2da7 100644 --- a/src/assets/stylesheets/components/_formElements.scss +++ b/src/assets/stylesheets/components/_formElements.scss @@ -4,33 +4,31 @@ // 입력 요소 공통사항 padding-inline: 0.4rem; height: 1.6rem; - border: 1px solid rgb(var(--clr-theme) / 0.25); - border-radius: 0.2rem; - background-color: rgb(var(--clr-min) / 0.25); + border: 1px solid rgb(var(--clr-text) / 0.15); + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white) / 0.25); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); transition: 0.25s; &:hover { - border-color: rgb(var(--clr-theme) / 0.6); - background-color: rgb(var(--clr-min) / 0.5); + border-color: rgb(var(--clr-text) / 0.5); + background-color: rgb(var(--clr-white) / 0.5); + outline: 0.2rem solid rgb(var(--clr-info) / 0.25); } &:focus { - border-color: rgb(var(--clr-theme) / 0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0) / 0.25); + border-color: rgb(var(--clr-text) / 0.75); + background-color: rgb(var(--clr-white)); + outline: 0.2rem solid rgb(var(--clr-info) / 0.5); } - &.need-recognize:valid { - // 특정 형식의 입력 요소에서 입력 값이 올바를 때의 조건 - // 일반 입력 요소에 모두 통일되어 적용되므로, 반드시 필요한 경우에만 .need-recognize 클래스를 붙여 사용한다. - + &.need-recognized:user-valid { border-color: rgb(var(--clr-clear) / 0.75); - background-color: rgb(var(--clr-clear) / 0.5); + outline: 0.2rem solid rgb(var(--clr-clear) / 0.25); } - &:invalid { + &.need-recognized:user-invalid { border-color: rgb(var(--clr-alert)); outline: 0.2rem solid rgb(var(--clr-alert) / 0.25); } @@ -107,25 +105,25 @@ select:not(.exclude) { > .toggles-indicator { display: grid; place-items: center; - width: 1rem; - height: 1rem; - border: 1px solid rgb(var(--clr-theme) / 0.25); - background-color: rgb(var(--clr-min) / 0.25); + width: 0.8rem; + height: 0.8rem; + border: 1px solid rgb(var(--clr-text) / 0.15); + background-color: rgb(var(--clr-white) / 0.25); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); } > .toggles-label { font-weight: 200; - opacity: 0.75; + opacity: 0.5; } } &:checked + label { > .toggles-indicator { - border: 1px solid rgb(var(--clr-theme)); - background-color: rgb(var(--clr-tint-0) / 0.15); - color: rgb(var(--clr-tint-100)); + border: 1px solid rgb(var(--clr-text) / 0.5); + background-color: rgb(var(--clr-text)); + color: rgb(var(--clr-text-on-tint)); } > .toggles-label { @@ -135,27 +133,33 @@ select:not(.exclude) { & + label:hover { > .toggles-indicator { - border-color: rgb(var(--clr-theme) / 0.6); - background-color: rgb(var(--clr-min) / 0.5); + outline: 0.2rem solid rgb(var(--clr-info) / 0.25); + } + } + + &:not(:checked) + label:hover { + > .toggles-indicator { + border-color: rgb(var(--clr-text) / 0.5); + background-color: rgb(var(--clr-background) / 0.25); } } &:focus + label { > .toggles-indicator { - border-color: rgb(var(--clr-theme) / 0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0) / 0.25); + border-color: rgb(var(--clr-text) / 0.75); + background-color: rgb(var(--clr-background)); + outline: 0.2rem solid rgb(var(--clr-info) / 0.5); } } &:disabled + label { - color: rgb(var(--clr-surface-60)); + color: rgb(var(--clr-text-disable)); text-shadow: 1px 1px 0 rgb(255 255 255 / 0.25); cursor: no-drop; > .toggles-indicator { - border-color: rgb(var(--clr-surface-60)); - background-color: rgb(var(--clr-surface-0)); + border-color: rgb(var(--clr-black) / 0.15); + background-color: rgb(var(--clr-gray)); } } } @@ -176,7 +180,7 @@ input[type='radio'] { & + label { > .toggles-indicator { - border-radius: 25rem; + border-radius: var(--rad-full); &::before { display: block; @@ -219,11 +223,9 @@ input[type='checkbox']:not([data-checkbox-type='toggle']) { & + label { > .toggles-indicator { - border-radius: 0.2rem; + border-radius: var(--rad-sm); .remix { - width: 0.8rem; - height: 0.8rem; opacity: 0; } } diff --git a/src/assets/stylesheets/components/_mainModal.scss b/src/assets/stylesheets/components/_mainModal.scss index b60d8b3..4a8a207 100644 --- a/src/assets/stylesheets/components/_mainModal.scss +++ b/src/assets/stylesheets/components/_mainModal.scss @@ -19,12 +19,18 @@ background-color: rgb(var(--clr-white)); box-shadow: var(--shd-100); overflow: hidden; + + &:has(.cover-signature-image-container) { + #main-modal-side-menu { + margin-block-start: 2.8rem; + } + } } #main-modal-body { flex: 1; display: flex; - z-index: 2; + overflow: hidden; } #main-modal-sidebar { @@ -38,23 +44,205 @@ ); } -#main-modal-signature-image { - position: relative; - margin-block-start: -3.2rem; - margin-inline: auto; - padding: 0.2rem; - width: 6.4rem; - height: 6.4rem; - border-radius: var(--rad-full); - background-color: rgb(var(--clr-background)); +#main-modal-side-menu { + padding-block: 0.8rem; +} + +.side-menu-item { + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 0.8rem; + height: 1.8rem; + font-size: var(--fnt-sm); + font-weight: 200; + + > .remix { + opacity: 0.5; + } + + &:not(.on):hover { + background-color: rgb(var(--clr-theme) / 0.3); + } + + &.on { + background-color: rgb(var(--clr-theme)); + font-weight: 900; + + > .remix { + opacity: 1; + } + } +} + +#main-modal-content-container { + flex: 1; + display: flex; + flex-flow: column nowrap; +} + +#main-modal-navigation { + flex-shrink: 0; + display: flex; + padding-inline: 0.4rem; + height: 2.4rem; + background-image: linear-gradient( + to top, + rgb(var(--clr-text) / 0.15) 1px, + transparent 1px + ); - > div { - width: 100%; - height: 100%; - border-radius: var(--rad-full); - background-color: rgb(var(--clr-gray)); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + > ul { + display: contents; } } +.modal-tab-navigation-item { + --selected: 0; + + display: flex; + align-items: center; + gap: 0.2rem; + padding-inline: 0.8rem; + background-image: linear-gradient( + to top, + rgb(var(--clr-theme)), + rgb(var(--clr-theme)) var(--selected), + transparent var(--selected) + ); + font-size: var(--fnt-sm); + font-weight: 200; + + &.on { + --selected: 0.2rem; + + font-weight: 900; + } +} + +#main-modal-content { + flex: 1; + overflow-y: auto; +} + +/* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */ + +/* 모달 섹션 타이틀 */ + +.modal-section-title { + display: flex; + align-items: center; + gap: 0.1rem; + padding-inline: 0.8rem; + height: 2.4rem; + border-block-end: 1px solid rgb(var(--clr-text) / 0.15); + + > .remix { + opacity: 0.5; + } + + > p { + font-size: var(--fnt-sm); + font-weight: 900; + } +} + +/* 날짜 분단선 */ + +.modal-date-separator { + display: flex; + align-items: center; + gap: 0.8rem; + font-size: var(--fnt-xs); + + > hr { + flex: 1; + } + + > span { + flex-shrink: 0; + opacity: 0.5; + } +} + +/* 모달 인스트럭션 */ + +.main-modal-instruction { + padding: 1.2rem 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100) / 0.05); + + > p { + flex-flow: row wrap; + font-size: var(--fnt-sm); + text-align: center; + line-height: 1.4; + text-wrap: balance; + } + + span:not(.instruction-emoji) { + opacity: 0.75; + } + + .instruction-headline { + margin-inline: 0.2rem; + font-weight: 900; + opacity: 1; + } +} + +/* 리뷰 종합 섹션 */ + +#review-total-score { + position: sticky; + inset-block: 0; + background-color: rgb(var(--clr-white)); + z-index: 2; +} + +.review-score-wrapper { + display: flex; + flex-flow: column nowrap; + gap: 0.6rem; + padding: 0.8rem; +} + +.review-score-target { + display: flex; + align-items: center; + gap: 0.2rem; + font-size: var(--fnt-sm); +} + +.review-score-target-name { + font-weight: 900; +} + +.review-score-everage { + display: flex; + align-items: center; + gap: 0.2rem; + font-weight: 900; + + > svg { + // 나중에 생각나면 색깔이랑 애니메이션 바꿔보기 + color: rgb(var(--clr-text)); + } +} + +.review-score-total-count { + display: flex; + align-items: center; + gap: 0.2rem; + padding: 0.2rem 0.6rem; + width: fit-content; + border: 1px solid rgb(var(--clr-text) / 0.15); + border-radius: var(--rad-sm); + font-size: var(--fnt-sm); +} + +.review-ai-summary { + // 몰래 넣어놔야지 히히 +} + /* _mainModal.scss */ diff --git a/src/assets/stylesheets/components/_mainModalCover.scss b/src/assets/stylesheets/components/_mainModalCover.scss index a222938..85ec1cd 100644 --- a/src/assets/stylesheets/components/_mainModalCover.scss +++ b/src/assets/stylesheets/components/_mainModalCover.scss @@ -1,6 +1,7 @@ /* _mainModalCover.scss */ #main-modal-cover { + flex-shrink: 0; display: flex; flex-flow: row nowrap; justify-content: flex-end; @@ -8,7 +9,6 @@ height: 12rem; background-color: rgb(var(--clr-gray)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23666666' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - overflow: clip; &::before { position: absolute; @@ -50,11 +50,36 @@ color: rgb(var(--clr-text-on-tint)); } +.cover-signature-image-container { + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + width: 9rem; +} + +#main-modal-signature-image { + position: relative; + margin-block-end: -3.2rem; + margin-inline: auto; + padding: 0.2rem; + width: 6.4rem; + height: 6.4rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-background)); + + > div { + width: 100%; + height: 100%; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-gray)); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } +} + .cover-descriptions-container { display: flex; flex: 1; padding: 0.8rem; - margin-inline-start: 10rem; height: 100%; color: rgb(var(--clr-white)); z-index: 2; diff --git a/src/assets/stylesheets/components/_mallangsItem.scss b/src/assets/stylesheets/components/_mallangsItem.scss index c1d4103..494bed7 100644 --- a/src/assets/stylesheets/components/_mallangsItem.scss +++ b/src/assets/stylesheets/components/_mallangsItem.scss @@ -35,41 +35,43 @@ } } -.mallang-descriptions { +.mallang-item-descriptions { + flex: 1; width: 100%; +} - > dt { - display: flex; - align-items: center; - gap: 0.4rem; - margin-block-end: 0.2rem; - width: 100%; - - > .mallang-main-indicator { - flex-shrink: 0; - padding: 0.2rem 0.4rem; - border-radius: var(--rad-full); - background-color: rgb(var(--clr-point)); - font-size: var(--fnt-xs); - font-weight: 700; - } +.mallang-item-name-container { + display: flex; + align-items: center; + gap: 0.4rem; + margin-block-end: 0.2rem; + width: 100%; - > .mallang-name { - font-weight: 900; - word-break: break-all; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } + > .mallang-main-indicator { + flex-shrink: 0; + padding: 0.2rem 0.4rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-point)); + font-size: var(--fnt-xs); + font-weight: 700; } - > dd { - display: flex; - align-items: center; - gap: 0.2rem; - color: rgb(var(--clr-text) / 0.5); - font-size: var(--fnt-sm); + > .mallang-name { + flex: 1; + font-weight: 900; + word-break: break-all; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } } +.mallang-item-summary { + display: flex; + align-items: center; + gap: 0.2rem; + color: rgb(var(--clr-text) / 0.5); + font-size: var(--fnt-sm); +} + /* _mallangsItem.scss */ diff --git a/src/assets/stylesheets/components/_modalFormInput.scss b/src/assets/stylesheets/components/_modalFormInput.scss new file mode 100644 index 0000000..f56686f --- /dev/null +++ b/src/assets/stylesheets/components/_modalFormInput.scss @@ -0,0 +1,75 @@ +/* _modalFormInput.scss */ + +#modal-form-input-container { + display: flex; + flex-flow: column nowrap; + gap: 0.4rem; + padding: 0.8rem; +} + +.modal-form-file-uploader { +} + +#modal-form-file { + display: none; + + & + label { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: var(--fnt-sm); + + &::before { + display: grid; + place-items: center; + padding-inline: 0.6rem; + height: 1.6rem; + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-text)); + color: rgb(var(--clr-text-on-tint)); + font-weight: 700; + content: '이미지 업로드'; + } + + > span { + flex: 1; + display: block; + opacity: 0.5; + } + } +} + +#modal-form-textarea { + flex: 1; + min-height: 3.6rem; +} + +.modal-form-controls { + display: flex; + align-items: center; + + > p { + font-size: var(--fnt-sm); + opacity: 0.5; + + &.overflow { + color: rgb(var(--clr-alert)); + font-weight: 900; + } + } +} + +#button-modal-form-submit { + --button-surface-color: var(--clr-theme); // 버튼 배경 컬러 + --button-outline-color: 0 0 0 / 0; // 버튼 테두리 컬러 + --button-text-color: var(--clr-text); // 버튼 텍스트 컬러 + --button-hover-color: var(--clr-if-40); + --button-hover-text-color: var(--clr-text); + + flex-shrink: 0; + justify-content: center; + margin-inline-start: auto; + width: 3.2rem; +} + +/* _modalFormInput.scss */ diff --git a/src/assets/stylesheets/components/_reviewItem.scss b/src/assets/stylesheets/components/_reviewItem.scss new file mode 100644 index 0000000..9a6c19a --- /dev/null +++ b/src/assets/stylesheets/components/_reviewItem.scss @@ -0,0 +1,49 @@ +/* _reviewItem.scss */ + +.review-item { + display: flex; + gap: 0.8rem; + + &:has(input:checked) { + > .review-item-descriptions { + background-color: rgb(var(--clr-alert) / 0.05); + outline: 0.2rem solid rgb(var(--clr-alert) / 0.25); + } + } +} + +.review-item-checkbox-wrapper { + display: flex; + align-items: center; + flex-shrink: 0; + height: 2.8rem; +} + +.review-item-descriptions { + flex: 1; + display: flex; + flex-flow: column nowrap; + gap: 0.4rem; + padding: 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100) / 0.05); +} + +.review-item-author { + display: flex; + justify-content: space-between; + align-items: center; + + > div:first-child { + width: 1.2rem; + height: 1.2rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-gray)); + } +} + +.review-item-summary { + font-size: var(--fnt-sm); +} + +/* _reviewItem.scss */ diff --git a/src/assets/stylesheets/components/_totalSearch.scss b/src/assets/stylesheets/components/_totalSearch.scss new file mode 100644 index 0000000..d13b2cc --- /dev/null +++ b/src/assets/stylesheets/components/_totalSearch.scss @@ -0,0 +1,30 @@ +/* _totalSearch.scss */ + +#total-search-backdrop { + position: fixed; + inset: 0; + background-color: rgb(var(--clr-background) / 0.75); + z-index: 50001; + + > .inner-wrapper { + display: flex; + flex-flow: column nowrap; + position: absolute; + inset: 0; + margin-block: auto; + height: fit-content; + } +} + +.total-search-input-container { + display: flex; + align-items: center; + height: 3.2rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-white) / 0.75); + backdrop-filter: blur(1.8rem); + box-shadow: inset 0 -0.2rem 0.2rem rgb(var(--clr-text) / 0.1); + outline: 0.2rem solid rgb(var(--clr-if-0) / 0.5); +} + +/* _totalSearch.scss */ diff --git a/src/assets/stylesheets/layouts/_headers.scss b/src/assets/stylesheets/layouts/_headers.scss index 7d744b9..f60274a 100644 --- a/src/assets/stylesheets/layouts/_headers.scss +++ b/src/assets/stylesheets/layouts/_headers.scss @@ -63,7 +63,7 @@ margin-inline-start: auto; } -#total-search { +#total-search-toggler { display: flex; align-items: center; justify-content: space-between; diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css index 02131a7..d6e7186 100644 --- a/src/assets/stylesheets/style.css +++ b/src/assets/stylesheets/style.css @@ -771,7 +771,7 @@ a, a:visited { margin-inline-start: auto; } -#total-search { +#total-search-toggler { display: flex; align-items: center; justify-content: space-between; @@ -1223,28 +1223,29 @@ button { input:not(.exclude)[type=text], input:not(.exclude)[type=number], input:not(.exclude)[type=email], input:not(.exclude)[type=tel], input:not(.exclude)[type=email], input:not(.exclude)[type=url], input:not(.exclude)[type=password], input:not(.exclude)[type=datetime-local], input:not(.exclude)[type=date], input:not(.exclude)[type=month], input:not(.exclude)[type=week], input:not(.exclude)[type=time], input:not(.exclude)[type=search] { padding-inline: 0.4rem; height: 1.6rem; - border: 1px solid rgb(var(--clr-theme)/0.25); - border-radius: 0.2rem; - background-color: rgb(var(--clr-min)/0.25); + border: 1px solid rgb(var(--clr-text)/0.15); + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white)/0.25); -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); transition: 0.25s; } input:not(.exclude)[type=text]:hover, input:not(.exclude)[type=number]:hover, input:not(.exclude)[type=email]:hover, input:not(.exclude)[type=tel]:hover, input:not(.exclude)[type=email]:hover, input:not(.exclude)[type=url]:hover, input:not(.exclude)[type=password]:hover, input:not(.exclude)[type=datetime-local]:hover, input:not(.exclude)[type=date]:hover, input:not(.exclude)[type=month]:hover, input:not(.exclude)[type=week]:hover, input:not(.exclude)[type=time]:hover, input:not(.exclude)[type=search]:hover { - border-color: rgb(var(--clr-theme)/0.6); - background-color: rgb(var(--clr-min)/0.5); + border-color: rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-white)/0.5); + outline: 0.2rem solid rgb(var(--clr-info)/0.25); } input:not(.exclude)[type=text]:focus, input:not(.exclude)[type=number]:focus, input:not(.exclude)[type=email]:focus, input:not(.exclude)[type=tel]:focus, input:not(.exclude)[type=email]:focus, input:not(.exclude)[type=url]:focus, input:not(.exclude)[type=password]:focus, input:not(.exclude)[type=datetime-local]:focus, input:not(.exclude)[type=date]:focus, input:not(.exclude)[type=month]:focus, input:not(.exclude)[type=week]:focus, input:not(.exclude)[type=time]:focus, input:not(.exclude)[type=search]:focus { - border-color: rgb(var(--clr-theme)/0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25); + border-color: rgb(var(--clr-text)/0.75); + background-color: rgb(var(--clr-white)); + outline: 0.2rem solid rgb(var(--clr-info)/0.5); } -input:not(.exclude)[type=text].need-recognize:valid, input:not(.exclude)[type=number].need-recognize:valid, input:not(.exclude)[type=email].need-recognize:valid, input:not(.exclude)[type=tel].need-recognize:valid, input:not(.exclude)[type=email].need-recognize:valid, input:not(.exclude)[type=url].need-recognize:valid, input:not(.exclude)[type=password].need-recognize:valid, input:not(.exclude)[type=datetime-local].need-recognize:valid, input:not(.exclude)[type=date].need-recognize:valid, input:not(.exclude)[type=month].need-recognize:valid, input:not(.exclude)[type=week].need-recognize:valid, input:not(.exclude)[type=time].need-recognize:valid, input:not(.exclude)[type=search].need-recognize:valid { +input:not(.exclude)[type=text].need-recognized:user-valid, input:not(.exclude)[type=number].need-recognized:user-valid, input:not(.exclude)[type=email].need-recognized:user-valid, input:not(.exclude)[type=tel].need-recognized:user-valid, input:not(.exclude)[type=email].need-recognized:user-valid, input:not(.exclude)[type=url].need-recognized:user-valid, input:not(.exclude)[type=password].need-recognized:user-valid, input:not(.exclude)[type=datetime-local].need-recognized:user-valid, input:not(.exclude)[type=date].need-recognized:user-valid, input:not(.exclude)[type=month].need-recognized:user-valid, input:not(.exclude)[type=week].need-recognized:user-valid, input:not(.exclude)[type=time].need-recognized:user-valid, input:not(.exclude)[type=search].need-recognized:user-valid { border-color: rgb(var(--clr-clear)/0.75); - background-color: rgb(var(--clr-clear)/0.5); + outline: 0.2rem solid rgb(var(--clr-clear)/0.25); } -input:not(.exclude)[type=text]:invalid, input:not(.exclude)[type=number]:invalid, input:not(.exclude)[type=email]:invalid, input:not(.exclude)[type=tel]:invalid, input:not(.exclude)[type=email]:invalid, input:not(.exclude)[type=url]:invalid, input:not(.exclude)[type=password]:invalid, input:not(.exclude)[type=datetime-local]:invalid, input:not(.exclude)[type=date]:invalid, input:not(.exclude)[type=month]:invalid, input:not(.exclude)[type=week]:invalid, input:not(.exclude)[type=time]:invalid, input:not(.exclude)[type=search]:invalid { +input:not(.exclude)[type=text].need-recognized:user-invalid, input:not(.exclude)[type=number].need-recognized:user-invalid, input:not(.exclude)[type=email].need-recognized:user-invalid, input:not(.exclude)[type=tel].need-recognized:user-invalid, input:not(.exclude)[type=email].need-recognized:user-invalid, input:not(.exclude)[type=url].need-recognized:user-invalid, input:not(.exclude)[type=password].need-recognized:user-invalid, input:not(.exclude)[type=datetime-local].need-recognized:user-invalid, input:not(.exclude)[type=date].need-recognized:user-invalid, input:not(.exclude)[type=month].need-recognized:user-invalid, input:not(.exclude)[type=week].need-recognized:user-invalid, input:not(.exclude)[type=time].need-recognized:user-invalid, input:not(.exclude)[type=search].need-recognized:user-invalid { border-color: rgb(var(--clr-alert)); outline: 0.2rem solid rgb(var(--clr-alert)/0.25); } @@ -1259,9 +1260,9 @@ input:not(.exclude)[type=text]:disabled, input:not(.exclude)[type=number]:disabl textarea:not(.exclude) { padding-inline: 0.4rem; height: 1.6rem; - border: 1px solid rgb(var(--clr-theme)/0.25); - border-radius: 0.2rem; - background-color: rgb(var(--clr-min)/0.25); + border: 1px solid rgb(var(--clr-text)/0.15); + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white)/0.25); -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); @@ -1269,19 +1270,20 @@ textarea:not(.exclude) { padding-block: 0.4rem; } textarea:not(.exclude):hover { - border-color: rgb(var(--clr-theme)/0.6); - background-color: rgb(var(--clr-min)/0.5); + border-color: rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-white)/0.5); + outline: 0.2rem solid rgb(var(--clr-info)/0.25); } textarea:not(.exclude):focus { - border-color: rgb(var(--clr-theme)/0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25); + border-color: rgb(var(--clr-text)/0.75); + background-color: rgb(var(--clr-white)); + outline: 0.2rem solid rgb(var(--clr-info)/0.5); } -textarea:not(.exclude).need-recognize:valid { +textarea:not(.exclude).need-recognized:user-valid { border-color: rgb(var(--clr-clear)/0.75); - background-color: rgb(var(--clr-clear)/0.5); + outline: 0.2rem solid rgb(var(--clr-clear)/0.25); } -textarea:not(.exclude):invalid { +textarea:not(.exclude).need-recognized:user-invalid { border-color: rgb(var(--clr-alert)); outline: 0.2rem solid rgb(var(--clr-alert)/0.25); } @@ -1296,9 +1298,9 @@ textarea:not(.exclude):disabled { select:not(.exclude) { padding-inline: 0.4rem; height: 1.6rem; - border: 1px solid rgb(var(--clr-theme)/0.25); - border-radius: 0.2rem; - background-color: rgb(var(--clr-min)/0.25); + border: 1px solid rgb(var(--clr-text)/0.15); + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white)/0.25); -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); @@ -1314,19 +1316,20 @@ select:not(.exclude) { appearance: none; } select:not(.exclude):hover { - border-color: rgb(var(--clr-theme)/0.6); - background-color: rgb(var(--clr-min)/0.5); + border-color: rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-white)/0.5); + outline: 0.2rem solid rgb(var(--clr-info)/0.25); } select:not(.exclude):focus { - border-color: rgb(var(--clr-theme)/0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25); + border-color: rgb(var(--clr-text)/0.75); + background-color: rgb(var(--clr-white)); + outline: 0.2rem solid rgb(var(--clr-info)/0.5); } -select:not(.exclude).need-recognize:valid { +select:not(.exclude).need-recognized:user-valid { border-color: rgb(var(--clr-clear)/0.75); - background-color: rgb(var(--clr-clear)/0.5); + outline: 0.2rem solid rgb(var(--clr-clear)/0.25); } -select:not(.exclude):invalid { +select:not(.exclude).need-recognized:user-invalid { border-color: rgb(var(--clr-alert)); outline: 0.2rem solid rgb(var(--clr-alert)/0.25); } @@ -1363,46 +1366,49 @@ input[type=radio] + label { input[type=radio] + label > .toggles-indicator { display: grid; place-items: center; - width: 1rem; - height: 1rem; - border: 1px solid rgb(var(--clr-theme)/0.25); - background-color: rgb(var(--clr-min)/0.25); + width: 0.8rem; + height: 0.8rem; + border: 1px solid rgb(var(--clr-text)/0.15); + background-color: rgb(var(--clr-white)/0.25); -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); } input[type=radio] + label > .toggles-label { font-weight: 200; - opacity: 0.75; + opacity: 0.5; } input[type=radio]:checked + label > .toggles-indicator { - border: 1px solid rgb(var(--clr-theme)); - background-color: rgb(var(--clr-tint-0)/0.15); - color: rgb(var(--clr-tint-100)); + border: 1px solid rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-text)); + color: rgb(var(--clr-text-on-tint)); } input[type=radio]:checked + label > .toggles-label { font-weight: 900; } input[type=radio] + label:hover > .toggles-indicator { - border-color: rgb(var(--clr-theme)/0.6); - background-color: rgb(var(--clr-min)/0.5); + outline: 0.2rem solid rgb(var(--clr-info)/0.25); +} +input[type=radio]:not(:checked) + label:hover > .toggles-indicator { + border-color: rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-background)/0.25); } input[type=radio]:focus + label > .toggles-indicator { - border-color: rgb(var(--clr-theme)/0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25); + border-color: rgb(var(--clr-text)/0.75); + background-color: rgb(var(--clr-background)); + outline: 0.2rem solid rgb(var(--clr-info)/0.5); } input[type=radio]:disabled + label { - color: rgb(var(--clr-surface-60)); + color: rgb(var(--clr-text-disable)); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25); cursor: no-drop; } input[type=radio]:disabled + label > .toggles-indicator { - border-color: rgb(var(--clr-surface-60)); - background-color: rgb(var(--clr-surface-0)); + border-color: rgb(var(--clr-black)/0.15); + background-color: rgb(var(--clr-gray)); } input[type=radio] + label > .toggles-indicator { - border-radius: 25rem; + border-radius: var(--rad-full); } input[type=radio] + label > .toggles-indicator::before { display: block; @@ -1443,50 +1449,51 @@ input[type=checkbox]:not([data-checkbox-type=toggle]) + label { input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator { display: grid; place-items: center; - width: 1rem; - height: 1rem; - border: 1px solid rgb(var(--clr-theme)/0.25); - background-color: rgb(var(--clr-min)/0.25); + width: 0.8rem; + height: 0.8rem; + border: 1px solid rgb(var(--clr-text)/0.15); + background-color: rgb(var(--clr-white)/0.25); -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); color: rgb(var(--clr-text)); } input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-label { font-weight: 200; - opacity: 0.75; + opacity: 0.5; } input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-indicator { - border: 1px solid rgb(var(--clr-theme)); - background-color: rgb(var(--clr-tint-0)/0.15); - color: rgb(var(--clr-tint-100)); + border: 1px solid rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-text)); + color: rgb(var(--clr-text-on-tint)); } input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-label { font-weight: 900; } input[type=checkbox]:not([data-checkbox-type=toggle]) + label:hover > .toggles-indicator { - border-color: rgb(var(--clr-theme)/0.6); - background-color: rgb(var(--clr-min)/0.5); + outline: 0.2rem solid rgb(var(--clr-info)/0.25); +} +input[type=checkbox]:not([data-checkbox-type=toggle]):not(:checked) + label:hover > .toggles-indicator { + border-color: rgb(var(--clr-text)/0.5); + background-color: rgb(var(--clr-background)/0.25); } input[type=checkbox]:not([data-checkbox-type=toggle]):focus + label > .toggles-indicator { - border-color: rgb(var(--clr-theme)/0.75); - background-color: rgb(var(--clr-min)); - outline: 0.2rem solid rgb(var(--clr-tint-0)/0.25); + border-color: rgb(var(--clr-text)/0.75); + background-color: rgb(var(--clr-background)); + outline: 0.2rem solid rgb(var(--clr-info)/0.5); } input[type=checkbox]:not([data-checkbox-type=toggle]):disabled + label { - color: rgb(var(--clr-surface-60)); + color: rgb(var(--clr-text-disable)); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25); cursor: no-drop; } input[type=checkbox]:not([data-checkbox-type=toggle]):disabled + label > .toggles-indicator { - border-color: rgb(var(--clr-surface-60)); - background-color: rgb(var(--clr-surface-0)); + border-color: rgb(var(--clr-black)/0.15); + background-color: rgb(var(--clr-gray)); } input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator { - border-radius: 0.2rem; + border-radius: var(--rad-sm); } input[type=checkbox]:not([data-checkbox-type=toggle]) + label > .toggles-indicator .remix { - width: 0.8rem; - height: 0.8rem; opacity: 0; } input[type=checkbox]:not([data-checkbox-type=toggle]):checked + label > .toggles-indicator .remix { @@ -1738,6 +1745,146 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail } /* _emptyList.scss */ +/* _dropDownSelector.scss */ +.dropdown-container { + position: relative; + width: -moz-fit-content; + width: fit-content; + font-size: var(--fnt-sm); +} + +.dropdown-selected-label { + display: flex; + align-items: center; + height: 1.6rem; + border: 1px solid rgb(var(--clr-white)); + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white)/0.75); + -webkit-backdrop-filter: blur(1.8rem); + backdrop-filter: blur(1.8rem); + box-shadow: var(--shd-100); + font-weight: 700; + cursor: pointer; +} +.dropdown-selected-label > span { + width: 1px; + height: 100%; + background-color: rgb(var(--clr-text)/0.15); +} +.dropdown-selected-label:hover { + outline: 0.2rem solid rgb(var(--clr-info)/0.5); +} +.dropdown-selected-label.on { + outline: 0.2rem solid rgb(var(--clr-info)); +} +.dropdown-selected-label.on > .dropdown-arrow-button { + background-color: rgb(var(--clr-black)/0.1); +} +.dropdown-selected-label.on > .dropdown-arrow-button > .remix { + color: rgb(var(--clr-white)); + rotate: -180deg; +} + +.selected-label-text { + display: flex; + padding-inline: 0.4rem; + min-width: 3.2rem; +} + +.dropdown-arrow-button { + flex-shrink: 0; + display: grid; + place-items: center; + height: 100%; + aspect-ratio: 1/1; +} +.dropdown-arrow-button > .remix { + transition: rotate 0.15s; +} + +.dropdown-menu { + position: absolute; + inset-block-start: calc(100% + 0.4rem); + inset-inline: 0; + max-height: 6rem; + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-white)); + box-shadow: var(--shd-100); + opacity: 1; + overflow: clip; + overflow-y: auto; +} +@starting-style { + .dropdown-menu { + opacity: 0; + transition: opacity 0.15s; + } +} + +.dropdown-menu-item { + display: flex; + align-items: center; + justify-content: space-between; + padding-inline: 0.4rem; + height: 1.6rem; + font-weight: 200; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.dropdown-menu-item:hover { + background-color: rgb(var(--clr-info)/0.15); +} +.dropdown-menu-item.selected { + background-color: rgb(var(--clr-info)); + color: rgb(var(--clr-text-on-tint)); + font-weight: 700; +} + +/* _dropDownSelector.scss */ +.star-container { + display: flex; + align-items: center; + gap: 0.4rem; +} +.star-container-rating { + display: flex; + align-items: center; +} +.star-container-rating-element { + cursor: pointer; +} +.star-container-score { + color: rgb(var(--clr-text)); +} + +.nametag-content { + display: flex; + align-items: center; + gap: 0.4rem; + position: relative; + width: 3.5rem; + height: 1.25rem; +} +.nametag-content-icon { + display: flex; + justify-content: center; + align-items: center; + width: 1.2rem; + height: 1.2rem; + background: rgb(var(--clr-gray)); + border: 0.05rem solid rgba(0, 0, 0, 0.15); + border-radius: var(--rad-full); + position: relative; +} +.nametag-content-username { + color: rgb(var(--clr-text)); + overflow: hidden; + font-size: var(--fnt-md); + font-weight: 700; + max-width: 6rem; +} + /* _notificationCard.scss */ #notification-card { position: fixed; @@ -2245,6 +2392,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail /* _areaInfoPanel.scss */ /* _mainModalCover.scss */ #main-modal-cover { + flex-shrink: 0; display: flex; flex-flow: row nowrap; justify-content: flex-end; @@ -2252,9 +2400,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail height: 12rem; background-color: rgb(var(--clr-gray)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23666666' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - overflow: clip; } - #main-modal-cover::before { position: absolute; inset: 0; @@ -2291,11 +2437,35 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail color: rgb(var(--clr-text-on-tint)); } +.cover-signature-image-container { + display: flex; + flex-flow: column nowrap; + justify-content: flex-end; + width: 9rem; +} + +#main-modal-signature-image { + position: relative; + margin-block-end: -3.2rem; + margin-inline: auto; + padding: 0.2rem; + width: 6.4rem; + height: 6.4rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-background)); +} +#main-modal-signature-image > div { + width: 100%; + height: 100%; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-gray)); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); +} + .cover-descriptions-container { display: flex; flex: 1; padding: 0.8rem; - margin-inline-start: 10rem; height: 100%; color: rgb(var(--clr-white)); z-index: 2; @@ -2349,11 +2519,14 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail box-shadow: var(--shd-100); overflow: hidden; } +#main-modal:has(.cover-signature-image-container) #main-modal-side-menu { + margin-block-start: 2.8rem; +} #main-modal-body { flex: 1; display: flex; - z-index: 2; + overflow: hidden; } #main-modal-sidebar { @@ -2362,34 +2535,183 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail background-image: linear-gradient(to left, rgb(var(--clr-text)/0.15), rgb(var(--clr-text)/0.15) 1px, transparent 1px); } -#main-modal-signature-image { - position: relative; - margin-block-start: -3.2rem; - margin-inline: auto; - padding: 0.2rem; - width: 6.4rem; - height: 6.4rem; - border-radius: var(--rad-full); - background-color: rgb(var(--clr-background)); -} -#main-modal-signature-image > div { - width: 100%; - height: 100%; - border-radius: var(--rad-full); - background-color: rgb(var(--clr-gray)); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); +#main-modal-side-menu { + padding-block: 0.8rem; } -/* _mainModal.scss */ -/* _mallangsItem.scss */ -.mallang-item { +.side-menu-item { display: flex; + justify-content: space-between; align-items: center; - gap: 0.6rem; - padding: 0.8rem; + padding-inline: 0.8rem; + height: 1.8rem; + font-size: var(--fnt-sm); + font-weight: 200; +} +.side-menu-item > .remix { + opacity: 0.5; +} +.side-menu-item:not(.on):hover { + background-color: rgb(var(--clr-theme)/0.3); +} +.side-menu-item.on { + background-color: rgb(var(--clr-theme)); + font-weight: 900; +} +.side-menu-item.on > .remix { + opacity: 1; } -.mallang-image-container { +#main-modal-content-container { + flex: 1; + display: flex; + flex-flow: column nowrap; +} + +#main-modal-navigation { + flex-shrink: 0; + display: flex; + padding-inline: 0.4rem; + height: 2.4rem; + background-image: linear-gradient(to top, rgb(var(--clr-text)/0.15) 1px, transparent 1px); +} +#main-modal-navigation > ul { + display: contents; +} + +.modal-tab-navigation-item { + --selected: 0; + display: flex; + align-items: center; + gap: 0.2rem; + padding-inline: 0.8rem; + background-image: linear-gradient(to top, rgb(var(--clr-theme)), rgb(var(--clr-theme)) var(--selected), transparent var(--selected)); + font-size: var(--fnt-sm); + font-weight: 200; +} +.modal-tab-navigation-item.on { + --selected: 0.2rem; + font-weight: 900; +} + +#main-modal-content { + flex: 1; + overflow-y: auto; +} + +/* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */ +/* 모달 섹션 타이틀 */ +.modal-section-title { + display: flex; + align-items: center; + gap: 0.1rem; + padding-inline: 0.8rem; + height: 2.4rem; + border-block-end: 1px solid rgb(var(--clr-text)/0.15); +} +.modal-section-title > .remix { + opacity: 0.5; +} +.modal-section-title > p { + font-size: var(--fnt-sm); + font-weight: 900; +} + +/* 날짜 분단선 */ +.modal-date-separator { + display: flex; + align-items: center; + gap: 0.8rem; + font-size: var(--fnt-xs); +} +.modal-date-separator > hr { + flex: 1; +} +.modal-date-separator > span { + flex-shrink: 0; + opacity: 0.5; +} + +/* 모달 인스트럭션 */ +.main-modal-instruction { + padding: 1.2rem 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100)/0.05); +} +.main-modal-instruction > p { + flex-flow: row wrap; + font-size: var(--fnt-sm); + text-align: center; + line-height: 1.4; + text-wrap: balance; +} +.main-modal-instruction span:not(.instruction-emoji) { + opacity: 0.75; +} +.main-modal-instruction .instruction-headline { + margin-inline: 0.2rem; + font-weight: 900; + opacity: 1; +} + +/* 리뷰 종합 섹션 */ +#review-total-score { + position: sticky; + inset-block: 0; + background-color: rgb(var(--clr-white)); + z-index: 2; +} + +.review-score-wrapper { + display: flex; + flex-flow: column nowrap; + gap: 0.6rem; + padding: 0.8rem; +} + +.review-score-target { + display: flex; + align-items: center; + gap: 0.2rem; + font-size: var(--fnt-sm); +} + +.review-score-target-name { + font-weight: 900; +} + +.review-score-everage { + display: flex; + align-items: center; + gap: 0.2rem; + font-weight: 900; +} +.review-score-everage > svg { + color: rgb(var(--clr-text)); +} + +.review-score-total-count { + display: flex; + align-items: center; + gap: 0.2rem; + padding: 0.2rem 0.6rem; + width: -moz-fit-content; + width: fit-content; + border: 1px solid rgb(var(--clr-text)/0.15); + border-radius: var(--rad-sm); + font-size: var(--fnt-sm); +} + +/* _mainModal.scss */ +/* _mallangsItem.scss */ +.mallang-item { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.8rem; +} + +.mallang-image-container { flex-shrink: 0; position: relative; width: 3.2rem; @@ -2416,17 +2738,19 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail rotate: -15deg; } -.mallang-descriptions { +.mallang-item-descriptions { + flex: 1; width: 100%; } -.mallang-descriptions > dt { + +.mallang-item-name-container { display: flex; align-items: center; gap: 0.4rem; margin-block-end: 0.2rem; width: 100%; } -.mallang-descriptions > dt > .mallang-main-indicator { +.mallang-item-name-container > .mallang-main-indicator { flex-shrink: 0; padding: 0.2rem 0.4rem; border-radius: var(--rad-full); @@ -2434,14 +2758,16 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail font-size: var(--fnt-xs); font-weight: 700; } -.mallang-descriptions > dt > .mallang-name { +.mallang-item-name-container > .mallang-name { + flex: 1; font-weight: 900; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } -.mallang-descriptions > dd { + +.mallang-item-summary { display: flex; align-items: center; gap: 0.2rem; @@ -2450,287 +2776,194 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail } /* _mallangsItem.scss */ -/* _dropDownSelector.scss */ -.dropdown-container { - position: relative; - width: -moz-fit-content; - width: fit-content; - font-size: var(--fnt-sm); +/* _reviewItem.scss */ +.review-item { + display: flex; + gap: 0.8rem; +} +.review-item:has(input:checked) > .review-item-descriptions { + background-color: rgb(var(--clr-alert)/0.05); + outline: 0.2rem solid rgb(var(--clr-alert)/0.25); } -.dropdown-selected-label { +.review-item-checkbox-wrapper { display: flex; align-items: center; - height: 1.6rem; - border: 1px solid rgb(var(--clr-white)); - border-radius: var(--rad-sm); - background-color: rgb(var(--clr-white)/0.75); - -webkit-backdrop-filter: blur(1.8rem); - backdrop-filter: blur(1.8rem); - box-shadow: var(--shd-100); - font-weight: 700; - cursor: pointer; -} -.dropdown-selected-label > span { - width: 1px; - height: 100%; - background-color: rgb(var(--clr-text)/0.15); + flex-shrink: 0; + height: 2.8rem; } -.dropdown-selected-label:hover { - outline: 0.2rem solid rgb(var(--clr-info)/0.5); + +.review-item-descriptions { + flex: 1; + display: flex; + flex-flow: column nowrap; + gap: 0.4rem; + padding: 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100)/0.05); } -.dropdown-selected-label.on { - outline: 0.2rem solid rgb(var(--clr-info)); + +.review-item-author { + display: flex; + justify-content: space-between; + align-items: center; } -.dropdown-selected-label.on > .dropdown-arrow-button { - background-color: rgb(var(--clr-black)/0.1); +.review-item-author > div:first-child { + width: 1.2rem; + height: 1.2rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-gray)); } -.dropdown-selected-label.on > .dropdown-arrow-button > .remix { - color: rgb(var(--clr-white)); - rotate: -180deg; + +.review-item-summary { + font-size: var(--fnt-sm); } -.selected-label-text { +/* _reviewItem.scss */ +/* _articleItem.scss */ +.article-item { display: flex; - padding-inline: 0.4rem; - min-width: 3.2rem; + gap: 0.8rem; +} +.article-item:has(input:checked) > .article-item-descriptions { + background-color: rgb(var(--clr-alert)/0.05); + outline: 0.2rem solid rgb(var(--clr-alert)/0.25); } -.dropdown-arrow-button { +.article-item-checkbox-wrapper { flex-shrink: 0; - display: grid; - place-items: center; - height: 100%; - aspect-ratio: 1/1; -} -.dropdown-arrow-button > .remix { - transition: rotate 0.15s; + display: flex; + align-items: center; + height: 2.4rem; } -.dropdown-menu { - position: absolute; - inset-block-start: calc(100% + 0.4rem); - inset-inline: 0; - max-height: 6rem; - border-radius: var(--rad-sm); - background-color: rgb(var(--clr-white)); - box-shadow: var(--shd-100); - opacity: 1; - overflow: clip; - overflow-y: auto; -} -@starting-style { - .dropdown-menu { - opacity: 0; - transition: opacity 0.15s; - } +.article-item-descriptions { + display: flex; + flex-flow: column nowrap; + gap: 0.4rem; + flex: 1; + padding: 0.8rem; + border-radius: var(--rad-lg); + background-color: rgb(var(--clr-tint-100)/0.05); } -.dropdown-menu-item { +.article-item-title { display: flex; align-items: center; - justify-content: space-between; - padding-inline: 0.4rem; - height: 1.6rem; + gap: 0.2rem; + font-size: var(--fnt-sm); font-weight: 200; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } -.dropdown-menu-item:hover { - background-color: rgb(var(--clr-info)/0.15); + +.article-item-title-text { + font-size: var(--fnt-md); + font-weight: 900; } -.dropdown-menu-item.selected { - background-color: rgb(var(--clr-info)); - color: rgb(var(--clr-text-on-tint)); - font-weight: 700; + +.article-replies-counter { + font-weight: 400; + opacity: 0.5; } -/* _dropDownSelector.scss */ -.chat-item { +.article-item-category { display: flex; - flex-direction: row; - align-items: flex-start; - gap: 8px; - position: relative; - width: 508px; - height: 65px; - left: 36px; - top: 399px; -} -.chat-item-profile { -.dropdown-container { - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - justify-content: center; align-items: center; - position: relative; - width: 100px; - height: 2rem; - left: 343px; - top: 237px; - background: rgba(255, 255, 255, 0.75); - border: 1px solid #ffffff; - box-shadow: 0px 16px 24px -12px rgba(0, 0, 0, 0.25); - -webkit-backdrop-filter: blur(18px); - backdrop-filter: blur(18px); - border-radius: 4px; + gap: 0.2rem; + font-size: var(--fnt-sm); + font-weight: 200; } -.dropdown-container .option-item { + +.article-item-datetime { display: flex; - flex-direction: row; align-items: center; - justify-content: center; - padding: 8px 16px; - height: 32px; - align-self: stretch; - font-family: "SUIT Variable"; - font-style: normal; - color: #302825; - font-weight: 700; - font-size: 12px; - line-height: 15px; -} -.dropdown-container .option-item .separator-line { - width: 1px; - height: 32px; - background: #302825; - opacity: 0.15; - order: 1; - z-index: 1; + gap: 0.2rem; + font-size: var(--fnt-sm); + font-weight: 200; + opacity: 0.5; } -.dropdown-container .option-item .arrow-button { + +/* _articleItem.scss */ +/* _modalFormInput.scss */ +#modal-form-input-container { display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 0.75rem; - height: 0.75rem; - flex-shrink: 0; - order: 2; - z-index: 2; + flex-flow: column nowrap; + gap: 0.4rem; + padding: 0.8rem; } -.dropdown-container .dropdown-menu { - display: flex; - flex-direction: column; - align-items: flex-start; - position: absolute; - height: 96px; - top: 45px; - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: 0px 16px 24px -12px rgba(0, 0, 0, 0.25); - border-radius: 4px; - order: 3; - z-index: 3; + +#modal-form-file { + display: none; } -.dropdown-container .dropdown-menu .dropdown-menu-item { +#modal-form-file + label { display: flex; - flex-direction: row; - justify-content: space-between; align-items: center; - padding: 0px 8px; - gap: 10px; - width: 100px; - height: 32px; - align-self: stretch; -} -.dropdown-container .dropdown-menu .dropdown-menu-item.active { - background: #5960e8; -} -.dropdown-container .dropdown-menu .dropdown-menu-item.active .menu-item-label { - color: #ffffff; -} -.dropdown-container .dropdown-menu .dropdown-menu-item.active .icon-checked { - opacity: 1; + gap: 0.4rem; + font-size: var(--fnt-sm); } -.dropdown-container .dropdown-menu .dropdown-menu-item .menu-item-label { - margin: 0 auto; - width: 35px; - height: 15px; - font-family: "SUIT Variable"; - font-style: normal; - font-weight: 200; - font-size: 12px; - line-height: 15px; - color: #000000; +#modal-form-file + label::before { + display: grid; + place-items: center; + padding-inline: 0.6rem; + height: 1.6rem; + border-radius: var(--rad-sm); + background-color: rgb(var(--clr-text)); + color: rgb(var(--clr-text-on-tint)); + font-weight: 700; + content: "이미지 업로드"; } -.dropdown-container .dropdown-menu .dropdown-menu-item .icon-checked { - margin: 0 auto; - width: 16px; - height: 16px; - order: 1; +#modal-form-file + label > span { + flex: 1; + display: block; + opacity: 0.5; } -.receive-chat-item { - display: flex; - flex-direction: row; - align-items: flex-start; - gap: 0.5rem; - position: relative; - width: 100%; - height: 100%; +#modal-form-textarea { + flex: 1; + min-height: 3.6rem; } -.receive-chat-item-profile { - box-sizing: border-box; + +.modal-form-controls { display: flex; - flex-direction: column; - justify-content: center; align-items: center; - isolation: isolate; - width: 36px; - height: 36px; - background: #808080; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 500px; } -.chat-item-profile-icon { - position: absolute; - width: 36px; - height: 36px; - top: 7px; +.modal-form-controls > p { + font-size: var(--fnt-sm); + opacity: 0.5; } -.chat-item-profile-icon::before { - position: absolute; - left: 16.67%; - right: 16.67%; - top: 4.17%; - bottom: 8.33%; - background: #ffffff; +.modal-form-controls > p.overflow { + color: rgb(var(--clr-alert)); + font-weight: 900; } -.chat-item-content { + +#button-modal-form-submit { + --button-surface-color: var(--clr-theme); + --button-outline-color: 0 0 0 / 0; + --button-text-color: var(--clr-text); + --button-hover-color: var(--clr-if-40); + --button-hover-text-color: var(--clr-text); + flex-shrink: 0; + justify-content: center; + margin-inline-start: auto; + width: 3.2rem; +} + +/* _modalFormInput.scss */ +.receive-chat-item { display: flex; - flex-direction: column; + flex-direction: row; align-items: flex-start; - gap: 4px; - width: 169px; - max-width: 360px; - height: 65px; - order: 1; -} -.chat-item-username { - width: 27px; - height: 12px; - font-family: "SUIT Variable"; - font-style: normal; - font-weight: 700; - font-size: 10px; - line-height: 12px; - color: #302825; - opacity: 0.5; + gap: 0.5rem; + position: relative; + width: 100%; + height: 100%; } -.chat-item-bubble { +.receive-chat-item-profile { + box-sizing: border-box; display: flex; - flex-direction: row; + flex-direction: column; + justify-content: center; align-items: center; - width: 169px; - padding: 0.5rem 0.75rem; - max-width: 360px; - height: 33px; - background: #ffe4ac; - border-radius: 0 8px 8px 8px; - align-self: stretch; + isolation: isolate; width: 1.8rem; height: 1.8rem; background: rgb(var(--clr-gray)); @@ -2792,12 +3025,6 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail font-style: normal; font-weight: 400; font-size: var(--fnt-md); - line-height: 17px; - color: #302825; - width: 145px; - height: 17px; -} -.chat-item-time { color: rgb(var(--clr-text)); order: 0; word-break: break-word; @@ -2807,69 +3034,6 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail flex-direction: row; justify-content: flex-end; align-items: center; - gap: 4px; - width: 169px; - height: 12px; - order: 1; - align-self: stretch; - font-family: "SUIT Variable"; - font-style: normal; - font-weight: 200; - font-size: 10px; - line-height: 12px; - text-align: right; - color: #302825; - opacity: 0.5; - width: 38px; - height: 12px; - flex: none; -} - -.chat-message-container { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 0.25rem; - width: 169px; - max-width: 22.5rem; - height: 49px; -} - -.chat-content-container { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - width: 169px; - height: 49px; -} - -.chat-text-bubble { - display: flex; - max-width: 22.5rem; - flex-direction: row; - justify-content: flex-end; - align-items: flex-start; - padding: 0.5rem 0.75rem; - height: 33px; - background: var(----clr-info, #5960e8); - border-radius: var(----rad-lg, 0.5rem) var(----rad-lg, 0.5rem) 0rem var(----rad-lg, 0.5rem); - align-self: stretch; -} - -.chat-text { - width: 145px; - height: 17px; - font-family: "SUIT Variable"; - font-style: normal; - font-weight: 400; - font-size: var(----fnt-md, 0.875rem); - line-height: 17px; - color: var(----clr-white, #fff); -} - -.chat-time-container { -======= gap: 0.2rem; width: 100%; height: 0.75rem; @@ -2951,4 +3115,297 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail flex-direction: row; justify-content: flex-end; align-items: center; -} \ No newline at end of file + gap: 0.2rem; + width: 100%; + height: 0.75rem; + order: 1; + align-self: stretch; + flex-grow: 1; +} +.send-chat-item-message-container-content-datetime-time { + width: 1.9rem; + height: 0.6rem; + font-family: "SUIT Variable"; + font-style: normal; + font-weight: 200; + font-size: var(--fnt-xs); + line-height: 0.6rem; + text-align: right; + color: rgb(var(--clr-text)); + opacity: 0.5; + flex: none; + order: 0; + flex-grow: 0; +} + +.setting-mallangs { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + max-width: 20rem; + margin: 0 auto; +} +.setting-mallangs .add-mallang-form { + display: flex; + flex-direction: column; + gap: 0.8rem; + padding: 0.8rem; + width: 100%; +} +.setting-mallangs .large-text-input { + display: flex; + align-items: center; + height: 2.4rem; + width: 100%; + border-bottom: 0.1rem solid rgba(47, 40, 36, 0.15); + padding: 0 0.4rem; +} +.setting-mallangs .large-text-input .name-input { + color: rgb(var(--clr-text)); + font-size: var(--fnt-title-sm); + opacity: 0.5; + width: 100%; + text-align: center; + font-weight: 900; +} +.setting-mallangs .large-text-input input:focus { + outline: none; +} +.setting-mallangs .mallang-select-container { + width: 100%; +} +.setting-mallangs .mallang-select-container .label-type { + color: rgb(var(--clr-text)); + font-size: var(--fnt-sm); + opacity: 0.5; + margin-bottom: 0.4rem; +} +.setting-mallangs .mallang-select-container .mallang-type-selector { + display: flex; + gap: 0.4rem; +} +.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper { + display: flex; + align-items: center; + justify-content: center; + height: 1.6rem; + padding: 0 0.8rem; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: var(--rad-full); + background-color: rgb(var(--clr-white)); + cursor: pointer; + transition: all 0.3s ease; +} +.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper.active { + background-color: rgb(var(--clr-black)); +} +.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper.active > div { + color: rgb(var(--clr-white)); +} +.setting-mallangs .mallang-select-container .mallang-type-selector .filter-label-wrapper > div { + color: rgb(var(--clr-text)); + font-size: var(--fnt-sm); + font-weight: 400; +} +.setting-mallangs .block-label { + color: rgb(var(--clr-text)); + font-size: var(--fnt-sm); + font-weight: 200; + opacity: 0.5; + margin-bottom: 0.2rem; +} +.setting-mallangs .birthday-container { + display: flex; + align-items: center; + justify-content: space-between; + height: 1.6rem; + border: 1px solid rgba(47, 40, 36, 0.15); + border-radius: var(--rad-xs); + padding: 0 0.4rem; +} +.setting-mallangs .birthday-container .birthday-wrapper { + flex-grow: 1; + color: rgb(var(--clr-text)); + font-size: var(--fnt-md); + opacity: 0.5; +} +.setting-mallangs .birthday-container .birthday-selector { + display: flex; + align-items: center; +} +.setting-mallangs .killogram { + display: flex; + align-items: center; + height: 1.6rem; + border: 0.05rem solid rgba(47, 40, 36, 0.15); + border-radius: var(--rad-xs); + padding: 0 0.4rem; +} +.setting-mallangs .killogram input::-webkit-outer-spin-button, +.setting-mallangs .killogram input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.setting-mallangs .killogram .killogram-input { + flex-grow: 1; + color: rgb(var(--clr-text)); + font-size: var(--fnt-md); + opacity: 0.5; +} +.setting-mallangs .killogram input:focus { + outline: none; +} +.setting-mallangs .killogram .killogram-kg { + color: rgb(var(--clr-text)); + font-size: var(--fnt-md); + opacity: 0.5; + margin-left: 0.2rem; +} +.setting-mallangs .checkbox-wrapper { + display: flex; + align-items: center; + gap: 0.4rem; +} +.setting-mallangs .checkbox-wrapper .checkbox-group { + display: flex; + align-items: center; + cursor: pointer; +} +.setting-mallangs .checkbox-wrapper .checkbox-group .frame { + align-items: center; + background-color: rgb(var(--clr-white)); + border-radius: var(--rad-full); + display: flex; + flex-direction: column; + height: 1.6rem; + justify-content: center; + overflow: hidden; + position: relative; + width: 1.6rem; + border: 0.05rem solid rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} +.setting-mallangs .checkbox-wrapper .checkbox-group .frame svg { + height: 0.8rem; + width: 0.8rem; + opacity: 0.5; +} +.setting-mallangs .checkbox-wrapper .checkbox-group.active .frame { + background-color: rgb(var(--clr-if-0)); +} +.setting-mallangs .checkbox-wrapper .checkbox-group.active .frame svg { + opacity: 1; +} +.setting-mallangs .checkbox-wrapper .checkbox-group-label { + color: rgb(var(--clr-black)); + font-size: var(--fnt-sm); + font-weight: 700; + margin-left: 0.2rem; +} +.setting-mallangs .toggle-div { + display: flex; + align-items: center; + gap: 0.4rem; +} +.setting-mallangs .toggle-div .toggle-container { + width: 1.2rem; + height: 0.8rem; + border: 0.05rem solid rgba(47, 40, 36, 0.1490196078); + border-radius: var(--rad-full); + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + padding: 0.1rem; + position: relative; + transition: all 0.3s ease; + align-items: flex-start; + background-color: rgb(var(--clr-background)); +} +.setting-mallangs .toggle-div .toggle-container.on { + align-items: flex-end; + background-color: rgb(var(--clr-clear)); +} +.setting-mallangs .toggle-div .toggle-container .toggle-button { + width: 0.6rem; + height: 0.6rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-white)); + border: 0.05rem solid rgba(47, 40, 36, 0.15); + box-shadow: 0px 0.05rem 0px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} +.setting-mallangs .toggle-div .toggle-label { + color: rgb(var(--clr-text)); + font-size: var(--fnt-sm); + font-weight: 700; +} +.setting-mallangs .chip-number-div { + display: flex; + align-items: center; + height: 1.6rem; + border: 0.05rem solid rgba(47, 40, 36, 0.15); + border-radius: var(--rad-xs); + padding: 0 0.4rem; +} +.setting-mallangs .chip-number-div .chip-number { + color: rgb(var(--clr-text)); + font-size: var(--fnt-md); + opacity: 0.5; +} +.setting-mallangs .chip-number-div input::-webkit-outer-spin-button, +.setting-mallangs .chip-number-div input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.setting-mallangs .chip-number-div input:focus { + outline: none; +} +.setting-mallangs .info { + display: flex; + align-items: center; + gap: 0.2rem; + margin-top: 0.2rem; +} +.setting-mallangs .info .info-icon { + width: 0.8rem; + height: 0.8rem; +} +.setting-mallangs .info .help-text { + color: var(--clr-info); + font-size: var(--fnt-sm); + font-weight: 200; + white-space: nowrap; +} + +/* _totalSearch.scss */ +#total-search-backdrop { + position: fixed; + inset: 0; + background-color: rgb(var(--clr-background)/0.75); + z-index: 50001; +} +#total-search-backdrop > .inner-wrapper { + display: flex; + flex-flow: column nowrap; + position: absolute; + inset: 0; + margin-block: auto; + height: -moz-fit-content; + height: fit-content; +} + +.total-search-input-container { + display: flex; + align-items: center; + height: 3.2rem; + border-radius: var(--rad-full); + background-color: rgb(var(--clr-white)/0.75); + -webkit-backdrop-filter: blur(1.8rem); + backdrop-filter: blur(1.8rem); + box-shadow: inset 0 -0.2rem 0.2rem rgb(var(--clr-text)/0.1); + outline: 0.2rem solid rgb(var(--clr-if-0)/0.5); +} + +/* _totalSearch.scss */ \ No newline at end of file diff --git a/src/assets/stylesheets/style.scss b/src/assets/stylesheets/style.scss index 8e526aa..3d04e84 100644 --- a/src/assets/stylesheets/style.scss +++ b/src/assets/stylesheets/style.scss @@ -43,9 +43,10 @@ // 7. Components @import 'components/buttons', 'components/formElements', 'components/spinLoader', - 'components/customAlert', 'components/emptyList', - 'components/notificationCard', 'components/userProfileCard', - 'components/areaInfoPanel', 'components/mainModalCover', - 'components/mainModal', 'components/mallangsItem', 'components/dropdown', - 'components/receiveChat', 'components/sendChat', 'components/starRating', "components/nametag", - "components/settingMallangs"; \ No newline at end of file + 'components/customAlert', 'components/emptyList', 'components/dropdown', + 'components/starRating', 'components/nametag', 'components/notificationCard', + 'components/userProfileCard', 'components/areaInfoPanel', + 'components/mainModalCover', 'components/mainModal', + 'components/mallangsItem', 'components/reviewItem', 'components/articleItem', + 'components/modalFormInput', 'components/receiveChat', 'components/sendChat', + 'components/settingMallangs', 'components/totalSearch'; diff --git a/src/components/MainModal.jsx b/src/components/MainModal.jsx index c8a244c..d870d77 100644 --- a/src/components/MainModal.jsx +++ b/src/components/MainModal.jsx @@ -1,7 +1,16 @@ import { useRef, useState } from 'react'; import MainModalCover from './common/MainModalCover'; +import Remix from './common/Remix'; +import ReviewItem from './common/ReviewItem'; +import MallangItem from './common/MallangItem'; +import ArticleItem from './common/ArticleItem'; +import ModalInstruction from './common/ModalInstruction'; +import ReviewTotalScore from './common/ReviewTotalScore'; +import ModalSectionTitle from './common/ModalSectionTitle'; +import ModalDateSeparator from './common/ModalDateSeparator'; +import ModalFormInput from './common/ModalFormInput'; -const MainModal = () => { +const MainModal = ({ children }) => { const [modalStatus, setModalStatus] = useState({ isOpened: true }); const modalBackdrop = useRef(null); @@ -20,19 +29,71 @@ const MainModal = () => {
-
-
-
+
    +
  • + + + 오늘 아침 메뉴 +
    • + +
  • + + + 오늘 점심 메뉴 +
    • -
      -
    • 멘유
      • +
    • + + + 오늘 저녁 메뉴 +
- + -
+
+ {children} + + + + + + + + + +
+
+ + + + + + +
+
+
diff --git a/src/components/common/ArticleItem.jsx b/src/components/common/ArticleItem.jsx new file mode 100644 index 0000000..ac0c1b2 --- /dev/null +++ b/src/components/common/ArticleItem.jsx @@ -0,0 +1,51 @@ +import Remix from './Remix'; +import dateFormat from '../../utils/dateFormat'; +import hourFormat from '../../utils/hourFormat'; + +const ArticleItem = () => { + return ( +
+
+ + + +
+ +
+
+ 게시물 제목 + + + [{Number(412415).toLocaleString('ko-KR')}] + +
+ +
+ 게시판 + + · + + 카테고리 +
+ +
+ {dateFormat('2024-01-01 16:46:45')} + + · + + {hourFormat('2024-01-01 16:36:45')} +
+
+
+ ); +}; + +export default ArticleItem; diff --git a/src/components/common/EmptyList.jsx b/src/components/common/EmptyList.jsx index ad5a09b..5d47c53 100644 --- a/src/components/common/EmptyList.jsx +++ b/src/components/common/EmptyList.jsx @@ -11,7 +11,7 @@ const EmptyList = ({ placeHolderText = '아직은 표시할 내용이 없어요. { +
+
+
+
+
+
diff --git a/src/components/common/MallangItem.jsx b/src/components/common/MallangItem.jsx index bcbf202..8840f22 100644 --- a/src/components/common/MallangItem.jsx +++ b/src/components/common/MallangItem.jsx @@ -19,8 +19,8 @@ const MallangItem = ({ mallangObject, isEditMode = false }) => { )}
-
-
+
+
{mallangObject.isMain && (

{mallangObject.isMain && '대표'} @@ -29,7 +29,7 @@ const MallangItem = ({ mallangObject, isEditMode = false }) => {

- {mallangObject.petName} + {mallangObject.petName ?? '이름 없음'}
@@ -40,13 +40,13 @@ const MallangItem = ({ mallangObject, isEditMode = false }) => { )}
-
+
-

{mallangObject.petType}

+

{mallangObject.petType ?? '알 수 없음'}

· -

{mallangObject.petAge}세

+

{mallangObject.petAge ?? 0}세

· -

{mallangObject.petGender}

+

{mallangObject.petGender ?? '알 수 없음'}

diff --git a/src/components/common/ModalDateSeparator.jsx b/src/components/common/ModalDateSeparator.jsx new file mode 100644 index 0000000..834c099 --- /dev/null +++ b/src/components/common/ModalDateSeparator.jsx @@ -0,0 +1,13 @@ +import dateFormat from '../../utils/dateFormat'; + +const ModalDateSeparator = () => { + return ( +
+
+ {dateFormat('2024-01-01')} +
+
+ ); +}; + +export default ModalDateSeparator; diff --git a/src/components/common/ModalFormInput.jsx b/src/components/common/ModalFormInput.jsx new file mode 100644 index 0000000..ba638b4 --- /dev/null +++ b/src/components/common/ModalFormInput.jsx @@ -0,0 +1,73 @@ +import { useState } from 'react'; + +const ModalFormInput = ({ + isIncludeImage = true, + placeHolder = '내용을 입력하세요.', + maxLength = 200, +}) => { + const [formText, setText] = useState(''); + const [uploadImage, setImage] = useState(null); + + const handleInputText = (e) => { + setText(e.target.value); + }; + + const handleInputFile = (e) => { + setImage(e.target.value); + }; + + const handleFormData = (e) => { + e.preventDefault(); + + console.log({ formText, uploadImage }); + }; + + return ( + + ); +}; + +export default ModalFormInput; diff --git a/src/components/common/ModalInstruction.jsx b/src/components/common/ModalInstruction.jsx new file mode 100644 index 0000000..7dde6b3 --- /dev/null +++ b/src/components/common/ModalInstruction.jsx @@ -0,0 +1,19 @@ +const ModalInstruction = () => { + return ( +
+

+ {'🚨'} + + + {'인스트럭션 강조 대상'} + + + + {'인스트럭션 텍스트'} + +

+
+ ); +}; + +export default ModalInstruction; diff --git a/src/components/common/ModalSectionTitle.jsx b/src/components/common/ModalSectionTitle.jsx new file mode 100644 index 0000000..8c7f19f --- /dev/null +++ b/src/components/common/ModalSectionTitle.jsx @@ -0,0 +1,13 @@ +import Remix from './Remix'; + +const ModalSectionTitle = () => { + return ( +
+ + +

{'섹션 제목'}

+
+ ); +}; + +export default ModalSectionTitle; diff --git a/src/components/common/ReviewItem.jsx b/src/components/common/ReviewItem.jsx new file mode 100644 index 0000000..b7f223c --- /dev/null +++ b/src/components/common/ReviewItem.jsx @@ -0,0 +1,36 @@ +import Remix from './Remix'; + +const ReviewItem = ({ index }) => { + return ( +
+
+ + + +
+ +
+
+
+
사용자 네임태그
+
+ +
+
컨텐츠
+
+ +
+ +
+
별점, 작성일
+
+
+
+ ); +}; + +export default ReviewItem; diff --git a/src/components/common/ReviewTotalScore.jsx b/src/components/common/ReviewTotalScore.jsx new file mode 100644 index 0000000..314cb36 --- /dev/null +++ b/src/components/common/ReviewTotalScore.jsx @@ -0,0 +1,48 @@ +const ReviewTotalScore = () => { + return ( +
+
+

+ + {'리뷰 대상'} + + + 평점 +

+ +
+ + + + +
+ {'-'} + + 점 +
+
+ +

+ 총 + + {0} + + 개의 리뷰 +

+
+ +
+
+ ); +}; + +export default ReviewTotalScore; diff --git a/src/components/layout/BaseLayout.jsx b/src/components/layout/BaseLayout.jsx index f0a8ef5..dac60b9 100644 --- a/src/components/layout/BaseLayout.jsx +++ b/src/components/layout/BaseLayout.jsx @@ -5,6 +5,7 @@ import NotificationCard from './NotificationCard'; import UserProfileCard from './UserProfileCard'; import AreaInfoPanel from './AreaInfoPanel'; import Footer from './Footer'; +import TotalSearch from './TotalSearch'; const BaseLayout = () => { const [currentPanelID, setCurrentPanel] = useState(3); @@ -40,6 +41,8 @@ const BaseLayout = () => {
+ + {/* */} ); }; diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx index fe1221e..d0083a1 100644 --- a/src/components/layout/Header.jsx +++ b/src/components/layout/Header.jsx @@ -115,7 +115,7 @@ const Header = ({ notiCount, onShow }) => {
-
diff --git a/src/components/common/ModalDateSeparator.jsx b/src/components/common/ModalDateSeparator.jsx index 834c099..6efbd5d 100644 --- a/src/components/common/ModalDateSeparator.jsx +++ b/src/components/common/ModalDateSeparator.jsx @@ -1,10 +1,10 @@ import dateFormat from '../../utils/dateFormat'; -const ModalDateSeparator = () => { +const ModalDateSeparator = ({ dateString = '1970-01-01' }) => { return (
- {dateFormat('2024-01-01')} + {dateFormat(dateString)}
); diff --git a/src/components/common/ModalInstruction.jsx b/src/components/common/ModalInstruction.jsx index 7dde6b3..4249a25 100644 --- a/src/components/common/ModalInstruction.jsx +++ b/src/components/common/ModalInstruction.jsx @@ -1,16 +1,16 @@ -const ModalInstruction = () => { +const ModalInstruction = ({ + instEmoji = '🚨', + instHeadline = '인스트럭션 강조 대상', + instContent = '인스트럭션 텍스트', +}) => { return (

- {'🚨'} + {instEmoji} - - {'인스트럭션 강조 대상'} - + {instHeadline} - - {'인스트럭션 텍스트'} - + {instContent}

); diff --git a/src/components/common/ModalSectionTitle.jsx b/src/components/common/ModalSectionTitle.jsx index 8c7f19f..55df0d1 100644 --- a/src/components/common/ModalSectionTitle.jsx +++ b/src/components/common/ModalSectionTitle.jsx @@ -1,11 +1,11 @@ import Remix from './Remix'; -const ModalSectionTitle = () => { +const ModalSectionTitle = ({ sectionTitle = '섹션 제목' }) => { return (
-

{'섹션 제목'}

+

{sectionTitle}

); }; diff --git a/src/components/common/NameTag.jsx b/src/components/common/NameTag.jsx index 0f92a28..5f41020 100644 --- a/src/components/common/NameTag.jsx +++ b/src/components/common/NameTag.jsx @@ -1,12 +1,24 @@ -import UserNametagIcon from '../../assets/images/icon-user-nametag.svg?react'; +import Remix from './Remix'; -const NameTag = ({ name = '홍길동' }) => { +const NameTag = ({ + userObject = { userID: 0, userImage: null, userName: '홍길동' }, +}) => { return (
- + + + {userObject.userImage && ( + + )} +
+ +
+ {userObject.userName}
-
{name}
); }; diff --git a/src/components/common/ReviewItem.jsx b/src/components/common/ReviewItem.jsx index b7f223c..c382652 100644 --- a/src/components/common/ReviewItem.jsx +++ b/src/components/common/ReviewItem.jsx @@ -1,32 +1,43 @@ +import NameTag from './NameTag'; import Remix from './Remix'; -const ReviewItem = ({ index }) => { +const ReviewItem = ({ + index = 0, + userObject = { userID: 0, userImage: null, userName: '홍길동' }, + reviewContent = '내용 없음', + starPoint = 0, + writtenDate = '1970-01-01', + isEditMode = false, +}) => { return (
-
- + {isEditMode && ( +
+ - -
+ +
+ )}
-
-
사용자 네임태그
+
-
컨텐츠
+
{reviewContent}
-
별점, 작성일
+
+ {starPoint}, {writtenDate} +
diff --git a/src/components/common/ReviewTotalScore.jsx b/src/components/common/ReviewTotalScore.jsx index 314cb36..d0d61e8 100644 --- a/src/components/common/ReviewTotalScore.jsx +++ b/src/components/common/ReviewTotalScore.jsx @@ -1,10 +1,18 @@ -const ReviewTotalScore = () => { +import Remix from './Remix'; + +const ReviewTotalScore = ({ + reviewTarget = '리뷰 대상', + reviewScoreEverage = null, + reviewCount = 0, + reviewSummary = '아직 요약할 수 있는 리뷰가 작성되지 않았어요.', + areYouSure = false, +}) => { return (

- {'리뷰 대상'} + {reviewTarget} 평점 @@ -25,7 +33,9 @@ const ReviewTotalScore = () => {

- {'-'} + + {reviewScoreEverage ?? '-'} + 점
@@ -34,13 +44,23 @@ const ReviewTotalScore = () => {

총 - {0} + {reviewCount.toLocaleString('ko-KR')} 개의 리뷰

-
+ {areYouSure && ( +
+

+ + + A.I 리뷰 요약 +

+ +

{reviewSummary}

+
+ )}
); }; diff --git a/src/components/common/SendChatItem.jsx b/src/components/common/SendChatItem.jsx index 0db5a6c..c4161c8 100644 --- a/src/components/common/SendChatItem.jsx +++ b/src/components/common/SendChatItem.jsx @@ -1,5 +1,3 @@ -import ProfileImage from '../../assets/images/icon-user.svg?react'; - const SendChatItem = ({ message = '그렇구나 이것은 답변', time = '12:34:58', diff --git a/src/components/layout/BaseLayout.jsx b/src/components/layout/BaseLayout.jsx index dac60b9..ee2baf7 100644 --- a/src/components/layout/BaseLayout.jsx +++ b/src/components/layout/BaseLayout.jsx @@ -5,10 +5,11 @@ import NotificationCard from './NotificationCard'; import UserProfileCard from './UserProfileCard'; import AreaInfoPanel from './AreaInfoPanel'; import Footer from './Footer'; +import MainModal from '../MainModal'; import TotalSearch from './TotalSearch'; const BaseLayout = () => { - const [currentPanelID, setCurrentPanel] = useState(3); + const [currentPanelID, setCurrentPanel] = useState(0); const [notiStatus, setNotiStatus] = useState(0); const location = useLocation(); @@ -43,6 +44,15 @@ const BaseLayout = () => {