CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-12 21:04:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

markdown: Implement redesigned Markdown code styles.

Browse Source 
Fixes a part of #22022.
This commit is contained in:
Karl Stolley 2023-09-27 16:16:51 -05:00 committed by Tim Abbott
parent f1a5fffae9
commit 2811f2fe0f
2 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/styles/rendered_markdown.css
View File

@ -690,6 +690,8 @@
padding: 0;
white-space: inherit;
overflow-x: scroll;
/* Unset to avoid compounding alpha values */
background-color: unset;
color: inherit;
border: 0;
}
@ -702,7 +704,7 @@
unicode-bidi: embed;
direction: ltr;
white-space: pre-wrap;
padding: 0 4px;
padding: 0 3px;
color: var(--color-markdown-code-text);
background-color: var(--color-markdown-code-background);
border: 1px solid var(--color-markdown-code-border);
@ -740,6 +742,24 @@
}
}
.group_mention,
.direct_mention {
& .rendered_markdown pre {
background-color: var(--color-markdown-pre-background-mentions);
border-color: var(--color-markdown-pre-border-mentions);
}
& .rendered_markdown code {
background-color: var(--color-markdown-code-background-mentions);
border-color: var(--color-markdown-code-border-mentions);
}
& .rendered_markdown pre code {
background-color: unset;
border-color: unset;
}
}
.preview_content .copy_codeblock {
/* We avoid displaying copy_codeblock button in previews, because it
feels odd given that you can just copy-paste the code out of
@ -802,13 +822,9 @@
border: none !important;
background: none !important;
& code,
& pre {
color: var(--color-markdown-pre-text);
background-color: var(--color-markdown-pre-background);
}
& pre {
border: 1px solid var(--color-markdown-pre-border);
}
}

40
web/styles/zulip.css
View File

@ -284,14 +284,22 @@ body {
/* Markdown code colors */
--color-markdown-code-text: hsl(0deg 0% 0%);
--color-markdown-code-background: hsl(0deg 0% 100%);
--color-markdown-code-border: hsl(240deg 13% 90%);
--color-markdown-pre-text: hsl(0deg 0% 20%);
--color-markdown-pre-background: hsl(0deg 0% 100%);
--color-markdown-pre-border: hsl(0deg 0% 0% / 15%);
--color-markdown-code-background: hsl(208deg 5% 95% / 85%);
--color-markdown-code-border: hsl(208deg 10% 70% / 30%);
--color-markdown-code-background-mentions: hsl(0deg 0% 100%);
--color-markdown-code-border-mentions: hsl(208deg 10% 70% / 50%);
--color-markdown-pre-text: var(--color-markdown-code-text);
--color-markdown-pre-background: hsl(208deg 5% 97% / 85%);
--color-markdown-pre-border: var(--color-markdown-code-border);
--color-markdown-pre-background-mentions: var(
--color-markdown-code-background-mentions
);
--color-markdown-pre-border-mentions: var(
--color-markdown-code-border-mentions
);
--color-markdown-link: hsl(200deg 100% 40%);
--color-markdown-link-hover: hsl(200deg 100% 25%);
--color-markdown-code-link: var(--color-markdown-link);
--color-markdown-link-hover: hsl(200deg 100% 25%);
--color-markdown-code-link-hover: var(--color-markdown-link-hover);
/* Icon colors */
@ -581,12 +589,20 @@ body {
/* Markdown code colors */
/* Note that Markdown code-link colors are identical
to light theme, and so are not redeclared here. */
--color-markdown-code-text: var(--color-text-message-default);
--color-markdown-code-background: hsl(212deg 25% 15%);
--color-markdown-code-border: hsl(0deg 0% 0% / 50%);
--color-markdown-pre-text: hsl(212deg 98% 82%);
--color-markdown-pre-background: hsl(212deg 0% 11%);
--color-markdown-pre-border: hsl(0deg 0% 0% / 50%);
--color-markdown-code-text: hsl(0deg 0% 100% / 80%);
--color-markdown-code-background: hsl(0deg 0% 100% / 4%);
--color-markdown-code-border: hsl(0deg 0% 100% / 15%);
--color-markdown-code-background-mentions: var(
--color-markdown-code-background
);
--color-markdown-code-border-mentions: var(--color-markdown-code-border);
--color-markdown-pre-text: var(--color-markdown-code-text);
--color-markdown-pre-background: var(--color-markdown-code-background);
--color-markdown-pre-border: var(--color-markdown-code-border);
--color-markdown-pre-background-mentions: var(
--color-markdown-code-background
);
--color-markdown-pre-border-mentions: var(--color-markdown-code-border);
/* Icon colors */
--color-icon-bot: hsl(180deg 5% 50% / 100%);