From c52600d0d7548db6628f76e29af47c3dcb565203 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 25 Oct 2024 00:25:06 +0300 Subject: [PATCH] web/timeline: split event content css to another file --- web/src/ui/timeline/TimelineEvent.css | 147 -------------------------- web/src/ui/timeline/content/index.css | 147 ++++++++++++++++++++++++++ web/src/ui/timeline/content/index.ts | 1 + 3 files changed, 148 insertions(+), 147 deletions(-) create mode 100644 web/src/ui/timeline/content/index.css diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index f746a90..880cc06 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -179,150 +179,3 @@ div.date-separator { opacity: .2; } } - -div.render-error-body { - font-style: italic; - color: #555; -} - -div.decryption-error-body { - display: flex; - align-items: center; - - > svg { - height: 20px; - color: red; - } -} - -div.redacted-body, div.decryption-pending-body { - display: flex; - align-items: center; - color: #888; - - > svg { - height: 20px; - } -} - -div.member-body { - display: flex; - align-items: center; - gap: .25rem; -} - -div.message-text { - &.plaintext-body { - white-space: pre-wrap; - } - - &.notice-message { - opacity: .6; - } - - &.emote-message::before { - content: "* " attr(data-event-sender) " "; - } -} - -div.html-body { - overflow: hidden; - - pre.chroma { - /* TODO this may need to be undone if the color scheme is customizable */ - background-color: inherit; - } - - a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias { - background-color: #ccc; - border-radius: 1rem; - padding: 0 .25rem; - color: inherit; - text-decoration: none !important; - text-wrap: nowrap; - cursor: default; - - overflow: hidden; - max-width: 15rem; - text-overflow: ellipsis; - /* Required to allow setting max width and hiding overflow */ - display: inline-block; - /* Required to not mess up the rest of the text's vertical alignment when using inline-block */ - vertical-align: bottom; - } - - img.hicli-custom-emoji { - vertical-align: middle; - height: 24px; - width: auto; - max-width: 72px; - } - - img.hicli-sizeless-inline-img { - height: 24px; - width: auto; - max-width: 72px; - } - - span.hicli-spoiler { - filter: blur(4px); - transition: filter .5s; - /*cursor: pointer;*/ - - &.spoiler-revealed { - filter: none; - } - - &:not(.spoiler-revealed) a { - pointer-events: none; - } - } - - blockquote { - border-left: 2px solid #ccc; - padding-left: .5rem; - } - - pre { - width: 100%; - max-height: max(50vh, 400px); - overflow: auto; - } - - h1, h2, h3, h4, h5, h6 { - margin: 0 0 .5rem; - } - - p, ul, ol, dl, table, pre, blockquote { - &:not(:last-child) { - margin: 0 0 .25rem; - } - &:last-child { - margin: 0; - } - } -} - -div.media-container { - &.video-container { - width: 100%; - height: 240px; - } - - > a { - display: flex; - align-items: center; - text-decoration: none; - color: inherit; - } - - > img { - max-width: 100%; - max-height: 100%; - } - > video { - min-width: 320px; - max-width: 100%; - height: 100%; - } -} diff --git a/web/src/ui/timeline/content/index.css b/web/src/ui/timeline/content/index.css new file mode 100644 index 0000000..dd053dd --- /dev/null +++ b/web/src/ui/timeline/content/index.css @@ -0,0 +1,147 @@ + +div.render-error-body { + font-style: italic; + color: #555; +} + +div.decryption-error-body { + display: flex; + align-items: center; + + > svg { + height: 20px; + color: red; + } +} + +div.redacted-body, div.decryption-pending-body { + display: flex; + align-items: center; + color: #888; + + > svg { + height: 20px; + } +} + +div.member-body { + display: flex; + align-items: center; + gap: .25rem; +} + +div.message-text { + &.plaintext-body { + white-space: pre-wrap; + } + + &.notice-message { + opacity: .6; + } + + &.emote-message::before { + content: "* " attr(data-event-sender) " "; + } +} + +div.html-body { + overflow: hidden; + + pre.chroma { + /* TODO this may need to be undone if the color scheme is customizable */ + background-color: inherit; + } + + a.hicli-matrix-uri-user, a.hicli-matrix-uri-room-alias { + background-color: #ccc; + border-radius: 1rem; + padding: 0 .25rem; + color: inherit; + text-decoration: none !important; + text-wrap: nowrap; + cursor: default; + + overflow: hidden; + max-width: 15rem; + text-overflow: ellipsis; + /* Required to allow setting max width and hiding overflow */ + display: inline-block; + /* Required to not mess up the rest of the text's vertical alignment when using inline-block */ + vertical-align: bottom; + } + + img.hicli-custom-emoji { + vertical-align: middle; + height: 24px; + width: auto; + max-width: 72px; + } + + img.hicli-sizeless-inline-img { + height: 24px; + width: auto; + max-width: 72px; + } + + span.hicli-spoiler { + filter: blur(4px); + transition: filter .5s; + /*cursor: pointer;*/ + + &.spoiler-revealed { + filter: none; + } + + &:not(.spoiler-revealed) a { + pointer-events: none; + } + } + + blockquote { + border-left: 2px solid #ccc; + padding-left: .5rem; + } + + pre { + width: 100%; + max-height: max(50vh, 400px); + overflow: auto; + } + + h1, h2, h3, h4, h5, h6 { + margin: 0 0 .5rem; + } + + p, ul, ol, dl, table, pre, blockquote { + &:not(:last-child) { + margin: 0 0 .25rem; + } + &:last-child { + margin: 0; + } + } +} + +div.media-container { + &.video-container { + width: 100%; + height: 240px; + } + + > a { + display: flex; + align-items: center; + text-decoration: none; + color: inherit; + } + + > img { + max-width: 100%; + max-height: 100%; + } + > video { + min-width: 320px; + max-width: 100%; + height: 100%; + } +} diff --git a/web/src/ui/timeline/content/index.ts b/web/src/ui/timeline/content/index.ts index 1f562da..ecbf68c 100644 --- a/web/src/ui/timeline/content/index.ts +++ b/web/src/ui/timeline/content/index.ts @@ -8,6 +8,7 @@ import RedactedBody from "./RedactedBody.tsx" import TextMessageBody from "./TextMessageBody.tsx" import UnknownMessageBody from "./UnknownMessageBody.tsx" import EventContentProps from "./props.ts" +import "./index.css" export { default as ContentErrorBoundary } from "./ContentErrorBoundary.tsx" export { default as EncryptedBody } from "./EncryptedBody.tsx"