Change the icon & color of the code block header
This commit is contained in:
parent
ed93fbdfde
commit
abb548fcee
4 changed files with 22 additions and 13 deletions
|
@ -119,7 +119,7 @@
|
|||
|
||||
{% if _left contains 'file="' %}
|
||||
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_icon = 'far fa-file' %}
|
||||
{% assign _label_icon = 'far fa-file-code' %}
|
||||
{% else %}
|
||||
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
|
||||
{% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
||||
|
@ -135,7 +135,7 @@
|
|||
| append: _label
|
||||
| append: '<button aria-label="copy" data-original-title="'
|
||||
| append: site.data.locales[lang].post.button.copy_code.succeed
|
||||
| append: '"><i class="far fa-clone"></i></button></div>'
|
||||
| append: '"><i class="far fa-clipboard"></i></button></div>'
|
||||
| append: '<div class="highlight"><code>'
|
||||
%}
|
||||
|
||||
|
|
|
@ -172,17 +172,27 @@ div {
|
|||
align-items: center;
|
||||
line-height: 1.85rem;
|
||||
|
||||
// icons
|
||||
i {
|
||||
font-size: 1rem;
|
||||
color: var(--lang-badge-muted-color);
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// the label block
|
||||
span {
|
||||
color: var(--lang-badge-color);
|
||||
padding-left: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
&:after {
|
||||
content: attr(text-data);
|
||||
margin-left: 0.3rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--lang-badge-color);
|
||||
}
|
||||
|
||||
@at-root [file] #{&} > i { // center the file icon
|
||||
|
@ -200,13 +210,14 @@ div {
|
|||
padding: 0;
|
||||
width: 1.95rem;
|
||||
background-color: inherit;
|
||||
color: var(--highlight-lineno-color);
|
||||
|
||||
@extend %cursor-pointer;
|
||||
|
||||
&[timeout] {
|
||||
color: var(--clipboard-checked-color);
|
||||
border-color: var(--clipboard-checked-color);
|
||||
i {
|
||||
color: var(--clipboard-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([timeout]):hover {
|
||||
|
@ -220,10 +231,6 @@ div {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -75,7 +75,8 @@
|
|||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-bg: #353535;
|
||||
--lang-badge-color: #6c6c6d;
|
||||
--lang-badge-color: #858586;
|
||||
--lang-badge-muted-color: #6c6c6d;
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
|
||||
.highlight {
|
||||
|
|
|
@ -72,7 +72,8 @@
|
|||
--highlight-lineno-color: #c2c6cc;
|
||||
--inline-code-bg: #f3f3f3;
|
||||
--code-header-bg: #eaeaea;
|
||||
--lang-badge-color: #a4a7ab;
|
||||
--lang-badge-color: rgb(128 128 128 / 87%);
|
||||
--lang-badge-muted-color: rgb(128 128 128 / 36%);
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
} // light-syntax
|
||||
|
|
Loading…
Reference in a new issue