151 lines
2.5 KiB
SCSS
151 lines
2.5 KiB
SCSS
/**
|
|
* Essence's Prism Theme, based on Material Theme, but brighter.
|
|
*
|
|
* Author: Leo Nguyen
|
|
*/
|
|
:root {
|
|
--prism-bg: hsl(220, 15%, 20%);
|
|
--prism-gray: hsl(210, 30%, 65%);
|
|
--prism-red: hsl(0, 100%, 80%);
|
|
--prism-orange: hsl(30, 100%, 75%);
|
|
--prism-yellow: hsl(50, 90%, 70%);
|
|
--prism-green: hsl(100, 80%, 80%);
|
|
--prism-cyan: hsl(190, 100%, 80%);
|
|
--prism-blue: hsl(220, 100%, 85%);
|
|
--prism-purple: hsl(275, 100%, 80%);
|
|
}
|
|
|
|
/*.prism-theme-material {
|
|
--prism-bg: #263238;
|
|
--prism-gray: #546e7a;
|
|
--prism-red: #f07178;
|
|
--prism-orange: #f78c6c;
|
|
--prism-yellow: #ffcb6b;
|
|
--prism-green: #c3e88d;
|
|
--prism-cyan: #89ddff;
|
|
--prism-blue: #82aaff;
|
|
--prism-purple: #c792ea;
|
|
}*/
|
|
|
|
pre {
|
|
margin: 0.5rem 0 1rem;
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--prism-bg);
|
|
line-height: 1.5;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
tab-size: 4;
|
|
hyphens: none;
|
|
|
|
code {
|
|
padding: 0;
|
|
color: #fff;
|
|
background: var(--prism-bg);
|
|
}
|
|
}
|
|
|
|
div.code-toolbar > .toolbar > .toolbar-item > a,
|
|
div.code-toolbar > .toolbar > .toolbar-item > button,
|
|
div.code-toolbar > .toolbar > .toolbar-item > span {
|
|
padding: 0.5em 1em;
|
|
margin: 0.25em 0.5em;
|
|
font-size: 0.9em;
|
|
color: #eee;
|
|
}
|
|
|
|
.token {
|
|
/* Red (constant, tag, selector) */
|
|
&.constant,
|
|
&.tag,
|
|
&.selector,
|
|
&.namespace,
|
|
&.deleted {
|
|
color: var(--prism-red);
|
|
}
|
|
|
|
/* Orange/Red (number, boolean, constant) */
|
|
&.number,
|
|
&.boolean {
|
|
color: var(--prism-orange);
|
|
}
|
|
|
|
/* Yellow (entity, class) */
|
|
&.entity,
|
|
&.class,
|
|
&.name,
|
|
&.class-name,
|
|
&.package,
|
|
&.scope,
|
|
&.attr-name {
|
|
color: var(--prism-yellow);
|
|
}
|
|
|
|
/* Green (string, attribute) */
|
|
&.string,
|
|
&.char,
|
|
&.property,
|
|
&.attr-value,
|
|
&.regex {
|
|
color: var(--prism-green);
|
|
}
|
|
|
|
/* Cyan (symbol) */
|
|
&.symbol,
|
|
&.punctuation,
|
|
&.operator,
|
|
&.url,
|
|
&.unit,
|
|
&.hexcode,
|
|
&.doctype-tag {
|
|
color: var(--prism-cyan);
|
|
}
|
|
|
|
/* Blue (function) */
|
|
&.function-name,
|
|
&.function {
|
|
color: var(--prism-blue);
|
|
}
|
|
|
|
/* Purple (keyword) */
|
|
&.keyword,
|
|
&.important,
|
|
&.builtin,
|
|
&.atrule {
|
|
color: var(--prism-purple);
|
|
}
|
|
|
|
/* White (variable, CSS pseudo class) */
|
|
&.variable,
|
|
&.pseudo-class {
|
|
color: #fff;
|
|
}
|
|
|
|
/* Gray (comment) */
|
|
&.comment,
|
|
&.block-comment,
|
|
&.prolog,
|
|
&.doctype,
|
|
&.cdata {
|
|
color: var(--prism-gray);
|
|
}
|
|
|
|
// &.important,
|
|
&.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
&.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
&.inserted {
|
|
color: green;
|
|
}
|
|
}
|