n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: split event content css to another file

Browse source
This commit is contained in:
Tulir Asokan 2024-10-25 00:25:06 +03:00
parent 2dc9954030
commit c52600d0d7
3 changed files with 148 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

147
web/src/ui/timeline/content/index.css Normal file
View file

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

1
web/src/ui/timeline/content/index.ts
View file

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