blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: enhance code/diagram copy button functionality and styling

Browse Source
This commit is contained in:
Cell
2025-12-20 16:10:50 +08:00
parent 4d95fd8d30
commit 10b355bdee
11 changed files with 38 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_root.scss
+5
View File
@@ -4,9 +4,12 @@
interpolate-size: allow-keywords;
// Global colors variables
#{$rootPrefix}global-font-color: #{$global-font-color};
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color};
#{$rootPrefix}global-border-color: #{$global-border-color};
#{$rootPrefix}global-link-color: #{$global-link-color};
#{$rootPrefix}global-link-hover-color: #{$global-link-hover-color};
// Scroll margin top and Stack sticky top related
#{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
@@ -45,6 +48,8 @@
#{$rootPrefix}global-font-color: #{$global-font-color-dark};
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark};
#{$rootPrefix}global-border-color: #{$global-border-color-dark};
#{$rootPrefix}global-link-color: #{$global-link-color-dark};
#{$rootPrefix}global-link-hover-color: #{$global-link-hover-color-dark};
#{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
#{$rootPrefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
assets/css/_mixin/_link.scss
+1
View File
@@ -3,6 +3,7 @@
* @param {Boolean} $light use global link color
* @param {Boolean} $dark use global link color dark
* @param {String} $decoration text-decoration, default none
* TODO refactor to use CSS variables
*/
@mixin link($light, $dark, $decoration: none) {
a,
assets/css/_partials/_archive/_tags.scss
+4 -10
View File
@@ -1,8 +1,6 @@
.tag-cloud-tags {
margin: 10px 0;
@include link(true, true);
a {
display: inline-block;
position: relative;
@@ -36,18 +34,14 @@
$tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
.tag-cloud-#{$grade} {
color: $tag-cloud-color!important;
color: $tag-cloud-color;
font-size: var(--tag-font);
margin: 10px!important;
margin: 10px !important;
&:active,
&:focus,
&:hover {
color: $global-link-hover-color!important;
[data-theme='dark'] & {
color: $global-link-hover-color-dark;
}
color: var(#{$rootPrefix}global-link-hover-color) !important;
sup {
opacity: 1;
@@ -55,7 +49,7 @@
}
[data-theme='dark'] & {
color: $tag-cloud-color-dark!important;
color: $tag-cloud-color-dark;
}
sup {
assets/css/_partials/_archive/_terms.scss
+1 -13
View File
@@ -54,19 +54,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover {
color: $global-link-hover-color;
background-color: transparent;
}
[data-theme='dark'] & {
color: $global-link-color-dark;
&:hover {
color: $global-link-hover-color-dark;
}
}
@include link(true, true);
}
.archive-item-date {
assets/css/_partials/_single/_code.scss
+14 -5
View File
@@ -97,6 +97,13 @@ pre:not([data-processed]) {
position: sticky;
left: 0;
}
// code content
.lntd:last-child {
width: 100%;
code {
width: 100%;
}
}
}
}
@@ -217,6 +224,12 @@ pre:not([data-processed]) {
@extend .print-d-none;
}
.copy-btn[data-copied] .fa-clone {
--fa: "\f00c";
font-weight: 900;
color: var(#{$rootPrefix}global-link-hover-color);
}
@each $type, $text in $code-type-map {
&.language-#{to-lower-case($type)} {
#{$rootPrefix}code-type: $text;
@@ -228,11 +241,7 @@ pre:not([data-processed]) {
&:not(.line-nos-hidden) .line-nos-btn,
.code-header [role='button']:hover,
&:has([contenteditable='true']) .edit-btn {
color: $global-link-hover-color;
[data-theme='dark'] & {
color: $global-link-hover-color-dark;
}
color: var(#{$rootPrefix}global-link-hover-color);
}
.code-expand-btn {
assets/css/_partials/_single/_diagram-copy-btn.scss
+3 -9
View File
@@ -39,17 +39,11 @@
}
}
.fa-check {
padding-inline: 1px;
display: none;
}
&[data-copied] {
.fa-check {
display: inline-block;
}
.fa-clone {
display: none;
--fa: "\f00c";
font-weight: 900;
color: var(#{$rootPrefix}global-link-hover-color);
}
}
}
assets/css/_partials/_single/_fixit-decryptor.scss
+1 -2
View File
@@ -23,12 +23,11 @@
&:focus,
&:hover {
color: darken($global-link-hover-color, 6%);
border-color: $global-link-hover-color;
border-color: var(#{$rootPrefix}global-link-hover-color);
box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
[data-theme='dark'] & {
color: lighten($global-link-hover-color-dark, 6%);
border-color: $global-link-hover-color-dark;
box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
}
}
assets/js/theme.js
+6 -2
View File
@@ -431,10 +431,14 @@ class FixIt {
: codeBlock.querySelector('.code-copy-btn');
if (codeBlock.dataset.copyable !== 'true' || !copyBtn) return;
copyBtn.addEventListener('click', () => {
this.util.forEach(codeBlock.querySelectorAll('.hl'), $hl => $hl.classList.replace('hl', 'hl-disable'));
const iswWrap = codeBlock.classList.contains('line-wrapping');
const highlightLines = codeBlock.querySelectorAll('.hl');
iswWrap && codeBlock.classList.toggle('line-wrapping');
this.util.forEach(highlightLines, $hl => $hl.classList.toggle('hl'));
this.util.copyText(codePreEl.innerText.trim()).then(() => {
this.util.animateCSS(codePreEl, 'animate__flash');
this.util.forEach(codeBlock.querySelectorAll('.hl-disable'), $hl => $hl.classList.replace('hl-disable', 'hl'));
iswWrap && codeBlock.classList.toggle('line-wrapping');
this.util.forEach(highlightLines, $hl => $hl.classList.toggle('hl'));
copyBtn.toggleAttribute('data-copied', true);
setTimeout(() => {
copyBtn.toggleAttribute('data-copied', false);