Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/css: add dark theme

Browse source
This commit is contained in:
Tulir Asokan 2024-10-29 00:58:29 +02:00
parent 4d7dbffe05
commit 6fc070733a
16 changed files with 255 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
web/src/api/media.ts
View file

@ -28,17 +28,28 @@ export const getEncryptedMediaURL = (mxc?: string): string | undefined => {
return getMediaURL(mxc, true) return getMediaURL(mxc, true)
} }
// This should be synced with the sender colors in ui/timeline/TimelineEvent.css const FALLBACK_COLOR_COUNT = 10
const fallbackColors = [
"#a4041d", "#9b2200", "#803f00", "#005f00",
"#005c45", "#00548c", "#064ab1", "#5d26cd",
"#822198", "#9f0850",
]
export const getUserColorIndex = (userID: UserID) => export const getUserColorIndex = (userID: UserID) =>
userID.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % fallbackColors.length userID.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % FALLBACK_COLOR_COUNT
export const getUserColor = (userID: UserID) => fallbackColors[getUserColorIndex(userID)] function initFallbackColors(): string[] {
const style = getComputedStyle(document.body)
const output = []
for (let i = 0; i < FALLBACK_COLOR_COUNT; i++) {
output.push(style.getPropertyValue(`--sender-color-${i}`))
}
return output
}
let fallbackColors: string[]
export const getUserColor = (userID: UserID) => {
if (!fallbackColors) {
fallbackColors = initFallbackColors()
}
return fallbackColors[getUserColorIndex(userID)]
}
// note: this should stay in sync with fallbackAvatarTemplate in cmd/gomuks.media.go // note: this should stay in sync with fallbackAvatarTemplate in cmd/gomuks.media.go
function makeFallbackAvatar(backgroundColor: string, fallbackCharacter: string): string { function makeFallbackAvatar(backgroundColor: string, fallbackCharacter: string): string {

147
web/src/index.css
View file

@ -1,11 +1,128 @@
:root {
--font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--monospace-font-stack: "Fira Code", monospace;
--background-color: #fff;
--login-background-color: #eee;
--text-color: #000;
--inverted-text-color: var(--background-color);
--secondary-text-color: #888;
--semisecondary-text-color: #555;
--primary-color: #00c853;
--primary-color-dark: #00b24a;
--error-color: red;
--border-color: #ccc;
--pill-background-color: #ccc;
--button-hover-color: rgba(0, 0, 0, .2);
--light-hover-color: rgba(0, 0, 0, .1);
--timeline-hover-bg-color: #eee;
--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
--timeline-highlight-hover-bg-color: #eec;
--timeline-jump-bg-color: rgba(0, 255, 0, .2);
--timeline-jump-hover-bg-color: #cec;
--room-list-background: linear-gradient(in hsl longer hue, red 0 0, magenta);
--room-list-background-overlay: hsla(0, 0%, 96%, .9);
--room-list-search-background-overlay: var(--room-list-background-overlay);
--space-list-background-overlay: hsla(0, 0%, 96%, .8);
--room-list-scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, .1);
--room-list-entry-hover-color: rgba(0, 0, 0, 0.075);
--room-list-entry-selected-color: rgba(0, 0, 0, 0.125);
--dimmed-overlay-background-color: rgba(0, 0, 0, .75);
--modal-box-shadow-color: rgba(0, 0, 0, 0.15);
--emoji-selected-border-color: #cec;
--unread-counter-text-color: var(--inverted-text-color);
--unread-counter-message-bg: rgba(0, 0, 0, 0.35);
--unread-counter-notification-bg: rgba(50, 150, 0, 0.7);
--unread-counter-highlight-bg: rgba(200, 0, 0, 0.7);
/* These should be synced with the avatar colors in api/media.ts */
--sender-color-0: #a4041d;
--sender-color-1: #9b2200;
--sender-color-2: #803f00;
--sender-color-3: #005f00;
--sender-color-4: #005c45;
--sender-color-5: #00548c;
--sender-color-6: #064ab1;
--sender-color-7: #5d26cd;
--sender-color-8: #822198;
--sender-color-9: #9f0850;
--sent-ok-color: var(--border-color);
--sent-error-color: var(--error-color);
--blockquote-border-color: var(--border-color);
--lightbox-button-color: var(--border-color);
--codeblock-background-color: inherit;
@media (prefers-color-scheme: dark) {
--background-color: #000;
--login-background-color: #111;
--text-color: #fff;
--inverted-text-color: var(--background-color);
--secondary-text-color: #888;
--semisecondary-text-color: #bbb;
--primary-color: #00b24a;
--primary-color-dark: #00c853;
--error-color: red;
--border-color: #222;
--pill-background-color: #222;
--button-hover-color: rgba(255, 255, 255, .2);
--light-hover-color: rgba(255, 255, 255, .1);
--timeline-hover-bg-color: #111;
--timeline-highlight-bg-color: rgba(255, 255, 0, .1);
--timeline-highlight-hover-bg-color: #331;
--timeline-jump-bg-color: rgba(0, 255, 0, .2);
--timeline-jump-hover-bg-color: #131;
--room-list-background-overlay: hsla(0, 0%, 4%, .8);
--space-list-background-overlay: hsla(0, 0%, 4%, .7);
--room-list-scrollbar-color: rgba(255, 255, 255, .4) rgba(255, 255, 255, .1);
--room-list-entry-hover-color: rgba(255, 255, 255, 0.075);
--room-list-entry-selected-color: rgba(255, 255, 255, 0.125);
--modal-box-shadow-color: rgba(255, 255, 255, 0.1);
--emoji-selected-border-color: #131;
--unread-counter-message-bg: rgba(255, 255, 255, 0.5);
--unread-counter-notification-bg: rgba(150, 255, 0, 0.7);
--unread-counter-highlight-bg: rgba(255, 50, 50, 0.7);
--sender-color-0: #ff877c;
--sender-color-1: #f6913d;
--sender-color-2: #db9f00;
--sender-color-3: #56c02c;
--sender-color-4: #1fc090;
--sender-color-5: #21bacd;
--sender-color-6: #7aacf4;
--sender-color-7: #ad9cfe;
--sender-color-8: #d991de;
--sender-color-9: #fe84a2;
--sent-ok-color: #444;
--blockquote-border-color: #444;
--lightbox-button-color: #ccc;
}
}
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-family: var(--font-stack);
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #EEE; background-color: var(--login-background-color);
line-height: 1.5; line-height: 1.5;
font-size: 16px; font-size: 16px;
touch-action: none; touch-action: none;
color: var(--text-color);
} }
html { html {
@ -18,11 +135,16 @@ html {
} }
main { main {
background-color: white; background-color: var(--background-color);
} }
pre, code { pre, code {
font-family: "Fira Code", monospace; font-family: var(--monospace-font-stack);
}
input, textarea {
color: inherit;
background-color: inherit;
} }
button, a.button { button, a.button {
@ -31,13 +153,18 @@ button, a.button {
background: none; background: none;
border: none; border: none;
border-radius: .25rem; border-radius: .25rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
color: inherit;
&:disabled { &:disabled {
cursor: default; cursor: default;
} }
&:hover:not(:disabled) { &:hover:not(:disabled), &:focus:not(:disabled) {
background-color: rgba(0, 0, 0, .2); background-color: var(--button-hover-color);
} }
} }
@ -49,14 +176,6 @@ a {
} }
} }
:root {
--primary-color: #00c853;
--primary-color-light: #92ffc0;
--primary-color-dark: #00b24a;
--error-color: red;
--error-color-light: #ff6666;
}
.hidden { .hidden {
display: none !important; display: none !important;
} }

10
web/src/main.tsx
View file

@ -19,12 +19,10 @@ import App from "./App.tsx"
import "./index.css" import "./index.css"
const styleTags = document.createElement("style") const styleTags = document.createElement("style")
// styleTags.textContent = ` styleTags.textContent = `
// @import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark); @import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark);
// @import "_gomuks/codeblock/github.css" (prefers-color-scheme: light); @import "_gomuks/codeblock/github.css" (prefers-color-scheme: light);
// ` `
// TODO switch to the above version after adding global dark theme support
styleTags.textContent = `@import "_gomuks/codeblock/github.css";`
document.head.appendChild(styleTags) document.head.appendChild(styleTags)
fetch("_gomuks/auth", { method: "POST" }).then(resp => { fetch("_gomuks/auth", { method: "POST" }).then(resp => {

1
web/src/ui/JSONView.css
View file

@ -17,6 +17,7 @@ pre.json-view {
button { button {
padding: 0 .25rem; padding: 0 .25rem;
display: inline-flex;
} }
/* If the screen is wide enough, make line-wrapped strings aligned after the object key */ /* If the screen is wide enough, make line-wrapped strings aligned after the object key */

10
web/src/ui/RoomView.css
View file

@ -14,7 +14,7 @@ div.room-view {
align-items: center; align-items: center;
gap: .5rem; gap: .5rem;
padding-left: .5rem; padding-left: .5rem;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border-color);
> span.room-name { > span.room-name {
font-weight: bold; font-weight: bold;
@ -23,14 +23,6 @@ div.room-view {
> button.back { > button.back {
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
&:hover, &:focus {
background-color: #eee;
}
} }
} }
} }

8
web/src/ui/composer/Autocompleter.css
View file

@ -5,9 +5,9 @@ div.autocompletions-wrapper {
div.autocompletions { div.autocompletions {
position: absolute; position: absolute;
bottom: 1px; bottom: 1px;
border-top: 1px solid #ccc; border-top: 1px solid var(--border-color);
border-right: 1px solid #ccc; border-right: 1px solid var(--border-color);
background-color: #fff; background-color: var(--background-color);
padding: .5rem; padding: .5rem;
max-height: 20rem; max-height: 20rem;
overflow: auto; overflow: auto;
@ -21,7 +21,7 @@ div.autocompletions {
/*cursor: pointer;*/ /*cursor: pointer;*/
&.selected, &:hover { &.selected, &:hover {
background-color: #f0f0f0; background-color: var(--light-hover-color);
} }
> img { > img {

4
web/src/ui/composer/MessageComposer.css
View file

@ -1,5 +1,5 @@
div.message-composer { div.message-composer {
border-top: 1px solid #ccc; border-top: 1px solid var(--border-color);
blockquote.reply-body { blockquote.reply-body {
pre, a.hicli-matrix-uri { pre, a.hicli-matrix-uri {
@ -16,7 +16,7 @@ div.message-composer {
line-height: 1.25; line-height: 1.25;
flex: 1; flex: 1;
resize: none; resize: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-family: var(--font-stack);
height: auto; height: auto;
padding: .5rem; padding: .5rem;
border: none; border: none;

30
web/src/ui/emojipicker/EmojiPicker.css
View file

@ -1,13 +1,13 @@
div.emoji-picker { div.emoji-picker {
position: fixed; position: fixed;
background-color: white; background-color: var(--background-color);
width: 22rem; width: 22rem;
height: 34rem; height: 34rem;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0 1rem var(--modal-box-shadow-color);
div.emoji-category-bar { div.emoji-category-bar {
/*height: 2.5rem;*/ /*height: 2.5rem;*/
@ -15,7 +15,7 @@ div.emoji-picker {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: .5rem; padding-top: .5rem;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border-color);
> button { > button {
padding-top: .25rem; padding-top: .25rem;
@ -27,7 +27,7 @@ div.emoji-picker {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
&:hover { &:hover {
border-bottom: 2px solid green; border-bottom: 2px solid var(--primary-color-dark);
} }
} }
} }
@ -36,7 +36,7 @@ div.emoji-picker {
display: flex; display: flex;
align-items: center; align-items: center;
margin: .5rem; margin: .5rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: .25rem; border-radius: .25rem;
height: 2rem; height: 2rem;
@ -67,7 +67,7 @@ div.emoji-picker {
div.emoji-preview { div.emoji-preview {
height: 4.5rem; height: 4.5rem;
border-top: 1px solid #ccc; border-top: 1px solid var(--border-color);
display: grid; display: grid;
grid-template: grid-template:
@ -98,7 +98,7 @@ div.emoji-picker {
> div.emoji-shortcode { > div.emoji-shortcode {
grid-area: shortcode; grid-area: shortcode;
color: #666; color: var(--semisecondary-text-color);
} }
} }
@ -120,11 +120,17 @@ div.emoji-picker {
align-items: center; align-items: center;
> button { > button {
margin-left: .5rem; margin-left: .25rem;
font-size: .8rem; font-size: .8rem;
padding: .25rem .5rem;
} }
} }
button.emoji-category-icon {
/* The vertical alignment isn't quite right with flex */
display: block;
}
button.emoji-category-icon > img, button.emoji > img { button.emoji-category-icon > img, button.emoji > img {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
@ -138,12 +144,8 @@ div.emoji-picker {
height: 2.5rem; height: 2.5rem;
content-visibility: auto; content-visibility: auto;
&:hover {
background-color: #ccc;
}
&.selected { &.selected {
border: 1px solid #cec; border: 1px solid var(--emoji-selected-border-color);
opacity: .8; opacity: .8;
} }
} }

4
web/src/ui/login/LoginScreen.css
View file

@ -3,7 +3,7 @@ main.matrix-login {
width: 100%; width: 100%;
padding: 3rem 6rem; padding: 3rem 6rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25); box-shadow: 0 0 1rem var(--modal-box-shadow-color);
margin: 2rem; margin: 2rem;
@media (width < 800px) { @media (width < 800px) {
@ -49,7 +49,7 @@ main.matrix-login {
button { button {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: var(--inverted-text-color);
font-weight: bold; font-weight: bold;
&:hover, &:focus { &:hover, &:focus {

16
web/src/ui/modal/Lightbox.css
View file

@ -6,7 +6,7 @@ div.overlay {
justify-content: center; justify-content: center;
&.dimmed { &.dimmed {
background-color: rgba(0, 0, 0, 0.75); background-color: var(--dimmed-overlay-background-color);
} }
} }
@ -19,17 +19,13 @@ div.lightbox {
z-index: 1; z-index: 1;
> button, > a { > button, > a {
display: flex; color: var(--lightbox-button-color);
justify-content: center; width: 3rem;
align-items: center; height: 3rem;
color: #ccc;
width: 48px;
height: 48px;
padding: 0;
> svg { > svg {
width: 32px; width: 2rem;
height: 32px; height: 2rem;
} }
} }
} }

23
web/src/ui/roomlist/RoomList.css
View file

@ -1,15 +1,15 @@
div.room-list-wrapper { div.room-list-wrapper {
grid-area: roomlist; grid-area: roomlist;
background: linear-gradient(in hsl longer hue, red 0 0, magenta); background: var(--room-list-background);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); scrollbar-color: var(--room-list-scrollbar-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
div.room-list { div.room-list {
background-color: hsla(0, 0%, 96%, .9); background-color: var(--room-list-background-overlay);
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
} }
@ -19,7 +19,7 @@ input.room-search {
padding: 1rem; padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
background-color: hsla(0, 0%, 96%, .9); background-color: var(--room-list-search-background-overlay);
outline: none; outline: none;
} }
@ -27,19 +27,18 @@ div.room-entry {
width: 100%; width: 100%;
display: flex; display: flex;
gap: 4px; gap: 4px;
/*border-radius: 4px;*/
user-select: none; user-select: none;
/*cursor: pointer;*/ /*cursor: pointer;*/
height: 3rem; height: 3rem;
contain-intrinsic-height: 3rem; contain-intrinsic-height: 3rem;
content-visibility: auto; content-visibility: auto;
&:hover { &:hover, &:focus {
background-color: rgba(0, 0, 0, 0.075); background-color: var(--room-list-entry-hover-color);
} }
&.active { &.active {
background-color: rgba(0, 0, 0, 0.125); background-color: var(--room-list-entry-selected-color);
} }
> div.room-entry-left { > div.room-entry-left {
@ -93,9 +92,9 @@ div.room-entry {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
color: white; color: var(--unread-counter-text-color);
background-color: rgba(0, 0, 0, 0.35); background-color: var(--unread-counter-message-bg);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
line-height: 1; line-height: 1;
@ -110,11 +109,11 @@ div.room-entry {
} }
&.notified:not(.highlighted) { &.notified:not(.highlighted) {
background-color: rgba(50, 150, 0, 0.7); background-color: var(--unread-counter-notification-bg);
} }
&.highlighted { &.highlighted {
background-color: rgba(200, 0, 0, 0.7); background-color: var(--unread-counter-highlight-bg);
} }
} }
} }

27
web/src/ui/timeline/ReplyBody.css
View file

@ -1,8 +1,19 @@
blockquote.reply-body { blockquote.reply-body {
margin: 0 0 .25rem; margin: 0 0 .25rem;
border-left: 2px solid #aaa; border-left: 2px solid var(--blockquote-border-color);
padding: .25rem .5rem; padding: .25rem .5rem;
&.sender-color-0 { border-color: var(--sender-color-0); }
&.sender-color-1 { border-color: var(--sender-color-1); }
&.sender-color-2 { border-color: var(--sender-color-2); }
&.sender-color-3 { border-color: var(--sender-color-3); }
&.sender-color-4 { border-color: var(--sender-color-4); }
&.sender-color-5 { border-color: var(--sender-color-5); }
&.sender-color-6 { border-color: var(--sender-color-6); }
&.sender-color-7 { border-color: var(--sender-color-7); }
&.sender-color-8 { border-color: var(--sender-color-8); }
&.sender-color-9 { border-color: var(--sender-color-9); }
pre { pre {
display: inline; display: inline;
@ -12,10 +23,8 @@ blockquote.reply-body {
} }
&:hover, &.composer { &:hover, &.composer {
border-color: black;
> div.message-text { > div.message-text {
color: black; color: var(--text-color);
} }
} }
@ -24,18 +33,18 @@ blockquote.reply-body {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
color: #666; color: var(--semisecondary-text-color);
} }
&.thread > div.reply-sender > span.event-sender::after { &.thread > div.reply-sender > span.event-sender::after {
content: " (thread)"; content: " (thread)";
font-size: .75rem; font-size: .75rem;
color: #666; color: var(--secondary-text-color);
} }
&.editing > div.reply-sender > span.event-sender::after { &.editing > div.reply-sender > span.event-sender::after {
content: " (editing message)"; content: " (editing message)";
color: #666; color: var(--secondary-text-color);
} }
> div.reply-sender { > div.reply-sender {
@ -60,10 +69,6 @@ blockquote.reply-body {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
&:hover {
background-color: #ccc;
}
} }
} }
} }

4
web/src/ui/timeline/ReplyBody.tsx
View file

@ -79,6 +79,8 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
if (isEditing) { if (isEditing) {
classNames.push("editing") classNames.push("editing")
} }
const userColorIndex = getUserColorIndex(event.sender)
classNames.push(`sender-color-${userColorIndex}`)
return <blockquote data-reply-to={event.event_id} className={classNames.join(" ")} onClick={onClickReply}> return <blockquote data-reply-to={event.event_id} className={classNames.join(" ")} onClick={onClickReply}>
<div className="reply-sender"> <div className="reply-sender">
<div className="sender-avatar" title={event.sender}> <div className="sender-avatar" title={event.sender}>
@ -89,7 +91,7 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
alt="" alt=""
/> />
</div> </div>
<span className={`event-sender sender-color-${getUserColorIndex(event.sender)}`}> <span className={`event-sender sender-color-${userColorIndex}`}>
{memberEvtContent?.displayname || event.sender} {memberEvtContent?.displayname || event.sender}
</span> </span>
{onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>} {onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}

43
web/src/ui/timeline/TimelineEvent.css
View file

@ -10,11 +10,11 @@ div.timeline-event {
/ 2.5rem .5rem 1fr 2rem; / 2.5rem .5rem 1fr 2rem;
&.highlight { &.highlight {
background-color: rgba(255, 255, 0, .1); background-color: var(--timeline-highlight-bg-color);
} }
&.jump-highlight { &.jump-highlight {
background-color: rgba(0, 255, 0, .2); background-color: var(--timeline-jump-bg-color);
} }
&.jump-highlight-fadeout { &.jump-highlight-fadeout {
@ -22,14 +22,14 @@ div.timeline-event {
} }
&:hover { &:hover {
background-color: #eee; background-color: var(--timeline-hover-bg-color);
&.highlight { &.highlight {
background-color: #eec; background-color: var(--timeline-highlight-hover-bg-color);
} }
&.jump-highlight { &.jump-highlight {
background-color: #cec; background-color: var(--timeline-jump-hover-bg-color);
} }
} }
@ -55,7 +55,7 @@ div.timeline-event {
> span.event-time, > span.event-edited { > span.event-time, > span.event-edited {
font-size: .7rem; font-size: .7rem;
color: #888; color: var(--secondary-text-color);
} }
} }
@ -64,7 +64,7 @@ div.timeline-event {
display: none; display: none;
align-items: end; align-items: end;
font-size: .7rem; font-size: .7rem;
color: #888; color: var(--secondary-text-color);
max-height: 1.25rem; max-height: 1.25rem;
margin-left: .25rem; margin-left: .25rem;
} }
@ -87,11 +87,11 @@ div.timeline-event {
} }
&.error { &.error {
color: red; color: var(--sent-error-color);
} }
&.sending, &.sent { &.sending, &.sent {
color: #ccc; color: var(--sent-ok-color);
} }
} }
@ -150,17 +150,16 @@ span.event-sender {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* These should be synced with the avatar colors in api/media.ts */ &.sender-color-0 { color: var(--sender-color-0); }
&.sender-color-0 { color: #a4041d; } &.sender-color-1 { color: var(--sender-color-1); }
&.sender-color-1 { color: #9b2200; } &.sender-color-2 { color: var(--sender-color-2); }
&.sender-color-2 { color: #803f00; } &.sender-color-3 { color: var(--sender-color-3); }
&.sender-color-3 { color: #005f00; } &.sender-color-4 { color: var(--sender-color-4); }
&.sender-color-4 { color: #005c45; } &.sender-color-5 { color: var(--sender-color-5); }
&.sender-color-5 { color: #00548c; } &.sender-color-6 { color: var(--sender-color-6); }
&.sender-color-6 { color: #064ab1; } &.sender-color-7 { color: var(--sender-color-7); }
&.sender-color-7 { color: #5d26cd; } &.sender-color-8 { color: var(--sender-color-8); }
&.sender-color-8 { color: #822198; } &.sender-color-9 { color: var(--sender-color-9); }
&.sender-color-9 { color: #9f0850; }
} }
div.event-content > div.event-reactions { div.event-content > div.event-reactions {
@ -174,8 +173,8 @@ div.event-content > div.event-reactions {
align-items: center; align-items: center;
gap: .25rem; gap: .25rem;
background-color: #efe; background-color: var(--background-color);
border: 1px solid #ada; border: 1px solid var(--border-color);
border-radius: 2rem; border-radius: 2rem;
padding: 0 .5rem; padding: 0 .5rem;

14
web/src/ui/timeline/content/index.css
View file

@ -1,7 +1,6 @@
div.render-error-body { div.render-error-body {
font-style: italic; font-style: italic;
color: #555; color: var(--semisecondary-text-color);
} }
div.decryption-error-body { div.decryption-error-body {
@ -10,14 +9,14 @@ div.decryption-error-body {
> svg { > svg {
height: 20px; height: 20px;
color: red; color: var(--error-color);
} }
} }
div.redacted-body, div.decryption-pending-body { div.redacted-body, div.decryption-pending-body {
display: flex; display: flex;
align-items: center; align-items: center;
color: #888; color: var(--secondary-text-color);
> svg { > svg {
height: 20px; height: 20px;
@ -52,12 +51,11 @@ div.html-body {
overflow: hidden; overflow: hidden;
pre.chroma { pre.chroma {
/* TODO this may need to be undone if the color scheme is customizable */ background-color: var(--codeblock-background-color);
background-color: inherit;
} }
a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias { a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias {
background-color: #ccc; background-color: var(--pill-background-color);
border-radius: 1rem; border-radius: 1rem;
padding: 0 .25rem; padding: 0 .25rem;
color: inherit; color: inherit;
@ -106,7 +104,7 @@ div.html-body {
} }
blockquote { blockquote {
border-left: 2px solid #ccc; border-left: 2px solid var(--blockquote-border-color);
padding-left: .5rem; padding-left: .5rem;
} }

26
web/src/ui/timeline/menu/index.css
View file

@ -2,29 +2,25 @@ div.event-hover-menu {
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: -1.5rem; top: -1.5rem;
background-color: white; background-color: var(--background-color);
border: 1px solid #ccc; border: 1px solid var(--border-color);
border-radius: .5rem; border-radius: .5rem;
display: flex; display: flex;
gap: .25rem; gap: .25rem;
padding: .125rem; padding: .125rem;
> button { > button {
padding: 0;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
align-items: center;
} }
} }
div.event-context-menu-extra { div.event-context-menu-extra {
position: fixed; position: fixed;
background-color: white; background-color: var(--background-color);
border-radius: .5rem; border-radius: .5rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0 1rem var(--modal-box-shadow-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -32,9 +28,7 @@ div.event-context-menu-extra {
> button { > button {
border-radius: 0; border-radius: 0;
padding: .5rem .75rem; padding: .5rem .75rem;
display: flex;
justify-content: left; justify-content: left;
align-items: center;
gap: .5rem; gap: .5rem;
&:first-of-type { &:first-of-type {
@ -45,7 +39,7 @@ div.event-context-menu-extra {
} }
&.redact-button { &.redact-button {
color: red; color: var(--error-color);
} }
} }
} }
@ -54,7 +48,7 @@ div.view-source-modal {
max-width: min(80rem, 80vw); max-width: min(80rem, 80vw);
max-height: min(80rem, 80vh); max-height: min(80rem, 80vh);
overflow: auto; overflow: auto;
background-color: white; background-color: var(--background-color);
border-radius: 1rem; border-radius: 1rem;
padding: 1rem; padding: 1rem;
} }
@ -62,7 +56,7 @@ div.view-source-modal {
div.confirm-message-modal { div.confirm-message-modal {
width: min(40rem, 80vw); width: min(40rem, 80vw);
max-height: min(40rem, 80vh); max-height: min(40rem, 80vh);
background-color: white; background-color: var(--background-color);
border-radius: 1rem; border-radius: 1rem;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
@ -76,7 +70,7 @@ div.confirm-message-modal {
> div.timeline-event-container { > div.timeline-event-container {
margin: .5rem 0; margin: .5rem 0;
padding-left: .5rem; padding-left: .5rem;
border-left: 2px solid #ccc; border-left: 2px solid var(--border-color);
overflow: auto; overflow: auto;
> div.timeline-event { > div.timeline-event {
@ -88,7 +82,7 @@ div.confirm-message-modal {
padding: 1rem; padding: 1rem;
outline: none; outline: none;
border-radius: .25rem; border-radius: .25rem;
border: 1px solid #ccc; border: 1px solid var(--border-color);
} }
> div.confirm-buttons { > div.confirm-buttons {