diff options
author | 6543 <6543@obermui.de> | 2021-05-07 10:43:41 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-07 10:43:41 +0200 |
commit | 640066840e23367d9d13e92d786b877448ae9329 (patch) | |
tree | e419f42d40a904b0b16302f3710914902f5366c0 | |
parent | 9b5185d3cc0bd63d7387655bedaeea6340695d95 (diff) | |
download | gitea-640066840e23367d9d13e92d786b877448ae9329.tar.gz gitea-640066840e23367d9d13e92d786b877448ae9329.zip |
Use a generic markup class to display externally rendered files and diffs (#15735)
* creates and implements generic markup less class
* How to give custom CSS to externally rendered html
* Clarifies sources of CSS styling of markup
* further clarification of sources of markup styling
* rename _markdown to _markup
* remove defunct import
* fix orphaned reference
* Update docs/content/doc/advanced/external-renderers.en-us.md
* more renames markdown -> markup
* do not suggest less customization
* add back tokens
* fix class whitespace, remove useless if-clause
* remove unused csv-data rules
* use named exports and rename functions
* sort imports
Co-authored-by: HarvsG <11440490+HarvsG@users.noreply.github.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
30 files changed, 104 insertions, 71 deletions
diff --git a/docs/content/doc/advanced/external-renderers.en-us.md b/docs/content/doc/advanced/external-renderers.en-us.md index 6b283ca2e1..71fabc529d 100644 --- a/docs/content/doc/advanced/external-renderers.en-us.md +++ b/docs/content/doc/advanced/external-renderers.en-us.md @@ -98,3 +98,36 @@ Once your configuration changes have been made, restart Gitea to have changes ta **Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however, there were significant problems with this method of configuration necessitating configuration through multiple sections. + +## Customizing CSS +The external renderer is specified in the .ini in the format `[markup.XXXXX]` and the HTML supplied by your external renderer will be wrapped in a `<div>` with classes `markup` and `XXXXX`. The `markup` class provides out of the box styling (as does `markdown` if `XXXXX` is `markdown`). Otherwise you can use these classes to specifically target the contents of your rendered HTML. + +And so you could write some CSS: +```css +.markup.XXXXX html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +.markup.XXXXX body { + color: #444; + font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; + font-size: 12px; + line-height: 1.7; + padding: 1em; + margin: auto; + max-width: 42em; + background: #fefefe; +} + +.markup.XXXXX p { + color: orangered; +} +``` + +Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`: +```html +<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" /> +``` diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl index 9b77ae6b3f..5e0a53aa56 100644 --- a/templates/org/home.tmpl +++ b/templates/org/home.tmpl @@ -11,7 +11,7 @@ </span> {{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}} </div> - {{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}} + {{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}} <div class="text grey meta"> {{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}} {{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 9a2f7bdd7f..582b66d5db 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -164,7 +164,7 @@ <div class="ui bottom attached active write tab segment"> <textarea class="review-textarea" tabindex="1" name="content"></textarea> </div> - <div class="ui bottom attached tab preview segment markdown"> + <div class="ui bottom attached tab preview segment markup"> {{$.i18n.Tr "loading"}} </div> <div class="text right edit buttons"> diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index c82d32c214..628cd52dc2 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -22,12 +22,12 @@ <div class="ui active tab" data-tab="write"> <textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea> </div> - <div class="ui tab markdown" data-tab="preview"> + <div class="ui tab markup" data-tab="preview"> {{.i18n.Tr "loading"}} </div> </div> <div class="field footer"> - <span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span> + <span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span> <div class="ui right"> {{if $.reply}} <button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button> diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index b566ffce9a..6e39fbe854 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -51,7 +51,7 @@ </div> </div> <div class="ui attached segment comment-body"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 3efde70f50..b7e1589aa1 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -44,7 +44,7 @@ {{.FileContent}}</textarea> <div class="editor-loading is-loading"></div> </div> - <div class="ui bottom attached tab segment markdown" data-tab="preview"> + <div class="ui bottom attached tab segment markup" data-tab="preview"> {{.i18n.Tr "loading"}} </div> <div class="ui bottom attached tab segment diff edit-diff" data-tab="diff"> diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl index 7dae7c0121..21c6005456 100644 --- a/templates/repo/empty.tmpl +++ b/templates/repo/empty.tmpl @@ -27,7 +27,7 @@ <div class="item"> <h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3> - <div class="markdown"> + <div class="markup"> <pre><code>touch README.md git init {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}} @@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre> <div class="item"> <h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3> - <div class="markdown"> + <div class="markup"> <pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span> git push -u origin {{.Repository.DefaultBranch}}</code></pre> </div> diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl index ab874bdd13..77e82930dc 100644 --- a/templates/repo/issue/comment_tab.tmpl +++ b/templates/repo/issue/comment_tab.tmpl @@ -8,7 +8,7 @@ {{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}} </textarea> </div> - <div class="ui bottom tab markdown" data-tab="preview"> + <div class="ui bottom tab markup" data-tab="preview"> {{.i18n.Tr "loading"}} </div> </div> diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl index 8c2f36f04b..897d297d37 100644 --- a/templates/repo/issue/milestone_issues.tmpl +++ b/templates/repo/issue/milestone_issues.tmpl @@ -5,7 +5,7 @@ <div class="ui three column stackable grid"> <div class="column"> <h1>{{.Milestone.Name}}</h1> - <div class="markdown content"> + <div class="markup content"> {{.Milestone.RenderedContent|Str2html}} </div> </div> diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl index c7d3522abc..448d758e3e 100644 --- a/templates/repo/issue/milestones.tmpl +++ b/templates/repo/issue/milestones.tmpl @@ -98,7 +98,7 @@ </div> {{end}} {{if .Content}} - <div class="markdown content"> + <div class="markup content"> {{.RenderedContent|Str2html}} </div> {{end}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 0482604b70..e353d71ee9 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -57,7 +57,7 @@ </div> </div> <div class="ui attached segment comment-body"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .Issue.RenderedContent}} {{.Issue.RenderedContent|Str2html}} {{else}} @@ -191,7 +191,7 @@ <div class="ui bottom active tab write"> <textarea tabindex="1" name="content"></textarea> </div> - <div class="ui bottom tab preview markdown"> + <div class="ui bottom tab preview markup"> {{$.i18n.Tr "loading"}} </div> </div> diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 81f0d0434a..4863f7f2f1 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -64,7 +64,7 @@ </div> </div> <div class="ui attached segment comment-body"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -442,7 +442,7 @@ </span> </div> <div class="ui attached segment comment-body"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -552,7 +552,7 @@ </div> </div> <div class="text comment-content"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} @@ -739,7 +739,7 @@ </span> </div> <div class="ui attached segment"> - <div class="render-content markdown"> + <div class="render-content markup"> {{if .RenderedContent}} {{.RenderedContent|Str2html}} {{else}} diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 63f9e26cf1..d98e441644 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -136,7 +136,7 @@ | <span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span> {{end}} </p> - <div class="markdown desc"> + <div class="markup desc"> {{Str2html .Note}} </div> <div class="ui accordion download"> diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl index 8489d89597..c4b36597c6 100644 --- a/templates/repo/release/new.tmpl +++ b/templates/repo/release/new.tmpl @@ -53,7 +53,7 @@ <div class="ui bottom active tab" data-tab="write"> <textarea name="content">{{.content}}</textarea> </div> - <div class="ui bottom tab markdown" data-tab="preview"> + <div class="ui bottom tab markup" data-tab="preview"> {{$.i18n.Tr "loading"}} </div> </div> diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl index 09eeb3f27f..478c034e11 100644 --- a/templates/repo/settings/lfs_file.tmpl +++ b/templates/repo/settings/lfs_file.tmpl @@ -12,7 +12,7 @@ </div> </h4> <div class="ui attached table unstackable segment"> - <div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}"> + <div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextFile}} code-view{{end}}"> {{if .IsMarkup}} {{if .FileContent}}{{.FileContent | Safe}}{{end}} {{else if .IsRenderedHTML}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index d9c1e93eaf..5798ec875c 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -64,7 +64,7 @@ {{end}} </h4> <div class="ui attached table unstackable segment"> - <div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}"> + <div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextSource}} code-view{{end}}"> {{if .IsMarkup}} {{if .FileContent}}{{.FileContent | Safe}}{{end}} {{else if .IsRenderedHTML}} diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index 0bc5858863..fbb97db4ad 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -61,7 +61,7 @@ </div> {{end}} <div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;"> - <div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown"> + <div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup"> {{.content | Str2html}} </div> {{if .sidebarPresent}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 18f3c9f6dd..29da933493 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -36,7 +36,7 @@ {{end}} {{if $.RenderedDescription}} <li> - <div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div> + <div class="render-content markup">{{$.RenderedDescription|Str2html}}</div> </li> {{end}} {{range .OpenIDs}} diff --git a/web_src/js/index.js b/web_src/js/index.js index 2fce21b8d3..53843a6d22 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -4,26 +4,26 @@ import Vue from 'vue'; import {htmlEscape} from 'escape-goat'; import 'jquery.are-you-sure'; -import initMigration from './features/migration.js'; +import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; +import attachTribute from './features/tribute.js'; +import createColorPicker from './features/colorpicker.js'; +import createDropzone from './features/dropzone.js'; +import initClipboard from './features/clipboard.js'; import initContextPopups from './features/contextpopup.js'; import initGitGraph from './features/gitgraph.js'; -import initClipboard from './features/clipboard.js'; import initHeatmap from './features/heatmap.js'; +import initImageDiff from './features/imagediff.js'; +import initMigration from './features/migration.js'; import initProject from './features/projects.js'; import initServiceWorker from './features/serviceworker.js'; -import initMarkdownAnchors from './markdown/anchors.js'; -import renderMarkdownContent from './markdown/content.js'; -import attachTribute from './features/tribute.js'; -import createColorPicker from './features/colorpicker.js'; -import createDropzone from './features/dropzone.js'; import initTableSort from './features/tablesort.js'; -import initImageDiff from './features/imagediff.js'; -import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; +import {createCodeEditor, createMonaco} from './features/codeeditor.js'; +import {initMarkupAnchors} from './markup/anchors.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initStopwatch} from './features/stopwatch.js'; -import {createCodeEditor, createMonaco} from './features/codeeditor.js'; -import {svg, svgs} from './svg.js'; +import {renderMarkupContent} from './markup/content.js'; import {stripTags, mqBinarySearch} from './utils.js'; +import {svg, svgs} from './svg.js'; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; @@ -51,7 +51,7 @@ function initCommentPreviewTab($form) { }, (data) => { const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); $previewPanel.html(data); - renderMarkdownContent(); + renderMarkupContent(); }); }); @@ -81,7 +81,7 @@ function initEditPreviewTab($form) { }, (data) => { const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); $previewPanel.html(data); - renderMarkdownContent(); + renderMarkupContent(); }); }); } @@ -1107,7 +1107,7 @@ async function initRepository() { dz.emit('submit'); dz.emit('reload'); } - renderMarkdownContent(); + renderMarkupContent(); }); }); } else { @@ -1473,8 +1473,8 @@ function initWikiForm() { text: plainText, wiki: true }, (data) => { - preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; - renderMarkdownContent(); + preview.innerHTML = `<div class="markup ui segment">${data}</div>`; + renderMarkupContent(); }); }; @@ -1553,7 +1553,7 @@ function initWikiForm() { const $form = $('.repository.wiki.new .ui.form'); const $root = $form.find('.field.content'); const loading = $root.data('loading'); - $root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`); + $root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`); initCommentPreviewTab($form); }, className: 'fa fa-file', @@ -2772,7 +2772,7 @@ $(document).ready(async () => { searchTeams(); searchRepositories(); - initMarkdownAnchors(); + initMarkupAnchors(); initCommentForm(); initInstall(); initArchiveLinks(); @@ -2830,7 +2830,7 @@ $(document).ready(async () => { initServiceWorker(), initNotificationCount(), initStopwatch(), - renderMarkdownContent(), + renderMarkupContent(), initGithook(), initImageDiff(), ]); diff --git a/web_src/js/markdown/anchors.js b/web_src/js/markup/anchors.js index 62bf8c83c3..cc2ed5db78 100644 --- a/web_src/js/markdown/anchors.js +++ b/web_src/js/markup/anchors.js @@ -1,6 +1,6 @@ import {svg} from '../svg.js'; -const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6'; +const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6'; function scrollToAnchor() { if (document.querySelector(':target')) return; @@ -15,8 +15,8 @@ function scrollToAnchor() { } } -export default function initMarkdownAnchors() { - if (!document.querySelector('.markdown')) return; +export function initMarkupAnchors() { + if (!document.querySelector('.markup')) return; for (const heading of document.querySelectorAll(headingSelector)) { const originalId = heading.id.replace(/^user-content-/, ''); diff --git a/web_src/js/markdown/content.js b/web_src/js/markup/content.js index 918cd6fe81..f06c9908f2 100644 --- a/web_src/js/markdown/content.js +++ b/web_src/js/markup/content.js @@ -1,5 +1,5 @@ import {renderMermaid} from './mermaid.js'; -export default async function renderMarkdownContent() { +export async function renderMarkupContent() { await renderMermaid(document.querySelectorAll('code.language-mermaid')); } diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markup/mermaid.js index a518bc7345..d0aefd1aff 100644 --- a/web_src/js/markdown/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000; function displayError(el, err) { el.closest('pre').classList.remove('is-loading'); const errorNode = document.createElement('div'); - errorNode.setAttribute('class', 'ui message error markdown-block-error mono'); + errorNode.setAttribute('class', 'ui message error markup-block-error mono'); errorNode.textContent = err.str || err.message || String(err); el.closest('pre').before(errorNode); } diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 7e563d2f23..d85f13cb33 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -102,8 +102,8 @@ --color-active: #00000014; --color-menu: #ffffff; --color-card: #ffffff; - --color-markdown-table-row: #00000008; - --color-markdown-code-block: #00000010; + --color-markup-table-row: #00000008; + --color-markup-code-block: #00000010; --color-button: #ffffff; --color-code-bg: #ffffff; --color-shadow: #00000030; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 5ff51b1d6d..549bd4d7e5 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -580,7 +580,7 @@ border-right-color: var(--color-box-body); } - .markdown { + .markup { font-size: 14px; } } @@ -1020,7 +1020,7 @@ } } - .markdown { + .markup { font-size: 14px; } @@ -1040,7 +1040,7 @@ overflow: hidden; } - .tab.markdown { + .tab.markup { min-height: 5rem; } } @@ -1244,7 +1244,7 @@ margin-bottom: 1.5rem; } - .markdown { + .markup { font-size: 14px; } } @@ -1996,7 +1996,7 @@ margin-top: -5px; } - > .markdown { + > .markup { padding: 15px 30px; h1, @@ -2991,7 +2991,7 @@ td.blob-excerpt { .webhook-info { padding: 7px 12px; margin: 10px 0; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); border-radius: 3px; font-size: 13px; diff --git a/web_src/less/_review.less b/web_src/less/_review.less index f6f5df20a2..2b8700a745 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -81,7 +81,7 @@ .ui.active.tab { padding: .5em; - &.markdown { + &.markup { padding: 1em; min-height: 168px; } @@ -95,7 +95,7 @@ border-top: 1px solid var(--color-secondary); padding: 10px 0; - .markdown-info { + .markup-info { display: inline-block; margin: 5px 0; font-size: 12px; diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less index 0b50440bf3..f3491155cd 100644 --- a/web_src/less/features/animations.less +++ b/web_src/less/features/animations.less @@ -28,7 +28,7 @@ border-radius: 100%; } -.markdown pre.is-loading, +.markup pre.is-loading, .editor-loading.is-loading { height: 12rem; } diff --git a/web_src/less/index.less b/web_src/less/index.less index c125ccac31..f52953f2a4 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -9,7 +9,8 @@ @import "./features/imagediff.less"; @import "./features/codeeditor.less"; @import "./features/projects.less"; -@import "./markdown/mermaid.less"; +@import "./markup/content.less"; +@import "./markup/mermaid.less"; @import "./chroma/base.less"; @import "./chroma/light.less"; @@ -18,7 +19,6 @@ @import "_tribute"; @import "_font_i18n"; @import "_base"; -@import "_markdown"; @import "_home"; @import "_install"; @import "_form"; diff --git a/web_src/less/_markdown.less b/web_src/less/markup/content.less index 66276894c0..df87c21d8c 100644 --- a/web_src/less/_markdown.less +++ b/web_src/less/markup/content.less @@ -1,4 +1,4 @@ -.markdown:not(code) { +.markup { overflow: hidden; font-size: 16px; line-height: 1.5 !important; @@ -290,7 +290,7 @@ } table tr:nth-child(2n) { - background-color: var(--color-markdown-table-row); + background-color: var(--color-markup-table-row); } img { @@ -404,7 +404,7 @@ padding: .2em .4em; margin: 0; font-size: 85%; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border-radius: 4px; } @@ -437,7 +437,7 @@ padding: 16px; font-size: 85%; line-height: 1.45; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border-radius: 4px; } @@ -477,7 +477,7 @@ line-height: 10px; color: var(--color-text-light); vertical-align: middle; - background-color: var(--color-markdown-code-block); + background-color: var(--color-markup-code-block); border: 1px solid var(--color-secondary); border-radius: 3px; box-shadow: inset 0 -1px 0 var(--color-secondary); @@ -523,7 +523,7 @@ } } -.markdown-block-error { +.markup-block-error { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; @@ -534,7 +534,7 @@ text-align: left !important; } -.markdown-block-error + pre { +.markup-block-error + pre { border-top: none !important; margin-top: 0 !important; border-top-left-radius: 0 !important; diff --git a/web_src/less/markdown/mermaid.less b/web_src/less/markup/mermaid.less index f68b577dec..f68b577dec 100644 --- a/web_src/less/markdown/mermaid.less +++ b/web_src/less/markup/mermaid.less diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 346a6e85ea..9e39c4bec4 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -97,8 +97,8 @@ --color-active: #ffffff16; --color-menu: #2e323e; --color-card: #2e323e; - --color-markdown-table-row: #ffffff06; - --color-markdown-code-block: #2a2e3a; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #2a2e3a; --color-button: #353846; --color-code-bg: #2a2e3a; --color-shadow: #00000060; @@ -301,7 +301,7 @@ a.ui.basic.green.label:hover { & + .editor-preview-side { background: #353945; - .markdown:not(code).ui.segment { + .markup.ui.segment { border-width: 0; } } @@ -754,7 +754,7 @@ img[src$="/img/matrix.svg"] { border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; } -.markdown-block-error { +.markup-block-error { border: 1px solid rgba(121, 71, 66, .5) !important; border-bottom: none !important; } |