PrismJS copy button style

[bastienperez]

Hello,

First of all, thanks for your work!

I have a little issue with the PrismJS copy button. On the default theme (casper), the style works as expected?

But on liebling theme, the button code is big and not very visible.

I use PrismJS 1.29, same issues with older versions 1.25/1.26

Header injection:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css"/>

footer injection

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

[eddiesigner]

Hi,

you can inject the following code in the Ghost Admin (Settings --> Code injection --> Site Header):

<style>
    .l-post-content button.copy-to-clipboard-button:not(.m-icon-button):not(.kg-video-card button):not(.kg-audio-card button):not(.kg-toggle-card button) {
       color: #bbb;
       font-size: .8em;
       padding: 0 .5em;
       background: #f5f2f0;
       background: rgba(224,224,224,.2);
       background-color: rgba(224, 224, 224, 0.2);
       background-color: rgba(224, 224, 224, 0.2);
       box-shadow: 0 2px 0 0 rgba(0,0,0,.2);
    }
</style>

[bastienperez]

Thanks (again), it works!