From 39c9036307cfbd7b04141746169a16a3b589af7f Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Sat, 19 Feb 2022 17:53:42 +0800 Subject: [PATCH] chore: style files --- d2/style/index.scss | 60 ++++++++++++++++++++++++++++++++-- d2/style/system/highlight.scss | 33 ------------------- d2/style/system/markdown.scss | 10 ------ d2/style/system/scrollbar.scss | 10 ------ 4 files changed, 57 insertions(+), 56 deletions(-) delete mode 100644 d2/style/system/highlight.scss delete mode 100644 d2/style/system/markdown.scss delete mode 100644 d2/style/system/scrollbar.scss diff --git a/d2/style/index.scss b/d2/style/index.scss index 72c2712c..51c54b00 100644 --- a/d2/style/index.scss +++ b/d2/style/index.scss @@ -2,6 +2,60 @@ @tailwind components; @tailwind utilities; -@import './system/scrollbar.scss'; -@import './system/markdown.scss'; -@import './system/highlight.scss'; +// -------------------------------------------------------------------------------- + +// Scrollbar theme +// Only some themes are built in by default +// If you need other theme but we don't provide them by default +// Please download and import them yourself +// [download] https://kingsora.github.io/OverlayScrollbars/#!themes + +@import 'd2/style/library/scrollbar/minimal-dark.css'; + +// The minimal amount of CSS to replicate the GitHub Markdown style +@import 'github-markdown-css'; + +// Ignore the base style of ant design +// Solve the display problem in dark mode +.markdown-body { + h1, h2, h3, h4, h5, h6 { + color: inherit; + } +} + +// -------------------------------------------------------------------------------- + +// Code highlight theme +// Only some themes are built in by default +// If you need other theme but we don't provide them by default +// Please download and import them yourself +// Needs to be imported after markdown styles +// [preview] https://highlightjs.org/static/demo/ +// [download] https://github.com/highlightjs/highlight.js/tree/main/src/styles +@import 'd2/style/library/highlight/atom-one-light.css'; + +// Resolve conflicts between GitHub markdown CSS and highlightjs +// The .p-0 class is set at markdownItOptions in the vite.config.js file +// Although .p-0 class is already included in tailwindcss +// The settings in tailwindcss are not used here to separate them from each other +.markdown-body { + pre.p-0 { + padding: 0px; + } +} + +// -------------------------------------------------------------------------------- + +// Highlightjs base style +pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; +} + +// Make the display consistent in the following two cases: +// Hello World +// `Hello World` +code.hljs { + padding: 0.2em 0.4em; +} diff --git a/d2/style/system/highlight.scss b/d2/style/system/highlight.scss deleted file mode 100644 index 40198f3d..00000000 --- a/d2/style/system/highlight.scss +++ /dev/null @@ -1,33 +0,0 @@ -// This file needs to be imported after markdown.scss - -// Code highlight theme -// Only some themes are built in by default -// If you need other theme but we don't provide them by default -// Please download and import them yourself -// [preview] https://highlightjs.org/static/demo/ -// [download] https://github.com/highlightjs/highlight.js/tree/main/src/styles -@import './library/highlight/atom-one-light.css'; - -// Resolve conflicts between GitHub markdown CSS and highlightjs -// The .p-0 class is set at markdownItOptions in the vite.config.js file -// Although .p-0 class is already included in tailwindcss -// The settings in tailwindcss are not used here to separate them from each other -.markdown-body { - pre.p-0 { - padding: 0px; - } -} - -// Highlightjs base style -pre code.hljs { - display: block; - overflow-x: auto; - padding: 1em; -} - -// Make the display consistent in the following two cases: -// Hello World -// `Hello World` -code.hljs { - padding: 0.2em 0.4em; -} diff --git a/d2/style/system/markdown.scss b/d2/style/system/markdown.scss deleted file mode 100644 index 4049a671..00000000 --- a/d2/style/system/markdown.scss +++ /dev/null @@ -1,10 +0,0 @@ -// The minimal amount of CSS to replicate the GitHub Markdown style -@import 'github-markdown-css'; - -// Ignore the base style of ant design -// Solve the display problem in dark mode -.markdown-body { - h1, h2, h3, h4, h5, h6 { - color: inherit; - } -} diff --git a/d2/style/system/scrollbar.scss b/d2/style/system/scrollbar.scss deleted file mode 100644 index d380ee07..00000000 --- a/d2/style/system/scrollbar.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Scrollbar theme -// Only some themes are built in by default -// If you need other theme but we don't provide them by default -// Please download and import them yourself -// [download] https://kingsora.github.io/OverlayScrollbars/#!themes - -@import './library/scrollbar/minimal-dark.css'; -@import './library/scrollbar/minimal-light.css'; -@import './library/scrollbar/thin-dark.css'; -@import './library/scrollbar/thin-light.css';