From 97b256d1f0ea468ffbdfefce0fcbc84ae6d532b8 Mon Sep 17 00:00:00 2001 From: Tim Abbott Date: Wed, 31 Jul 2019 11:37:06 -0700 Subject: [PATCH] css: Extract rendered_markdown.scss. This moves our main CSS for rendered Zulip message content into an external file, which may be reusable but in any case should make it easier to find this content. --- static/js/bundles/app.js | 1 + static/styles/rendered_markdown.scss | 469 +++++++++++++++++++++++++++ static/styles/zulip.scss | 463 -------------------------- tools/webpack.assets.json | 1 + 4 files changed, 471 insertions(+), 463 deletions(-) create mode 100644 static/styles/rendered_markdown.scss diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index b58b1519b6..4cc846b10d 100644 --- a/static/js/bundles/app.js +++ b/static/js/bundles/app.js @@ -209,6 +209,7 @@ import "flatpickr/dist/flatpickr.css"; import "flatpickr/dist/plugins/confirmDate/confirmDate.css"; import "../../styles/components.scss"; import "../../styles/app_components.scss"; +import "../../styles/rendered_markdown.scss"; import "../../styles/zulip.scss"; import "../../styles/alerts.scss"; import "../../styles/settings.scss"; diff --git a/static/styles/rendered_markdown.scss b/static/styles/rendered_markdown.scss new file mode 100644 index 0000000000..21d493951f --- /dev/null +++ b/static/styles/rendered_markdown.scss @@ -0,0 +1,469 @@ +.rendered_markdown { + /* The default top/bottom margins for paragraphs are small, to make sure + they look nice next to blockquotes, lists, etc. */ + p { + margin: 3px 0px 3px 0px; + } + + /* The spacing between two paragraphs is significantly larger. We + arrange things so that this spacing matches the spacing between + paragraphs in two consecutive 1-line messages. */ + p + p { + margin-top: 10px; + } + + /* Ensure bulleted lists are nicely centered in 1-line messages */ + ul { + margin: 2px 0 5px 20px; + } + + /* Swap the left and right margins of bullets for Right-To-Left languages */ + &.rtl ul { + margin-right: 20px; + margin-left: 0; + } + + /* Ensure ordered lists are nicely centered in 1-line messages */ + ol { + margin: 2px 0 5px 6px; + } + + /* Swap the left and right margins of ordered list for Right-To-Left languages */ + &.rtl ol { + margin-right: 8px; + margin-left: 0; + } + + /* Reduce top-margin when a paragraph is followed by an ordered or bulleted list */ + p + ul, + p + ol { + margin-top: -3px; + } + + /* Formatting for blockquotes */ + blockquote { + padding-left: 5px; + margin-left: 10px; + margin-top: 5px; + margin-bottom: 6px; + border-left-color: hsl(0, 0%, 87%); + + p { + line-height: inherit; + font-size: inherit; + } + } + + &.rtl blockquote { + padding-left: unset; + padding-right: 5px; + margin-left: unset; + margin-right: 10px; + border-left: unset; + border-right: 5px solid hsl(0, 0%, 87%); + } + + /* Formatting for markdown tables */ + table { + padding-right: 10px; + margin: 5px 5px 5px 5px; + width: 99%; + } + + thead { + background-color: hsl(0, 0%, 93%); + } + + tr { + display: table-row; + vertical-align: inherit; + } + + tr th { + border: 1px solid hsl(0, 0%, 80%); + padding: 4px; + text-align: left; + } + + tr td { + border: 1px solid hsl(0, 0%, 80%); + padding: 4px; + } + + /* CSS for message content widgets */ + table.tictactoe { + width: 80px; + margin-left: 0px; + } + + td.tictactoe { + width: 15px; + border: none; + padding: 2px; + } + + button.tictactoe-square { + background-color: hsl(156, 30%, 62%); + width: 40px; + height: 40px; + border: none; + border-radius: 3px; + font-size: 25px; + color: hsl(0, 0%, 100%); + } + + button.tictactoe-square:hover { + background-color: hsl(155, 5%, 53%); + } + + button.tictactoe-square:disabled { + background-color: hsl(156, 33%, 81%); + } + + /* embedded link previews */ + .message_embed { + display: block; + position: relative; + margin: 5px 0px; + border: none; + border-left: 3px solid hsl(0, 0%, 93%); + height: 80px; + padding: 5px; + z-index: 1; + text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px; + + .message_embed_title { + padding-top: 0px; + /* to remove the spacing that the font has from the top of the container. */ + margin-top: -5px; + + font-size: 1.2em; + line-height: normal; + } + + .message_embed_description { + position: relative; + max-width: 500px; + margin-top: 3px; + + /* to put it below the container gradient. */ + z-index: -1; + } + + .message_embed_image { + display: inline-block; + width: 70px; + height: 70px; + background-size: cover; + background-position: center; + } + + .data-container { + position: relative; + padding: 0px 5px; + display: inline-block; + vertical-align: top; + max-width: calc(100% - 115px); + max-height: 80px; + overflow: hidden; + } + + .data-container div { + display: block; + border: none; + } + + .data-container::after { + content: " "; + position: absolute; + width: 100%; + height: 10%; + bottom: 0; + + background: linear-gradient(0deg, hsl(0, 0%, 100%), transparent 100%); + } + } + + &.rtl .message_embed { + border-left: unset; + border-right: 3px solid hsl(0, 0%, 93%); + } + + .message_embed > * { + display: inherit; + padding: 5px; + border: none; + } +} + +@media (max-width: 600px) { + .rendered_markdown .message_embed { + height: auto; + + .message_embed_image { + width: 100%; + height: 100px; + } + + .data-container { + display: block; + max-width: 100%; + margin-top: 10px; + } + } +} + +/* Inline and block code. + +TODO: It is likely that this CSS can and should be moved into the +rendered_markdown block; we just need to do further analysis to +confirm doing so won't break anything. */ + +code { + /* 12/14 em, so bootstrap's default 12 px, + when body is the default 14 px */ + font-size: 0.857em; + unicode-bidi: embed; + direction: ltr; +} + +.rendered_markdown code { + white-space: pre-wrap; + padding: 0px 4px; + background-color: hsl(0, 0%, 100%); +} + +.codehilite { + display: block !important; + border: none !important; + background: none !important; +} + +pre { + direction: ltr; + /* code block text is a bit smaller than normal text */ + font-size: 0.8em; + line-height: 1.4; + white-space: pre; + overflow-x: auto; + word-wrap: normal; + /* Bootstrap's default here is top: 0px, bottom: 10px */ + margin-top: 5px; + margin-bottom: 5px; + /* Bootstrap's default here is 9.5 on all sides */ + padding-top: 5px; + padding-bottom: 3px; + padding-left: 7px; + padding-right: 7px; +} + +/* Ensure the horizontal scrollbar is visible on Mac */ +pre::-webkit-scrollbar { + height: 8px; + + background-color: hsla(0, 0%, 0%, 0.05); +} + +pre::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 0%, 0.3); + border-radius: 20px; + + transition: all 0.2s ease; +} + +pre::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 0%, 0.6); +} + +pre code { + overflow-x: scroll; + white-space: pre; +} + +/* Style inline code inside a link + to look more like a normal link */ +a code { + color: hsl(200, 100%, 40%); + border-color: hsl(200, 100%, 40%); +} + +a:hover code { + color: hsl(200, 100%, 25%); + border-color: hsl(200, 100%, 25%); +} + +/* embeds and related styling + +TODO: This should likely also be put inside .rendered_content */ + +.twitter-image, +.message_inline_image { + position: relative; + margin-bottom: 5px; + margin-left: 5px; + height: 100px; + display: block !important; + border: none !important; +} + +.rtl .twitter-image, +.rtl .message_inline_image { + margin-left: unset; + margin-right: 5px; +} + +.twitter-tweet { + border: 1px solid hsl(0, 0%, 87%); + padding: .5em .75em; + margin-bottom: 0.25em; + word-break: break-word; + min-height: 48px; +} + +.twitter-avatar { + float: left; + width: 48px; + height: 48px; + margin-right: .75em; +} + +.highlight { + background-color: hsl(51, 94%, 74%); +} + +.highlight_text_inserted { + color: hsl(122, 72%, 30%); + background-color: hsl(120, 64%, 95%); +} + +.highlight_text_deleted { + color: hsl(0, 0%, 73%); + text-decoration: line-through; + background-color: hsl(7, 90%, 92%); + word-break: break-all; +} + +#message-edit-history .message_inline_image { + height: auto; + overflow-y: auto; + overflow-x: hidden; + text-overflow: ellipsis; + margin: 0px; +} + +.message_inline_ref { + margin-bottom: 5px; + margin-left: 5px; + height: 50px; + display: block !important; + border: none !important; +} + +.rtl .message_inline_ref { + margin-left: unset; + margin-right: 5px; +} + +.twitter-image img, +.message_inline_image img, +.message_inline_ref img { + height: auto; + max-height: 100%; + float: left; + margin-right: 10px; +} + +.message_inline_image img { + cursor: zoom-in; +} + +.youtube-video img, +.vimeo-video img, +.embed-video img { + cursor: pointer; +} + +.rtl .twitter-image img, +.rtl .message_inline_image img, +.rtl .message_inline_ref img { + float: right; + margin-right: unset; + margin-left: 10px; +} + +#message-edit-history .message_inline_image img { + max-height: 100px; +} + +li .message_inline_image img { + float: none; +} + +.youtube-video .fa-play::before, +.embed-video .fa-play::before { + position: absolute; + margin: var(--margin-top, 32px) 0 0 var(--margin-left, 45px); + padding: 5px 8px 5px 10px; + font-size: 12px; + border-radius: 4px; + background-color: hsl(0, 0%, 0%); + color: hsl(0, 0%, 100%); + opacity: 0.7; + top: 0; + left: 0; +} + +.message_inline_image_title { + font-weight: bold; +} + +.katex-html { + line-height: initial; + white-space: initial; +} + +.katex-display .katex-html { + line-height: 3em; +} + +.katex-display { + margin: 0em 0; +} + +.tex-error { + color: hsl(0, 0%, 50%); +} + +.message_body_gravatar { + width: 20px; + height: 20px; + margin: 2px 2px 2px 0px; + vertical-align: text-bottom; +} + +.user-group-mention, +.user-mention { + background-color: hsl(0, 0%, 93%); + border-radius: 3px; + padding: 0 0.2em; + box-shadow: 0px 0px 0px 1px hsl(0, 0%, 80%); + margin-right: 2px; + margin-left: 2px; + white-space: nowrap; + background: -moz-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 0%, 0.1)), color-stop(100%, hsla(0, 0%, 0%, 0.0))); + background: -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); + background: -o-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); + background: -ms-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); + background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); + display: inline-block; + margin-bottom: 1px; +} + +.user-mention-me :not(.silent) { + background-color: hsl(112, 88%, 87%); +} + +.alert-word { + background-color: hsla(102, 85%, 57%, 0.5); +} diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index 23787cd56d..aa6288b9be 100644 --- a/static/styles/zulip.scss +++ b/static/styles/zulip.scss @@ -1367,297 +1367,6 @@ div.focused_table { text-decoration: underline; } -/* Inline and block code */ - -code { - /* 12/14 em, so bootstrap's default 12 px, - when body is the default 14 px */ - font-size: 0.857em; - unicode-bidi: embed; - direction: ltr; -} - -.rendered_markdown code { - white-space: pre-wrap; - padding: 0px 4px; - background-color: hsl(0, 0%, 100%); -} - -.codehilite { - display: block !important; - border: none !important; - background: none !important; -} - -pre { - direction: ltr; - /* code block text is a bit smaller than normal text */ - font-size: 0.8em; - line-height: 1.4; - white-space: pre; - overflow-x: auto; - word-wrap: normal; - /* Bootstrap's default here is top: 0px, bottom: 10px */ - margin-top: 5px; - margin-bottom: 5px; - /* Bootstrap's default here is 9.5 on all sides */ - padding-top: 5px; - padding-bottom: 3px; - padding-left: 7px; - padding-right: 7px; -} - -/* Ensure the horizontal scrollbar is visible on Mac */ -pre::-webkit-scrollbar { - height: 8px; - - background-color: hsla(0, 0%, 0%, 0.05); -} - -pre::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 0%, 0.3); - border-radius: 20px; - - transition: all 0.2s ease; -} - -pre::-webkit-scrollbar-thumb:hover { - background-color: hsla(0, 0%, 0%, 0.6); -} - -pre code { - overflow-x: scroll; - white-space: pre; -} - -/* Style inline code inside a link - to look more like a normal link */ -a code { - color: hsl(200, 100%, 40%); - border-color: hsl(200, 100%, 40%); -} - -a:hover code { - color: hsl(200, 100%, 25%); - border-color: hsl(200, 100%, 25%); -} - -.rendered_markdown { - /* The default top/bottom margins for paragraphs are small, to make sure - they look nice next to blockquotes, lists, etc. */ - p { - margin: 3px 0px 3px 0px; - } - - /* The spacing between two paragraphs is significantly larger. We - arrange things so that this spacing matches the spacing between - paragraphs in two consecutive 1-line messages. */ - p + p { - margin-top: 10px; - } - - /* Ensure bulleted lists are nicely centered in 1-line messages */ - ul { - margin: 2px 0 5px 20px; - } - - /* Swap the left and right margins of bullets for Right-To-Left languages */ - &.rtl ul { - margin-right: 20px; - margin-left: 0; - } - - /* Ensure ordered lists are nicely centered in 1-line messages */ - ol { - margin: 2px 0 5px 6px; - } - - /* Swap the left and right margins of ordered list for Right-To-Left languages */ - &.rtl ol { - margin-right: 8px; - margin-left: 0; - } - - /* Reduce top-margin when a paragraph is followed by an ordered or bulleted list */ - p + ul, - p + ol { - margin-top: -3px; - } - - /* Formatting for blockquotes */ - blockquote { - padding-left: 5px; - margin-left: 10px; - margin-top: 5px; - margin-bottom: 6px; - border-left-color: hsl(0, 0%, 87%); - - p { - line-height: inherit; - font-size: inherit; - } - } - - &.rtl blockquote { - padding-left: unset; - padding-right: 5px; - margin-left: unset; - margin-right: 10px; - border-left: unset; - border-right: 5px solid hsl(0, 0%, 87%); - } - - /* Formatting for markdown tables */ - table { - padding-right: 10px; - margin: 5px 5px 5px 5px; - width: 99%; - } - - thead { - background-color: hsl(0, 0%, 93%); - } - - tr { - display: table-row; - vertical-align: inherit; - } - - tr th { - border: 1px solid hsl(0, 0%, 80%); - padding: 4px; - text-align: left; - } - - tr td { - border: 1px solid hsl(0, 0%, 80%); - padding: 4px; - } - - /* CSS for message content widgets */ - table.tictactoe { - width: 80px; - margin-left: 0px; - } - - td.tictactoe { - width: 15px; - border: none; - padding: 2px; - } - - button.tictactoe-square { - background-color: hsl(156, 30%, 62%); - width: 40px; - height: 40px; - border: none; - border-radius: 3px; - font-size: 25px; - color: hsl(0, 0%, 100%); - } - - button.tictactoe-square:hover { - background-color: hsl(155, 5%, 53%); - } - - button.tictactoe-square:disabled { - background-color: hsl(156, 33%, 81%); - } - - /* embedded link previews */ - .message_embed { - display: block; - position: relative; - margin: 5px 0px; - border: none; - border-left: 3px solid hsl(0, 0%, 93%); - height: 80px; - padding: 5px; - z-index: 1; - text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px; - - .message_embed_title { - padding-top: 0px; - /* to remove the spacing that the font has from the top of the container. */ - margin-top: -5px; - - font-size: 1.2em; - line-height: normal; - } - - .message_embed_description { - position: relative; - max-width: 500px; - margin-top: 3px; - - /* to put it below the container gradient. */ - z-index: -1; - } - - .message_embed_image { - display: inline-block; - width: 70px; - height: 70px; - background-size: cover; - background-position: center; - } - - .data-container { - position: relative; - padding: 0px 5px; - display: inline-block; - vertical-align: top; - max-width: calc(100% - 115px); - max-height: 80px; - overflow: hidden; - } - - .data-container div { - display: block; - border: none; - } - - .data-container::after { - content: " "; - position: absolute; - width: 100%; - height: 10%; - bottom: 0; - - background: linear-gradient(0deg, hsl(0, 0%, 100%), transparent 100%); - } - } - - &.rtl .message_embed { - border-left: unset; - border-right: 3px solid hsl(0, 0%, 93%); - } - - .message_embed > * { - display: inherit; - padding: 5px; - border: none; - } -} - -@media (max-width: 600px) { - .rendered_markdown .message_embed { - height: auto; - - .message_embed_image { - width: 100%; - height: 100px; - } - - .data-container { - display: block; - max-width: 100%; - margin-top: 10px; - } - } -} - - /* CSS for the message box */ .messagebox { word-wrap: break-word; @@ -2323,129 +2032,6 @@ div.floating_recipient { display: inline !important; } -.twitter-image, -.message_inline_image { - position: relative; - margin-bottom: 5px; - margin-left: 5px; - height: 100px; - display: block !important; - border: none !important; -} - -.rtl .twitter-image, -.rtl .message_inline_image { - margin-left: unset; - margin-right: 5px; -} - -.highlight { - background-color: hsl(51, 94%, 74%); -} - -.highlight_text_inserted { - color: hsl(122, 72%, 30%); - background-color: hsl(120, 64%, 95%); -} - -.highlight_text_deleted { - color: hsl(0, 0%, 73%); - text-decoration: line-through; - background-color: hsl(7, 90%, 92%); - word-break: break-all; -} - -#message-edit-history .message_inline_image { - height: auto; - overflow-y: auto; - overflow-x: hidden; - text-overflow: ellipsis; - margin: 0px; -} - -.message_inline_ref { - margin-bottom: 5px; - margin-left: 5px; - height: 50px; - display: block !important; - border: none !important; -} - -.rtl .message_inline_ref { - margin-left: unset; - margin-right: 5px; -} - -.twitter-image img, -.message_inline_image img, -.message_inline_ref img { - height: auto; - max-height: 100%; - float: left; - margin-right: 10px; -} - -.message_inline_image img { - cursor: zoom-in; -} - -.youtube-video img, -.vimeo-video img, -.embed-video img { - cursor: pointer; -} - -.rtl .twitter-image img, -.rtl .message_inline_image img, -.rtl .message_inline_ref img { - float: right; - margin-right: unset; - margin-left: 10px; -} - -#message-edit-history .message_inline_image img { - max-height: 100px; -} - -li .message_inline_image img { - float: none; -} - -.youtube-video .fa-play::before, -.embed-video .fa-play::before { - position: absolute; - margin: var(--margin-top, 32px) 0 0 var(--margin-left, 45px); - padding: 5px 8px 5px 10px; - font-size: 12px; - border-radius: 4px; - background-color: hsl(0, 0%, 0%); - color: hsl(0, 0%, 100%); - opacity: 0.7; - top: 0; - left: 0; -} - -.message_inline_image_title { - font-weight: bold; -} - -.katex-html { - line-height: initial; - white-space: initial; -} - -.katex-display .katex-html { - line-height: 3em; -} - -.katex-display { - margin: 0em 0; -} - -.tex-error { - color: hsl(0, 0%, 50%); -} - .operator_value { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: hsl(353, 70%, 65%); @@ -2728,21 +2314,6 @@ div.topic_edit_spinner .loading_indicator_spinner { top: 3px; } -.twitter-tweet { - border: 1px solid hsl(0, 0%, 87%); - padding: .5em .75em; - margin-bottom: 0.25em; - word-break: break-word; - min-height: 48px; -} - -.twitter-avatar { - float: left; - width: 48px; - height: 48px; - margin-right: .75em; -} - /* FIXME: Combine this rule with the one in portico.css somehow? */ #pw_strength { width: 100%; @@ -2877,40 +2448,6 @@ div.topic_edit_spinner .loading_indicator_spinner { margin-left: -15px; } -.message_body_gravatar { - width: 20px; - height: 20px; - margin: 2px 2px 2px 0px; - vertical-align: text-bottom; -} - -.user-group-mention, -.user-mention { - background-color: hsl(0, 0%, 93%); - border-radius: 3px; - padding: 0 0.2em; - box-shadow: 0px 0px 0px 1px hsl(0, 0%, 80%); - margin-right: 2px; - margin-left: 2px; - white-space: nowrap; - background: -moz-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 0%, 0.1)), color-stop(100%, hsla(0, 0%, 0%, 0.0))); - background: -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); - background: -o-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); - background: -ms-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); - background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); - display: inline-block; - margin-bottom: 1px; -} - -.user-mention-me :not(.silent) { - background-color: hsl(112, 88%, 87%); -} - -.alert-word { - background-color: hsla(102, 85%, 57%, 0.5); -} - #home { margin-top: 41px; } diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json index 7627fd3a9e..30894a5e3a 100644 --- a/tools/webpack.assets.json +++ b/tools/webpack.assets.json @@ -85,6 +85,7 @@ "app": "./static/js/bundles/app.js", "archive-styles": [ "katex/dist/katex.css", + "./static/styles/rendered_markdown.scss", "./static/styles/zulip.scss", "./static/styles/media.scss", "./static/styles/portico/archive.scss"