3a95d0da01
* fix intersection & resize observer * add binary search util * add scroll info util * add virtual paginator hook - WIP * render timeline using paginator hook * add continuous pagination to fill timeline * add doc comments in virtual paginator hook * add scroll to element func in virtual paginator * extract timeline pagination login into hook * add sliding name for timeline messages - testing * scroll with live event * change message rending style * make message timestamp smaller * remove unused imports * add random number between util * add compact message component * add sanitize html types * fix sending alias in room mention * get room member display name util * add get room with canonical alias util * add sanitize html util * render custom html with new styles * fix linkifying link text * add reaction component * display message reactions in timeline * Change mention color * show edited message * add event sent by function factory * add functions to get emoji shortcode * add component for reaction msg * add tooltip for who has reacted * add message layouts & placeholder * fix reaction size * fix dark theme colors * add code highlight with prismjs * add options to configure spacing in msgs * render message reply * fix trim reply from body regex * fix crash when loading reply * fix reply hover style * decrypt event on timeline paginate * update custom html code style * remove console logs * fix virtual paginator scroll to func * fix virtual paginator scroll to types * add stop scroll for in view item options * fix virtual paginator out of range scroll to index * scroll to and highlight reply on click * fix reply hover style * make message avatar clickable * fix scrollTo issue in virtual paginator * load reply from fetch * import virtual paginator restore scroll * load timeline for specific event * Fix back pagination recalibration * fix reply min height * revert code block colors to secondary * stop sanitizing text in code block * add decrypt file util * add image media component * update folds * fix code block font style * add msg event type * add scale dimension util * strict msg layout type * add image renderer component * add message content fallback components * add message matrix event renderer components * render matrix event using hooks * add attachment component * add attachment content types * handle error when rendering image in timeline * add video component * render video * include blurhash in thumbnails * generate thumbnails for image message * fix reactToDom spoiler opts * add hooks for HTMLMediaElement * render audio file in timeline * add msg image content component * fix image content props * add video content component * render new image/video component in timeline * remove console.log * convert seconds to milliseconds in video info * add load thumbnail prop to video content component * add file saver types * add file header component * add file content component * render file in timeline * add media control component * render audio message in room timeline * remove moved components * safely load message reply * add media loading hook * update media control layout * add loading indication in audio component * fill audio play icon when playing audio * fix media expanding * add image viewer - WIP * add pan and zoom control to image viewer * add text based file viewer * add pdf viewer * add error handling in pdf viewer * add download btn to pdf viewer * fix file button spinner fill * fix file opens on re-render * add range slider in audio content player * render location in timeline * update folds * display membership event in timeline * make reactions toggle * render sticker messages in timeline * render room name, topic, avatar change and event * fix typos * update render state event type style * add room intro in start of timeline * add power levels context * fix wrong param passing in RoomView * fix sending typing notification in wrong room Slate onChange callback was not updating with react re-renders. * send typing status on key up * add typing indicator component * add typing member atom * display typing status in member drawer * add room view typing member component * display typing members in room view * remove old roomTimeline uses * add event readers hook * add latest event hook * display following members in room view * fetch event instead of event context for reply * fix typo in virtual paginator hook * add scroll to latest btn in timeline * change scroll to latest chip variant * destructure paginator object to improve perf * restore forward dir scroll in virtual paginator * run scroll to bottom in layout effect * display unread message indicator in timeline * make component for room timeline float * add timeline divider component * add day divider and format message time * apply message spacing to dividers * format date in room intro * send read receipt on message arrive * add event readers component * add reply, read receipt, source delete opt * bug fixes * update timeline on delete & show reason * fix empty reaction container style * show msg selection effect on msg option open * add report message options * add options to send quick reactions * add emoji board in message options * add reaction viewer * fix styles * show view reaction in msg options menu * fix spacing between two msg by same person * add option menu in other rendered event * handle m.room.encrypted messages * fix italic reply text overflow cut * handle encrypted sticker messages * remove console log * prevent message context menu with alt key pressed * make mentions clickable in messages * add options to show and hidden events in timeline * add option to disable media autoload * remove old emojiboard opener * add options to use system emoji * refresh timeline on reset * fix stuck typing member in member drawer
476 lines
12 KiB
SCSS
476 lines
12 KiB
SCSS
@use './app/partials/screen';
|
|
|
|
@font-face {
|
|
font-family: Twemoji;
|
|
src: url('../public/font/Twemoji.Mozilla.v.7.0.woff2'),
|
|
url('../public/font/Twemoji.Mozilla.v0.7.0.ttf');
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* background color | --bg-[background type]: value */
|
|
--bg-surface: #ffffff;
|
|
--bg-surface-transparent: #ffffff00;
|
|
--bg-surface-low: #f6f6f6;
|
|
--bg-surface-low-transparent: #f6f6f600;
|
|
--bg-surface-extra-low: #f6f6f6;
|
|
--bg-surface-extra-low-transparent: #f6f6f600;
|
|
--bg-surface-hover: rgba(0, 0, 0, 3%);
|
|
--bg-surface-active: rgba(0, 0, 0, 5%);
|
|
--bg-surface-border: rgba(0, 0, 0, 6%);
|
|
|
|
--bg-primary: rgb(83, 110, 234);
|
|
--bg-primary-hover: rgba(83, 110, 234, 80%);
|
|
--bg-primary-active: rgba(83, 110, 234, 70%);
|
|
--bg-primary-border: rgba(83, 110, 234, 38%);
|
|
|
|
--bg-positive: rgb(69, 184, 59);
|
|
--bg-positive-hover: rgba(69, 184, 59, 8%);
|
|
--bg-positive-active: rgba(69, 184, 59, 15%);
|
|
--bg-positive-border: rgba(69, 184, 59, 40%);
|
|
|
|
--bg-caution: rgb(255, 179, 0);
|
|
--bg-caution-hover: rgba(255, 179, 0, 8%);
|
|
--bg-caution-active: rgba(255, 179, 0, 15%);
|
|
--bg-caution-border: rgba(255, 179, 0, 40%);
|
|
|
|
--bg-danger: rgb(240, 71, 71);
|
|
--bg-danger-hover: rgba(240, 71, 71, 5%);
|
|
--bg-danger-active: rgba(240, 71, 71, 10%);
|
|
--bg-danger-border: rgba(240, 71, 71, 20%);
|
|
|
|
--bg-tooltip: #353535;
|
|
--bg-badge: #989898;
|
|
--bg-ping: hsla(137deg, 100%, 68%, 40%);
|
|
--bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
|
|
--bg-divider: hsla(0, 0%, 0%, 0.1);
|
|
|
|
/* text color | --tc-[background type]-[priority]: value */
|
|
--tc-surface-high: #000000;
|
|
--tc-surface-normal: rgba(0, 0, 0, 78%);
|
|
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
|
|
--tc-surface-low: rgba(0, 0, 0, 48%);
|
|
|
|
--tc-primary-high: #ffffff;
|
|
--tc-primary-normal: rgba(255, 255, 255, 68%);
|
|
--tc-primary-low: rgba(255, 255, 255, 40%);
|
|
|
|
--tc-positive-high: var(--bg-positive);
|
|
--tc-positive-normal: rgb(69, 184, 59, 80%);
|
|
--tc-positive-low: rgb(69, 184, 59, 60%);
|
|
|
|
--tc-caution-high: var(--bg-caution);
|
|
--tc-caution-normal: rgb(255, 179, 0, 80%);
|
|
--tc-caution-low: rgb(255, 179, 0, 60%);
|
|
|
|
--tc-danger-high: var(--bg-danger);
|
|
--tc-danger-normal: rgba(240, 71, 71, 88%);
|
|
--tc-danger-low: rgba(240, 71, 71, 60%);
|
|
|
|
--tc-code: #e62498;
|
|
--tc-link: hsl(213deg 76% 56%);
|
|
--tc-tooltip: white;
|
|
--tc-badge: white;
|
|
|
|
/* system icons | --ic-[background type]-[priority]: value */
|
|
--ic-surface-high: #272727;
|
|
--ic-surface-normal: #626262;
|
|
--ic-surface-low: #7c7c7c;
|
|
--ic-primary-high: #ffffff;
|
|
--ic-primary-normal: #ffffff;
|
|
--ic-positive-high: rgba(69, 184, 59);
|
|
--ic-positive-normal: rgba(69, 184, 59, 80%);
|
|
--ic-caution-high: rgba(255, 179, 0);
|
|
--ic-caution-normal: rgba(255, 179, 0, 80%);
|
|
--ic-danger-high: rgba(240, 71, 71);
|
|
--ic-danger-normal: rgba(240, 71, 71, 0.7);
|
|
|
|
/* user mxid colors */
|
|
--mx-uc-1: hsl(208, 66%, 53%);
|
|
--mx-uc-2: hsl(302, 49%, 45%);
|
|
--mx-uc-3: hsl(163, 97%, 36%);
|
|
--mx-uc-4: hsl(343, 75%, 61%);
|
|
--mx-uc-5: hsl(24, 100%, 59%);
|
|
--mx-uc-6: hsl(181, 63%, 47%);
|
|
--mx-uc-7: hsl(242, 89%, 65%);
|
|
--mx-uc-8: hsl(94, 65%, 50%);
|
|
|
|
/* system icon size | -ic-[size]: value */
|
|
--ic-large: 38px;
|
|
--ic-normal: 24px;
|
|
--ic-small: 20px;
|
|
--ic-extra-small: 18px;
|
|
|
|
/* avatar size */
|
|
--av-large: 80px;
|
|
--av-normal: 42px;
|
|
--av-small: 36px;
|
|
--av-extra-small: 24px;
|
|
|
|
/* shadow and overlay */
|
|
--bg-overlay: rgba(0, 0, 0, 20%);
|
|
--bg-overlay-low: rgba(0, 0, 0, 50%);
|
|
|
|
--bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
|
|
|
|
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
|
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
|
|
|
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
|
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
|
|
|
--bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
|
|
--bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
|
|
|
|
--bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
|
|
--bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
|
|
|
|
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
|
|
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
|
|
|
|
/* border */
|
|
--bo-radius: 8px;
|
|
|
|
/* font styles: font-size, letter-spacing, line-hight */
|
|
--fs-h1: 36px;
|
|
--ls-h1: -1.5px;
|
|
--lh-h1: 38px;
|
|
|
|
--fs-h2: 24px;
|
|
--ls-h2: -0.5px;
|
|
--lh-h2: 30px;
|
|
|
|
--fs-s1: 18px;
|
|
--ls-s1: -0.2px;
|
|
--lh-s1: 24px;
|
|
|
|
--fs-b1: 16px;
|
|
--ls-b1: 0.1px;
|
|
--lh-b1: 24px;
|
|
|
|
--fs-b2: 14px;
|
|
--ls-b2: 0.2px;
|
|
--lh-b2: 20px;
|
|
|
|
--fs-b3: 12px;
|
|
--ls-b3: 0px;
|
|
--lh-b3: 16px;
|
|
|
|
/* font-weight */
|
|
--fw-light: 300;
|
|
--fw-normal: 400;
|
|
--fw-medium: 500;
|
|
--fw-bold: 700;
|
|
|
|
/* spacing | --sp-[space]: value */
|
|
--sp-none: 0px;
|
|
--sp-ultra-tight: 4px;
|
|
--sp-extra-tight: 8px;
|
|
--sp-tight: 12px;
|
|
--sp-normal: 16px;
|
|
--sp-loose: 20px;
|
|
--sp-extra-loose: 32px;
|
|
|
|
/* other */
|
|
--border-width: 1px;
|
|
--header-height: 54px;
|
|
--navigation-sidebar-width: calc(64px + var(--border-width));
|
|
--navigation-drawer-width: calc(280px + var(--border-width));
|
|
--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
|
|
--people-drawer-width: calc(268px - var(--border-width));
|
|
|
|
--popup-window-drawer-width: 280px;
|
|
|
|
@include screen.smallerThan(tabletBreakpoint) {
|
|
--navigation-drawer-width: calc(240px + var(--border-width));
|
|
--people-drawer-width: calc(256px - var(--border-width));
|
|
--popup-window-drawer-width: 240px;
|
|
}
|
|
|
|
/* transition curves */
|
|
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
|
|
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
|
|
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
|
|
|
|
--font-emoji: 'Twemoji';
|
|
--font-primary: 'Roboto', var(--font-emoji), sans-serif;
|
|
--font-secondary: 'Roboto', var(--font-emoji), sans-serif;
|
|
}
|
|
|
|
.silver-theme {
|
|
/* background color | --bg-[background type]: value */
|
|
--bg-surface: hsl(0, 0%, 95%);
|
|
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
|
|
--bg-surface-low: hsl(0, 0%, 91%);
|
|
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
|
|
--bg-surface-extra-low: hsl(0, 0%, 91%);
|
|
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
|
|
}
|
|
|
|
.dark-theme,
|
|
.butter-theme {
|
|
/* background color | --bg-[background type]: value */
|
|
--bg-surface: #1f2326;
|
|
--bg-surface-transparent: #1f232600;
|
|
--bg-surface-low: #15171a;
|
|
--bg-surface-low-transparent: #15171a00;
|
|
--bg-surface-extra-low: #15171a;
|
|
--bg-surface-extra-low-transparent: #15171a00;
|
|
--bg-surface-hover: #1f2326;
|
|
--bg-surface-active: #2a2e33;
|
|
--bg-surface-border: rgba(0, 0, 0, 20%);
|
|
|
|
--bg-primary: rgb(42, 98, 166);
|
|
--bg-primary-hover: rgba(42, 98, 166, 80%);
|
|
--bg-primary-active: rgba(42, 98, 166, 70%);
|
|
--bg-primary-border: rgba(42, 98, 166, 38%);
|
|
|
|
--bg-tooltip: #000;
|
|
--bg-badge: hsl(0, 0%, 75%);
|
|
--bg-ping: hsla(137deg, 100%, 38%, 40%);
|
|
--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
|
|
--bg-divider: hsla(0, 0%, 100%, 0.1);
|
|
|
|
/* text color | --tc-[background type]-[priority]: value */
|
|
--tc-surface-high: rgba(255, 255, 255, 98%);
|
|
--tc-surface-normal: rgba(255, 255, 255, 94%);
|
|
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
|
|
--tc-surface-low: rgba(255, 255, 255, 58%);
|
|
|
|
--tc-primary-high: #ffffff;
|
|
--tc-primary-normal: rgba(255, 255, 255, 0.68);
|
|
--tc-primary-low: rgba(255, 255, 255, 0.4);
|
|
|
|
--tc-code: #e565b1;
|
|
--tc-link: hsl(213deg 94% 73%);
|
|
--tc-badge: black;
|
|
|
|
/* system icons | --ic-[background type]-[priority]: value */
|
|
--ic-surface-high: rgb(255, 255, 255);
|
|
--ic-surface-normal: rgba(255, 255, 255, 84%);
|
|
--ic-surface-low: rgba(255, 255, 255, 64%);
|
|
--ic-primary-normal: #ffffff;
|
|
|
|
& .text {
|
|
/* override user mxid colors for texts */
|
|
--mx-uc-1: hsl(208, 100%, 58%);
|
|
--mx-uc-2: hsl(301, 80%, 70%);
|
|
--mx-uc-3: hsl(163, 93%, 41%);
|
|
--mx-uc-4: hsl(343, 91%, 66%);
|
|
--mx-uc-5: hsl(24, 90%, 67%);
|
|
--mx-uc-6: hsl(181, 90%, 50%);
|
|
--mx-uc-7: hsl(243, 100%, 74%);
|
|
--mx-uc-8: hsl(94, 66%, 50%);
|
|
}
|
|
|
|
/* shadow and overlay */
|
|
--bg-overlay: rgba(0, 0, 0, 60%);
|
|
--bg-overlay-low: rgba(0, 0, 0, 80%);
|
|
|
|
--bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
|
|
|
|
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
|
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
|
|
|
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
|
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
|
|
|
/* font styles: font-size, letter-spacing, line-hight */
|
|
--fs-h1: 35.6px;
|
|
|
|
--fs-h2: 23.6px;
|
|
|
|
--fs-s1: 17.6px;
|
|
|
|
--fs-b1: 14.6px;
|
|
--ls-b1: 0.14px;
|
|
|
|
--fs-b2: 13.2px;
|
|
|
|
--fs-b3: 11.2px;
|
|
|
|
/* override normal font weight for dark mode */
|
|
--fw-normal: 350;
|
|
|
|
--font-secondary: 'InterVariable', 'Roboto', var(--font-emoji), sans-serif;
|
|
}
|
|
|
|
.butter-theme {
|
|
/* background color | --bg-[background type]: value */
|
|
--bg-surface: hsl(64, 6%, 14%);
|
|
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
|
|
--bg-surface-low: hsl(64, 6%, 10%);
|
|
--bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
|
|
--bg-surface-extra-low: hsl(64, 6%, 8%);
|
|
--bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
|
|
|
|
--bg-badge: #c4c1ab;
|
|
|
|
/* text color | --tc-[background type]-[priority]: value */
|
|
--tc-surface-high: rgb(255, 251, 222, 94%);
|
|
--tc-surface-normal: rgba(255, 251, 222, 94%);
|
|
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
|
--tc-surface-low: rgba(255, 251, 222, 58%);
|
|
|
|
/* system icons | --ic-[background type]-[priority]: value */
|
|
--ic-surface-high: rgb(255, 251, 222);
|
|
--ic-surface-normal: rgba(255, 251, 222, 84%);
|
|
--ic-surface-low: rgba(255, 251, 222, 64%);
|
|
}
|
|
|
|
.font-primary {
|
|
font-family: var(--font-primary);
|
|
|
|
/* override font styles for primary font */
|
|
--fs-h1: 36px;
|
|
--ls-h1: -1.5px;
|
|
--lh-h1: 38px;
|
|
|
|
--fs-h2: 24px;
|
|
--ls-h2: -0.5px;
|
|
--lh-h2: 30px;
|
|
|
|
--fs-s1: 18px;
|
|
--ls-s1: -0.2px;
|
|
--lh-s1: 24px;
|
|
|
|
--fs-b1: 16px;
|
|
--ls-b1: 0.1px;
|
|
--lh-b1: 24px;
|
|
|
|
--fs-b2: 14px;
|
|
--ls-b2: 0.2px;
|
|
--lh-b2: 20px;
|
|
|
|
--fs-b3: 12px;
|
|
--ls-b3: 0px;
|
|
--lh-b3: 16px;
|
|
|
|
--fw-light: 300;
|
|
--fw-normal: 400;
|
|
--fw-medium: 500;
|
|
--fw-bold: 600;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: var(--font-secondary);
|
|
font-size: 16px;
|
|
font-weight: var(--fw-normal);
|
|
background-color: var(--bg-surface-low);
|
|
|
|
/*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
|
|
font-variant-ligatures: no-contextual;
|
|
}
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
a {
|
|
color: var(--tc-link);
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
b {
|
|
font-weight: var(--fw-medium);
|
|
}
|
|
label {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
button,
|
|
textarea {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
letter-spacing: inherit;
|
|
border: none;
|
|
}
|
|
button {
|
|
max-width: 100%;
|
|
text-transform: none;
|
|
text-align: inherit;
|
|
overflow: visible;
|
|
-webkit-appearance: button;
|
|
}
|
|
textarea,
|
|
input,
|
|
input[type],
|
|
input[type='text'],
|
|
input[type='username'],
|
|
input[type='password'],
|
|
input[type='email'],
|
|
input[type='checkbox'] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
input[type='checkbox'] {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
box-shadow: var(--bs-primary-border);
|
|
background-color: var(--bg-surface);
|
|
cursor: pointer;
|
|
@extend .flex--center;
|
|
|
|
&:checked {
|
|
background-color: var(--bg-primary);
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 6px;
|
|
border: 6px solid white;
|
|
border-width: 0 0 3px 3px;
|
|
transform: rotateZ(-45deg) translate(1px, -1px);
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
color: inherit;
|
|
word-spacing: inherit;
|
|
}
|
|
.noselect {
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
-webkit-user-select: none; /* Safari */
|
|
-khtml-user-select: none; /* Konqueror HTML */
|
|
-moz-user-select: none; /* Old versions of Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Non-prefixed version, currently
|
|
supported by Chrome, Edge, Opera and Firefox */
|
|
}
|
|
|
|
audio:not([controls]) {
|
|
display: none !important;
|
|
}
|
|
|
|
.flex--center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|