@docs-site/site-docsify
Version:
93 lines (85 loc) • 3.06 kB
CSS
/**
* @file docsify-copy-code.css
* @brief 代码复制按钮样式文件
* @details 定义代码块右上角的复制按钮样式及状态
*/
/**
* @brief 基础按钮样式
* @details 定义复制按钮及其子元素的基础交互样式
*/
.docsify-copy-code-button,
.docsify-copy-code-button > span {
cursor: pointer; /* 鼠标悬停时显示手型指针 */
transition: all 0.25s ease; /* 所有属性变化添加0.25秒缓动效果 */
}
/**
* @brief 复制按钮主样式
* @details 定义复制按钮的位置、大小和外观
*/
.docsify-copy-code-button {
position: absolute; /* 绝对定位 */
z-index: 1; /* 堆叠顺序 */
top: 0; /* 顶部对齐 */
right: 0; /* 右侧对齐 */
overflow: visible; /* 内容溢出可见 */
padding: 0.55em 0.7em; /* 内边距 */
border: 0; /* 无边框 */
border-radius: 4px; /* 4px圆角 */
outline: 0; /* 无轮廓线 */
font-size: 0.75em; /* 字体大小 */
background: #808080; /* 默认背景色 */
background: var(--theme-color, #808080); /* 支持主题色变量 */
color: #fff; /* 文字颜色 */
opacity: 0; /* 初始透明度为0 */
}
/**
* @brief 按钮内部span元素样式
*/
.docsify-copy-code-button > span {
border-radius: 3px; /* 3px圆角 */
background: inherit; /* 继承父元素背景 */
pointer-events: none; /* 禁止鼠标事件 */
}
/**
* @brief 状态提示样式
* @details 定义复制成功/失败的提示样式
*/
.docsify-copy-code-button > .error,
.docsify-copy-code-button > .success {
position: absolute; /* 绝对定位 */
z-index: -100; /* 置于底层 */
top: 50%; /* 垂直居中 */
right: 0; /* 右侧对齐 */
padding: 0.5em 0.65em; /* 内边距 */
font-size: 0.825em; /* 字体大小 */
opacity: 0; /* 初始透明 */
transform: translate(0, -50%); /* 垂直居中定位 */
}
/**
* @brief 错误状态激活样式
*/
.docsify-copy-code-button.error > .error,
.docsify-copy-code-button.success > .success {
right: 100%; /* 从右侧移出 */
opacity: 1; /* 完全显示 */
transform: translate(-25%, -50%); /* 向左移动25%并保持垂直居中 */
}
/**
* @brief 按钮显示条件
*/
.docsify-copy-code-button:focus,
pre:hover .docsify-copy-code-button {
opacity: 1; /* 完全显示 */
}
/**
* @brief ARIA提示元素样式
* @details 为屏幕阅读器提供提示但视觉上隐藏
*/
.docsify-copy-code-button > [aria-live] {
position: absolute; /* 绝对定位 */
left: -10000px; /* 移出可视区域 */
top: auto; /* 顶部自动定位 */
width: 1px; /* 最小宽度 */
height: 1px; /* 最小高度 */
overflow: hidden; /* 内容溢出隐藏 */
}