Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Tim Abbott 2019-07-31 11:37:06 -07:00
parent 7a6f4630dc
commit 97b256d1f0
4 changed files with 471 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/js/bundles/app.js
View File

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

469
static/styles/rendered_markdown.scss Normal file
View File

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

463
static/styles/zulip.scss
View File

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

1
tools/webpack.assets.json
View File

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