恳请各位指出鄙人拙作的不足、错误之处，不胜感激！
@border-radius: 12px; // 圆角
@line-color: rgba(224, 224, 224, 0.8); // 偏灰色细线
@gift-card-background: #ffffff; // 礼物卡片的背景颜色
@background-dark: rgba(14, 14, 14, 0.8); // 暗模式下的框架背景颜色
@shadow-color: rgba(0, 0, 0, 0.15); // 阴影颜色
@loading-color: #007AFF; // 加载动画颜色
body, #app .App-content {
background-color: var(--control-bg-light); // 设置全局背景色
}
.WelcomeHero {
color: #fdfdfd;
background: linear-gradient(160deg, var(--control-bg-shaded), var(--button-primary-bg-hover));
border-radius: @border-radius; // 设置圆角
padding: 15px 20px; // 内边距保持适当大小
margin: 10px 15px; // 两侧增加外边距，增加留白
text-align: center;
/* 移除关闭叉号 */
.Hero-close {
display: none;
}
}
.PostStream {
margin: 8px 0; // 统一上下间距
background-color: @gift-card-background; // 使用白色礼物卡片背景
border-radius: @border-radius; // 圆角
box-shadow: 0 4px 10px @shadow-color; // 添加阴影
padding: 12px 22px; // 增加内边距
& + .PostStream {
border-top: 2px solid @line-color; // 添加灰色分隔线
}
& when (@config-dark-mode = false) {
background-color: rgba(255, 255, 255, 0.8);
}
& when (@config-dark-mode = true) {
background-color: @background-dark;
}
}
input.ComposerEditor {
width: 100%; // 设置为全屏
border-radius: @border-radius; // 圆角边框
background-color: #fff; // 输入框背景颜色
padding: 15px; // 内边距
&::placeholder {
color: #aaa; // 占位符颜色
}
&:focus {
outline: none; // 去除默认焦点样式
border: 1px solid @line-color; // 聚焦时底边颜色
}
}
.Composer {
border-radius: @border-radius; // 设置整体框的圆角
background-color: #f7f7f7; // 设置背景颜色
padding: 20px; // 增加内边距
}
// 加载按钮样式
.Button {
border-radius: @border-radius; // 给按钮添加圆角
position: relative; // 相对定位
&.loading { // 加载状态
pointer-events: none; // 禁用按钮
color: transparent; // 隐藏文字
&:after {
content: ''; // 加载动画
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 3px solid @loading-color; // 使用加载颜色
border-top-color: transparent; // 透明顶部
border-radius: 50%; // 圆形
animation: spin 0.8s linear infinite; // 设置旋转动画
transform: translate(-50%, -50%); // 居中
}
}
&:hover {
// 悬停效果
}
&:active {
transform: scale(0.95); // 点击时缩放效果
}
}
// 加载动画 keyframes
@keyframes spin {
0% {
transform: rotate(0deg); // 初始状态
}
100% {
transform: rotate(360deg); // 旋转循环
}
}
// 响应式设计
@media @phone {
.PostStream {
padding: 10px; // 移动端上适度减小内边距
}
input.ComposerEditor {
padding: 12px; // 移动端上适度减小内边距
}
.WelcomeHero {
margin: 0 10px; // 在小屏幕上移除外边距，增加适配
padding: 8px 15px; // 减小小屏幕内边距
}
}
ul.NotificationGroup-content {
& > li {
margin: 4px 8px;
& > a {
&.Notification {
border-radius: @border-radius;
}
&.unread .Notification-title:after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: var(--primary-color);
transform: translateY(10%);
margin-left: 8px;
}
}
}
}
.Badge {
opacity: 0.9;
color: #fff;
}
/* 图标优化 */
.item-like .Button--link .Button-label,.item-reply .Button--link .Button-label {
display:none;
}
.item-like .Button:before {
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:14px;
content:'\f164';
vertical-align:-1px;
}
.item-reply .Button--link:before {
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:15px;
content:'\f3e5';
margin-right:4px;
vertical-align:-2px;
}
/* 搜索高亮 */
mark {
background: #FFE300 !important;
padding: 2px 7px;
border-radius: 7px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2) !important;
margin: 3px;
/* margin-left: 2.5px; */
/* margin-right: 2.5px; */
color: black !important;
}
mark when (@config-dark-mode = true) {
background: #0072ff !important;
padding: 2px 7px;
border-radius: 7px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2) !important;
margin: 3px;
/* margin-left: 2.5px; */
/* margin-right: 2.5px; */
color: white !important;
}
/* 关注、楼主、收藏挤一起 */
@media (max-width:768px) {
.DiscussionPage-nav > ul { text-align:center; padding:0; list-style:none;}
.DiscussionPage-nav > ul > li { margin:5px 5px;}
}
/* 高斯模糊 */
@media (min-width:768px) {
#header {
background:rgba(255,255,255,0.8) !important;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(3px);
}
}
/* ©Halina */