forked from TryGhost/Casper
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update theme to support prism.js for code markup
- Loading branch information
Showing
3 changed files
with
306 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,288 @@ | |||
/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript+bash+c+csharp+cpp+fsharp+ruby+typescript&plugins=line-highlight+line-numbers */ | |||
/** | |||
* prism.js Twilight theme | |||
* Based (more or less) on the Twilight theme originally of Textmate fame. | |||
* @author Remy Bach | |||
*/ | |||
code[class*="language-"], | |||
pre[class*="language-"] { | |||
color: white; | |||
direction: ltr; | |||
font-family: Consolas, Monaco, 'Andale Mono', monospace; | |||
text-align: left; | |||
text-shadow: 0 -.1em .2em black; | |||
white-space: pre; | |||
word-spacing: normal; | |||
word-break: normal; | |||
line-height: 1.5; | |||
|
|||
-moz-tab-size: 4; | |||
-o-tab-size: 4; | |||
tab-size: 4; | |||
|
|||
-webkit-hyphens: none; | |||
-moz-hyphens: none; | |||
-ms-hyphens: none; | |||
hyphens: none; | |||
} | |||
|
|||
pre[class*="language-"], | |||
:not(pre) > code[class*="language-"] { | |||
background: hsl(0, 0%, 8%); /* #141414 */ | |||
} | |||
|
|||
/* Code blocks */ | |||
pre[class*="language-"] { | |||
border-radius: .5em; | |||
border: .3em solid hsl(0, 0%, 33%); /* #282A2B */ | |||
box-shadow: 1px 1px .5em black inset; | |||
margin: .5em 0; | |||
overflow: auto; | |||
padding: 1em; | |||
} | |||
|
|||
pre[class*="language-"]::selection { | |||
/* Safari */ | |||
background: hsl(200, 4%, 16%); /* #282A2B */ | |||
} | |||
|
|||
pre[class*="language-"]::selection { | |||
/* Firefox */ | |||
background: hsl(200, 4%, 16%); /* #282A2B */ | |||
} | |||
|
|||
/* Text Selection colour */ | |||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, | |||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { | |||
text-shadow: none; | |||
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ | |||
} | |||
|
|||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection, | |||
code[class*="language-"]::selection, code[class*="language-"] ::selection { | |||
text-shadow: none; | |||
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ | |||
} | |||
|
|||
/* Inline code */ | |||
:not(pre) > code[class*="language-"] { | |||
border-radius: .3em; | |||
border: .13em solid hsl(0, 0%, 33%); /* #545454 */ | |||
box-shadow: 1px 1px .3em -.1em black inset; | |||
padding: .15em .2em .05em; | |||
} | |||
|
|||
.token.comment, | |||
.token.prolog, | |||
.token.doctype, | |||
.token.cdata { | |||
color: hsl(0, 0%, 47%); /* #777777 */ | |||
} | |||
|
|||
.token.punctuation { | |||
opacity: .7; | |||
} | |||
|
|||
.namespace { | |||
opacity: .7; | |||
} | |||
|
|||
.token.tag, | |||
.token.boolean, | |||
.token.number, | |||
.token.deleted { | |||
color: hsl(14, 58%, 55%); /* #CF6A4C */ | |||
} | |||
|
|||
.token.keyword, | |||
.token.property, | |||
.token.selector, | |||
.token.constant, | |||
.token.symbol, | |||
.token.builtin { | |||
color: hsl(53, 89%, 79%); /* #F9EE98 */ | |||
} | |||
|
|||
.token.attr-name, | |||
.token.attr-value, | |||
.token.string, | |||
.token.char, | |||
.token.operator, | |||
.token.entity, | |||
.token.url, | |||
.language-css .token.string, | |||
.style .token.string, | |||
.token.variable, | |||
.token.inserted { | |||
color: hsl(76, 21%, 52%); /* #8F9D6A */ | |||
} | |||
|
|||
.token.atrule { | |||
color: hsl(218, 22%, 55%); /* #7587A6 */ | |||
} | |||
|
|||
.token.regex, | |||
.token.important { | |||
color: hsl(42, 75%, 65%); /* #E9C062 */ | |||
} | |||
|
|||
.token.important, | |||
.token.bold { | |||
font-weight: bold; | |||
} | |||
.token.italic { | |||
font-style: italic; | |||
} | |||
|
|||
.token.entity { | |||
cursor: help; | |||
} | |||
|
|||
pre[data-line] { | |||
padding: 1em 0 1em 3em; | |||
position: relative; | |||
} | |||
|
|||
/* Markup */ | |||
.language-markup .token.tag, | |||
.language-markup .token.attr-name, | |||
.language-markup .token.punctuation { | |||
color: hsl(33, 33%, 52%); /* #AC885B */ | |||
} | |||
|
|||
/* Make the tokens sit above the line highlight so the colours don't look faded. */ | |||
.token { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
|
|||
.line-highlight { | |||
background: -moz-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ | |||
background: -o-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ | |||
background: -webkit-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ | |||
background: hsla(0, 0%, 33%, 0.25); /* #545454 */ | |||
background: linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ | |||
border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */ | |||
border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */ | |||
left: 0; | |||
line-height: inherit; | |||
margin-top: 0.75em; /* Same as .prism’s padding-top */ | |||
padding: inherit 0; | |||
pointer-events: none; | |||
position: absolute; | |||
right: 0; | |||
white-space: pre; | |||
z-index: 0; | |||
} | |||
|
|||
.line-highlight:before, | |||
.line-highlight[data-end]:after { | |||
background-color: hsl(215, 15%, 59%); /* #8794A6 */ | |||
border-radius: 999px; | |||
box-shadow: 0 1px white; | |||
color: hsl(24, 20%, 95%); /* #F5F2F0 */ | |||
content: attr(data-start); | |||
font: bold 65%/1.5 sans-serif; | |||
left: .6em; | |||
min-width: 1em; | |||
padding: 0 .5em; | |||
position: absolute; | |||
text-align: center; | |||
text-shadow: none; | |||
top: .4em; | |||
vertical-align: .3em; | |||
} | |||
|
|||
.line-highlight[data-end]:after { | |||
bottom: .4em; | |||
content: attr(data-end); | |||
top: auto; | |||
} | |||
|
|||
pre[data-line] { | |||
position: relative; | |||
padding: 1em 0 1em 3em; | |||
} | |||
|
|||
.line-highlight { | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
padding: inherit 0; | |||
margin-top: 1em; /* Same as .prism’s padding-top */ | |||
|
|||
background: hsla(24, 20%, 50%,.08); | |||
background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); | |||
background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); | |||
background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); | |||
background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); | |||
|
|||
pointer-events: none; | |||
|
|||
line-height: inherit; | |||
white-space: pre; | |||
} | |||
|
|||
.line-highlight:before, | |||
.line-highlight[data-end]:after { | |||
content: attr(data-start); | |||
position: absolute; | |||
top: .4em; | |||
left: .6em; | |||
min-width: 1em; | |||
padding: 0 .5em; | |||
background-color: hsla(24, 20%, 50%,.4); | |||
color: hsl(24, 20%, 95%); | |||
font: bold 65%/1.5 sans-serif; | |||
text-align: center; | |||
vertical-align: .3em; | |||
border-radius: 999px; | |||
text-shadow: none; | |||
box-shadow: 0 1px white; | |||
} | |||
|
|||
.line-highlight[data-end]:after { | |||
content: attr(data-end); | |||
top: auto; | |||
bottom: .4em; | |||
} | |||
pre.line-numbers { | |||
position: relative; | |||
padding-left: 3.8em; | |||
counter-reset: linenumber; | |||
} | |||
|
|||
pre.line-numbers > code { | |||
position: relative; | |||
} | |||
|
|||
.line-numbers .line-numbers-rows { | |||
position: absolute; | |||
pointer-events: none; | |||
top: 0; | |||
font-size: 100%; | |||
left: -3.8em; | |||
width: 3em; /* works for line-numbers below 1000 lines */ | |||
letter-spacing: -1px; | |||
border-right: 1px solid #999; | |||
|
|||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
|
|||
} | |||
|
|||
.line-numbers-rows > span { | |||
pointer-events: none; | |||
display: block; | |||
counter-increment: linenumber; | |||
} | |||
|
|||
.line-numbers-rows > span:before { | |||
content: counter(linenumber); | |||
color: #999; | |||
display: block; | |||
padding-right: 0.8em; | |||
text-align: right; | |||
} |
Oops, something went wrong.