diff --git a/src/client/theme-default/styles/code.css b/src/client/theme-default/styles/code.css index a22c6987..d800bebb 100644 --- a/src/client/theme-default/styles/code.css +++ b/src/client/theme-default/styles/code.css @@ -1,11 +1,11 @@ code { - font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; + margin: 0; + border-radius: 3px; + padding: .25rem .5rem; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; font-size: var(--code-font-size); color: var(--c-text-light); - background-color: rgba(27, 31, 35, 0.05); - padding: 0.25rem 0.5rem; - border-radius: 3px; - margin: 0; + background-color: rgba(27, 31, 35, .05); } code .token.deleted { @@ -17,24 +17,24 @@ code .token.inserted { } div[class*='language-'] { + position: relative; + margin: .85rem 0; + border-radius: 6px; + padding: .5rem 1.5rem; line-height: 1.5; - padding: 0.5rem 1.5rem; background-color: var(--code-bg-color); - border-radius: 6px; overflow-x: auto; - position: relative; - margin: 0.85rem 0; } [class*='language-'] pre { - background: transparent; position: relative; z-index: 1; + background: transparent; } [class*='language-'] code { - color: #eee; padding: 0; + color: #eee; } [class*='language-'] code, @@ -45,11 +45,9 @@ div[class*='language-'] { word-break: normal; word-wrap: 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; @@ -59,18 +57,18 @@ div[class*='language-'] { /* Line highlighting */ .highlight-lines { - font-size: var(--code-font-size); - user-select: none; - padding-top: var(--code-padding-vertical); position: absolute; top: 0; left: 0; + padding-top: var(--code-padding-vertical); width: 100%; line-height: 1.5; + font-size: var(--code-font-size); + user-select: none; } .highlight-lines .highlighted { - background-color: rgba(0, 0, 0, 0.66); + background-color: rgba(0, 0, 0, .66); } /* Line numbers mode */ @@ -83,13 +81,13 @@ div[class*='language-'].line-numbers-mode { position: absolute; top: 0; left: 0; + border-right: 1px solid rgba(0, 0, 0, .5); + padding: var(--code-padding-vertical) 0; width: 3.5rem; text-align: center; - color: #888; line-height: 1.5; font-size: var(--code-font-size); - padding: var(--code-padding-vertical) 0; - border-right: 1px solid rgba(0,0,0,0.5); + color: #888; z-index: 4; } @@ -97,10 +95,10 @@ div[class*='language-'].line-numbers-mode { [class*='language-']:before { position: absolute; - z-index: 3; - top: 0.6em; + top: .6em; right: 1em; - font-size: 0.8rem; + z-index: 3; + font-size: .8rem; color: #888; } @@ -192,8 +190,9 @@ div[class*='language-'].line-numbers-mode { } /** - * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML. * Based on https://github.com/chriskempson/tomorrow-theme + * * @author Rose Pritchard */ .token.comment, @@ -258,6 +257,7 @@ div[class*='language-'].line-numbers-mode { .token.bold { font-weight: bold; } + .token.italic { font-style: italic; }