diff options
| author | silverwind <me@silverwind.io> | 2022-02-16 04:28:29 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-02-16 11:28:29 +0800 |
| commit | 616146f90400bcf80671410c04926d9dc1f11257 (patch) | |
| tree | 4f6e4d932cfc802ab088a075a967ad7d71c0819a /web_src/less | |
| parent | 1eb6bb9028afb6de155b80a43c8438d843bbe826 (diff) | |
| download | gitea-616146f90400bcf80671410c04926d9dc1f11257.tar.gz gitea-616146f90400bcf80671410c04926d9dc1f11257.zip | |
Various Mermaid improvements (#18776)
* Various Mermaid improvments
- Render into iframe for improved security
- Use built-in dark theme instead of color inversion
- Remove flexbox attributes, resulting in more consistent size rendering
- Update API usage and update to latest version
* restart ci
* misc tweaks
* remove unneccesary declaration
* make it work without allow-same-origin, add loading=lazy
* remove loading attribute, does not seem to work
* rename variable
* skip roundtrip to DOM for rendering
* don't guess chart height
* update comment to make it clear it's intentional
* tweak
* replace deprecated 'scrolling' property
* remove unused css file
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Diffstat (limited to 'web_src/less')
| -rw-r--r-- | web_src/less/_base.less | 1 | ||||
| -rw-r--r-- | web_src/less/animations.less | 2 | ||||
| -rw-r--r-- | web_src/less/index.less | 1 | ||||
| -rw-r--r-- | web_src/less/markup/content.less | 8 | ||||
| -rw-r--r-- | web_src/less/markup/mermaid.less | 13 | ||||
| -rw-r--r-- | web_src/less/themes/theme-arc-green.less | 4 |
6 files changed, 10 insertions, 19 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 8e06d16405..55439d6cea 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -6,6 +6,7 @@ /* other variables */ --border-radius: .28571429rem; --opacity-disabled: .55; + --height-loading: 12rem; --color-primary: #4183c4; --color-primary-dark-1: #3876b3; --color-primary-dark-2: #31699f; diff --git a/web_src/less/animations.less b/web_src/less/animations.less index cdb10236fb..083e10089d 100644 --- a/web_src/less/animations.less +++ b/web_src/less/animations.less @@ -30,7 +30,7 @@ .markup pre.is-loading, .editor-loading.is-loading { - height: 12rem; + height: var(--height-loading); } @keyframes fadein { diff --git a/web_src/less/index.less b/web_src/less/index.less index e95cb72eb0..805c68f2c4 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -10,7 +10,6 @@ @import "./features/codeeditor.less"; @import "./features/projects.less"; @import "./markup/content.less"; -@import "./markup/mermaid.less"; @import "./markup/codecopy.less"; @import "./code/linebutton.less"; diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less index 71e98652c8..b8dafe3511 100644 --- a/web_src/less/markup/content.less +++ b/web_src/less/markup/content.less @@ -536,6 +536,14 @@ } } +.markup-render { + display: block; + border: none; + width: 100%; + height: var(--height-loading); // actual height is set in JS after loading + overflow: hidden; +} + .markup-block-error { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; diff --git a/web_src/less/markup/mermaid.less b/web_src/less/markup/mermaid.less deleted file mode 100644 index f68b577dec..0000000000 --- a/web_src/less/markup/mermaid.less +++ /dev/null @@ -1,13 +0,0 @@ -.mermaid-chart { - display: flex; - justify-content: center; - align-items: center; - padding: 1rem; - margin: 1rem auto; - height: auto; -} - -/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */ -body > div[id*="mermaid-"] { - display: none !important; -} diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 5d107cef96..0b8d92b01f 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -455,10 +455,6 @@ img[src$="/img/matrix.svg"] { filter: invert(80%); } -.mermaid-chart { - filter: invert(84%) hue-rotate(180deg); -} - .is-loading::after { border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; } |