diff --git a/dist/index.css b/dist/index.css index ecc2867e..105a429e 100644 --- a/dist/index.css +++ b/dist/index.css @@ -589,12 +589,15 @@ body[showing-chat] #chat-page-wrapper { #chat-page #main #message-page .content { padding: 0px; overflow: hidden; - display: grid; - --composer-height: var(--control-height); - grid-template-rows: 1fr calc(var(--composer-height) + var(--gap-between-tiles)) var(--safe-area-bottom); + display: flex; + position: relative; } -#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) { - --composer-height: calc( 2 * var(--control-height) + var(--gap-between-tiles) ); +#chat-page #main #message-page .content #message-container { + --message-container-padding: var(--control-height); + padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important; +} +#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container { + --message-container-padding: calc(2 * var(--control-height) + var(--gap-between-tiles)); } #message-page #message-container { overflow: auto; @@ -602,6 +605,10 @@ body[showing-chat] #chat-page-wrapper { #message-page #composer { display: flex; justify-content: center; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; } #message-page #composer input { margin: 0px; @@ -630,7 +637,6 @@ body[showing-chat] #chat-page-wrapper { gap: var(--gap-between-tiles); } #message-page #composer .reply-preview-wrapper .reply-preview > div { - background: var(--surface); display: flex; align-items: center; gap: var(--text-gap); @@ -639,7 +645,7 @@ body[showing-chat] #chat-page-wrapper { } @media (max-width: 700px) { #message-page #composer div { - width: 100%; + width: calc(100vw - var(--control-height)); max-width: unset; display: flex; } diff --git a/dist/index.js b/dist/index.js index e82a5517..e7006b6a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4702,7 +4702,7 @@ // src/View/Components/replyPreview.tsx function ReplyPreview(coreViewModel2, chatMessageViewModel) { - return /* @__PURE__ */ createElement("div", { class: "reply-preview slide-up" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chatMessageViewModel.body })), /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { class: "reply-preview" }, /* @__PURE__ */ createElement("div", { class: "surface" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chatMessageViewModel.body })), /* @__PURE__ */ createElement( "button", { class: "standard square", diff --git a/dist/styles.css b/dist/styles.css index 1b021830..daa5f2ba 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -51,6 +51,8 @@ body { --surface-active: hsla(0, 0%, 5%, 15%); --surface-alt: hsla(0, 0%, 0%, 2%); + --blur: 70px; + --border: hsla(0, 0%, 0%, 10%); --surface-border: #8d8d8d; @@ -63,7 +65,7 @@ body { --text-error: #da1e28; --text-info: #0043ce; - --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%)); + --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%)); --highlight-color: black; --link: #0f62fe; @@ -346,9 +348,15 @@ select { /* backdrop-filter */ header, menu, -.modal>div { - backdrop-filter: blur(70px); - -webkit-backdrop-filter: blur(70px); +.modal>div, +button, +input, +textarea, +select, +.surface, +.surface-alt { + backdrop-filter: blur(var(--blur)); + -webkit-backdrop-filter: blur(var(--blur)); } /* border, outline, etc */ diff --git a/src/View/ChatPages/messagePage.css b/src/View/ChatPages/messagePage.css index 9a6dc0bb..2057ab34 100644 --- a/src/View/ChatPages/messagePage.css +++ b/src/View/ChatPages/messagePage.css @@ -2,20 +2,18 @@ #chat-page #main #message-page .content { padding: 0px; overflow: hidden; - display: grid; - --composer-height: var(--control-height); - grid-template-rows: - 1fr calc(var(--composer-height) + var(--gap-between-tiles)) - var(--safe-area-bottom); + display: flex; + + position: relative; } -#chat-page - #main - #message-page - .content:has(.reply-preview-wrapper .reply-preview) { - --composer-height: calc( - 2 * var(--control-height) + var(--gap-between-tiles) - ); +#chat-page #main #message-page .content #message-container { + --message-container-padding: var(--control-height); + padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important; +} + +#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container { + --message-container-padding: calc(2 * var(--control-height) + var(--gap-between-tiles)); } #message-page #message-container { @@ -26,6 +24,11 @@ #message-page #composer { display: flex; justify-content: center; + + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; } #message-page #composer input { @@ -59,9 +62,7 @@ gap: var(--gap-between-tiles); } -#message-page #composer .reply-preview-wrapper .reply-preview > div { - background: var(--surface); - +#message-page #composer .reply-preview-wrapper .reply-preview>div { display: flex; align-items: center; gap: var(--text-gap); @@ -73,13 +74,14 @@ @media (max-width: 700px) { #message-page #composer div { - width: 100%; + width: calc(100vw - var(--control-height)); max-width: unset; display: flex; } } @media (min-width: 700px) { + #message-page #composer .content-width-constraint, #message-page #composer .input-width-constraint { display: flex; @@ -225,7 +227,7 @@ text-align: right; } -.message-bubble > .inline-reply { +.message-bubble>.inline-reply { cursor: pointer; display: flex; @@ -244,7 +246,7 @@ border-left: var(--outline-width) solid var(--primary); } -.message-bubble > .message-reaction-row { +.message-bubble>.message-reaction-row { max-width: var(--max-input-width); width: 100%; @@ -255,11 +257,11 @@ overflow: hidden; } -.message-bubble > .message-reaction-row:has(button:not([count="0"])) { +.message-bubble>.message-reaction-row:has(button:not([count="0"])) { display: grid !important; } -.message-bubble > .message-reaction-row button { +.message-bubble>.message-reaction-row button { min-height: unset; height: 100%; width: 100%; @@ -269,7 +271,7 @@ animation: slide-up var(--animation-duration); } -.message-bubble > .message-reaction-row button[count="0"] { +.message-bubble>.message-reaction-row button[count="0"] { display: none; } @@ -283,6 +285,7 @@ } } + .grid.message-reaction-filter { grid-template-columns: repeat(3, 1fr); -} +} \ No newline at end of file diff --git a/src/View/Components/replyPreview.tsx b/src/View/Components/replyPreview.tsx index 55353344..3c40b3b7 100644 --- a/src/View/Components/replyPreview.tsx +++ b/src/View/Components/replyPreview.tsx @@ -8,8 +8,8 @@ export function ReplyPreview( chatMessageViewModel: ChatMessageViewModel, ) { return ( -