core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
6543 2021-05-07 10:43:41 +02:00 committed by GitHub
parent 9b5185d3cc
commit 640066840e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 106 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/content/doc/advanced/external-renderers.en-us.md
View File

@ -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, **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. 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" />
```

2
templates/org/home.tmpl
View File

@ -11,7 +11,7 @@
</span> </span>
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}} {{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
</div> </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"> <div class="text grey meta">
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}} {{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}} {{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}

2
templates/repo/diff/box.tmpl
View File

@ -164,7 +164,7 @@
<div class="ui bottom attached active write tab segment"> <div class="ui bottom attached active write tab segment">
<textarea class="review-textarea" tabindex="1" name="content"></textarea> <textarea class="review-textarea" tabindex="1" name="content"></textarea>
</div> </div>
<div class="ui bottom attached tab preview segment markdown"> <div class="ui bottom attached tab preview segment markup">
{{$.i18n.Tr "loading"}} {{$.i18n.Tr "loading"}}
</div> </div>
<div class="text right edit buttons"> <div class="text right edit buttons">

4
templates/repo/diff/comment_form.tmpl
View File

@ -22,12 +22,12 @@
<div class="ui active tab" data-tab="write"> <div class="ui active tab" data-tab="write">
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea> <textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
</div> </div>
<div class="ui tab markdown" data-tab="preview"> <div class="ui tab markup" data-tab="preview">
{{.i18n.Tr "loading"}} {{.i18n.Tr "loading"}}
</div> </div>
</div> </div>
<div class="field footer"> <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"> <div class="ui right">
{{if $.reply}} {{if $.reply}}
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button> <button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>

2
templates/repo/diff/comments.tmpl
View File

@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<div class="ui attached segment comment-body"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markup">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
{{else}} {{else}}

2
templates/repo/editor/edit.tmpl
View File

@ -44,7 +44,7 @@
{{.FileContent}}</textarea> {{.FileContent}}</textarea>
<div class="editor-loading is-loading"></div> <div class="editor-loading is-loading"></div>
</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"}} {{.i18n.Tr "loading"}}
</div> </div>
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff"> <div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">

4
templates/repo/empty.tmpl
View File

@ -27,7 +27,7 @@
<div class="item"> <div class="item">
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3> <h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
<div class="markdown"> <div class="markup">
<pre><code>touch README.md <pre><code>touch README.md
git init git init
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}} {{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"> <div class="item">
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3> <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> <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> git push -u origin {{.Repository.DefaultBranch}}</code></pre>
</div> </div>

2
templates/repo/issue/comment_tab.tmpl
View File

@ -8,7 +8,7 @@
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}} {{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
</textarea> </textarea>
</div> </div>
<div class="ui bottom tab markdown" data-tab="preview"> <div class="ui bottom tab markup" data-tab="preview">
{{.i18n.Tr "loading"}} {{.i18n.Tr "loading"}}
</div> </div>
</div> </div>

2
templates/repo/issue/milestone_issues.tmpl
View File

@ -5,7 +5,7 @@
<div class="ui three column stackable grid"> <div class="ui three column stackable grid">
<div class="column"> <div class="column">
<h1>{{.Milestone.Name}}</h1> <h1>{{.Milestone.Name}}</h1>
<div class="markdown content"> <div class="markup content">
{{.Milestone.RenderedContent|Str2html}} {{.Milestone.RenderedContent|Str2html}}
</div> </div>
</div> </div>

2
templates/repo/issue/milestones.tmpl
View File

@ -98,7 +98,7 @@
</div> </div>
{{end}} {{end}}
{{if .Content}} {{if .Content}}
<div class="markdown content"> <div class="markup content">
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
</div> </div>
{{end}} {{end}}

4
templates/repo/issue/view_content.tmpl
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<div class="ui attached segment comment-body"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markup">
{{if .Issue.RenderedContent}} {{if .Issue.RenderedContent}}
{{.Issue.RenderedContent|Str2html}} {{.Issue.RenderedContent|Str2html}}
{{else}} {{else}}
@ -191,7 +191,7 @@
<div class="ui bottom active tab write"> <div class="ui bottom active tab write">
<textarea tabindex="1" name="content"></textarea> <textarea tabindex="1" name="content"></textarea>
</div> </div>
<div class="ui bottom tab preview markdown"> <div class="ui bottom tab preview markup">
{{$.i18n.Tr "loading"}} {{$.i18n.Tr "loading"}}
</div> </div>
</div> </div>

8
templates/repo/issue/view_content/comments.tmpl
View File

@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div class="ui attached segment comment-body"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markup">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
{{else}} {{else}}
@ -442,7 +442,7 @@
</span> </span>
</div> </div>
<div class="ui attached segment comment-body"> <div class="ui attached segment comment-body">
<div class="render-content markdown"> <div class="render-content markup">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
{{else}} {{else}}
@ -552,7 +552,7 @@
</div> </div>
</div> </div>
<div class="text comment-content"> <div class="text comment-content">
<div class="render-content markdown"> <div class="render-content markup">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
{{else}} {{else}}
@ -739,7 +739,7 @@
</span> </span>
</div> </div>
<div class="ui attached segment"> <div class="ui attached segment">
<div class="render-content markdown"> <div class="render-content markup">
{{if .RenderedContent}} {{if .RenderedContent}}
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}
{{else}} {{else}}

2
templates/repo/release/list.tmpl
View File

@ -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> | <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}} {{end}}
</p> </p>
<div class="markdown desc"> <div class="markup desc">
{{Str2html .Note}} {{Str2html .Note}}
</div> </div>
<div class="ui accordion download"> <div class="ui accordion download">

2
templates/repo/release/new.tmpl
View File

@ -53,7 +53,7 @@
<div class="ui bottom active tab" data-tab="write"> <div class="ui bottom active tab" data-tab="write">
<textarea name="content">{{.content}}</textarea> <textarea name="content">{{.content}}</textarea>
</div> </div>
<div class="ui bottom tab markdown" data-tab="preview"> <div class="ui bottom tab markup" data-tab="preview">
{{$.i18n.Tr "loading"}} {{$.i18n.Tr "loading"}}
</div> </div>
</div> </div>

2
templates/repo/settings/lfs_file.tmpl
View File

@ -12,7 +12,7 @@
</div> </div>
</h4> </h4>
<div class="ui attached table unstackable segment"> <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 .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}} {{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}} {{else if .IsRenderedHTML}}

2
templates/repo/view_file.tmpl
View File

@ -64,7 +64,7 @@
{{end}} {{end}}
</h4> </h4>
<div class="ui attached table unstackable segment"> <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 .IsMarkup}}
{{if .FileContent}}{{.FileContent | Safe}}{{end}} {{if .FileContent}}{{.FileContent | Safe}}{{end}}
{{else if .IsRenderedHTML}} {{else if .IsRenderedHTML}}

2
templates/repo/wiki/view.tmpl
View File

@ -61,7 +61,7 @@
</div> </div>
{{end}} {{end}}
<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;"> <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}} {{.content | Str2html}}
</div> </div>
{{if .sidebarPresent}} {{if .sidebarPresent}}

2
templates/user/profile.tmpl
View File

@ -36,7 +36,7 @@
{{end}} {{end}}
{{if $.RenderedDescription}} {{if $.RenderedDescription}}
<li> <li>
<div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div> <div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
</li> </li>
{{end}} {{end}}
{{range .OpenIDs}} {{range .OpenIDs}}

42
web_src/js/index.js
View File

@ -4,26 +4,26 @@ import Vue from 'vue';
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import 'jquery.are-you-sure'; import 'jquery.are-you-sure';
import initMigration from './features/migration.js'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
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 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 attachTribute from './features/tribute.js';
import createColorPicker from './features/colorpicker.js'; import createColorPicker from './features/colorpicker.js';
import createDropzone from './features/dropzone.js'; import createDropzone from './features/dropzone.js';
import initTableSort from './features/tablesort.js'; import initClipboard from './features/clipboard.js';
import initContextPopups from './features/contextpopup.js';
import initGitGraph from './features/gitgraph.js';
import initHeatmap from './features/heatmap.js';
import initImageDiff from './features/imagediff.js'; import initImageDiff from './features/imagediff.js';
import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import initMigration from './features/migration.js';
import initProject from './features/projects.js';
import initServiceWorker from './features/serviceworker.js';
import initTableSort from './features/tablesort.js';
import {createCodeEditor, createMonaco} from './features/codeeditor.js';
import {initMarkupAnchors} from './markup/anchors.js';
import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js';
import {initStopwatch} from './features/stopwatch.js'; import {initStopwatch} from './features/stopwatch.js';
import {createCodeEditor, createMonaco} from './features/codeeditor.js'; import {renderMarkupContent} from './markup/content.js';
import {svg, svgs} from './svg.js';
import {stripTags, mqBinarySearch} from './utils.js'; import {stripTags, mqBinarySearch} from './utils.js';
import {svg, svgs} from './svg.js';
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
@ -51,7 +51,7 @@ function initCommentPreviewTab($form) {
}, (data) => { }, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data); $previewPanel.html(data);
renderMarkdownContent(); renderMarkupContent();
}); });
}); });
@ -81,7 +81,7 @@ function initEditPreviewTab($form) {
}, (data) => { }, (data) => {
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
$previewPanel.html(data); $previewPanel.html(data);
renderMarkdownContent(); renderMarkupContent();
}); });
}); });
} }
@ -1107,7 +1107,7 @@ async function initRepository() {
dz.emit('submit'); dz.emit('submit');
dz.emit('reload'); dz.emit('reload');
} }
renderMarkdownContent(); renderMarkupContent();
}); });
}); });
} else { } else {
@ -1473,8 +1473,8 @@ function initWikiForm() {
text: plainText, text: plainText,
wiki: true wiki: true
}, (data) => { }, (data) => {
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
renderMarkdownContent(); renderMarkupContent();
}); });
}; };
@ -1553,7 +1553,7 @@ function initWikiForm() {
const $form = $('.repository.wiki.new .ui.form'); const $form = $('.repository.wiki.new .ui.form');
const $root = $form.find('.field.content'); const $root = $form.find('.field.content');
const loading = $root.data('loading'); 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); initCommentPreviewTab($form);
}, },
className: 'fa fa-file', className: 'fa fa-file',
@ -2772,7 +2772,7 @@ $(document).ready(async () => {
searchTeams(); searchTeams();
searchRepositories(); searchRepositories();
initMarkdownAnchors(); initMarkupAnchors();
initCommentForm(); initCommentForm();
initInstall(); initInstall();
initArchiveLinks(); initArchiveLinks();
@ -2830,7 +2830,7 @@ $(document).ready(async () => {
initServiceWorker(), initServiceWorker(),
initNotificationCount(), initNotificationCount(),
initStopwatch(), initStopwatch(),
renderMarkdownContent(), renderMarkupContent(),
initGithook(), initGithook(),
initImageDiff(), initImageDiff(),
]); ]);

6
web_src/js/markdown/anchors.js → web_src/js/markup/anchors.js
View File

@ -1,6 +1,6 @@
import {svg} from '../svg.js'; 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() { function scrollToAnchor() {
if (document.querySelector(':target')) return; if (document.querySelector(':target')) return;
@ -15,8 +15,8 @@ function scrollToAnchor() {
} }
} }
export default function initMarkdownAnchors() { export function initMarkupAnchors() {
if (!document.querySelector('.markdown')) return; if (!document.querySelector('.markup')) return;
for (const heading of document.querySelectorAll(headingSelector)) { for (const heading of document.querySelectorAll(headingSelector)) {
const originalId = heading.id.replace(/^user-content-/, ''); const originalId = heading.id.replace(/^user-content-/, '');

2
web_src/js/markdown/content.js → web_src/js/markup/content.js
View File

@ -1,5 +1,5 @@
import {renderMermaid} from './mermaid.js'; import {renderMermaid} from './mermaid.js';
export default async function renderMarkdownContent() { export async function renderMarkupContent() {
await renderMermaid(document.querySelectorAll('code.language-mermaid')); await renderMermaid(document.querySelectorAll('code.language-mermaid'));
} }

2
web_src/js/markdown/mermaid.js → web_src/js/markup/mermaid.js
View File

@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
function displayError(el, err) { function displayError(el, err) {
el.closest('pre').classList.remove('is-loading'); el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div'); 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); errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode); el.closest('pre').before(errorNode);
} }

4
web_src/less/_base.less
View File

@ -102,8 +102,8 @@
--color-active: #00000014; --color-active: #00000014;
--color-menu: #ffffff; --color-menu: #ffffff;
--color-card: #ffffff; --color-card: #ffffff;
--color-markdown-table-row: #00000008; --color-markup-table-row: #00000008;
--color-markdown-code-block: #00000010; --color-markup-code-block: #00000010;
--color-button: #ffffff; --color-button: #ffffff;
--color-code-bg: #ffffff; --color-code-bg: #ffffff;
--color-shadow: #00000030; --color-shadow: #00000030;

12
web_src/less/_repository.less
View File

@ -580,7 +580,7 @@
border-right-color: var(--color-box-body); border-right-color: var(--color-box-body);
} }
.markdown { .markup {
font-size: 14px; font-size: 14px;
} }
} }
@ -1020,7 +1020,7 @@
} }
} }
.markdown { .markup {
font-size: 14px; font-size: 14px;
} }
@ -1040,7 +1040,7 @@
overflow: hidden; overflow: hidden;
} }
.tab.markdown { .tab.markup {
min-height: 5rem; min-height: 5rem;
} }
} }
@ -1244,7 +1244,7 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.markdown { .markup {
font-size: 14px; font-size: 14px;
} }
} }
@ -1996,7 +1996,7 @@
margin-top: -5px; margin-top: -5px;
} }
> .markdown { > .markup {
padding: 15px 30px; padding: 15px 30px;
h1, h1,
@ -2991,7 +2991,7 @@ td.blob-excerpt {
.webhook-info { .webhook-info {
padding: 7px 12px; padding: 7px 12px;
margin: 10px 0; margin: 10px 0;
background-color: var(--color-markdown-code-block); background-color: var(--color-markup-code-block);
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;

4
web_src/less/_review.less
View File

@ -81,7 +81,7 @@
.ui.active.tab { .ui.active.tab {
padding: .5em; padding: .5em;
&.markdown { &.markup {
padding: 1em; padding: 1em;
min-height: 168px; min-height: 168px;
} }
@ -95,7 +95,7 @@
border-top: 1px solid var(--color-secondary); border-top: 1px solid var(--color-secondary);
padding: 10px 0; padding: 10px 0;
.markdown-info { .markup-info {
display: inline-block; display: inline-block;
margin: 5px 0; margin: 5px 0;
font-size: 12px; font-size: 12px;

2
web_src/less/features/animations.less
View File

@ -28,7 +28,7 @@
border-radius: 100%; border-radius: 100%;
} }
.markdown pre.is-loading, .markup pre.is-loading,
.editor-loading.is-loading { .editor-loading.is-loading {
height: 12rem; height: 12rem;
} }

4
web_src/less/index.less
View File

@ -9,7 +9,8 @@
@import "./features/imagediff.less"; @import "./features/imagediff.less";
@import "./features/codeeditor.less"; @import "./features/codeeditor.less";
@import "./features/projects.less"; @import "./features/projects.less";
@import "./markdown/mermaid.less"; @import "./markup/content.less";
@import "./markup/mermaid.less";
@import "./chroma/base.less"; @import "./chroma/base.less";
@import "./chroma/light.less"; @import "./chroma/light.less";
@ -18,7 +19,6 @@
@import "_tribute"; @import "_tribute";
@import "_font_i18n"; @import "_font_i18n";
@import "_base"; @import "_base";
@import "_markdown";
@import "_home"; @import "_home";
@import "_install"; @import "_install";
@import "_form"; @import "_form";

14
web_src/less/_markdown.less → web_src/less/markup/content.less
View File

@ -1,4 +1,4 @@
.markdown:not(code) { .markup {
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
line-height: 1.5 !important; line-height: 1.5 !important;
@ -290,7 +290,7 @@
} }
table tr:nth-child(2n) { table tr:nth-child(2n) {
background-color: var(--color-markdown-table-row); background-color: var(--color-markup-table-row);
} }
img { img {
@ -404,7 +404,7 @@
padding: .2em .4em; padding: .2em .4em;
margin: 0; margin: 0;
font-size: 85%; font-size: 85%;
background-color: var(--color-markdown-code-block); background-color: var(--color-markup-code-block);
border-radius: 4px; border-radius: 4px;
} }
@ -437,7 +437,7 @@
padding: 16px; padding: 16px;
font-size: 85%; font-size: 85%;
line-height: 1.45; line-height: 1.45;
background-color: var(--color-markdown-code-block); background-color: var(--color-markup-code-block);
border-radius: 4px; border-radius: 4px;
} }
@ -477,7 +477,7 @@
line-height: 10px; line-height: 10px;
color: var(--color-text-light); color: var(--color-text-light);
vertical-align: middle; vertical-align: middle;
background-color: var(--color-markdown-code-block); background-color: var(--color-markup-code-block);
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 -1px 0 var(--color-secondary); box-shadow: inset 0 -1px 0 var(--color-secondary);
@ -523,7 +523,7 @@
} }
} }
.markdown-block-error { .markup-block-error {
margin-bottom: 0 !important; margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
@ -534,7 +534,7 @@
text-align: left !important; text-align: left !important;
} }
.markdown-block-error + pre { .markup-block-error + pre {
border-top: none !important; border-top: none !important;
margin-top: 0 !important; margin-top: 0 !important;
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;

0
web_src/less/markdown/mermaid.less → web_src/less/markup/mermaid.less
View File

8
web_src/less/themes/theme-arc-green.less
View File

@ -97,8 +97,8 @@
--color-active: #ffffff16; --color-active: #ffffff16;
--color-menu: #2e323e; --color-menu: #2e323e;
--color-card: #2e323e; --color-card: #2e323e;
--color-markdown-table-row: #ffffff06; --color-markup-table-row: #ffffff06;
--color-markdown-code-block: #2a2e3a; --color-markup-code-block: #2a2e3a;
--color-button: #353846; --color-button: #353846;
--color-code-bg: #2a2e3a; --color-code-bg: #2a2e3a;
--color-shadow: #00000060; --color-shadow: #00000060;
@ -301,7 +301,7 @@ a.ui.basic.green.label:hover {
& + .editor-preview-side { & + .editor-preview-side {
background: #353945; background: #353945;
.markdown:not(code).ui.segment { .markup.ui.segment {
border-width: 0; border-width: 0;
} }
} }
@ -754,7 +754,7 @@ img[src$="/img/matrix.svg"] {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
} }
.markdown-block-error { .markup-block-error {
border: 1px solid rgba(121, 71, 66, .5) !important; border: 1px solid rgba(121, 71, 66, .5) !important;
border-bottom: none !important; border-bottom: none !important;
} }