cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -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;
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);
}
`}
`;

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

@ -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) =>

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

@ -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;
flex-direction: column;
background: var(--secondary-background);
width: 400px;
max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
> 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);
}

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

@ -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 {

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

@ -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 {

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

@ -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;

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

@ -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);
}
}
}

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

@ -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 {

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

@ -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;

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

@ -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;

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

@ -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 {

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 }>`
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
border-radius: var(--border-radius);
background-color: ${(props) => props.colour};
display: grid;

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

@ -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);

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

@ -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);

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

@ -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);
`}
`;

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

@ -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);

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

@ -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;
`}

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

@ -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 {

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

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

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

@ -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;
color: var(--secondary-foreground);
background-color: var(--secondary-background);
transition: background-color .1s;
color: var(--secondary-foreground);
border-radius: var(--border-radius);
background-color: var(--secondary-background);
&:hover {
background-color: var(--primary-background);

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

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

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

@ -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);
}

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

@ -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;

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

@ -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 {

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

@ -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;

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

@ -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"] {

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

@ -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);

25
src/styles/_variables.scss
View file

@ -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
}