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

🐛 Fix: fix code title overflow in code header

Browse Source
This commit is contained in:
Cell
2024-06-30 13:33:21 +08:00
parent 91b583817a
commit 052d128922
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_partials/_single/_code.scss
+12 -4
View File
@@ -78,6 +78,7 @@ pre:not(.mermaid[data-processed='true']) {
position: relative;
.code-header {
--#{$prefix}bg-code-header: #{darken($code-background-color, 3%)};
display: flex;
justify-content: space-between;
align-items: center;
@@ -87,13 +88,13 @@ pre:not(.mermaid[data-processed='true']) {
font-weight: bold;
line-height: 1.4em;
color: $code-info-color;
background-color: darken($code-background-color, 3%);
background-color: var(--#{$prefix}bg-code-header);
@include border-radius($global-border-radius);
@include transition(border-radius 0.2s ease);
[data-theme='dark'] & {
color: $code-info-color-dark;
background-color: darken($code-background-color-dark, 6%);
--#{$prefix}bg-code-header: #{darken($code-background-color-dark, 3%)};
}
&:hover {
@@ -119,6 +120,13 @@ pre:not(.mermaid[data-processed='true']) {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: var(--#{$prefix}bg-code-header);
padding-inline: 1em;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include z-index(0, 1);
}
}
@@ -217,11 +225,11 @@ pre:not(.mermaid[data-processed='true']) {
&.open {
.code-header {
background-color: darken($code-background-color, 6%);
--#{$prefix}bg-code-header: #{darken($code-background-color, 6%)};
@include border-radius($global-border-radius $global-border-radius 0 0);
[data-theme='dark'] & {
background-color: darken($code-background-color-dark, 3%);
--#{$prefix}bg-code-header: #{darken($code-background-color-dark, 6%)};
}
}