PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Change the icon & color of the code block header

This commit is contained in:
Cotes Chung 2021-09-22 21:27:15 +08:00
parent ed93fbdfde
commit abb548fcee
4 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/refactor-content.html
View File

@ -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>'
%}

25
_sass/addon/syntax.scss
View File

@ -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;
}
}
}

3
_sass/colors/dark-syntax.scss
View File

@ -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 {

3
_sass/colors/light-syntax.scss
View File

@ -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