f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2026-08-05 21:37:37 +00:00
Code Issues Packages Releases Activity

fix(ui): truncate overflowed code block label with ellipsis (#2771)

Browse Source
This commit is contained in:
Seonhyo Choi
2026-07-09 07:20:20 +09:00
committed by GitHub
parent 99614aede3
commit 3c1f7fae4b
1 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/base/_syntax.scss
+86 -82
View File
@@ -124,6 +124,87 @@ div[class^='language-'] {
}
.code-header {
@extend %no-cursor;
display: flex;
justify-content: space-between;
align-items: center;
height: v.$code-header-height;
margin-left: 0.75rem;
margin-right: 0.25rem;
/* the label block */
span {
color: var(--code-header-text-color);
line-height: v.$code-header-height;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* label icon */
i {
font-size: 1rem;
width: v.$code-icon-width;
color: var(--code-header-icon-color);
&.small {
font-size: 70%;
}
}
@at-root [file] #{&} > i {
position: relative;
top: 1px; /* center the file icon */
}
/* label text */
&::after {
content: attr(data-label-text);
font-size: 0.85rem;
font-weight: 600;
}
}
/* clipboard */
button {
@extend %cursor-pointer;
@extend %rounded;
border: 1px solid transparent;
height: 2rem;
width: 2rem;
margin-right: 0.125rem;
padding: 0;
background-color: inherit;
i {
color: var(--code-header-icon-color);
}
&[timeout] {
&:hover {
border-color: var(--clipboard-checked-color);
}
i {
font-size: 90%;
color: var(--clipboard-checked-color);
}
}
&:focus {
outline: none;
}
&:not([timeout]):hover {
background-color: rgb(128 128 128 / 37%);
i {
color: white;
}
}
}
@include bp.sm {
@include mx.ml-mr(0);
@@ -145,8 +226,11 @@ div[class^='language-'] {
}
span {
// center the text of label
margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
margin-left: v.$code-icon-width * -1; // center the label text
max-width: calc(
100% - $dot-margin - (v.$code-dot-gap + v.$code-dot-size) * 3 -
v.$code-icon-width * 4
);
}
}
}
@@ -173,83 +257,3 @@ div {
}
}
}
.code-header {
@extend %no-cursor;
display: flex;
justify-content: space-between;
align-items: center;
height: v.$code-header-height;
margin-left: 0.75rem;
margin-right: 0.25rem;
/* the label block */
span {
line-height: v.$code-header-height;
/* label icon */
i {
font-size: 1rem;
width: v.$code-icon-width;
color: var(--code-header-icon-color);
&.small {
font-size: 70%;
}
}
@at-root [file] #{&} > i {
position: relative;
top: 1px; /* center the file icon */
}
/* label text */
&::after {
content: attr(data-label-text);
font-size: 0.85rem;
font-weight: 600;
color: var(--code-header-text-color);
}
}
/* clipboard */
button {
@extend %cursor-pointer;
@extend %rounded;
border: 1px solid transparent;
height: 2rem;
width: 2rem;
margin-right: 0.125rem;
padding: 0;
background-color: inherit;
i {
color: var(--code-header-icon-color);
}
&[timeout] {
&:hover {
border-color: var(--clipboard-checked-color);
}
i {
font-size: 90%;
color: var(--clipboard-checked-color);
}
}
&:focus {
outline: none;
}
&:not([timeout]):hover {
background-color: rgb(128 128 128 / 37%);
i {
color: white;
}
}
}
}