diff --git a/dashboard/styles/dark.scss b/dashboard/styles/dark.scss index 49300315..08a68ca5 100644 --- a/dashboard/styles/dark.scss +++ b/dashboard/styles/dark.scss @@ -1,6 +1,7 @@ -@import "../node_modules/bootstrap-dark-5/scss/variables-alt"; +@import "bootstrap-dark-5/scss/variables-alt"; .dark { + @import "highlight.js/styles/github-dark.css"; .navbar.bg-light { background-color: $body-bg-alt !important; } @@ -15,8 +16,8 @@ } } - pre { - background-color: $dark-alt; + pre, code { + background: $dark-alt !important; } // bootstrap diff --git a/dashboard/styles/generic.scss b/dashboard/styles/generic.scss index 0e2191e1..0909e958 100644 --- a/dashboard/styles/generic.scss +++ b/dashboard/styles/generic.scss @@ -32,9 +32,16 @@ pre { white-space: pre-wrap; word-break: break-word !important; overflow-wrap: break-word !important; - background-color: var(--bs-light); - padding: 0.375rem; - border-radius: 5px; +} + +pre, code { + background: var(--bs-light) !important; + border-radius: 4px; +} + +code { + padding-left: 0.25rem; + padding-right: 0.25rem; } .dyslexic { diff --git a/dashboard/styles/highlight.scss b/dashboard/styles/highlight.scss new file mode 100644 index 00000000..c7b8bd5a --- /dev/null +++ b/dashboard/styles/highlight.scss @@ -0,0 +1,25 @@ +.dark { + pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! + Theme: GitHub Dark + Description: Dark theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-dark + Current colors taken from GitHub's CSS + */.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c} +} + +.light { + pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS +*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0} +} \ No newline at end of file diff --git a/dashboard/styles/themes.scss b/dashboard/styles/themes.scss index e0ddd06d..d37c238d 100644 --- a/dashboard/styles/themes.scss +++ b/dashboard/styles/themes.scss @@ -2,6 +2,7 @@ $primary: #da9317; $primary-alt: #da9317; @import "generic.scss"; @import "bootstrap/scss/bootstrap.scss"; +@import 'highlight.scss'; // dark mode. dark.scss extends nightshade @import "bootstrap-nightshade.scss";