From 10b355bdeeb050b95e71f56e2c033ed54af7fe68 Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Sat, 20 Dec 2025 16:10:50 +0800 Subject: [PATCH] refactor: enhance code/diagram copy button functionality and styling --- assets/css/_core/_root.scss | 5 +++++ assets/css/_mixin/_link.scss | 1 + assets/css/_partials/_archive/_tags.scss | 14 ++++---------- assets/css/_partials/_archive/_terms.scss | 14 +------------- assets/css/_partials/_single/_code.scss | 19 ++++++++++++++----- .../_partials/_single/_diagram-copy-btn.scss | 12 +++--------- .../_partials/_single/_fixit-decryptor.scss | 3 +-- assets/js/theme.js | 8 ++++++-- layouts/_partials/function/code-copy-btn.html | 3 +-- layouts/_partials/init/index.html | 2 +- .../_partials/plugin/diagram-copy-btn.html | 5 +---- 11 files changed, 38 insertions(+), 48 deletions(-) diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss index e8d7e342..d6addc92 100644 --- a/assets/css/_core/_root.scss +++ b/assets/css/_core/_root.scss @@ -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%)}; diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss index c7314aba..425c6d17 100644 --- a/assets/css/_mixin/_link.scss +++ b/assets/css/_mixin/_link.scss @@ -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, diff --git a/assets/css/_partials/_archive/_tags.scss b/assets/css/_partials/_archive/_tags.scss index 03d7b227..97f0c0b8 100644 --- a/assets/css/_partials/_archive/_tags.scss +++ b/assets/css/_partials/_archive/_tags.scss @@ -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 { diff --git a/assets/css/_partials/_archive/_terms.scss b/assets/css/_partials/_archive/_terms.scss index eaa9fd5a..9b43890f 100644 --- a/assets/css/_partials/_archive/_terms.scss +++ b/assets/css/_partials/_archive/_terms.scss @@ -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 { diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss index 6334b737..9d5f4b1c 100644 --- a/assets/css/_partials/_single/_code.scss +++ b/assets/css/_partials/_single/_code.scss @@ -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 { diff --git a/assets/css/_partials/_single/_diagram-copy-btn.scss b/assets/css/_partials/_single/_diagram-copy-btn.scss index 19a4f8a7..6060ff7a 100644 --- a/assets/css/_partials/_single/_diagram-copy-btn.scss +++ b/assets/css/_partials/_single/_diagram-copy-btn.scss @@ -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); } } } diff --git a/assets/css/_partials/_single/_fixit-decryptor.scss b/assets/css/_partials/_single/_fixit-decryptor.scss index e0caadb6..0f503a02 100644 --- a/assets/css/_partials/_single/_fixit-decryptor.scss +++ b/assets/css/_partials/_single/_fixit-decryptor.scss @@ -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%); } } diff --git a/assets/js/theme.js b/assets/js/theme.js index 95797d6c..a95b16b9 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -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); diff --git a/layouts/_partials/function/code-copy-btn.html b/layouts/_partials/function/code-copy-btn.html index aca31d80..84f47d6b 100644 --- a/layouts/_partials/function/code-copy-btn.html +++ b/layouts/_partials/function/code-copy-btn.html @@ -4,8 +4,7 @@ {{- if $config.copyable -}} {{- $copyIcon := dict "Class" "fa-regular fa-clone" | partial "plugin/icon.html" -}} - {{- $successIcon := dict "Class" "fa-solid fa-check text-success" | partial "plugin/icon.html" -}} - {{- $copyBtn := printf `
%s%s
` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon $successIcon -}} + {{- $copyBtn := printf `
%s
` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon -}} {{- $wrapper = replaceRE `(
[\s\S]*?<\/div>)` (printf `$1%s` $copyBtn) $wrapper -}} {{- end -}} diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html index d717a3ff..50e2a08a 100644 --- a/layouts/_partials/init/index.html +++ b/layouts/_partials/init/index.html @@ -1,4 +1,4 @@ -{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251220063813-f2b6218e" -}} +{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251220081051-4d95fd8d" -}} {{- .Store.Set "this" dict -}} {{- partial "init/detection-env.html" . -}} diff --git a/layouts/_partials/plugin/diagram-copy-btn.html b/layouts/_partials/plugin/diagram-copy-btn.html index 6fa1ee65..fa7db67a 100644 --- a/layouts/_partials/plugin/diagram-copy-btn.html +++ b/layouts/_partials/plugin/diagram-copy-btn.html @@ -1,9 +1,6 @@ {{- /* Diagram copy button */ -}} {{- $label := .Label | default "Copy Diagram code" -}} -{{- $iconCopy := dict "Class" "fa-regular fa-clone" -}} -{{- $iconCheck := dict "Class" "fa-solid fa-check text-success" -}}
- {{- $iconCopy | partial "plugin/icon.html" -}} - {{- $iconCheck | partial "plugin/icon.html" -}} + {{- dict "Class" "fa-regular fa-clone" | partial "plugin/icon.html" -}}