mirror of
https://github.com/Aexiar/c.git
synced 2024-10-22 14:05:45 +02:00
67 lines
2.1 KiB
CSS
67 lines
2.1 KiB
CSS
/* .vitepress/theme/style/vp-code.css */
|
|
|
|
/* 为代码块添加 macOS 风格的小圆点 */
|
|
div[class*="language-"].vp-adaptive-theme.line-numbers-mode {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: #f5f5f5; /* 背景色，可根据需要调整 */
|
|
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%); /* 可选的阴影效果 */
|
|
padding-top: 24px; /* 给小圆点留出空间 */
|
|
}
|
|
|
|
/* 无行号添加小圆点 */
|
|
div[class*="language-"].vp-adaptive-theme::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; /* 确保圆点在代码块上方 */
|
|
}
|
|
|
|
/* 有行号添加小圆点 */
|
|
div[class*="language-"].line-numbers-mode::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
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; /* 确保圆点在代码块上方 */
|
|
}
|
|
|
|
/* 调整行号的样式 */
|
|
.vp-doc .line-numbers-wrapper {
|
|
top: 0; /* 调整行号位置，使其与代码内容对齐 */
|
|
right: 0; /* 确保行号容器靠右对齐 */
|
|
height: 100%; /* 使行号容器填满可用空间 */
|
|
position: absolute; /* 确保绝对定位 */
|
|
padding-top: 44px; /* 移除多余填充 */
|
|
border-right: none;
|
|
}
|
|
|
|
/* 使用伪元素调整右边框位置 */
|
|
.vp-doc .line-numbers-wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 44px; /* 将右边框下移24像素 */
|
|
right: 0; /* 将右边框置于容器右侧 */
|
|
height: calc(100% - 66px); /* 设置边框高度，减去顶部偏移 */
|
|
border-right: 1px solid var(--vp-code-block-divider-color);
|
|
}
|
|
|
|
/* 针对非代码组的相邻代码块添加间距 */
|
|
:not(.vp-code-group) > div[class*="language-"].vp-adaptive-theme + div[class*="language-"].vp-adaptive-theme {
|
|
margin-top: 12px; /* 非代码组的相邻代码块之间的间距 */
|
|
}
|