UNPKG

4.03 kBCSSView Raw
1/**
2 * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
3 * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
4 * @author Tim Shedor
5 */
6
7code[class*="language-"],
8pre[class*="language-"] {
9 color: black;
10 background: none;
11 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
12 font-size: 1em;
13 text-align: left;
14 white-space: pre;
15 word-spacing: normal;
16 word-break: normal;
17 word-wrap: normal;
18 line-height: 1.5;
19
20 -moz-tab-size: 4;
21 -o-tab-size: 4;
22 tab-size: 4;
23
24 -webkit-hyphens: none;
25 -moz-hyphens: none;
26 -ms-hyphens: none;
27 hyphens: none;
28}
29
30/* Code blocks */
31pre[class*="language-"] {
32 position: relative;
33 margin: .5em 0;
34 overflow: visible;
35 padding: 1px;
36}
37
38pre[class*="language-"] > code {
39 position: relative;
40 z-index: 1;
41 border-left: 10px solid #358ccb;
42 box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
43 background-color: #fdfdfd;
44 background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
45 background-size: 3em 3em;
46 background-origin: content-box;
47 background-attachment: local;
48}
49
50code[class*="language-"] {
51 max-height: inherit;
52 height: inherit;
53 padding: 0 1em;
54 display: block;
55 overflow: auto;
56}
57
58/* Margin bottom to accommodate shadow */
59:not(pre) > code[class*="language-"],
60pre[class*="language-"] {
61 background-color: #fdfdfd;
62 -webkit-box-sizing: border-box;
63 -moz-box-sizing: border-box;
64 box-sizing: border-box;
65 margin-bottom: 1em;
66}
67
68/* Inline code */
69:not(pre) > code[class*="language-"] {
70 position: relative;
71 padding: .2em;
72 border-radius: 0.3em;
73 color: #c92c2c;
74 border: 1px solid rgba(0, 0, 0, 0.1);
75 display: inline;
76 white-space: normal;
77}
78
79pre[class*="language-"]:before,
80pre[class*="language-"]:after {
81 content: '';
82 display: block;
83 position: absolute;
84 bottom: 0.75em;
85 left: 0.18em;
86 width: 40%;
87 height: 20%;
88 max-height: 13em;
89 box-shadow: 0px 13px 8px #979797;
90 -webkit-transform: rotate(-2deg);
91 -moz-transform: rotate(-2deg);
92 -ms-transform: rotate(-2deg);
93 -o-transform: rotate(-2deg);
94 transform: rotate(-2deg);
95}
96
97pre[class*="language-"]:after {
98 right: 0.75em;
99 left: auto;
100 -webkit-transform: rotate(2deg);
101 -moz-transform: rotate(2deg);
102 -ms-transform: rotate(2deg);
103 -o-transform: rotate(2deg);
104 transform: rotate(2deg);
105}
106
107.token.comment,
108.token.block-comment,
109.token.prolog,
110.token.doctype,
111.token.cdata {
112 color: #7D8B99;
113}
114
115.token.punctuation {
116 color: #5F6364;
117}
118
119.token.property,
120.token.tag,
121.token.boolean,
122.token.number,
123.token.function-name,
124.token.constant,
125.token.symbol,
126.token.deleted {
127 color: #c92c2c;
128}
129
130.token.selector,
131.token.attr-name,
132.token.string,
133.token.char,
134.token.function,
135.token.builtin,
136.token.inserted {
137 color: #2f9c0a;
138}
139
140.token.operator,
141.token.entity,
142.token.url,
143.token.variable {
144 color: #a67f59;
145 background: rgba(255, 255, 255, 0.5);
146}
147
148.token.atrule,
149.token.attr-value,
150.token.keyword,
151.token.class-name {
152 color: #1990b8;
153}
154
155.token.regex,
156.token.important {
157 color: #e90;
158}
159
160.language-css .token.string,
161.style .token.string {
162 color: #a67f59;
163 background: rgba(255, 255, 255, 0.5);
164}
165
166.token.important {
167 font-weight: normal;
168}
169
170.token.bold {
171 font-weight: bold;
172}
173.token.italic {
174 font-style: italic;
175}
176
177.token.entity {
178 cursor: help;
179}
180
181.token.namespace {
182 opacity: .7;
183}
184
185@media screen and (max-width: 767px) {
186 pre[class*="language-"]:before,
187 pre[class*="language-"]:after {
188 bottom: 14px;
189 box-shadow: none;
190 }
191
192}
193
194/* Plugin styles: Line Numbers */
195pre[class*="language-"].line-numbers.line-numbers {
196 padding-left: 0;
197}
198
199pre[class*="language-"].line-numbers.line-numbers code {
200 padding-left: 3.8em;
201}
202
203pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
204 left: 0;
205}
206
207/* Plugin styles: Line Highlight */
208pre[class*="language-"][data-line] {
209 padding-top: 0;
210 padding-bottom: 0;
211 padding-left: 0;
212}
213pre[data-line] code {
214 position: relative;
215 padding-left: 4em;
216}
217pre .line-highlight {
218 margin-top: 0;
219}