From 69e232af6f68ab727ddfa38faa54dc1c9b4bff7f Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Wed, 5 Jun 2019 16:35:51 +0200 Subject: [PATCH] fix: Add nightmode style and remove operator background. --- client/src/components/layouts/Learn.js | 2 + client/src/components/layouts/prism-night.css | 127 ++++++++++++++++++ client/src/components/layouts/prism.css | 3 + 3 files changed, 132 insertions(+) create mode 100644 client/src/components/layouts/prism-night.css create mode 100644 client/src/components/layouts/prism.css diff --git a/client/src/components/layouts/Learn.js b/client/src/components/layouts/Learn.js index 2ff4ecce37..8c314fe1cf 100644 --- a/client/src/components/layouts/Learn.js +++ b/client/src/components/layouts/Learn.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import DonateModal from '../Donation'; import 'prismjs/themes/prism.css'; +import './prism.css'; +import './prism-night.css'; import 'react-reflex/styles.css'; import './learn.css'; diff --git a/client/src/components/layouts/prism-night.css b/client/src/components/layouts/prism-night.css new file mode 100644 index 0000000000..e16706e925 --- /dev/null +++ b/client/src/components/layouts/prism-night.css @@ -0,0 +1,127 @@ +/** + * Adapted from: + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ + +.night code[class*="language-"], +.night pre[class*="language-"] { + color: #ccc; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + +} + +.night pre[class*="language-"] code[class*="language-"] { + color: #d4d4d4; +} + +/* Code blocks */ +.night pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +.night :not(pre) > code[class*="language-"], +.night pre[class*="language-"] { + background: #242424; +} + +/* Inline code */ +.night :not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.night .token.comment, +.night .token.block-comment, +.night .token.prolog, +.night .token.doctype, +.night .token.cdata { + color: #608b4e; +} + +.night .token.punctuation { + color: #ffff00; +} + +.night .token.tag, +.night .token.attr-name, +.night .token.namespace, +.night .token.deleted { + color: #e2777a; +} + +.night .token.function-name { + color: #d4d4d4; +} + +.night .token.boolean, +.night .token.number, +.night .token.function { + color: #569cd6; +} + +.night .token.property, +.night .token.class-name, +.night .token.constant, +.night .token.symbol { + color: #f8c555; +} + +.night .token.selector, +.night .token.important, +.night .token.atrule, +.night .token.keyword, +.night .token.builtin { + color: #569cd6; +} + +.night .token.string, +.night .token.char, +.night .token.attr-value, +.night .token.regex, +.night .token.variable { + color: #7ec699; +} + +.night .token.operator, +.night .token.entity, +.night .token.url { + color: #67cdcc; + background: none; +} + +.night .token.important, +.night .token.bold { + font-weight: bold; +} +.night .token.italic { + font-style: italic; +} + +.night .token.entity { + cursor: help; +} + +.night .token.inserted { + color: green; +} diff --git a/client/src/components/layouts/prism.css b/client/src/components/layouts/prism.css new file mode 100644 index 0000000000..bb698efc91 --- /dev/null +++ b/client/src/components/layouts/prism.css @@ -0,0 +1,3 @@ +code .token.operator { + background: none; +}