diff --git a/static/v2/css/blocks/b_chat_modal.css b/static/v2/css/blocks/b_chat_modal.css new file mode 100644 index 0000000..6eaa43f --- /dev/null +++ b/static/v2/css/blocks/b_chat_modal.css @@ -0,0 +1,28 @@ +.b_chat_modal { + --modal-width: 35%; + --modal-height: calc(100dvh - 100px); + --modal-padding: 0; + .chat_header{ + height: 104px; + padding: 10px 20px 26px 20px; + } + .close_chat_container{ + display: flex; + justify-content: right; + .close_btn{ + --filter: brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(182%) hue-rotate(183deg) brightness(115%) contrast(100%);; + padding: 8.94px; + width: 28px; + height: 28px; + background: #FF613A; + border-radius: 100%; + box-sizing: border-box; + img{ + width: 10.12px; + height: 10.12px; + display: block; + filter: var(--filter); + } + } + } +} \ No newline at end of file diff --git a/static/v2/css/service/modal.css b/static/v2/css/service/modal.css index 630b3d5..71bd4db 100644 --- a/static/v2/css/service/modal.css +++ b/static/v2/css/service/modal.css @@ -1,5 +1,8 @@ .modal { display: none; + + --modal-bg: #fff; + --modal-ba: 30px; &.open{ display: block; } @@ -16,4 +19,20 @@ backdrop-filter: var(--backdrop-filter); z-index: 10000000; } + .modal_body{ + position: fixed; + background: var(--modal-bg); + box-shadow: 0 3px 14px rgba(74, 58, 255, 0.03), 0 -2px 4px rgba(20, 20, 43, 0.12), 0 12px 44px rgba(20, 20, 43, 0.34); + border-radius: var(--modal-ba); + + width: var(--modal-width); + height: var(--modal-height); + padding: var(--modal-padding); + + left: calc(50% - (var(--modal-width) / 2)); + top: calc(50% - (var(--modal-height) / 2)); + z-index: 1000000000; + + box-sizing: border-box; + } } \ No newline at end of file diff --git a/templates/v2/blocks/b_chat_modal.html b/templates/v2/blocks/b_chat_modal.html new file mode 100644 index 0000000..902f1f5 --- /dev/null +++ b/templates/v2/blocks/b_chat_modal.html @@ -0,0 +1,22 @@ +{% load static %} +{% load i18n %} + + +