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