mirror of
https://github.com/tulir/gomuks.git
synced 2025-04-20 18:43:41 -05:00
web/css: add dark theme
This commit is contained in:
Tulir Asokan
parent
4d7dbffe05
commit
6fc070733a
16 changed files with 255 additions and 139 deletions
|
|
@ -28,17 +28,28 @@ export const getEncryptedMediaURL = (mxc?: string): string | undefined => {
|
|||
return getMediaURL(mxc, true)
|
||||
}
|
||||
|
||||
// This should be synced with the sender colors in ui/timeline/TimelineEvent.css
|
||||
const fallbackColors = [
|
||||
"#a4041d", "#9b2200", "#803f00", "#005f00",
|
||||
"#005c45", "#00548c", "#064ab1", "#5d26cd",
|
||||
"#822198", "#9f0850",
|
||||
]
|
||||
const FALLBACK_COLOR_COUNT = 10
|
||||
|
||||
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
|
||||
function makeFallbackAvatar(backgroundColor: string, fallbackCharacter: string): string {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-stack);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #EEE;
|
||||
background-color: var(--login-background-color);
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
touch-action: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -18,11 +135,16 @@ html {
|
|||
}
|
||||
|
||||
main {
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-family: var(--monospace-font-stack);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
|
|
@ -31,13 +153,18 @@ button, a.button {
|
|||
background: none;
|
||||
border: none;
|
||||
border-radius: .25rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
&:hover:not(:disabled), &:focus:not(:disabled) {
|
||||
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 {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,10 @@ import App from "./App.tsx"
|
|||
import "./index.css"
|
||||
|
||||
const styleTags = document.createElement("style")
|
||||
// styleTags.textContent = `
|
||||
// @import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark);
|
||||
// @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";`
|
||||
styleTags.textContent = `
|
||||
@import "_gomuks/codeblock/github-dark.css" (prefers-color-scheme: dark);
|
||||
@import "_gomuks/codeblock/github.css" (prefers-color-scheme: light);
|
||||
`
|
||||
document.head.appendChild(styleTags)
|
||||
|
||||
fetch("_gomuks/auth", { method: "POST" }).then(resp => {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ pre.json-view {
|
|||
|
||||
button {
|
||||
padding: 0 .25rem;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* If the screen is wide enough, make line-wrapped strings aligned after the object key */
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ div.room-view {
|
|||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding-left: .5rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
> span.room-name {
|
||||
font-weight: bold;
|
||||
|
|
@ -23,14 +23,6 @@ div.room-view {
|
|||
> button.back {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ div.autocompletions-wrapper {
|
|||
div.autocompletions {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
border-top: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
background-color: var(--background-color);
|
||||
padding: .5rem;
|
||||
max-height: 20rem;
|
||||
overflow: auto;
|
||||
|
|
@ -21,7 +21,7 @@ div.autocompletions {
|
|||
/*cursor: pointer;*/
|
||||
|
||||
&.selected, &:hover {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--light-hover-color);
|
||||
}
|
||||
|
||||
> img {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
div.message-composer {
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
blockquote.reply-body {
|
||||
pre, a.hicli-matrix-uri {
|
||||
|
|
@ -16,7 +16,7 @@ div.message-composer {
|
|||
line-height: 1.25;
|
||||
flex: 1;
|
||||
resize: none;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
font-family: var(--font-stack);
|
||||
height: auto;
|
||||
padding: .5rem;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
div.emoji-picker {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
width: 22rem;
|
||||
height: 34rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
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 {
|
||||
/*height: 2.5rem;*/
|
||||
|
|
@ -15,7 +15,7 @@ div.emoji-picker {
|
|||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: .5rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
> button {
|
||||
padding-top: .25rem;
|
||||
|
|
@ -27,7 +27,7 @@ div.emoji-picker {
|
|||
border-bottom-right-radius: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
&:hover {
|
||||
border-bottom: 2px solid green;
|
||||
border-bottom: 2px solid var(--primary-color-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ div.emoji-picker {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: .5rem;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: .25rem;
|
||||
height: 2rem;
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ div.emoji-picker {
|
|||
|
||||
div.emoji-preview {
|
||||
height: 4.5rem;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
|
|
@ -98,7 +98,7 @@ div.emoji-picker {
|
|||
|
||||
> div.emoji-shortcode {
|
||||
grid-area: shortcode;
|
||||
color: #666;
|
||||
color: var(--semisecondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,11 +120,17 @@ div.emoji-picker {
|
|||
align-items: center;
|
||||
|
||||
> button {
|
||||
margin-left: .5rem;
|
||||
margin-left: .25rem;
|
||||
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 {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
|
@ -138,12 +144,8 @@ div.emoji-picker {
|
|||
height: 2.5rem;
|
||||
content-visibility: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #cec;
|
||||
border: 1px solid var(--emoji-selected-border-color);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ main.matrix-login {
|
|||
width: 100%;
|
||||
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;
|
||||
|
||||
@media (width < 800px) {
|
||||
|
|
@ -49,7 +49,7 @@ main.matrix-login {
|
|||
|
||||
button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
color: var(--inverted-text-color);
|
||||
font-weight: bold;
|
||||
|
||||
&:hover, &:focus {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ div.overlay {
|
|||
justify-content: center;
|
||||
|
||||
&.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;
|
||||
|
||||
> button, > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ccc;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
color: var(--lightbox-button-color);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
> svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
div.room-list-wrapper {
|
||||
grid-area: roomlist;
|
||||
background: linear-gradient(in hsl longer hue, red 0 0, magenta);
|
||||
background: var(--room-list-background);
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div.room-list {
|
||||
background-color: hsla(0, 0%, 96%, .9);
|
||||
background-color: var(--room-list-background-overlay);
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ input.room-search {
|
|||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background-color: hsla(0, 0%, 96%, .9);
|
||||
background-color: var(--room-list-search-background-overlay);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -27,19 +27,18 @@ div.room-entry {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
/*border-radius: 4px;*/
|
||||
user-select: none;
|
||||
/*cursor: pointer;*/
|
||||
height: 3rem;
|
||||
contain-intrinsic-height: 3rem;
|
||||
content-visibility: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
&:hover, &:focus {
|
||||
background-color: var(--room-list-entry-hover-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
background-color: var(--room-list-entry-selected-color);
|
||||
}
|
||||
|
||||
> div.room-entry-left {
|
||||
|
|
@ -93,9 +92,9 @@ div.room-entry {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
height: 1rem;
|
||||
line-height: 1;
|
||||
|
|
@ -110,11 +109,11 @@ div.room-entry {
|
|||
}
|
||||
|
||||
&.notified:not(.highlighted) {
|
||||
background-color: rgba(50, 150, 0, 0.7);
|
||||
background-color: var(--unread-counter-notification-bg);
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: rgba(200, 0, 0, 0.7);
|
||||
background-color: var(--unread-counter-highlight-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,19 @@
|
|||
blockquote.reply-body {
|
||||
margin: 0 0 .25rem;
|
||||
border-left: 2px solid #aaa;
|
||||
border-left: 2px solid var(--blockquote-border-color);
|
||||
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 {
|
||||
display: inline;
|
||||
|
||||
|
|
@ -12,10 +23,8 @@ blockquote.reply-body {
|
|||
}
|
||||
|
||||
&:hover, &.composer {
|
||||
border-color: black;
|
||||
|
||||
> div.message-text {
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,18 +33,18 @@ blockquote.reply-body {
|
|||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
color: var(--semisecondary-text-color);
|
||||
}
|
||||
|
||||
&.thread > div.reply-sender > span.event-sender::after {
|
||||
content: " (thread)";
|
||||
font-size: .75rem;
|
||||
color: #666;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
&.editing > div.reply-sender > span.event-sender::after {
|
||||
content: " (editing message)";
|
||||
color: #666;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
> div.reply-sender {
|
||||
|
|
@ -60,10 +69,6 @@ blockquote.reply-body {
|
|||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,8 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
|
|||
if (isEditing) {
|
||||
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}>
|
||||
<div className="reply-sender">
|
||||
<div className="sender-avatar" title={event.sender}>
|
||||
|
|
@ -89,7 +91,7 @@ export const ReplyBody = ({ room, event, onClose, isThread, isEditing }: ReplyBo
|
|||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span className={`event-sender sender-color-${getUserColorIndex(event.sender)}`}>
|
||||
<span className={`event-sender sender-color-${userColorIndex}`}>
|
||||
{memberEvtContent?.displayname || event.sender}
|
||||
</span>
|
||||
{onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ div.timeline-event {
|
|||
/ 2.5rem .5rem 1fr 2rem;
|
||||
|
||||
&.highlight {
|
||||
background-color: rgba(255, 255, 0, .1);
|
||||
background-color: var(--timeline-highlight-bg-color);
|
||||
}
|
||||
|
||||
&.jump-highlight {
|
||||
background-color: rgba(0, 255, 0, .2);
|
||||
background-color: var(--timeline-jump-bg-color);
|
||||
}
|
||||
|
||||
&.jump-highlight-fadeout {
|
||||
|
|
@ -22,14 +22,14 @@ div.timeline-event {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
background-color: var(--timeline-hover-bg-color);
|
||||
|
||||
&.highlight {
|
||||
background-color: #eec;
|
||||
background-color: var(--timeline-highlight-hover-bg-color);
|
||||
}
|
||||
|
||||
&.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 {
|
||||
font-size: .7rem;
|
||||
color: #888;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ div.timeline-event {
|
|||
display: none;
|
||||
align-items: end;
|
||||
font-size: .7rem;
|
||||
color: #888;
|
||||
color: var(--secondary-text-color);
|
||||
max-height: 1.25rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
|
@ -87,11 +87,11 @@ div.timeline-event {
|
|||
}
|
||||
|
||||
&.error {
|
||||
color: red;
|
||||
color: var(--sent-error-color);
|
||||
}
|
||||
|
||||
&.sending, &.sent {
|
||||
color: #ccc;
|
||||
color: var(--sent-ok-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,17 +150,16 @@ span.event-sender {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* These should be synced with the avatar colors in api/media.ts */
|
||||
&.sender-color-0 { color: #a4041d; }
|
||||
&.sender-color-1 { color: #9b2200; }
|
||||
&.sender-color-2 { color: #803f00; }
|
||||
&.sender-color-3 { color: #005f00; }
|
||||
&.sender-color-4 { color: #005c45; }
|
||||
&.sender-color-5 { color: #00548c; }
|
||||
&.sender-color-6 { color: #064ab1; }
|
||||
&.sender-color-7 { color: #5d26cd; }
|
||||
&.sender-color-8 { color: #822198; }
|
||||
&.sender-color-9 { color: #9f0850; }
|
||||
&.sender-color-0 { color: var(--sender-color-0); }
|
||||
&.sender-color-1 { color: var(--sender-color-1); }
|
||||
&.sender-color-2 { color: var(--sender-color-2); }
|
||||
&.sender-color-3 { color: var(--sender-color-3); }
|
||||
&.sender-color-4 { color: var(--sender-color-4); }
|
||||
&.sender-color-5 { color: var(--sender-color-5); }
|
||||
&.sender-color-6 { color: var(--sender-color-6); }
|
||||
&.sender-color-7 { color: var(--sender-color-7); }
|
||||
&.sender-color-8 { color: var(--sender-color-8); }
|
||||
&.sender-color-9 { color: var(--sender-color-9); }
|
||||
}
|
||||
|
||||
div.event-content > div.event-reactions {
|
||||
|
|
@ -174,8 +173,8 @@ div.event-content > div.event-reactions {
|
|||
align-items: center;
|
||||
gap: .25rem;
|
||||
|
||||
background-color: #efe;
|
||||
border: 1px solid #ada;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2rem;
|
||||
padding: 0 .5rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
div.render-error-body {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
color: var(--semisecondary-text-color);
|
||||
}
|
||||
|
||||
div.decryption-error-body {
|
||||
|
|
@ -10,14 +9,14 @@ div.decryption-error-body {
|
|||
|
||||
> svg {
|
||||
height: 20px;
|
||||
color: red;
|
||||
color: var(--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
div.redacted-body, div.decryption-pending-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #888;
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
> svg {
|
||||
height: 20px;
|
||||
|
|
@ -52,12 +51,11 @@ div.html-body {
|
|||
overflow: hidden;
|
||||
|
||||
pre.chroma {
|
||||
/* TODO this may need to be undone if the color scheme is customizable */
|
||||
background-color: inherit;
|
||||
background-color: var(--codeblock-background-color);
|
||||
}
|
||||
|
||||
a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias {
|
||||
background-color: #ccc;
|
||||
background-color: var(--pill-background-color);
|
||||
border-radius: 1rem;
|
||||
padding: 0 .25rem;
|
||||
color: inherit;
|
||||
|
|
@ -106,7 +104,7 @@ div.html-body {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #ccc;
|
||||
border-left: 2px solid var(--blockquote-border-color);
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,29 +2,25 @@ div.event-hover-menu {
|
|||
position: absolute;
|
||||
right: .5rem;
|
||||
top: -1.5rem;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
padding: .125rem;
|
||||
|
||||
> button {
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.event-context-menu-extra {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 0 1rem var(--modal-box-shadow-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -32,9 +28,7 @@ div.event-context-menu-extra {
|
|||
> button {
|
||||
border-radius: 0;
|
||||
padding: .5rem .75rem;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
&:first-of-type {
|
||||
|
|
@ -45,7 +39,7 @@ div.event-context-menu-extra {
|
|||
}
|
||||
|
||||
&.redact-button {
|
||||
color: red;
|
||||
color: var(--error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +48,7 @@ div.view-source-modal {
|
|||
max-width: min(80rem, 80vw);
|
||||
max-height: min(80rem, 80vh);
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -62,7 +56,7 @@ div.view-source-modal {
|
|||
div.confirm-message-modal {
|
||||
width: min(40rem, 80vw);
|
||||
max-height: min(40rem, 80vh);
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
|
|
@ -76,7 +70,7 @@ div.confirm-message-modal {
|
|||
> div.timeline-event-container {
|
||||
margin: .5rem 0;
|
||||
padding-left: .5rem;
|
||||
border-left: 2px solid #ccc;
|
||||
border-left: 2px solid var(--border-color);
|
||||
overflow: auto;
|
||||
|
||||
> div.timeline-event {
|
||||
|
|
@ -88,7 +82,7 @@ div.confirm-message-modal {
|
|||
padding: 1rem;
|
||||
outline: none;
|
||||
border-radius: .25rem;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
> div.confirm-buttons {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue