diff --git a/static/css/theme.css b/static/css/theme.css index 706a91f0dc..db1f88a9c4 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -623,23 +623,22 @@ section.attachments.neutral > div.label { code, kbd, pre, samp { font-family: "Consolas", menlo, monospace; - font-size: 92%; + font-size: 14.75px; + vertical-align: baseline; } code { + background-color: #FFFAE9; + border: 1px solid #F8E8C8; border-radius: 2px; + color: #5E5E5E; + padding-left: 2px; + padding-right: 2px; white-space: nowrap; - color: #5e5e5e; - background: #FFF7DD; - border: 1px solid #fbf0cb; - padding: 0px 2px; } -code + .copy-to-clipboard { - margin-left: -1px; - border-left: 0 !important; - font-size: inherit !important; - vertical-align: middle; - height: 21px; - top: 0; +code.copy-to-clipboard-inline { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-right-width: 0; } pre { padding: 1rem; @@ -796,6 +795,7 @@ td { position: relative; } .tooltipped:after { + border: 1px solid #777; position: absolute; z-index: 1000000; display: none; @@ -1052,37 +1052,37 @@ td { } } .copy-to-clipboard { + background-color: #FFFAE9; background-image: url(../images/clippy.svg); background-position: 50% 50%; - background-size: 16px 16px; background-repeat: no-repeat; - width: 27px; - height: 1.45rem; - top: -1px; - display: inline-block; - vertical-align: middle; - position: relative; - color: #5e5e5e; - background-color: #FFF7DD; - margin-left: -.2rem; + background-size: 16px 16px; + border: 1px solid #F8E8C8; + border-radius: 2px; + color: #5E5E5E; cursor: pointer; - border-radius: 0 2px 2px 0; - margin-bottom: 1px; + font-size: 14.75px; + display: inline-block; + padding: 11px 13px; + position: relative; + top: 1.75px; + vertical-align: top; } .copy-to-clipboard:hover { - background-color: #E8E2CD; + background-color: #FCEBB4; + border-color: #B19F7A; } pre .copy-to-clipboard { + background-color: #C1C4C6; + border-color: #000; + padding: 10.5px 13.5px; position: absolute; right: 4px; top: 4px; - background-color: #C1C4C6; - color: #ccc; - border-radius: 2px; } pre .copy-to-clipboard:hover { - background-color: #00bdf3; - color: #fff; + border-color: #505050; + background-color: #E6E9EB; } .parent-element { -webkit-transform-style: preserve-3d; diff --git a/static/js/relearn.js b/static/js/relearn.js index 52d9abf2ee..ef436f0526 100644 --- a/static/js/relearn.js +++ b/static/js/relearn.js @@ -337,6 +337,7 @@ jQuery(function() { clipInit = true; } + code.addClass('copy-to-clipboard-inline'); code.after(''); code.next('.copy-to-clipboard').on('mouseleave', function() { $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');