mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-25 11:16:31 -05:00
5d347d583d
HTML5 provides a wide feature set of useful elements. Since Markdown usually supports HTML it should be able to use these HTML5 tags as well. As they were requested by some users and they where checked for being safe, whitelisting them isn't a problem. To make the experience the same as on GitHub when it comes to the basic look and feel of the rendered markdown, some CSS was added to make the summary and the details tag look like on GitHub. Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
199 lines
3.9 KiB
CSS
199 lines
3.9 KiB
CSS
/* for markdown-body */
|
|
|
|
.markdown-body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
max-width: 758px;
|
|
overflow: visible !important;
|
|
}
|
|
/*fixed style for bootstrap comflict*/
|
|
|
|
.markdown-body pre {
|
|
border: inherit !important;
|
|
}
|
|
|
|
.markdown-body code {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.markdown-body pre code .wrapper {
|
|
display: -webkit-inline-flex;
|
|
display: -moz-inline-flex;
|
|
display: -ms-inline-flex;
|
|
display: -o-inline-flex;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.markdown-body pre code .gutter {
|
|
float: left;
|
|
overflow: hidden;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.markdown-body pre code .gutter.linenumber {
|
|
text-align: right;
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: default;
|
|
z-index: 4;
|
|
padding: 0 8px 0 0;
|
|
min-width: 20px;
|
|
box-sizing: content-box;
|
|
color: #afafaf !important;
|
|
border-right: 3px solid #6ce26c !important;
|
|
}
|
|
|
|
.markdown-body pre code .gutter.linenumber > span:before {
|
|
content: attr(data-linenumber);
|
|
}
|
|
|
|
.markdown-body pre code .code {
|
|
float: left;
|
|
margin: 0 0 0 16px;
|
|
}
|
|
|
|
.markdown-body .gist .line-numbers {
|
|
border-left: none;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.markdown-body .gist .line-data {
|
|
border: none;
|
|
}
|
|
|
|
.markdown-body .gist table {
|
|
border-spacing: 0;
|
|
border-collapse: inherit !important;
|
|
}
|
|
|
|
.night .markdown-body .gist table tr:nth-child(2n){
|
|
|
|
background-color: #ddd;
|
|
|
|
}
|
|
|
|
.markdown-body code[data-gist-id] {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-body code[data-gist-id]:before {
|
|
content: ''
|
|
}
|
|
|
|
.markdown-body code[data-gist-id]:after {
|
|
content: ''
|
|
}
|
|
|
|
.markdown-body code[data-gist-id] .blob-num {
|
|
border: unset;
|
|
}
|
|
|
|
.markdown-body code[data-gist-id] table {
|
|
overflow: unset;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.markdown-body code[data-gist-id] table tr {
|
|
background: unset;
|
|
|
|
}
|
|
|
|
/*fixed style for rtl in pre and code*/
|
|
|
|
.markdown-body[dir='rtl'] pre {
|
|
direction: ltr;
|
|
}
|
|
|
|
.markdown-body[dir='rtl'] code {
|
|
direction: ltr;
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
.markdown-body .alert > p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-body pre.flow-chart,
|
|
.markdown-body pre.sequence-diagram,
|
|
.markdown-body pre.graphviz,
|
|
.markdown-body pre.mermaid,
|
|
.markdown-body pre.abc {
|
|
text-align: center;
|
|
background-color: inherit;
|
|
border-radius: 0;
|
|
white-space: inherit;
|
|
}
|
|
|
|
.night .markdown-body pre.graphviz .graph > polygon{
|
|
fill: #333;
|
|
}
|
|
|
|
.night .markdown-body pre.mermaid .titleText,
|
|
.night .markdown-body pre.mermaid text,
|
|
.night .markdown-body pre.mermaid .sectionTitle{
|
|
fill: white;
|
|
}
|
|
|
|
.markdown-body pre.flow-chart > code,
|
|
.markdown-body pre.sequence-diagram > code,
|
|
.markdown-body pre.graphviz > code,
|
|
.markdown-body pre.mermaid > code,
|
|
.markdown-body pre.abc > code {
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-body pre.flow-chart > svg,
|
|
.markdown-body pre.sequence-diagram > svg,
|
|
.markdown-body pre.graphviz > svg,
|
|
.markdown-body pre.mermaid > svg,
|
|
.markdown-body pre.abc > svg {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.night .markdown-body .abc path{
|
|
fill: #eee;
|
|
}
|
|
|
|
.night .markdown-body .abc path.note_selected{
|
|
fill: ##4DD0E1;
|
|
}
|
|
|
|
.night tspan{
|
|
fill: #fefefe;
|
|
}
|
|
|
|
.night pre rect{
|
|
fill: transparent;
|
|
}
|
|
|
|
.night pre.flow-chart rect,
|
|
.night pre.flow-chart path{
|
|
stroke: white;
|
|
}
|
|
|
|
.markdown-body pre > code.wrap {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
|
|
.markdown-body .alert > p,
|
|
.markdown-body .alert > ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Make details boxes look like on GitHub */
|
|
.markdown-body details summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.markdown-body summary {
|
|
display: list-item;
|
|
}
|