andatoshiki/toshiki-notebook
1
0
Fork 0
mirror of https://github.com/andatoshiki/toshiki-notebook.git synced 2026-06-06 05:55:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(macos styled code block): add macos styled code block to vitepress with three colorted dots on the top bar of pre tag to imitate the ui design of macos windows

Browse Source
This commit is contained in:
Anda Toshiki 2024-09-14 03:57:31 -07:00
parent 283b3753c1
commit da53580caf
Signed by: andatoshiki
GPG Key ID: 443A8FB634CF898D
1 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/.vitepress/theme/styles/custom.scss
View File

@ -430,3 +430,68 @@ html.dark {
align-items: end;
}
// vitepress homepage styles end
// macos styled pre tag code block styles with three colored dots
.vp-doc div[class*=language-] {
position: relative;
border-radius: 8px;
overflow: hidden;
// box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
z-index: 1;
}
/* No line number: add macOS-style small dot */
.vp-doc div[class*=language-]::before {
content: "";
display: block;
position: relative;
top: 12px;
left: 12px;
width: 12px;
height: 12px;
background-color: #ff5f56;
border-radius: 50%;
box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
z-index: 1;
}
/* With line number: add background shadow */
div[class*="language-"].vp-adaptive-theme.line-numbers-mode {
position: relative;
border-radius: 8px;
overflow: hidden;
// box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}
/* With line number: add macOS-style small dot */
.vp-doc div[class*="language-"].line-numbers-mode::before {
content: "";
display: block;
position: relative;
top: 12px;
left: -22px;
width: 12px;
height: 12px;
background-color: #ff5f56;
border-radius: 50%;
box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
z-index: 1;
}
/* Move line number down to align with code; hide right vertical line */
.vp-doc .line-numbers-wrapper {
padding-top: 32px;
border-right: none;
}
/* Rebuild the right vertical line for line numbers */
.vp-doc .line-numbers-wrapper::after {
content: "";
position: absolute;
top: 38px;
right: 0;
border-right: 1px solid var(--vp-code-block-divider-color);
height: calc(100% - 66px);
}