418 lines
13 KiB
CSS
418 lines
13 KiB
CSS
/* 全局选择器，应用于所有元素 */
|
|
* {
|
|
margin: 0; /* 清除所有元素的外边距 */
|
|
padding: 0; /* 清除所有元素的内边距 */
|
|
box-sizing: border-box; /* 设置盒模型为border-box，使宽高包含边框和内边距[2](@ref) */
|
|
/* font-family: "Segoe UI", "Microsoft YaHei", sans-serif; 设置字体栈，优先使用Segoe UI，回退到微软雅黑和无衬线字体 */
|
|
}
|
|
|
|
/* 设置网页主体样式 */
|
|
body {
|
|
background-color: #f0f4f8; /* 浅蓝色背景 */
|
|
color: #2d3748; /* 深灰色文字 */
|
|
line-height: 1; /* 行高为字体大小的1倍 */
|
|
padding: 0px; /* 主体四周添加4px内边距 */
|
|
}
|
|
|
|
/* 主内容容器 */
|
|
.syntax-container {
|
|
max-width: 1300px; /* 最大宽度限制 */
|
|
margin: 0px auto; /* 上下10px外边距，水平居中 */
|
|
background: white; /* 白色背景 */
|
|
/* border-radius: 10px; 10px圆角 */
|
|
/* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); 添加轻微阴影 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡动画效果 */
|
|
}
|
|
|
|
|
|
/* 头部区域样式 */
|
|
.syntax-header {
|
|
background: #409EFF; /* 蓝色渐变背景 */
|
|
color: white; /* 白色文字 */
|
|
padding: 0px 0px; /* 无内边距 */
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: space-between; /* 两端对齐 */
|
|
position: relative; /* 相对定位 */
|
|
}
|
|
|
|
/* 头部底部的装饰线 */
|
|
.syntax-header::after {
|
|
content: ''; /* 伪元素内容 */
|
|
position: absolute; /* 绝对定位 */
|
|
bottom: 0; /* 定位到底部 */
|
|
left: 0; /* 定位到左侧 */
|
|
width: 100%; /* 宽度100% */
|
|
height: 0px; /* 高度3px */
|
|
background: linear-gradient(90deg, #43a047, #1e88e5, #e53935); /* 三色渐变 */
|
|
opacity: 0.7; /* 70%透明度 */
|
|
}
|
|
|
|
/* 头部左侧区域 */
|
|
.header-left {
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
gap: 0px; /* 元素间无间隙 */
|
|
}
|
|
|
|
/* 应用图标样式 */
|
|
.app-icon {
|
|
width: 12px; /* 宽度12px */
|
|
height: 30px; /* 高度12px */
|
|
background-color: #409EFF; /* 半透明白色背景 */
|
|
/* border-radius: 6px; 圆形 */
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
font-size: 20px; /* 字体大小10px */
|
|
color: white; /* 白色文字 */
|
|
/* backdrop-filter: blur(2px); 背景模糊效果 */
|
|
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); 轻微阴影 */
|
|
}
|
|
|
|
/* 应用标题样式 */
|
|
.app-title h1 {
|
|
font-size: 20px; /* 字体大小10px */
|
|
font-weight: 600; /* 中等加粗 */
|
|
letter-spacing: 0.4px; /* 字符间距0.4px */
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* 文字阴影 */
|
|
}
|
|
|
|
|
|
|
|
/* 主体内容区域 */
|
|
.syntax-body {
|
|
padding: 20px; /* 内边距10px */
|
|
}
|
|
|
|
/* 信息组容器 */
|
|
.info-group {
|
|
margin-bottom: 5px; /* 底部外边距20px */
|
|
background: #f9fafc; /* 浅灰色背景 */
|
|
border-radius: 8px; /* 8px圆角 */
|
|
padding: 5px; /* 内边距16px */
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02); /* 轻微阴影 */
|
|
}
|
|
|
|
/* 信息组标题区域 */
|
|
.info-group-title {
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
margin-bottom: 8px; /* 底部外边距14px */
|
|
padding-bottom: 8px; /* 底部内边距10px */
|
|
border-bottom: 1px solid #e2e8f0; /* 底部1px浅灰色边框 */
|
|
}
|
|
|
|
/* 信息组标题文字样式 */
|
|
.info-group-title h2 {
|
|
font-size: 16px; /* 字体大小16px */
|
|
color: #000000; /* 蓝色文字 */
|
|
font-weight: 600; /* 中等加粗 */
|
|
padding-left: 10px; /* 左侧内边距10px */
|
|
}
|
|
|
|
/* 输入组样式 */
|
|
.input-group {
|
|
margin-bottom: 4px; /* 底部外边距16px */
|
|
}
|
|
|
|
/* 输入标签样式 */
|
|
.input-group label {
|
|
display: block; /* 块级元素 */
|
|
margin-bottom: 4px; /* 底部外边距8px */
|
|
color: #4a5568; /* 深灰色文字 */
|
|
font-size: 14px; /* 字体大小14px */
|
|
font-weight: 500; /* 中等加粗 */
|
|
}
|
|
|
|
/* 输入字段通用样式 */
|
|
.input-field {
|
|
width: 100%; /* 宽度100% */
|
|
padding: 2px 2px; /* 内边距 */
|
|
border: 1px solid #cbd5e0; /* 1px浅灰色边框 */
|
|
border-radius: 7px; /* 7px圆角 */
|
|
font-size: 14px; /* 字体大小14px */
|
|
transition: all 0.3s; /* 所有属性0.3秒过渡 */
|
|
background: white; /* 白色背景 */
|
|
color: #2d3748; /* 深灰色文字 */
|
|
}
|
|
|
|
/* 输入字段聚焦状态 */
|
|
.input-field:focus {
|
|
border-color: #1e88e5; /* 边框变为蓝色 */
|
|
outline: none; /* 移除默认轮廓线 */
|
|
box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.12); /* 添加蓝色发光效果 */
|
|
}
|
|
|
|
/* 文本域特殊样式 */
|
|
.input-field.textarea {
|
|
min-height: 30px; /* 最小高度85px */
|
|
resize: vertical; /* 允许垂直调整大小 */
|
|
font-family: 'Consolas', monospace; /* 等宽字体 */
|
|
padding: 6px; /* 内边距14px */
|
|
line-height: 1.5; /* 行高1.6倍 */
|
|
font-size: 13.5px; /* 字体大小13.5px */
|
|
}
|
|
|
|
/* 结果显示区域 */
|
|
.result-display {
|
|
background: linear-gradient(to right, #f7fafc, #edf2f7); /* 左右渐变背景 */
|
|
border: 1px solid #e2e8f0; /* 1px浅灰色边框 */
|
|
border-radius: 8px; /* 8px圆角 */
|
|
padding: 18px; /* 内边距18px */
|
|
margin: 9px 0; /* 上下外边距18px */
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); /* 内阴影 */
|
|
}
|
|
|
|
/* 结果项样式 */
|
|
.result-item {
|
|
margin-bottom: 14px; /* 底部外边距14px */
|
|
padding-bottom: 14px; /* 底部内边距14px */
|
|
border-bottom: 1px dashed #e2e8f0; /* 底部1px虚线边框 */
|
|
}
|
|
|
|
/* 最后一个结果项特殊处理 */
|
|
.result-item:last-child {
|
|
margin-bottom: 0; /* 无底部外边距 */
|
|
padding-bottom: 0; /* 无底部内边距 */
|
|
border-bottom: none; /* 无底部边框 */
|
|
}
|
|
|
|
/* 结果标签样式 */
|
|
.result-label {
|
|
color: #718096; /* 中灰色文字 */
|
|
font-size: 14px; /* 字体大小14px */
|
|
margin-bottom: 6px; /* 底部外边距6px */
|
|
font-weight: 500; /* 中等加粗 */
|
|
}
|
|
|
|
/* 结果值样式 */
|
|
.result-value {
|
|
font-size: 16px; /* 字体大小16px */
|
|
font-weight: 600; /* 中等加粗 */
|
|
color: #2d3748; /* 深灰色文字 */
|
|
}
|
|
|
|
/* 结果值中的高亮部分 */
|
|
.result-value .highlight {
|
|
color: #1e88e5; /* 蓝色文字 */
|
|
font-weight: 700; /* 加粗 */
|
|
font-size: 16px; /* 字体大小16px */
|
|
letter-spacing: 0.4px; /* 字符间距0.4px */
|
|
}
|
|
|
|
|
|
|
|
/* 操作按钮容器 */
|
|
.action-buttons {
|
|
display: flex; /* 启用Flex布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /*垂直居中*/
|
|
margin-top: 10px; /* 顶部外边距20px */
|
|
gap: 15px; /* 按钮间距15px */
|
|
height: auto; /* 自适应高度 */
|
|
padding: 10px 0; /* 添加垂直内边距 */
|
|
}
|
|
|
|
/* 操作按钮通用样式 */
|
|
.action-btn {
|
|
padding: 6px 15px; /* 内边距 */
|
|
border: none; /* 无边框 */
|
|
border-radius: 4px; /* 7px圆角 */
|
|
font-size: 12px; /* 字体大小15px */
|
|
font-weight: 600; /* 中等加粗 */
|
|
cursor: pointer; /* 鼠标指针为手型 */
|
|
/* transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 自定义缓动过渡 */
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
min-width: 120px; /* 最小宽度120px */
|
|
letter-spacing: 4px; /* 字符间距4px */
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
|
|
}
|
|
|
|
/* 操作按钮图标 */
|
|
.action-btn i {
|
|
margin-right: 8px; /* 右侧外边距8px */
|
|
font-size: 16px; /* 字体大小16px */
|
|
}
|
|
|
|
/* 主要按钮样式 */
|
|
.btn-primary {
|
|
background: linear-gradient(to right,#409EFF , #409EFF);
|
|
color: white; /* 白色文字 */
|
|
position: relative; /* 相对定位 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
|
|
}
|
|
|
|
|
|
/* 主要按钮悬停效果 */
|
|
.btn-primary:hover {
|
|
background: linear-gradient(to right, #2196f3, #1565c0); /* 更亮的蓝色渐变 */
|
|
box-shadow: 0 5px 10px rgba(33, 150, 243, 0.25); /* 增加阴影 */
|
|
/* transform: translateY(-2px); 向上移动2px */
|
|
}
|
|
|
|
/* 主要按钮悬停时伪元素动画 */
|
|
.btn-primary:hover::after {
|
|
left: 140%; /* 移动到右侧140%位置 */
|
|
}
|
|
|
|
/* 默认按钮样式 */
|
|
.btn-default {
|
|
background: #f7fafc; /* 浅灰色背景 */
|
|
color: #4a5568; /* 深灰色文字 */
|
|
border: 1px solid #cbd5e0; /* 1px浅灰色边框 */
|
|
}
|
|
|
|
/* 默认按钮悬停效果 */
|
|
.btn-default:hover {
|
|
background: white; /* 白色背景 */
|
|
border-color: #a0aec0; /* 边框颜色加深 */
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06); /* 添加阴影 */
|
|
/* transform: translateY(-2px); 向上移动2px */
|
|
}
|
|
|
|
/* 标记控制按钮容器 */
|
|
.mark-controls {
|
|
display: grid; /* 启用Grid布局 */
|
|
grid-template-columns: repeat(4, minmax(140px, 1fr)); /* 自适应列 */
|
|
gap: 12px; /* 元素间距12px */
|
|
margin-top: 10px; /* 顶部外边距18px */
|
|
}
|
|
|
|
/* 标记按钮样式 */
|
|
.mark-btn {
|
|
display: inline-block;
|
|
padding: 4px 4px;
|
|
font-size: 13px;
|
|
border: 0.1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
|
|
background: #ECF5FF;
|
|
border-color: #9ccaf7;
|
|
color: #409EFE;
|
|
letter-spacing: 3px; /* 添加微小间距 */
|
|
font-weight: 500; /* 加粗效果 */
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* 标记按钮悬停效果 */
|
|
.mark-btn:hover {
|
|
background: #409EFE;
|
|
border-color: #409EFF;
|
|
color:#ffffff;
|
|
}
|
|
|
|
/* 标记按钮图标 */
|
|
.mark-btn i {
|
|
font-size: 13px; /* 字体大小16px */
|
|
}
|
|
|
|
/* 光标指示器样式 */
|
|
.cursor-indicator {
|
|
position: absolute; /* 绝对定位 */
|
|
width: 2px; /* 宽度2px */
|
|
height: 18px; /* 高度18px */
|
|
background-color: #e53935; /* 红色背景 */
|
|
pointer-events: none; /* 不响应鼠标事件 */
|
|
z-index: 100; /* 高z-index确保显示在最上层 */
|
|
border-radius: 1px; /* 轻微圆角 */
|
|
box-shadow: 0 0 2px rgba(229, 57, 53, 0.7); /* 红色发光效果 */
|
|
}
|
|
|
|
/* 标记对话框样式 */
|
|
.mark-dialog {
|
|
border-radius: 10px; /* 10px圆角 */
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 明显阴影 */
|
|
border: none; /* 无边框 */
|
|
}
|
|
.connector-dialog{
|
|
border-radius: 10px; /* 10px圆角 */
|
|
/* overflow: hidden; 隐藏溢出内容 */
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 明显阴影 */
|
|
border: none; /* 无边框 */
|
|
}
|
|
|
|
/* 对话框头部样式 */
|
|
.mark-dialog-header, .connector-dialog-header {
|
|
background: linear-gradient(135deg, #1e88e5, #1565c0); /* 蓝色渐变背景 */
|
|
border:none !important;
|
|
color: white; /* 白色文字 */
|
|
padding: 5px 8px; /* 内边距 */
|
|
font-size: 18px; /* 字体大小18px */
|
|
font-weight: 600; /* 中等加粗 */
|
|
display: flex; /* 启用Flex布局 */
|
|
align-items: center; /* 垂直居中 */
|
|
gap: 10px; /* 元素间距10px */
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); /* 文字阴影 */
|
|
}
|
|
|
|
/* 对话框头部图标 */
|
|
.mark-dialog-header i, .connector-dialog-header i {
|
|
font-size: 24px; /* 字体大小24px */
|
|
}
|
|
|
|
/* 对话框主体区域 */
|
|
.mark-dialog-body, .connector-dialog-body {
|
|
border:none !important;
|
|
padding: 0px 0px; /* 内边距20px */
|
|
background: #f8fafc; /* 浅灰色背景 */
|
|
}
|
|
|
|
/* 标记选项容器 */
|
|
.mark-options {
|
|
display: grid; /* 启用Grid布局 */
|
|
grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); /* 自适应列 */
|
|
gap: 4px; /* 元素间距4px */
|
|
margin-top: 4px; /* 顶部外边距4px */
|
|
}
|
|
|
|
/* 标记选项按钮 */
|
|
.mark-option {
|
|
padding: 14px 8px; /* 内边距 */
|
|
background: #e3f2fd; /* 浅蓝色背景 */
|
|
border: 1px solid #bbdefb; /* 1px浅蓝色边框 */
|
|
border-radius: 7px; /* 7px圆角 */
|
|
color: #1976d2; /* 蓝色文字 */
|
|
cursor: pointer; /* 鼠标指针为手型 */
|
|
text-align: center; /* 文字居中 */
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 自定义缓动过渡 */
|
|
font-size: 14px; /* 字体大小14px */
|
|
font-weight: 500; /* 中等加粗 */
|
|
}
|
|
|
|
/* 标记选项悬停效果 */
|
|
.mark-option:hover {
|
|
background: #bbdefb; /* 加深背景色 */
|
|
border-color: #90caf9; /* 加深边框色 */
|
|
transform: translateY(-3px) scale(1.02); /* 上移并轻微放大 */
|
|
box-shadow: 0 6px 12px rgba(25, 118, 210, 0.15); /* 添加蓝色阴影 */
|
|
}
|
|
|
|
|
|
/* 响应式设计：屏幕宽度小于768px时的调整 */
|
|
@media (max-width: 768px) { /* 媒体查询，针对小屏幕设备[6](@ref) */
|
|
.syntax-container {
|
|
margin: 8px auto; /* 减小外边距 */
|
|
}
|
|
|
|
.syntax-body {
|
|
padding: 16px; /* 调整内边距 */
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column; /* 垂直排列按钮 */
|
|
gap: 10px; /* 按钮间距10px */
|
|
}
|
|
|
|
.action-btn {
|
|
width: 100%; /* 按钮宽度100% */
|
|
padding: 12px; /* 调整内边距 */
|
|
}
|
|
} |