diff --git a/external/lang b/external/lang index eb371618..3ff3cb0b 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit eb3716182702af2747025e0ee171d6a1a4415fc7 +Subproject commit 3ff3cb0b3c0aa0060e3dd8e5efaca71fd828e530 diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx index 5020e35c..31e9a10c 100644 --- a/src/components/common/messaging/bars/TypingIndicator.tsx +++ b/src/components/common/messaging/bars/TypingIndicator.tsx @@ -23,7 +23,7 @@ const Base = styled.div` user-select: none; align-items: center; flex-direction: row; - width: calc(100% - 3px); + width: calc(100% - var(--scrollbar-thickness)); color: var(--secondary-foreground); background: var(--secondary-background); } diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss index d0f8e44a..3a18014c 100644 --- a/src/styles/_elements.scss +++ b/src/styles/_elements.scss @@ -4,8 +4,8 @@ } ::-webkit-scrollbar { - width: 3px; - height: 3px; + width: var(--scrollbar-thickness); + height: var(--scrollbar-thickness); } ::-webkit-scrollbar-track { diff --git a/src/styles/_page.scss b/src/styles/_page.scss index 26b8f349..268e9479 100644 --- a/src/styles/_page.scss +++ b/src/styles/_page.scss @@ -1,10 +1,10 @@ * { - text-rendering: optimizeLegibility !important; + text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -moz-osx-font-smoothing: grayscale; - scrollbar-width: thin; box-sizing: border-box; + scrollbar-width: var(--scrollbar-thickness-ff); } html { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index f1e9556d..f5ee7d64 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -21,6 +21,8 @@ --app-height: 100vh; --border-radius: 6px; --border-radius-half: 50%; + --scrollbar-thickness: 3px; + --scrollbar-thickness-ff: thin; --input-border-width: 2px; --textarea-padding: 16px; @@ -33,17 +35,4 @@ --attachment-max-text-width: 800px; --bottom-navigation-height: 50px; - - /** - * Experimental - */ - --background-rgb: ( - 25, - 25, - 25 - ); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background - --background-rgba: rgba( - var(--background-rgb), - 0.8 - ); //make the opacity also customizable }