1/** 2 * prism.js Twilight theme 3 * Based (more or less) on the Twilight theme originally of Textmate fame. 4 * @author Remy Bach 5 */ 6code[class*="language-"], 7pre[class*="language-"] { 8 color: white; 9 direction: ltr; 10 font-family: source-code-pro, Consolas, Monaco, 'Andale Mono', monospace; 11 text-align: left; 12 text-shadow: 0 -.1em .2em black; 13 white-space: pre; 14 word-spacing: normal; 15 16 -moz-tab-size: 4; 17 -o-tab-size: 4; 18 tab-size: 4; 19 20 -webkit-hyphens: none; 21 -moz-hyphens: none; 22 -ms-hyphens: none; 23 hyphens: none; 24} 25 26pre[class*="language-"], 27:not(pre) > code[class*="language-"] { 28 background:#181818; 29} 30 31/* Code blocks */ 32pre[class*="language-"] { 33 margin: .5em 0; 34 overflow: auto; 35} 36pre[class*="language-"]::selection { /* Safari */ 37 background:hsl(200, 4%, 16%); /* #282A2B */ 38} 39pre[class*="language-"]::selection { /* Firefox */ 40 background:hsl(200, 4%, 16%); /* #282A2B */ 41} 42 43/* Inline code */ 44:not(pre) > code[class*="language-"] { 45 border-radius: .3em; 46 border: .13em solid hsl(0,0%,33%); /* #545454 */ 47 box-shadow: 1px 1px .3em -.1em black inset; 48 padding: .15em .2em .05em; 49} 50 51.token.comment, 52.token.prolog, 53.token.doctype, 54.token.cdata { 55 color: hsl(0, 0%, 47%); /* #777777 */ 56} 57 58.token.punctuation { 59 opacity: .7; 60} 61 62.namespace { 63 opacity: .7; 64} 65 66.token.tag, 67.token.boolean, 68.token.number { 69 color: hsl(14, 58%, 55%); /* #CF6A4C */ 70} 71 72.token.keyword, 73.token.property, 74.token.selector { 75 color:hsl(53, 89%, 79%); /* #F9EE98 */ 76} 77.token.attr-name, 78.token.attr-value, 79.token.string, 80.token.operator, 81.token.entity, 82.token.url, 83.language-css .token.string, 84.style .token.string { 85 color:hsl(76, 21%, 52%); /* #8F9D6A */ 86} 87 88.token.atrule { 89 color:hsl(218, 22%, 55%); /* #7587A6 */ 90} 91 92.token.regex, 93.token.important { 94 color: hsl(42, 75%, 65%); /* #E9C062 */ 95} 96 97.token.important { 98 font-weight: bold; 99} 100 101.token.entity { 102 cursor: help; 103} 104pre[data-line] { 105 padding: 1em 0 1em 3em; 106 position: relative; 107} 108 109/* Markup */ 110.language-markup .token.tag, 111.language-markup .token.attr-name, 112.language-markup .token.punctuation { 113 color: hsl(33, 33%, 52%); /* #AC885B */ 114} 115 116/* Text Selection colour */ 117::selection { 118 background: hsla(0,0%,93%,0.15); /* #EDEDED */ 119} 120::-moz-selection { 121 background: hsla(0,0%,93%,0.15); /* #EDEDED */ 122} 123 124/* Make the tokens sit above the line highlight so the colours don't look faded. */ 125.token { 126 position:relative; 127 z-index:1; 128} 129.line-highlight { 130 background: -moz-linear-gradient(left, hsla(0, 0%, 33%,.1) 70%, hsla(0, 0%, 33%,0)); /* #545454 */ 131 background: -o-linear-gradient(left, hsla(0, 0%, 33%,.1) 70%, hsla(0, 0%, 33%,0)); /* #545454 */ 132 background: -webkit-linear-gradient(left, hsla(0, 0%, 33%,.1) 70%, hsla(0, 0%, 33%,0)); /* #545454 */ 133 background: hsla(0, 0%, 33%, 0.25); /* #545454 */ 134 background: linear-gradient(left, hsla(0, 0%, 33%,.1) 70%, hsla(0, 0%, 33%,0)); /* #545454 */ 135 border-bottom:1px dashed hsl(0, 0%, 33%); /* #545454 */ 136 border-top:1px dashed hsl(0, 0%, 33%); /* #545454 */ 137 left: 0; 138 line-height: inherit; 139 margin-top: 0.75em; /* Same as .prism’s padding-top */ 140 padding: inherit 0; 141 pointer-events: none; 142 position: absolute; 143 right: 0; 144 white-space: pre; 145 z-index:0; 146} 147.line-highlight:before, 148.line-highlight[data-end]:after { 149 background-color: hsl(215, 15%, 59%); /* #8794A6 */ 150 border-radius: 999px; 151 box-shadow: 0 1px white; 152 color: hsl(24, 20%, 95%); /* #F5F2F0 */ 153 content: attr(data-start); 154 font: bold 65%/1.5 sans-serif; 155 left: .6em; 156 min-width: 1em; 157 padding: 0 .5em; 158 position: absolute; 159 text-align: center; 160 text-shadow: none; 161 top: .4em; 162 vertical-align: .3em; 163} 164.line-highlight[data-end]:after { 165 bottom: .4em; 166 content: attr(data-end); 167 top: auto; 168}