diff --git a/plugins/toolbar/prism-toolbar.css b/plugins/toolbar/prism-toolbar.css index 59676aea4c..9a59f5c53b 100644 --- a/plugins/toolbar/prism-toolbar.css +++ b/plugins/toolbar/prism-toolbar.css @@ -1,18 +1,23 @@ div.code-toolbar { position: relative; + + /* ensuring position of the elements is in front of everything else so that the scrolling bar isn't blocking anything */ + z-index: 999; } div.code-toolbar > .toolbar { position: absolute; z-index: 10; - top: .3em; + bottom: .3em; right: .2em; transition: opacity 0.3s ease-in-out; opacity: 0; + margin-right: 0.5em; } div.code-toolbar:hover > .toolbar { opacity: 1; + color: black; } /* Separate line b/c rules are thrown out if selector is invalid. @@ -23,6 +28,9 @@ div.code-toolbar:focus-within > .toolbar { div.code-toolbar > .toolbar > .toolbar-item { display: inline-block; + + /* controlling padding btwn elements */ + margin-right: 0.5em; } div.code-toolbar > .toolbar > .toolbar-item > a { @@ -46,7 +54,7 @@ div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span { color: #bbb; - font-size: .8em; + font-size: .75em; padding: 0 .5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.2); diff --git a/themes/prism.css b/themes/prism.css index 5b8ed2d132..9f8f5eb338 100644 --- a/themes/prism.css +++ b/themes/prism.css @@ -49,7 +49,9 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { /* Code blocks */ pre[class*="language-"] { - padding: 1em; + + /* changing padding for single liners where the code was smushed */ + padding: 2em; margin: .5em 0; overflow: auto; }