UNPKG

2.7 kBCSSView Raw
1/**
2* xonokai theme for JavaScript, CSS and HTML
3* based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
4* license: MIT; http://moox.mit-license.org/
5*/
6code[class*="language-"],
7pre[class*="language-"] {
8 -moz-tab-size: 2;
9 -o-tab-size: 2;
10 tab-size: 2;
11 -webkit-hyphens: none;
12 -moz-hyphens: none;
13 -ms-hyphens: none;
14 hyphens: none;
15 white-space: pre;
16 white-space: pre-wrap;
17 word-wrap: normal;
18 font-family: Menlo, Monaco, "Courier New", monospace;
19 font-size: 14px;
20 color: #76d9e6;
21 text-shadow: none;
22}
23
24pre > code[class*="language-"] {
25 font-size: 1em;
26}
27
28pre[class*="language-"],
29:not(pre) > code[class*="language-"] {
30 background: #2a2a2a;
31}
32
33pre[class*="language-"] {
34 padding: 15px;
35 border-radius: 4px;
36 border: 1px solid #e1e1e8;
37 overflow: auto;
38 position: relative;
39}
40
41pre[class*="language-"] code {
42 white-space: pre;
43 display: block;
44}
45
46:not(pre) > code[class*="language-"] {
47 padding: 0.15em 0.2em 0.05em;
48 border-radius: .3em;
49 border: 0.13em solid #7a6652;
50 box-shadow: 1px 1px 0.3em -0.1em #000 inset;
51}
52
53.token.namespace {
54 opacity: .7;
55}
56
57.token.comment,
58.token.prolog,
59.token.doctype,
60.token.cdata {
61 color: #6f705e;
62}
63
64.token.operator,
65.token.boolean,
66.token.number {
67 color: #a77afe;
68}
69
70.token.attr-name,
71.token.string {
72 color: #e6d06c;
73}
74
75.token.entity,
76.token.url,
77.language-css .token.string,
78.style .token.string {
79 color: #e6d06c;
80}
81
82.token.selector,
83.token.inserted {
84 color: #a6e22d;
85}
86
87.token.atrule,
88.token.attr-value,
89.token.keyword,
90.token.important,
91.token.deleted {
92 color: #ef3b7d;
93}
94
95.token.regex,
96.token.statement {
97 color: #76d9e6;
98}
99
100.token.placeholder,
101.token.variable {
102 color: #fff;
103}
104
105.token.important,
106.token.statement,
107.token.bold {
108 font-weight: bold;
109}
110
111.token.punctuation {
112 color: #bebec5;
113}
114
115.token.entity {
116 cursor: help;
117}
118
119.token.italic {
120 font-style: italic;
121}
122
123code.language-markup {
124 color: #f9f9f9;
125}
126
127code.language-markup .token.tag {
128 color: #ef3b7d;
129}
130
131code.language-markup .token.attr-name {
132 color: #a6e22d;
133}
134
135code.language-markup .token.attr-value {
136 color: #e6d06c;
137}
138
139code.language-markup .token.style,
140code.language-markup .token.script {
141 color: #76d9e6;
142}
143
144code.language-markup .token.script .token.keyword {
145 color: #76d9e6;
146}
147
148/* Line highlight plugin */
149.line-highlight.line-highlight {
150 padding: 0;
151 background: rgba(255, 255, 255, 0.08);
152}
153
154.line-highlight.line-highlight:before,
155.line-highlight.line-highlight[data-end]:after {
156 padding: 0.2em 0.5em;
157 background-color: rgba(255, 255, 255, 0.4);
158 color: black;
159 height: 1em;
160 line-height: 1em;
161 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
162}