From 6348390a682dbf043b5ffe0b61e329ebb894ed6e Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Fri, 10 Nov 2023 11:01:15 +0800 Subject: [PATCH] fix code pre theme remote old styles --- styles/globals.css | 4 +- styles/prism-one-dark.css | 527 ------------------------------------- styles/prism-one-light.css | 439 ------------------------------ styles/rua.css | 32 +++ 4 files changed, 34 insertions(+), 968 deletions(-) delete mode 100644 styles/prism-one-dark.css delete mode 100644 styles/prism-one-light.css diff --git a/styles/globals.css b/styles/globals.css index 0c91901..709814d 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -11,7 +11,7 @@ color: inherit; } -.dark *::selection { +.mocha *::selection { background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; @@ -74,7 +74,7 @@ font-family: 'Poppins', sans-serif; } /* DocSearch */ -html.dark { +html.mocha { --docsearch-text-color: #f5f6f7; --docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-modal-background: #15172a; diff --git a/styles/prism-one-dark.css b/styles/prism-one-dark.css deleted file mode 100644 index 912169a..0000000 --- a/styles/prism-one-dark.css +++ /dev/null @@ -1,527 +0,0 @@ -/** - * One Dark theme for prism.js - * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax - */ - -/** - * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) - * From colors.less - * --mono-1: hsl(220, 14%, 71%); - * --mono-2: hsl(220, 9%, 55%); - * --mono-3: hsl(220, 10%, 40%); - * --hue-1: hsl(187, 47%, 55%); - * --hue-2: hsl(207, 82%, 66%); - * --hue-3: hsl(286, 60%, 67%); - * --hue-4: hsl(95, 38%, 62%); - * --hue-5: hsl(355, 65%, 65%); - * --hue-5-2: hsl(5, 48%, 51%); - * --hue-6: hsl(29, 54%, 61%); - * --hue-6-2: hsl(39, 67%, 69%); - * --syntax-fg: hsl(220, 14%, 71%); - * --syntax-bg: hsl(220, 13%, 18%); - * --syntax-gutter: hsl(220, 14%, 45%); - * --syntax-guide: hsla(220, 14%, 71%, 0.15); - * --syntax-accent: hsl(220, 100%, 66%); - * From syntax-variables.less - * --syntax-selection-color: hsl(220, 13%, 28%); - * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); - * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); - */ - -.dark code, -.dark pre { - background: hsl(220, 13%, 18%); - color: hsl(220, 14%, 71%); - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', - monospace; */ - font-family: - var(--font-jetbrains-mono), - -apple-system, - 'DejaVu Sans Mono', - monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Selection */ -.dark code::-moz-selection, -.dark code *::-moz-selection, -.dark pre *::-moz-selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -.dark code::selection, -.dark code *::selection, -.dark pre *::selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -/* Code blocks */ -.dark pre { - padding: 1em; - margin: 0.5em 0; - overflow: auto; - border-radius: 0.3em; -} - -/* Inline code */ -.dark :not(pre) > code { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; -} - -/* Print */ -@media print { - .dark code, - .dark pre { - text-shadow: none; - } -} - -.dark .token.comment, -.dark .token.prolog, -.dark .token.cdata { - color: hsl(220, 10%, 40%); -} - -.dark .token.doctype, -.dark .token.punctuation, -.dark .token.entity { - color: hsl(220, 14%, 71%); -} - -.dark .token.attr-name, -.dark .token.class-name, -.dark .token.boolean, -.dark .token.constant, -.dark .token.number, -.dark .token.atrule { - color: hsl(29, 54%, 61%); -} - -.dark .token.keyword { - color: hsl(286, 60%, 67%); -} - -.dark .token.property, -.dark .token.tag, -.dark .token.symbol, -.dark .token.deleted, -.dark .token.important { - color: hsl(355, 65%, 65%); -} - -.dark .token.selector, -.dark .token.string, -.dark .token.char, -.dark .token.builtin, -.dark .token.inserted, -.dark .token.regex, -.dark .token.attr-value, -.dark .token.attr-value > .dark .token.punctuation { - color: hsl(95, 38%, 62%); -} - -.dark .token.variable, -.dark .token.operator, -.dark .token.function { - color: hsl(207, 82%, 66%); -} - -.dark .token.url { - color: hsl(187, 47%, 55%); -} - -/* HTML overrides */ -.dark .token.attr-value > .dark .token.punctuation.attr-equals, -.dark .token.special-attr > .dark .token.attr-value > .dark .token.value.css { - color: hsl(220, 14%, 71%); -} - -/* CSS overrides */ -.language-css .dark .token.selector { - color: hsl(355, 65%, 65%); -} - -.language-css .dark .token.property { - color: hsl(220, 14%, 71%); -} - -.language-css .dark .token.function, -.language-css .dark .token.url > .dark .token.function { - color: hsl(187, 47%, 55%); -} - -.language-css .dark .token.url > .dark .token.string.url { - color: hsl(95, 38%, 62%); -} - -.language-css .dark .token.important, -.language-css .dark .token.atrule .dark .token.rule { - color: hsl(286, 60%, 67%); -} - -/* JS overrides */ -.language-javascript .dark .token.operator { - color: hsl(286, 60%, 67%); -} - -.language-javascript - .dark - .token.template-string - > .dark - .token.interpolation - > .dark - .token.interpolation-punctuation.punctuation { - color: hsl(5, 48%, 51%); -} - -/* JSON overrides */ -.language-json .dark .token.operator { - color: hsl(220, 14%, 71%); -} - -.language-json .dark .token.null.keyword { - color: hsl(29, 54%, 61%); -} - -/* MD overrides */ -.language-markdown .dark .token.url, -.language-markdown .dark .token.url > .dark .token.operator, -.language-markdown .dark .token.url-reference.url > .dark .token.string { - color: hsl(220, 14%, 71%); -} - -.language-markdown .dark .token.url > .dark .token.content { - color: hsl(207, 82%, 66%); -} - -.language-markdown .dark .token.url > .dark .token.url, -.language-markdown .dark .token.url-reference.url { - color: hsl(187, 47%, 55%); -} - -.language-markdown .dark .token.blockquote.punctuation, -.language-markdown .dark .token.hr.punctuation { - color: hsl(220, 10%, 40%); - font-style: italic; -} - -.language-markdown .dark .token.code-snippet { - color: hsl(95, 38%, 62%); -} - -.language-markdown .dark .token.bold .dark .token.content { - color: hsl(29, 54%, 61%); -} - -.language-markdown .dark .token.italic .dark .token.content { - color: hsl(286, 60%, 67%); -} - -.language-markdown .dark .token.strike .dark .token.content, -.language-markdown .dark .token.strike .dark .token.punctuation, -.language-markdown .dark .token.list.punctuation, -.language-markdown .dark .token.title.important > .dark .token.punctuation { - color: hsl(355, 65%, 65%); -} - -/* General */ -.dark .token.bold { - font-weight: bold; -} - -.dark .token.comment, -.dark .token.italic { - font-style: italic; -} - -.dark .token.entity { - cursor: help; -} - -.dark .token.namespace { - opacity: 0.8; -} - -/* Plugin overrides */ -/* Selectors should have higher specificity than those in the plugins' default stylesheets */ - -/* Show Invisibles plugin overrides */ -.dark .token.dark .token.tab:not(:empty):before, -.dark .token.dark .token.cr:before, -.dark .token.dark .token.lf:before, -.dark .token.dark .token.space:before { - color: hsla(220, 14%, 71%, 0.15); - text-shadow: none; -} - -/* Toolbar plugin overrides */ -/* Space out all buttons and move them away from the right edge of the code block */ -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; -} - -/* Styling the buttons */ -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(220, 13%, 26%); - color: hsl(220, 9%, 55%); - padding: 0.1em 0.4em; - border-radius: 0.3em; -} - -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, -.dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(220, 13%, 28%); - color: hsl(220, 14%, 71%); -} - -/* Line Highlight plugin overrides */ -/* The highlighted line itself */ -.dark .line-highlight.line-highlight { - background: hsla(220, 100%, 80%, 0.04); -} - -/* Default line numbers in Line Highlight plugin */ -.dark .line-highlight.line-highlight:before, -.dark .line-highlight.line-highlight[data-end]:after { - background: hsl(220, 13%, 26%); - color: hsl(220, 14%, 71%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ -} - -/* Hovering over a linkable line number (in the gutter area) */ -/* Requires Line Numbers plugin as well */ -.dark - pre[id].linkable-line-numbers.linkable-line-numbers - span.line-numbers-rows - > span:hover:before { - background-color: hsla(220, 100%, 80%, 0.04); -} - -/* Line Numbers and Command Line plugins overrides */ -/* Line separating gutter from coding area */ -.dark .line-numbers.line-numbers .line-numbers-rows, -.dark .command-line .command-line-prompt { - border-right-color: hsla(220, 14%, 71%, 0.15); -} - -/* Stuff in the gutter */ -.dark .line-numbers .line-numbers-rows > span:before, -.dark .command-line .command-line-prompt > span:before { - color: hsl(220, 14%, 45%); -} - -/* Match Braces plugin overrides */ -/* Note: Outline colour is inherited from the braces */ -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-1, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-5, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-9 { - color: hsl(355, 65%, 65%); -} - -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-2, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-6, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-10 { - color: hsl(95, 38%, 62%); -} - -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-3, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-7, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-11 { - color: hsl(207, 82%, 66%); -} - -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-4, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-8, -.rainbow-braces .dark .token.dark .token.punctuation.brace-level-12 { - color: hsl(286, 60%, 67%); -} - -/* Diff Highlight plugin overrides */ -/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre.diff-highlight > code .dark .token.dark .token.deleted:not(.prefix), -pre > code.diff-highlight .dark .token.dark .token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); -} - -pre.diff-highlight - > code - .dark - .token.dark - .token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight - > code - .dark - .token.dark - .token.deleted:not(.prefix) - *::-moz-selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.deleted:not(.prefix)::-moz-selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.deleted:not(.prefix) - *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight - > code - .dark - .token.dark - .token.deleted:not(.prefix)::selection, -pre.diff-highlight - > code - .dark - .token.dark - .token.deleted:not(.prefix) - *::selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.deleted:not(.prefix)::selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.deleted:not(.prefix) - *::selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .dark .token.dark .token.inserted:not(.prefix), -pre > code.diff-highlight .dark .token.dark .token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); -} - -pre.diff-highlight - > code - .dark - .token.dark - .token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight - > code - .dark - .token.dark - .token.inserted:not(.prefix) - *::-moz-selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.inserted:not(.prefix)::-moz-selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.inserted:not(.prefix) - *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -pre.diff-highlight - > code - .dark - .token.dark - .token.inserted:not(.prefix)::selection, -pre.diff-highlight - > code - .dark - .token.dark - .token.inserted:not(.prefix) - *::selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.inserted:not(.prefix)::selection, -pre - > code.diff-highlight - .dark - .token.dark - .token.inserted:not(.prefix) - *::selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -/* Previewers plugin overrides */ -/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ -/* Border around popup */ -.dark .prism-previewer.prism-previewer:before, -.dark .prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(224, 13%, 17%); -} - -/* Angle and time should remain as circles and are hence not included */ -.dark .prism-previewer-color.prism-previewer-color:before, -.dark .prism-previewer-gradient.prism-previewer-gradient div, -.dark .prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; -} - -/* Triangles pointing to the code */ -.dark .prism-previewer.prism-previewer:after { - border-top-color: hsl(224, 13%, 17%); -} - -.dark .prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(224, 13%, 17%); -} - -/* Background colour within the popup */ -.dark .prism-previewer-angle.prism-previewer-angle:before, -.dark .prism-previewer-time.prism-previewer-time:before, -.dark .prism-previewer-easing.prism-previewer-easing { - background: hsl(219, 13%, 22%); -} - -/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ -/* For time, this is the alternate colour */ -.dark .prism-previewer-angle.prism-previewer-angle circle, -.dark .prism-previewer-time.prism-previewer-time circle { - stroke: hsl(220, 14%, 71%); - stroke-opacity: 1; -} - -/* Stroke colours of the handle, direction point, and vector itself */ -.dark .prism-previewer-easing.prism-previewer-easing circle, -.dark .prism-previewer-easing.prism-previewer-easing path, -.dark .prism-previewer-easing.prism-previewer-easing line { - stroke: hsl(220, 14%, 71%); -} - -/* Fill colour of the handle */ -.dark .prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; -} diff --git a/styles/prism-one-light.css b/styles/prism-one-light.css deleted file mode 100644 index 46c65ae..0000000 --- a/styles/prism-one-light.css +++ /dev/null @@ -1,439 +0,0 @@ -/** - * One Light theme for prism.js - * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax - */ - -/** - * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) - * From colors.less - * --mono-1: hsl(230, 8%, 24%); - * --mono-2: hsl(230, 6%, 44%); - * --mono-3: hsl(230, 4%, 64%) - * --hue-1: hsl(198, 99%, 37%); - * --hue-2: hsl(221, 87%, 60%); - * --hue-3: hsl(301, 63%, 40%); - * --hue-4: hsl(119, 34%, 47%); - * --hue-5: hsl(5, 74%, 59%); - * --hue-5-2: hsl(344, 84%, 43%); - * --hue-6: hsl(35, 99%, 36%); - * --hue-6-2: hsl(35, 99%, 40%); - * --syntax-fg: hsl(230, 8%, 24%); - * --syntax-bg: hsl(230, 1%, 98%); - * --syntax-gutter: hsl(230, 1%, 62%); - * --syntax-guide: hsla(230, 8%, 24%, 0.2); - * --syntax-accent: hsl(230, 100%, 66%); - * From syntax-variables.less - * --syntax-selection-color: hsl(230, 1%, 90%); - * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); - * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); - */ - -code, -pre { - background: #fff; - color: hsl(230, 8%, 24%); - /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', - monospace; */ - font-family: - var(--font-jetbrains-mono), - -apple-system, - 'DejaVu Sans Mono', - monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Selection */ -code::-moz-selection, -code *::-moz-selection, -pre *::-moz-selection { - background: hsl(230, 1%, 90%); - color: inherit; -} - -code::selection, -code *::selection, -pre *::selection { - background: hsl(230, 1%, 90%); - color: inherit; -} - -/* Code blocks */ -pre { - padding: 1em; - margin: 0.5em 0; - overflow: auto; - border-radius: 0.3em; -} - -/* Inline code */ -:not(pre) > code { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.cdata { - color: hsl(230, 4%, 64%); -} - -.token.doctype, -.token.punctuation, -.token.entity { - color: hsl(230, 8%, 24%); -} - -.token.attr-name, -.token.class-name, -.token.boolean, -.token.constant, -.token.number, -.token.atrule { - color: hsl(35, 99%, 36%); -} - -.token.keyword { - color: hsl(301, 63%, 40%); -} - -.token.property, -.token.tag, -.token.symbol, -.token.deleted, -.token.important { - color: hsl(5, 74%, 59%); -} - -.token.selector, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.regex, -.token.attr-value, -.token.attr-value > .token.punctuation { - color: hsl(119, 34%, 47%); -} - -.token.variable, -.token.operator, -.token.function { - color: hsl(221, 87%, 60%); -} - -.token.url { - color: hsl(198, 99%, 37%); -} - -/* HTML overrides */ -.token.attr-value > .token.punctuation.attr-equals, -.token.special-attr > .token.attr-value > .token.value.css { - color: hsl(230, 8%, 24%); -} - -/* CSS overrides */ -.language-css .token.selector { - color: hsl(5, 74%, 59%); -} - -.language-css .token.property { - color: hsl(230, 8%, 24%); -} - -.language-css .token.function, -.language-css .token.url > .token.function { - color: hsl(198, 99%, 37%); -} - -.language-css .token.url > .token.string.url { - color: hsl(119, 34%, 47%); -} - -.language-css .token.important, -.language-css .token.atrule .token.rule { - color: hsl(301, 63%, 40%); -} - -/* JS overrides */ -.language-javascript .token.operator { - color: hsl(301, 63%, 40%); -} - -.language-javascript - .token.template-string - > .token.interpolation - > .token.interpolation-punctuation.punctuation { - color: hsl(344, 84%, 43%); -} - -/* JSON overrides */ -.language-json .token.operator { - color: hsl(230, 8%, 24%); -} - -.language-json .token.null.keyword { - color: hsl(35, 99%, 36%); -} - -/* MD overrides */ -.language-markdown .token.url, -.language-markdown .token.url > .token.operator, -.language-markdown .token.url-reference.url > .token.string { - color: hsl(230, 8%, 24%); -} - -.language-markdown .token.url > .token.content { - color: hsl(221, 87%, 60%); -} - -.language-markdown .token.url > .token.url, -.language-markdown .token.url-reference.url { - color: hsl(198, 99%, 37%); -} - -.language-markdown .token.blockquote.punctuation, -.language-markdown .token.hr.punctuation { - color: hsl(230, 4%, 64%); - font-style: italic; -} - -.language-markdown .token.code-snippet { - color: hsl(119, 34%, 47%); -} - -.language-markdown .token.bold .token.content { - color: hsl(35, 99%, 36%); -} - -.language-markdown .token.italic .token.content { - color: hsl(301, 63%, 40%); -} - -.language-markdown .token.strike .token.content, -.language-markdown .token.strike .token.punctuation, -.language-markdown .token.list.punctuation, -.language-markdown .token.title.important > .token.punctuation { - color: hsl(5, 74%, 59%); -} - -/* General */ -.token.bold { - font-weight: bold; -} - -.token.comment, -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.namespace { - opacity: 0.8; -} - -/* Plugin overrides */ -/* Selectors should have higher specificity than those in the plugins' default stylesheets */ - -/* Show Invisibles plugin overrides */ -.token.token.tab:not(:empty):before, -.token.token.cr:before, -.token.token.lf:before, -.token.token.space:before { - color: hsla(230, 8%, 24%, 0.2); -} - -/* Toolbar plugin overrides */ -/* Space out all buttons and move them away from the right edge of the code block */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; -} - -/* Styling the buttons */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(230, 1%, 90%); - color: hsl(230, 6%, 44%); - padding: 0.1em 0.4em; - border-radius: 0.3em; -} - -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ - color: hsl(230, 8%, 24%); -} - -/* Line Highlight plugin overrides */ -/* The highlighted line itself */ -.line-highlight.line-highlight { - background: hsla(230, 8%, 24%, 0.05); -} - -/* Default line numbers in Line Highlight plugin */ -.line-highlight.line-highlight:before, -.line-highlight.line-highlight[data-end]:after { - background: hsl(230, 1%, 90%); - color: hsl(230, 8%, 24%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ -} - -/* Hovering over a linkable line number (in the gutter area) */ -/* Requires Line Numbers plugin as well */ -pre[id].linkable-line-numbers.linkable-line-numbers - span.line-numbers-rows - > span:hover:before { - background-color: hsla(230, 8%, 24%, 0.05); -} - -/* Line Numbers and Command Line plugins overrides */ -/* Line separating gutter from coding area */ -.line-numbers.line-numbers .line-numbers-rows, -.command-line .command-line-prompt { - border-right-color: hsla(230, 8%, 24%, 0.2); -} - -/* Stuff in the gutter */ -.line-numbers .line-numbers-rows > span:before, -.command-line .command-line-prompt > span:before { - color: hsl(230, 1%, 62%); -} - -/* Match Braces plugin overrides */ -/* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.token.punctuation.brace-level-1, -.rainbow-braces .token.token.punctuation.brace-level-5, -.rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(5, 74%, 59%); -} - -.rainbow-braces .token.token.punctuation.brace-level-2, -.rainbow-braces .token.token.punctuation.brace-level-6, -.rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(119, 34%, 47%); -} - -.rainbow-braces .token.token.punctuation.brace-level-3, -.rainbow-braces .token.token.punctuation.brace-level-7, -.rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(221, 87%, 60%); -} - -.rainbow-braces .token.token.punctuation.brace-level-4, -.rainbow-braces .token.token.punctuation.brace-level-8, -.rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(301, 63%, 40%); -} - -/* Diff Highlight plugin overrides */ -/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre.diff-highlight > code .token.token.deleted:not(.prefix), -pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); -} - -pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix), -pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -/* Previewers plugin overrides */ -/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ -/* Border around popup */ -.prism-previewer.prism-previewer:before, -.prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(0, 0, 95%); -} - -/* Angle and time should remain as circles and are hence not included */ -.prism-previewer-color.prism-previewer-color:before, -.prism-previewer-gradient.prism-previewer-gradient div, -.prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; -} - -/* Triangles pointing to the code */ -.prism-previewer.prism-previewer:after { - border-top-color: hsl(0, 0, 95%); -} - -.prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(0, 0, 95%); -} - -/* Background colour within the popup */ -.prism-previewer-angle.prism-previewer-angle:before, -.prism-previewer-time.prism-previewer-time:before, -.prism-previewer-easing.prism-previewer-easing { - background: hsl(0, 0%, 100%); -} - -/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ -/* For time, this is the alternate colour */ -.prism-previewer-angle.prism-previewer-angle circle, -.prism-previewer-time.prism-previewer-time circle { - stroke: hsl(230, 8%, 24%); - stroke-opacity: 1; -} - -/* Stroke colours of the handle, direction point, and vector itself */ -.prism-previewer-easing.prism-previewer-easing circle, -.prism-previewer-easing.prism-previewer-easing path, -.prism-previewer-easing.prism-previewer-easing line { - stroke: hsl(230, 8%, 24%); -} - -/* Fill colour of the handle */ -.prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; -} diff --git a/styles/rua.css b/styles/rua.css index d92cf63..e752aef 100644 --- a/styles/rua.css +++ b/styles/rua.css @@ -179,6 +179,38 @@ h6:hover::before { border-radius: 6px; } +#article pre, +code { + font-family: + var(--font-jetbrains-mono), + -apple-system, + 'DejaVu Sans Mono', + monospace; +} + +#article pre { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; + @apply bg-white dark:bg-rua-gray-800; + /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', + monospace; */ + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + #article pre > code { padding: 0; margin: 0;