cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 22:52:09 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add more internal CSS variables.

Browse source
This commit is contained in:
Paul 2021-07-10 15:42:13 +01:00
parent 9846262e8b
commit ef5944b065
28 changed files with 110 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/common/AutoComplete.tsx
View file

@ -353,13 +353,13 @@ const Base = styled.div<{ detached?: boolean }>`
display: flex; display: flex;
font-size: 1em; font-size: 1em;
cursor: pointer; cursor: pointer;
border-radius: 6px;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
font-family: inherit;
background: transparent; background: transparent;
color: var(--foreground); color: var(--foreground);
width: calc(100% - 12px); width: calc(100% - 12px);
font-family: inherit; border-radius: var(--border-radius);
span { span {
display: grid; display: grid;
@ -377,7 +377,7 @@ const Base = styled.div<{ detached?: boolean }>`
bottom: 8px; bottom: 8px;
> div { > div {
border-radius: 4px; border-radius: var(--border-radius);
} }
`} `}
`; `;

2
src/components/common/messaging/MessageBase.tsx
View file

@ -37,8 +37,8 @@ export default styled.div<BaseMessageProps>`
props.contrast && props.contrast &&
css` css`
padding: 0.3rem; padding: 0.3rem;
border-radius: 4px;
background: var(--hover); background: var(--hover);
border-radius: var(--border-radius);
`} `}
${(props) => ${(props) =>

23
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -1,7 +1,7 @@
.attachment { .attachment {
display: grid; display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense; grid-auto-flow: row dense;
grid-auto-columns: min(100%, var(--attachment-max-width));
margin: .125rem 0 .125rem; margin: .125rem 0 .125rem;
width: max-content; width: max-content;
@ -16,11 +16,10 @@
gap: 4px; gap: 4px;
padding: 6px; padding: 6px;
display: flex; display: flex;
border-radius: 6px;
flex-direction: column;
background: var(--secondary-background);
width: 400px;
max-width: 100%; max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
> audio { > audio {
width: 100%; width: 100%;
@ -29,22 +28,20 @@
&.file { &.file {
> div { > div {
width: 400px;
max-width: 100%;
padding: 12px; padding: 12px;
max-width: 100%;
user-select: none; user-select: none;
width: fit-content; width: fit-content;
border-radius: 6px; border-radius: var(--border-radius);
width: var(--attachment-default-width);
} }
} }
&.text { &.text {
width: 100%; width: 100%;
max-width: 800px;
overflow: hidden; overflow: hidden;
grid-auto-columns: unset; grid-auto-columns: unset;
max-width: var(--attachment-max-text-width);
border-radius: 6px;
.textContent { .textContent {
height: 140px; height: 140px;
@ -83,10 +80,10 @@
width: fit-content; width: fit-content;
> :first-child { > :first-child {
width: min(480px, 100%, var(--width)); width: min(var(--attachment-max-width), 100%, var(--width));
} }
} }
.container, .attachment, .image { .container, .attachment, .image {
border-radius: 6px; border-radius: var(--border-radius);
} }

4
src/components/common/messaging/attachments/Grid.tsx
View file

@ -3,8 +3,8 @@ import { Children } from "../../../../types/Preact";
const Grid = styled.div` const Grid = styled.div`
display: grid; display: grid;
max-width: min(480px, 100%, var(--width)); max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(640px, var(--height)); max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
img, video { img, video {

12
src/components/common/messaging/bars/FilePreview.tsx
View file

@ -68,7 +68,7 @@ const Divider = styled.div`
width: 4px; width: 4px;
height: 130px; height: 130px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: var(--border-radius);
background: var(--tertiary-background); background: var(--tertiary-background);
`; `;
@ -78,8 +78,8 @@ const EmptyEntry = styled.div`
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px;
place-items: center; place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background); background: var(--primary-background);
transition: 0.1s ease background-color; transition: 0.1s ease background-color;
@ -93,12 +93,10 @@ const PreviewBox = styled.div`
grid-template: "main" 100px / minmax(100px, 1fr); grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center; justify-items: center;
background: var(--primary-background);
overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 4px; overflow: hidden;
border-radius: var(--border-radius);
background: var(--primary-background);
.icon, .icon,
.overlay { .overlay {

6
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -17,17 +17,17 @@ const Bar = styled.div`
height: 28px; height: 28px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border-radius: 4px 4px 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 0 8px; padding: 0 8px;
user-select: none; user-select: none;
color: var(--secondary-foreground);
background: var(--secondary-background);
justify-content: space-between; justify-content: space-between;
color: var(--secondary-foreground);
transition: color ease-in-out 0.08s; transition: color ease-in-out 0.08s;
background: var(--secondary-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div { > div {
display: flex; display: flex;

6
src/components/common/messaging/embed/Embed.module.scss
View file

@ -3,7 +3,7 @@
iframe { iframe {
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
} }
&.image { &.image {
@ -27,8 +27,8 @@
padding: 12px; padding: 12px;
width: fit-content; width: fit-content;
border-radius: 4px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo { .siteinfo {
display: flex; display: flex;
@ -91,7 +91,7 @@
img.image { img.image {
cursor: pointer; cursor: pointer;
object-fit: contain; object-fit: contain;
border-radius: 3px; border-radius: var(--border-radius);
} }
} }
} }

27
src/components/markdown/Markdown.module.scss
View file

@ -26,9 +26,9 @@
&[data-type="mention"] { &[data-type="mention"] {
padding: 0 6px; padding: 0 6px;
font-weight: 600; font-weight: 600;
border-radius: 12px;
display: inline-block; display: inline-block;
background: var(--secondary-background); background: var(--secondary-background);
border-radius: calc(var(--border-radius) * 2);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -61,8 +61,8 @@
blockquote { blockquote {
margin: 2px 0; margin: 2px 0;
padding: 2px 0; padding: 2px 0;
border-radius: 4px;
background: var(--hover); background: var(--hover);
border-radius: var(--border-radius);
border-inline-start: 4px solid var(--tertiary-background); border-inline-start: 4px solid var(--tertiary-background);
> * { > * {
@ -72,9 +72,8 @@
pre { pre {
padding: 1em; padding: 1em;
border-radius: 4px;
overflow-x: scroll; overflow-x: scroll;
border-radius: 3px; border-radius: var(--border-radius);
background: var(--block) !important; background: var(--block) !important;
} }
@ -85,8 +84,8 @@
code { code {
color: white; color: white;
font-size: 90%; font-size: 90%;
border-radius: 4px;
background: var(--block); background: var(--block);
border-radius: var(--border-radius);
font-family: var(--monoscape-font), monospace; font-family: var(--monoscape-font), monospace;
} }
@ -113,9 +112,9 @@
padding: 0 2px; padding: 0 2px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border-radius: 4px;
color: transparent; color: transparent;
background: #151515; background: #151515;
border-radius: var(--border-radius);
> * { > * {
opacity: 0; opacity: 0;
@ -137,14 +136,10 @@
font-family: var(--monoscape-font), monospace; font-family: var(--monoscape-font), monospace;
:global(.lang) { :global(.lang) {
// height: 8px; width: fit-content;
// position: relative; padding-bottom: 8px;
div { div {
// margin-left: -5px;
// margin-top: -16px;
// position: absolute;
color: #111; color: #111;
cursor: pointer; cursor: pointer;
padding: 2px 6px; padding: 2px 6px;
@ -163,10 +158,6 @@
box-shadow: 0 1px #787676; 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; font-size: 10px;
margin-right: 6px; margin-right: 6px;
line-height: 12px; line-height: 12px;
position: relative;
border-radius: 4px;
background: white; background: white;
position: relative;
display: inline-block; display: inline-block;
border-radius: var(--border-radius);
} }
input[type="checkbox"][checked="true"] + label:before { input[type="checkbox"][checked="true"] + label:before {

2
src/components/navigation/items/Item.module.scss
View file

@ -3,8 +3,8 @@
display: flex; display: flex;
padding: 0 8px; padding: 0 8px;
user-select: none; user-select: none;
border-radius: 6px;
margin-bottom: 2px; margin-bottom: 2px;
border-radius: var(--border-radius);
gap: 8px; gap: 8px;
align-items: center; align-items: center;

2
src/components/ui/Button.tsx
View file

@ -30,7 +30,7 @@ export default styled.button<Props>`
background: var(--primary-background); background: var(--primary-background);
color: var(--foreground); color: var(--foreground);
border-radius: 4px; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
border: none; border: none;

6
src/components/ui/Checkbox.tsx
View file

@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
const CheckboxBase = styled.label` const CheckboxBase = styled.label`
margin-top: 20px;
gap: 4px; gap: 4px;
z-index: 1; z-index: 1;
display: flex; display: flex;
border-radius: 4px; margin-top: 20px;
align-items: center; align-items: center;
border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
height: 24px; height: 24px;
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px;
place-items: center; place-items: center;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
svg { svg {

2
src/components/ui/ColourSwatches.tsx
View file

@ -63,7 +63,7 @@ const SwatchesBase = styled.div`
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>` const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: var(--border-radius);
background-color: ${(props) => props.colour}; background-color: ${(props) => props.colour};
display: grid; display: grid;

12
src/components/ui/ComboBox.tsx
View file

@ -1,18 +1,20 @@
import styled from "styled-components"; import styled from "styled-components";
export default styled.select` export default styled.select`
width: 100%;
padding: 10px; padding: 10px;
border-radius: 6px; cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit; font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground); color: var(--secondary-foreground);
background: var(--secondary-background); background: var(--secondary-background);
font-size: var(--text-size);
border: none; border: none;
outline: 2px solid transparent; outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
cursor: pointer; transition: outline-color 0.2s ease-in-out;
width: 100%;
&:focus { &:focus {
box-shadow: 0 0 0 1.5pt var(--accent); box-shadow: 0 0 0 1.5pt var(--accent);

4
src/components/ui/InputBox.tsx
View file

@ -6,9 +6,9 @@ interface Props {
export default styled.input<Props>` export default styled.input<Props>`
z-index: 1; z-index: 1;
padding: 8px 16px;
border-radius: 6px;
font-size: 1rem; font-size: 1rem;
padding: 8px 16px;
border-radius: var(--border-radius);
font-family: inherit; font-family: inherit;
color: var(--foreground); color: var(--foreground);

8
src/components/ui/Modal.tsx
View file

@ -60,8 +60,8 @@ const ModalBase = styled.div`
const ModalContainer = styled.div` const ModalContainer = styled.div`
overflow: hidden; overflow: hidden;
border-radius: 8px;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
border-radius: var(--border-radius);
animation-name: ${zoomIn}; animation-name: ${zoomIn};
animation-duration: 0.25s; animation-duration: 0.25s;
@ -71,8 +71,8 @@ const ModalContainer = styled.div`
const ModalContent = styled.div< const ModalContent = styled.div<
{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean } { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
>` >`
border-radius: 8px;
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: var(--border-radius);
h3 { h3 {
margin-top: 0; margin-top: 0;
@ -98,13 +98,13 @@ const ModalContent = styled.div<
${(props) => ${(props) =>
props.attachment && props.attachment &&
css` css`
border-radius: 8px 8px 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
`} `}
${(props) => ${(props) =>
props.border && props.border &&
css` css`
border-radius: 10px; border-radius: var(--border-radius);
border: 2px solid var(--secondary-background); border: 2px solid var(--secondary-background);
`} `}
`; `;

2
src/components/ui/Radio.tsx
View file

@ -27,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
border-radius: 4px;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
&:hover { &:hover {
background: var(--hover); background: var(--hover);

2
src/components/ui/TextArea.tsx
View file

@ -30,7 +30,7 @@ export default styled.textarea<TextAreaProps>`
${(props) => ${(props) =>
!props.hideBorder && !props.hideBorder &&
css` css`
border-radius: 4px; border-radius: var(--border-radius);
transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out;
border: var(--input-border-width) solid transparent; border: var(--input-border-width) solid transparent;
`} `}

2
src/components/ui/Tip.tsx
View file

@ -22,8 +22,8 @@ export const TipBase = styled.div<Props>`
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
border-radius: 7px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
border: 2px solid var(--secondary-header); border: 2px solid var(--secondary-header);
a { a {

2
src/context/intermediate/modals/Onboarding.module.scss
View file

@ -26,7 +26,7 @@
margin: auto; margin: auto;
display: block; display: block;
max-height: 420px; max-height: 420px;
border-radius: 8px; border-radius: var(--border-radius);
} }
input { input {

8
src/context/intermediate/popovers/UserProfile.module.scss
View file

@ -7,7 +7,7 @@
.header { .header {
background-size: cover; background-size: cover;
border-radius: 8px 8px 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
background-position: center; background-position: center;
background-color: var(--secondary-background); background-color: var(--secondary-background);
@ -140,11 +140,11 @@
padding: 12px; padding: 12px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
border-radius: 4px;
align-items: center; align-items: center;
color: var(--secondary-foreground);
background-color: var(--secondary-background);
transition: background-color .1s; transition: background-color .1s;
color: var(--secondary-foreground);
border-radius: var(--border-radius);
background-color: var(--secondary-background);
&:hover { &:hover {
background-color: var(--primary-background); background-color: var(--primary-background);

2
src/context/revoltjs/FileUploads.module.scss
View file

@ -10,7 +10,7 @@
&.banner { &.banner {
.image { .image {
border-radius: 4px; border-radius: var(--border-radius);
} }
.modify { .modify {

2
src/pages/channels/messaging/MessageEditor.tsx
View file

@ -23,9 +23,9 @@ const EditorBase = styled.div`
textarea { textarea {
resize: none; resize: none;
padding: 12px; padding: 12px;
border-radius: 3px;
white-space: pre-wrap; white-space: pre-wrap;
font-size: var(--text-size); font-size: var(--text-size);
border-radius: var(--border-radius);
background: var(--secondary-header); background: var(--secondary-header);
} }

12
src/pages/channels/voice/VoiceHeader.tsx
View file

@ -27,18 +27,20 @@ const VoiceBase = styled.div`
background: var(--secondary-background); background: var(--secondary-background);
.status { .status {
position: absolute; flex: 1 0;
color: var(--success);
background: var(--primary-background);
display: flex; display: flex;
position: absolute;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-radius: 7px;
flex: 1 0;
user-select: none; user-select: none;
color: var(--success);
border-radius: var(--border-radius);
background: var(--primary-background);
svg { svg {
margin-inline-end: 4px; margin-inline-end: 4px;
cursor: help; cursor: help;

10
src/pages/friends/Friend.module.scss
View file

@ -18,7 +18,7 @@
&[data-empty="true"] { &[data-empty="true"] {
img { img {
height: 120px; height: 120px;
border-radius: 8px; border-radius: var(--border-radius);
} }
gap: 16px; gap: 16px;
@ -35,12 +35,12 @@
} }
.friend { .friend {
padding: 0 10px;
height: 60px; height: 60px;
display: flex; display: flex;
border-radius: 5px; padding: 0 10px;
align-items: center;
cursor: pointer; cursor: pointer;
align-items: center;
border-radius: var(--border-radius);
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
@ -110,9 +110,9 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
margin-top: 1em; margin-top: 1em;
border-radius: 7px;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
svg { svg {

2
src/pages/invite/Invite.module.scss
View file

@ -34,10 +34,10 @@
.details { .details {
text-align: center; text-align: center;
border-radius: 3px;
align-self: center; align-self: center;
padding: 32px 16px 16px 16px; padding: 32px 16px 16px 16px;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: var(--border-radius);
h1 { h1 {
margin: 0; margin: 0;

41
src/pages/settings/panes/Panes.module.scss
View file

@ -4,10 +4,10 @@
width: 100%; width: 100%;
padding: 1em; padding: 1em;
display: flex; display: flex;
border-radius: 6px; overflow: hidden;
align-items: center; align-items: center;
background: var(--secondary-header); background: var(--secondary-header);
overflow: hidden; border-radius: var(--border-radius);
.avatar { .avatar {
cursor: pointer; cursor: pointer;
@ -144,7 +144,7 @@
img { img {
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: var(--border-radius);
transition: border 0.3s; transition: border 0.3s;
border: 3px solid transparent; border: 3px solid transparent;
@ -195,10 +195,10 @@
place-items: center; place-items: center;
cursor: pointer; cursor: pointer;
border-radius: 8px;
transition: border 0.3s; transition: border 0.3s;
background: var(--hover); background: var(--hover);
border: 3px solid transparent; border: 3px solid transparent;
border-radius: var(--border-radius);
img { img {
max-width: 100%; max-width: 100%;
@ -262,8 +262,8 @@
min-width: 0; min-width: 0;
flex-grow: 1; flex-grow: 1;
padding: 8px; padding: 8px;
border-radius: 4px;
font-family: var(--codeblock-font); font-family: var(--codeblock-font);
border-radius: var(--border-radius);
background: var(--secondary-background); background: var(--secondary-background);
> div { > div {
@ -285,8 +285,8 @@
.entry { .entry {
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
border-radius: 6px;
border: 1px solid black; border: 1px solid black;
border-radius: var(--border-radius);
span { span {
flex: 1; flex: 1;
@ -312,8 +312,8 @@
height: 38px; height: 38px;
display: grid; display: grid;
cursor: pointer; cursor: pointer;
border-radius: 6px;
place-items: center; place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background); background: var(--primary-background);
} }
@ -339,29 +339,6 @@
top: 48px; 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 { .entry {
margin: 10px 0;
padding: 16px; padding: 16px;
display: flex; display: flex;
border-radius: 6px; margin: 10px 0;
flex-direction: column; flex-direction: column;
border-radius: var(--border-radius);
background: var(--secondary-header); background: var(--secondary-header);
&[data-active="true"] { &[data-active="true"] {

2
src/styles/_context-menu.scss
View file

@ -3,9 +3,9 @@
min-width: 190px; min-width: 190px;
padding: 6px 8px; padding: 6px 8px;
user-select: none; user-select: none;
border-radius: 4px;
font-size: .875rem; font-size: .875rem;
color: var(--secondary-foreground); color: var(--secondary-foreground);
border-radius: var(--border-radius);
background: var(--primary-background) !important; background: var(--primary-background) !important;
box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);

23
src/styles/_variables.scss
View file

@ -1,19 +1,34 @@
:root { :root {
/**
* Appearance
*/
--ligatures: none; --ligatures: none;
--text-size: 14px; --text-size: 14px;
--font: "Open Sans"; --font: "Open Sans";
--app-height: 100vh;
--codeblock-font: "Fira Code"; --codeblock-font: "Fira Code";
--sidebar-active: var(--secondary-background); --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; --input-border-width: 2px;
--textarea-padding: 16px; --textarea-padding: 16px;
--textarea-line-height: 20px; --textarea-line-height: 20px;
--message-box-padding: 14px 14px 14px 0; --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; --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
} }