diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx index fe53d4ab029ec8f9b73dd8daf0e4445509460224..ecdc921444a78dfccec9f079e492b1d1bb07f869 100644 --- a/src/components/common/AutoComplete.tsx +++ b/src/components/common/AutoComplete.tsx @@ -353,13 +353,13 @@ const Base = styled.div<{ detached?: boolean }>` display: flex; font-size: 1em; cursor: pointer; - border-radius: 6px; align-items: center; flex-direction: row; + font-family: inherit; background: transparent; color: var(--foreground); width: calc(100% - 12px); - font-family: inherit; + border-radius: var(--border-radius); span { display: grid; @@ -377,7 +377,7 @@ const Base = styled.div<{ detached?: boolean }>` bottom: 8px; > div { - border-radius: 4px; + border-radius: var(--border-radius); } `} `; diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx index 8898186ce006691d9d8d9efe2b75305bc43144e2..4b58d38096ff531f861d248cceb3dc0ae322662d 100644 --- a/src/components/common/messaging/MessageBase.tsx +++ b/src/components/common/messaging/MessageBase.tsx @@ -37,8 +37,8 @@ export default styled.div<BaseMessageProps>` props.contrast && css` padding: 0.3rem; - border-radius: 4px; background: var(--hover); + border-radius: var(--border-radius); `} ${(props) => diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss index 00888785487ff8e84ee8a31e90479168b83faac7..1b0e862a63594d03d20af81d9616740122f0f45d 100644 --- a/src/components/common/messaging/attachments/Attachment.module.scss +++ b/src/components/common/messaging/attachments/Attachment.module.scss @@ -1,7 +1,7 @@ .attachment { display: grid; - grid-auto-columns: min(100%, 480px); grid-auto-flow: row dense; + grid-auto-columns: min(100%, var(--attachment-max-width)); margin: .125rem 0 .125rem; width: max-content; @@ -16,11 +16,10 @@ gap: 4px; padding: 6px; display: flex; - border-radius: 6px; + max-width: 100%; flex-direction: column; + width: var(--attachment-default-width); background: var(--secondary-background); - width: 400px; - max-width: 100%; > audio { width: 100%; @@ -29,22 +28,20 @@ &.file { > div { - width: 400px; - max-width: 100%; padding: 12px; + max-width: 100%; user-select: none; width: fit-content; - border-radius: 6px; + border-radius: var(--border-radius); + width: var(--attachment-default-width); } } &.text { width: 100%; - max-width: 800px; overflow: hidden; grid-auto-columns: unset; - - border-radius: 6px; + max-width: var(--attachment-max-text-width); .textContent { height: 140px; @@ -83,10 +80,10 @@ width: fit-content; > :first-child { - width: min(480px, 100%, var(--width)); + width: min(var(--attachment-max-width), 100%, var(--width)); } } .container, .attachment, .image { - border-radius: 6px; + border-radius: var(--border-radius); } diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx index abdfde361e23dcdc5634fdbc54914d1bf4d14d69..d391714a86a43084027827e1caec1770d2935d22 100644 --- a/src/components/common/messaging/attachments/Grid.tsx +++ b/src/components/common/messaging/attachments/Grid.tsx @@ -3,8 +3,8 @@ import { Children } from "../../../../types/Preact"; const Grid = styled.div` display: grid; - max-width: min(480px, 100%, var(--width)); - max-height: min(640px, var(--height)); + max-width: min(var(--attachment-max-width), 100%, var(--width)); + max-height: min(var(--attachment-max-height), var(--height)); aspect-ratio: var(--aspect-ratio); img, video { diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx index b33edcaaaee3b68aebc7e8ea25903fcf727a86db..eb5110a1ada7f081a9065d3906edf023bd7bd5d5 100644 --- a/src/components/common/messaging/bars/FilePreview.tsx +++ b/src/components/common/messaging/bars/FilePreview.tsx @@ -68,7 +68,7 @@ const Divider = styled.div` width: 4px; height: 130px; flex-shrink: 0; - border-radius: 4px; + border-radius: var(--border-radius); background: var(--tertiary-background); `; @@ -78,8 +78,8 @@ const EmptyEntry = styled.div` display: grid; flex-shrink: 0; cursor: pointer; - border-radius: 4px; place-items: center; + border-radius: var(--border-radius); background: var(--primary-background); transition: 0.1s ease background-color; @@ -93,12 +93,10 @@ const PreviewBox = styled.div` grid-template: "main" 100px / minmax(100px, 1fr); justify-items: center; - background: var(--primary-background); - - overflow: hidden; - cursor: pointer; - border-radius: 4px; + overflow: hidden; + border-radius: var(--border-radius); + background: var(--primary-background); .icon, .overlay { diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index 1fdea46d07d8f432c8215caf751daf67a4b0cf85..b5248cd3b0324184acc1706f89b4e9eb1b370f41 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -17,18 +17,18 @@ const Bar = styled.div` height: 28px; width: 100%; position: absolute; - border-radius: 4px 4px 0 0; display: flex; align-items: center; cursor: pointer; font-size: 13px; padding: 0 8px; user-select: none; - color: var(--secondary-foreground); - background: var(--secondary-background); justify-content: space-between; + color: var(--secondary-foreground); transition: color ease-in-out 0.08s; - + background: var(--secondary-background); + border-radius: var(--border-radius) var(--border-radius) 0 0; + > div { display: flex; align-items: center; diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss index 5493b96b951074b0a3f6e3f4709c72acdd306a7e..0ab26edd1727e4a9bc09edd239a6e9e80a8ae5a1 100644 --- a/src/components/common/messaging/embed/Embed.module.scss +++ b/src/components/common/messaging/embed/Embed.module.scss @@ -3,7 +3,7 @@ iframe { border: none; - border-radius: 4px; + border-radius: var(--border-radius); } &.image { @@ -27,8 +27,8 @@ padding: 12px; width: fit-content; - border-radius: 4px; background: var(--primary-header); + border-radius: var(--border-radius); .siteinfo { display: flex; @@ -91,7 +91,7 @@ img.image { cursor: pointer; object-fit: contain; - border-radius: 3px; + border-radius: var(--border-radius); } } } diff --git a/src/components/markdown/Markdown.module.scss b/src/components/markdown/Markdown.module.scss index 202ce12edde7c4561ce07162fa31584fb698e235..60056cf524bcbda9a57fadcf124e6f34dcd0bd02 100644 --- a/src/components/markdown/Markdown.module.scss +++ b/src/components/markdown/Markdown.module.scss @@ -26,9 +26,9 @@ &[data-type="mention"] { padding: 0 6px; font-weight: 600; - border-radius: 12px; display: inline-block; background: var(--secondary-background); + border-radius: calc(var(--border-radius) * 2); &:hover { text-decoration: none; @@ -61,8 +61,8 @@ blockquote { margin: 2px 0; padding: 2px 0; - border-radius: 4px; background: var(--hover); + border-radius: var(--border-radius); border-inline-start: 4px solid var(--tertiary-background); > * { @@ -72,9 +72,8 @@ pre { padding: 1em; - border-radius: 4px; overflow-x: scroll; - border-radius: 3px; + border-radius: var(--border-radius); background: var(--block) !important; } @@ -85,8 +84,8 @@ code { color: white; font-size: 90%; - border-radius: 4px; background: var(--block); + border-radius: var(--border-radius); font-family: var(--monoscape-font), monospace; } @@ -113,9 +112,9 @@ padding: 0 2px; cursor: pointer; user-select: none; - border-radius: 4px; color: transparent; background: #151515; + border-radius: var(--border-radius); > * { opacity: 0; @@ -137,14 +136,10 @@ font-family: var(--monoscape-font), monospace; :global(.lang) { - // height: 8px; - // position: relative; - + width: fit-content; + padding-bottom: 8px; + div { - // margin-left: -5px; - // margin-top: -16px; - // position: absolute; - color: #111; cursor: pointer; padding: 2px 6px; @@ -163,10 +158,6 @@ box-shadow: 0 1px #787676; } } - - // ! FIXME: had to change this temporarily due to overflow - width: fit-content; - padding-bottom: 8px; } } @@ -187,10 +178,10 @@ font-size: 10px; margin-right: 6px; line-height: 12px; - position: relative; - border-radius: 4px; background: white; + position: relative; display: inline-block; + border-radius: var(--border-radius); } input[type="checkbox"][checked="true"] + label:before { diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss index 04e705b7432f8cb005fcd5c660120a6bd12c557d..123aa74321b2171ff5806c9192c80cdfe8ffc518 100644 --- a/src/components/navigation/items/Item.module.scss +++ b/src/components/navigation/items/Item.module.scss @@ -3,8 +3,8 @@ display: flex; padding: 0 8px; user-select: none; - border-radius: 6px; margin-bottom: 2px; + border-radius: var(--border-radius); gap: 8px; align-items: center; diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 6fd41b2eeddb6e0caa39d697ef5de016e4a71c05..0fefdab314b6f45236519e3a4d4762b7d71baf40 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -30,7 +30,7 @@ export default styled.button<Props>` background: var(--primary-background); color: var(--foreground); - border-radius: 4px; + border-radius: var(--border-radius); cursor: pointer; border: none; diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx index 26e531d573536adebcba56bfd92a94f5080ad425..8f52ac1b96bb2ef04c99da6a8fe485b070a70f0f 100644 --- a/src/components/ui/Checkbox.tsx +++ b/src/components/ui/Checkbox.tsx @@ -4,12 +4,12 @@ import styled, { css } from "styled-components"; import { Children } from "../../types/Preact"; const CheckboxBase = styled.label` - margin-top: 20px; gap: 4px; z-index: 1; display: flex; - border-radius: 4px; + margin-top: 20px; align-items: center; + border-radius: var(--border-radius); cursor: pointer; font-size: 18px; @@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>` height: 24px; display: grid; flex-shrink: 0; - border-radius: 4px; place-items: center; transition: 0.2s ease all; + border-radius: var(--border-radius); background: var(--secondary-background); svg { diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx index b34c914e3b436df36d298f84d6bc198b60f764df..49951a2e11ba30803068b5511b194ef418171872 100644 --- a/src/components/ui/ColourSwatches.tsx +++ b/src/components/ui/ColourSwatches.tsx @@ -63,7 +63,7 @@ const SwatchesBase = styled.div` const Swatch = styled.div<{ type: "small" | "large"; colour: string }>` flex-shrink: 0; cursor: pointer; - border-radius: 4px; + border-radius: var(--border-radius); background-color: ${(props) => props.colour}; display: grid; diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index 44d100c21d880fed79f4cd066a809548eeb22c9d..b0b36087990537bbfb9245557ae71b7431dce245 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -1,18 +1,20 @@ import styled from "styled-components"; export default styled.select` + width: 100%; padding: 10px; - border-radius: 6px; + cursor: pointer; + border-radius: var(--border-radius); + font-family: inherit; + font-size: var(--text-size); color: var(--secondary-foreground); background: var(--secondary-background); - font-size: var(--text-size); + border: none; outline: 2px solid transparent; - transition: outline-color 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out; - cursor: pointer; - width: 100%; + transition: outline-color 0.2s ease-in-out; &:focus { box-shadow: 0 0 0 1.5pt var(--accent); diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx index 56aef02578cb7b7739ae8689da3fb767ef4b891e..e8ccdb6c437f5a7bd79ab334c000572217a09779 100644 --- a/src/components/ui/InputBox.tsx +++ b/src/components/ui/InputBox.tsx @@ -6,9 +6,9 @@ interface Props { export default styled.input<Props>` z-index: 1; - padding: 8px 16px; - border-radius: 6px; font-size: 1rem; + padding: 8px 16px; + border-radius: var(--border-radius); font-family: inherit; color: var(--foreground); diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index d9c9a1004b184479de26c66a68569f79bd19cc82..28c6dfa7d1a4acf70e9ca3a7caf753af2d3ca2a0 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -60,8 +60,8 @@ const ModalBase = styled.div` const ModalContainer = styled.div` overflow: hidden; - border-radius: 8px; max-width: calc(100vw - 20px); + border-radius: var(--border-radius); animation-name: ${zoomIn}; animation-duration: 0.25s; @@ -71,8 +71,8 @@ const ModalContainer = styled.div` const ModalContent = styled.div< { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean } >` - border-radius: 8px; text-overflow: ellipsis; + border-radius: var(--border-radius); h3 { margin-top: 0; @@ -98,13 +98,13 @@ const ModalContent = styled.div< ${(props) => props.attachment && css` - border-radius: 8px 8px 0 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; `} ${(props) => props.border && css` - border-radius: 10px; + border-radius: var(--border-radius); border: 2px solid var(--secondary-background); `} `; diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx index bf194cc096c8ce1a2e5113b7c773baa7b3b425b2..9912fd5deae52387d17cebbe19d7edf8d01a4625 100644 --- a/src/components/ui/Radio.tsx +++ b/src/components/ui/Radio.tsx @@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>` font-size: 1rem; font-weight: 600; user-select: none; - border-radius: 4px; transition: 0.2s ease all; + border-radius: var(--border-radius); &:hover { background: var(--hover); diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx index 31a01fc5b4800dee5699cd8a026371e3986658eb..2469415f5de255df269911a966ec10e1c2e2566d 100644 --- a/src/components/ui/TextArea.tsx +++ b/src/components/ui/TextArea.tsx @@ -30,7 +30,7 @@ export default styled.textarea<TextAreaProps>` ${(props) => !props.hideBorder && css` - border-radius: 4px; + border-radius: var(--border-radius); transition: border-color 0.2s ease-in-out; border: var(--input-border-width) solid transparent; `} diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx index 053af1c59286215f7d7f69a53ddb5e44cd1f131f..23621168c77249a94db191e48ac7b84b2d3f97d2 100644 --- a/src/components/ui/Tip.tsx +++ b/src/components/ui/Tip.tsx @@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>` align-items: center; font-size: 14px; - border-radius: 7px; background: var(--primary-header); + border-radius: var(--border-radius); border: 2px solid var(--secondary-header); a { diff --git a/src/context/intermediate/modals/Onboarding.module.scss b/src/context/intermediate/modals/Onboarding.module.scss index 93f5e4b99aba6d183f95753181b9e797b0ff549b..ea1a13ce00230b5834e17375358474945a3fe230 100644 --- a/src/context/intermediate/modals/Onboarding.module.scss +++ b/src/context/intermediate/modals/Onboarding.module.scss @@ -26,7 +26,7 @@ margin: auto; display: block; max-height: 420px; - border-radius: 8px; + border-radius: var(--border-radius); } input { diff --git a/src/context/intermediate/popovers/UserProfile.module.scss b/src/context/intermediate/popovers/UserProfile.module.scss index 06b8ebe1fd77c88be11166fe9208dcff2c64a5bc..e1819b5c17831152f650d1d925582727d6479ba3 100644 --- a/src/context/intermediate/popovers/UserProfile.module.scss +++ b/src/context/intermediate/popovers/UserProfile.module.scss @@ -7,7 +7,7 @@ .header { background-size: cover; - border-radius: 8px 8px 0 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; background-position: center; background-color: var(--secondary-background); @@ -140,11 +140,11 @@ padding: 12px; display: flex; cursor: pointer; - border-radius: 4px; align-items: center; + transition: background-color .1s; color: var(--secondary-foreground); + border-radius: var(--border-radius); background-color: var(--secondary-background); - transition: background-color .1s; &:hover { background-color: var(--primary-background); diff --git a/src/context/revoltjs/FileUploads.module.scss b/src/context/revoltjs/FileUploads.module.scss index 2d5a3b394bb02fd38c1fcee661d9b98f4bf285cc..929c45aea817342e39b1cd2ba1504dfae7221be6 100644 --- a/src/context/revoltjs/FileUploads.module.scss +++ b/src/context/revoltjs/FileUploads.module.scss @@ -10,7 +10,7 @@ &.banner { .image { - border-radius: 4px; + border-radius: var(--border-radius); } .modify { diff --git a/src/pages/channels/messaging/MessageEditor.tsx b/src/pages/channels/messaging/MessageEditor.tsx index ba93b91b10ba5f3955985a7ca21b9832c157623a..305ca42dc0d1b23b4ef075051fde1e0b6aad0b02 100644 --- a/src/pages/channels/messaging/MessageEditor.tsx +++ b/src/pages/channels/messaging/MessageEditor.tsx @@ -23,9 +23,9 @@ const EditorBase = styled.div` textarea { resize: none; padding: 12px; - border-radius: 3px; white-space: pre-wrap; font-size: var(--text-size); + border-radius: var(--border-radius); background: var(--secondary-header); } diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index 016391ed641fb778198c9d5d67bf8b39e693f801..deed4fa7c56bc0f68e43221555e41835fb903f77 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/src/pages/channels/voice/VoiceHeader.tsx @@ -27,18 +27,20 @@ const VoiceBase = styled.div` background: var(--secondary-background); .status { - position: absolute; - color: var(--success); - background: var(--primary-background); + flex: 1 0; display: flex; + position: absolute; align-items: center; + padding: 10px; font-size: 14px; font-weight: 600; - border-radius: 7px; - flex: 1 0; user-select: none; + color: var(--success); + border-radius: var(--border-radius); + background: var(--primary-background); + svg { margin-inline-end: 4px; cursor: help; diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 1144a14fb635ce74e4f59773f93d6e5eb0dd31b7..81e3ff0911136236877287e2d7a184bb9256c542 100644 --- a/src/pages/friends/Friend.module.scss +++ b/src/pages/friends/Friend.module.scss @@ -18,7 +18,7 @@ &[data-empty="true"] { img { height: 120px; - border-radius: 8px; + border-radius: var(--border-radius); } gap: 16px; @@ -35,12 +35,12 @@ } .friend { - padding: 0 10px; height: 60px; display: flex; - border-radius: 5px; - align-items: center; + padding: 0 10px; cursor: pointer; + align-items: center; + border-radius: var(--border-radius); &:hover { background: var(--secondary-background); @@ -110,9 +110,9 @@ display: flex; cursor: pointer; margin-top: 1em; - border-radius: 7px; align-items: center; flex-direction: row; + border-radius: var(--border-radius); background: var(--secondary-background); svg { diff --git a/src/pages/invite/Invite.module.scss b/src/pages/invite/Invite.module.scss index 58814516539e8c91e091675a8f89885d2f3c4b8b..36b50dddb9d9079b19ed86ccd2bcaf6f015adca4 100644 --- a/src/pages/invite/Invite.module.scss +++ b/src/pages/invite/Invite.module.scss @@ -34,10 +34,10 @@ .details { text-align: center; - border-radius: 3px; align-self: center; padding: 32px 16px 16px 16px; background: rgba(0, 0, 0, 0.6); + border-radius: var(--border-radius); h1 { margin: 0; diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 6f058da1f0a732223a32f054f56f1e5ca664b79d..f90ba442c039d0f98b87ed3481a9f706e2d219bc 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -4,10 +4,10 @@ width: 100%; padding: 1em; display: flex; - border-radius: 6px; + overflow: hidden; align-items: center; background: var(--secondary-header); - overflow: hidden; + border-radius: var(--border-radius); .avatar { cursor: pointer; @@ -144,7 +144,7 @@ img { cursor: pointer; - border-radius: 8px; + border-radius: var(--border-radius); transition: border 0.3s; border: 3px solid transparent; @@ -195,10 +195,10 @@ place-items: center; cursor: pointer; - border-radius: 8px; transition: border 0.3s; background: var(--hover); border: 3px solid transparent; + border-radius: var(--border-radius); img { max-width: 100%; @@ -262,8 +262,8 @@ min-width: 0; flex-grow: 1; padding: 8px; - border-radius: 4px; font-family: var(--codeblock-font); + border-radius: var(--border-radius); background: var(--secondary-background); > div { @@ -285,8 +285,8 @@ .entry { padding: 12px; margin-top: 8px; - border-radius: 6px; border: 1px solid black; + border-radius: var(--border-radius); span { flex: 1; @@ -312,8 +312,8 @@ height: 38px; display: grid; cursor: pointer; - border-radius: 6px; place-items: center; + border-radius: var(--border-radius); background: var(--primary-background); } @@ -339,29 +339,6 @@ top: 48px; } } - - /*.override { - display: flex; - } - - - .picker { - width: 30px; - height: 30px; - flex-shrink: 0; - border-radius: 4px; - overflow: hidden; - margin-inline-end: 4px; - - //TOFIX - Looks wonky on Chromium - border: 1px solid black; - - } - - .text { - border-radius: 4px; - padding: 0 4px 0; - }*/ } } } @@ -383,11 +360,11 @@ } .entry { - margin: 10px 0; padding: 16px; display: flex; - border-radius: 6px; + margin: 10px 0; flex-direction: column; + border-radius: var(--border-radius); background: var(--secondary-header); &[data-active="true"] { diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index 55f82c174cdc331b90ca88ec171eb90bdbaff6b8..31d4b23f924e22fe7fd10ec5ca1069664eb461af 100644 --- a/src/styles/_context-menu.scss +++ b/src/styles/_context-menu.scss @@ -3,9 +3,9 @@ min-width: 190px; padding: 6px 8px; user-select: none; - border-radius: 4px; font-size: .875rem; color: var(--secondary-foreground); + border-radius: var(--border-radius); background: var(--primary-background) !important; box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 83daa2bac9582d887054cc0c562202fbb731cfe4..4966a4900674055f2456c61af0632422ccab4319 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,19 +1,34 @@ :root { + /** + * Appearance + */ --ligatures: none; --text-size: 14px; --font: "Open Sans"; - --app-height: 100vh; --codeblock-font: "Fira Code"; --sidebar-active: var(--secondary-background); - - --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), .8); //make the opacity also customizable + + /** + * Layout + */ + --app-height: 100vh; + --border-radius: 6px; --input-border-width: 2px; - --textarea-padding: 16px; --textarea-line-height: 20px; --message-box-padding: 14px 14px 14px 0; + --attachment-max-width: 480px; + --attachment-max-height: 640px; + --attachment-default-width: 400px; + --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), .8); //make the opacity also customizable }