diff --git a/frontend/styles/prism.css b/frontend/styles/prism.css index 3655ef339..c7e3f21ff 100644 --- a/frontend/styles/prism.css +++ b/frontend/styles/prism.css @@ -1,118 +1,173 @@ -/** - * GHColors theme by Avi Aryan (http://aviaryan.in) - * Inspired by Github syntax coloring - */ +/* +Name: Base16 Atelier Sulphurpool Light +Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) + +Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/) +Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) + +*/ code[class*="language-"], pre[class*="language-"] { - color: #393A34; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - font-size: 13px; - line-height: 1.4em; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 13px; + line-height: 1.375; + direction: ltr; + font-weight: 600; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + background: #f5f7ff; + color: #5e6687; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - background: #b3d4fc; + text-shadow: none; + background: #dfe2f1; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - background: #b3d4fc; + text-shadow: none; + background: #dfe2f1; } /* Code blocks */ pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border: 1px solid #dddddd; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; } /* Inline code */ :not(pre) > code[class*="language-"] { - padding: .2em; - padding-top: 1px; padding-bottom: 1px; - background: #f8f8f8; - border: 1px solid #dddddd; + padding: .1em; + border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #999988; font-style: italic; + color: #898ea4; +} + +.token.punctuation { + color: #5e6687; } .token.namespace { - opacity: .7; + opacity: .7; } -.token.string, -.token.attr-value { - color: #e3116c; +.token.operator, +.token.boolean, +.token.number { + color: #c76b29; } -.token.punctuation, -.token.operator { - color: #393A34; /* no highlight */ + +.token.property { + color: #c08b30; +} + +.token.tag { + color: #3d8fd1; +} + +.token.string { + color: #22a2c9; +} + +.token.selector { + color: #6679cc; +} + +.token.attr-name { + color: #c76b29; } .token.entity, .token.url, -.token.symbol, -.token.number, -.token.boolean, -.token.variable, -.token.constant, -.token.property, -.token.regex, -.token.inserted { - color: #36acaa; +.language-css .token.string, +.style .token.string { + color: #22a2c9; } -.token.atrule, +.token.attr-value, .token.keyword, -.token.attr-name, -.language-autohotkey .token.selector { - color: #00a4db; +.token.control, +.token.directive, +.token.unit { + color: #ac9739; } -.token.function, -.token.deleted, -.language-autohotkey .token.tag { - color: #9a050f; +.token.statement, +.token.regex, +.token.atrule { + color: #22a2c9; } -.token.tag, -.token.selector, -.language-autohotkey .token.keyword { - color: #00009f; +.token.placeholder, +.token.variable { + color: #3d8fd1; } -.token.important, -.token.function, -.token.bold { - font-weight: bold; +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; } .token.italic { - font-style: italic; + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #c94922; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: 0.4em solid #c94922; + outline-offset: .4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers .line-numbers-rows { + border-right-color: #dfe2f1; +} + +.line-numbers-rows > span:before { + color: #979db4; +} + +/* overrides color-values for the Line Highlight plugin + * http://prismjs.com/plugins/line-highlight/ + */ +.line-highlight { + background: rgba(107, 115, 148, 0.2); + background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); + background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); }