@color-background-light: #f2f2f2; // 背景颜色
@color-background-dark: #ffffff; // 深色背景
@color-primary: #007AFF; // 主色调（蓝色）
@color-text-light: #333; // 文章文字颜色
@color-text-dark: #666; // 文章文字颜色（暗模式）
@color-button-border: #007AFF; // 按钮边框颜色
body, #app .App-content {
background-color: @color-background-light; // 设置全局背景色
color: @color-text-light;
font-family: Arial, sans-serif; // 使用清晰的字体
}
.WelcomeHero {
color: @color-background-dark; // 文字颜色为较浅色
background-color: @color-primary; // 使用主色调
padding: 30px;
border-radius: @border-radius;
text-align: center;
h1 {
margin: 0; // 去掉默认margin
font-size: 2em; // 字体大小
font-weight: bold; // 加粗
}
p {
font-size: 1.1em;
margin-top: 10px;
color: @color-background-dark; // 保持文字可读性
}
}
.PostStream,
.PostsUserPage,
.DiscussionListItem {
margin: 16px 0; // 默认行间距
background-color: @color-background-dark; // 卡片背景颜色
padding: 16px; // 适度内边距
h3 {
font-size: 1.5em;
margin: 0 0 10px; // 子标题样式
color: @color-text-light;
}
p {
font-size: 1em; // 行间距
margin: 5px 0; // 添加间距
}
& when (@config-dark-mode = true) {
background-color: @color-background-light; // 暗模式背景
}
}
.Dropdown-menu {
border-radius: @border-radius;
padding: 1px;
& > li {
margin: 4px;
& > a,
& > button {
border-radius: @border-radius;
padding: 10px;
border: 2px solid @color-button-border; // 为按钮添加边框
background-color: transparent; // 去掉按钮背景色
color: @color-button-border; // 按钮文本颜色和边框颜色一致
transition: color 0.2s, transform 0.1s; // 添加过渡动画
&:hover {
color: white; // 悬停时改变字体颜色
transform: scale(1.05); // 悬停时的轻微放大
}
&:active {
transform: scale(0.95); // 点击时缩放效果
}
&.loading {
position: relative;
cursor: not-allowed; // 禁用状态指针
color: transparent; // 隐藏文本
&:after {
content: ''; // 加载动画
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 3px solid @color-button-border; // 使用边框颜色
border-top-color: transparent; // 动画顶部透明
border-radius: 50%;
animation: spin 0.8s linear infinite; // 旋转动画
transform: translate(-50%, -50%); // 居中
}
}
}
}
}
// 加载动画 keyframes
@keyframes spin {
0% {
transform: rotate(0deg); // 初始状态
}
100% {
transform: rotate(360deg); // 旋转360度
}
}
.Badge {
opacity: 0.9;
color: #ffffff; // 白色文字
background-color: @color-primary; // 主色调作为背景
border-radius: @border-radius;
padding: 4px 8px;
}
header,
footer.Hero {
margin: 15px;
border-radius: @border-radius;
background-color: @color-background-dark; // 头部和底部背景色
}
// 响应式设计
@media @phone {
.DiscussionListItem {
margin: 12px 0; // 保持默认行间距
}
}
@media @tablet-up {
.TagTiles > li {
width: 30% !important;
margin: 10px;
}
}`