728 lines
16 KiB
Plaintext
728 lines
16 KiB
Plaintext
/* pages/zuzhangfenhongjilu/zuzhangfenhongjilu.wxss - 超时空战士机甲风格 */
|
||
|
||
/* ==================== 全局变量与动画 ==================== */
|
||
page {
|
||
height: 100%;
|
||
background: #0A0C12;
|
||
font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
|
||
color: #E0E6F0;
|
||
}
|
||
|
||
/* 全局动画定义 */
|
||
@keyframes scanMove {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(100%); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,100% { opacity: 0.4; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes energyFlow {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
|
||
@keyframes glitch {
|
||
0% { transform: translate(0); }
|
||
20% { transform: translate(-2px, 2px); }
|
||
40% { transform: translate(2px, -2px); }
|
||
60% { transform: translate(-2px, 0); }
|
||
80% { transform: translate(2px, 0); }
|
||
100% { transform: translate(0); }
|
||
}
|
||
|
||
/* ==================== 页面容器 ==================== */
|
||
.page {
|
||
height: 100%;
|
||
position: relative;
|
||
background: radial-gradient(ellipse at 50% 30%, #1A2635, #0A0C12);
|
||
}
|
||
|
||
/* 背景机甲网格（使用伪元素） */
|
||
.page::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image:
|
||
linear-gradient(rgba(0, 180, 255, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 180, 255, 0.03) 1px, transparent 1px);
|
||
background-size: 60rpx 60rpx;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 顶部扫描线（固定） */
|
||
.page::after {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4rpx;
|
||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||
box-shadow: 0 0 30rpx #00B4FF;
|
||
animation: scanMove 4s linear infinite;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* ==================== 固定头部 ==================== */
|
||
.fixed-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 100;
|
||
/* 半透明金属质感 */
|
||
background: rgba(16, 24, 36, 0.85);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 2rpx solid #00B4FF;
|
||
box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.2);
|
||
}
|
||
|
||
.header-content {
|
||
padding: 30rpx 30rpx 20rpx; /* 缩小上下间距 */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
/* 统计行 - 机甲风格面板 */
|
||
.stat-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(0, 20, 40, 0.6);
|
||
border: 2rpx solid #00B4FF;
|
||
border-radius: 30rpx;
|
||
padding: 25rpx 15rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3), inset 0 0 20rpx rgba(0, 180, 255, 0.2);
|
||
}
|
||
|
||
/* 面板内部光效 */
|
||
.stat-row::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.2), transparent 70%);
|
||
animation: pulse 4s infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.stat-cell {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.stat-divider {
|
||
width: 2rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(to bottom, transparent, #00B4FF, #7A2EFF, transparent);
|
||
box-shadow: 0 0 10rpx #00B4FF;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #A0B8D0;
|
||
letter-spacing: 2rpx;
|
||
margin-bottom: 6rpx;
|
||
display: block;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 42rpx;
|
||
font-weight: 800;
|
||
color: #E0F0FF;
|
||
line-height: 1.2;
|
||
display: block;
|
||
text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
|
||
}
|
||
|
||
.stat-number.blue {
|
||
color: #fff;
|
||
text-shadow: 0 0 20rpx #00B4FF, 0 0 40rpx #7A2EFF;
|
||
}
|
||
|
||
/* 刷新按钮 - 机甲能量环 */
|
||
.refresh-btn {
|
||
position: absolute;
|
||
top: 35rpx;
|
||
right: 45rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(0, 20, 40, 0.8);
|
||
border: 2rpx solid #00B4FF;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 30rpx #00B4FF;
|
||
transition: all 0.2s;
|
||
z-index: 20;
|
||
}
|
||
|
||
.refresh-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -4rpx;
|
||
left: -4rpx;
|
||
right: -4rpx;
|
||
bottom: -4rpx;
|
||
border: 2rpx solid rgba(0, 180, 255, 0.5);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.refresh-btn:active {
|
||
transform: scale(0.9);
|
||
box-shadow: 0 0 50rpx #7A2EFF;
|
||
}
|
||
|
||
.refresh-icon {
|
||
font-size: 40rpx;
|
||
color: #00B4FF;
|
||
transition: transform 0.3s;
|
||
z-index: 2;
|
||
}
|
||
|
||
.refresh-icon.spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
/* ==================== 滚动区域 ==================== */
|
||
.scroll-area {
|
||
position: fixed;
|
||
top: 240rpx; /* 根据新头部高度调整，更紧凑 */
|
||
left: 0;
|
||
width: 100%;
|
||
bottom: 0;
|
||
overflow-y: auto;
|
||
z-index: 50;
|
||
}
|
||
|
||
.list-content {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* ==================== 加载中状态 ==================== */
|
||
.loading-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 700rpx;
|
||
color: #A0B8D0;
|
||
font-size: 28rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.spinner {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 6rpx solid rgba(0, 180, 255, 0.2);
|
||
border-top: 6rpx solid #00B4FF;
|
||
border-right: 6rpx solid #7A2EFF;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
|
||
}
|
||
|
||
.spinner.small {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-width: 4rpx;
|
||
}
|
||
|
||
/* ==================== 空状态 ==================== */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 750rpx;
|
||
background: rgba(0, 20, 40, 0.4);
|
||
border: 2rpx solid #00B4FF;
|
||
border-radius: 50rpx;
|
||
padding: 100rpx 40rpx;
|
||
margin-top: 30rpx;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 60rpx rgba(0, 180, 255, 0.2);
|
||
}
|
||
|
||
.empty-state::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
|
||
animation: pulse 3s infinite;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 110rpx;
|
||
color: #00B4FF;
|
||
margin-bottom: 30rpx;
|
||
filter: drop-shadow(0 0 30rpx #00B4FF);
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #E0F0FF;
|
||
margin-bottom: 20rpx;
|
||
text-shadow: 0 0 15rpx #00B4FF;
|
||
}
|
||
|
||
.empty-tip {
|
||
font-size: 26rpx;
|
||
color: #A0B8D0;
|
||
margin-bottom: 60rpx;
|
||
text-align: center;
|
||
max-width: 450rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.empty-btn {
|
||
padding: 20rpx 80rpx;
|
||
background: linear-gradient(135deg, #00B4FF, #7A2EFF);
|
||
border-radius: 60rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 10rpx 40rpx rgba(0, 180, 255, 0.4);
|
||
border: none;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.empty-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
animation: scanMove 2s infinite;
|
||
}
|
||
|
||
.empty-btn:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 10rpx 50rpx #7A2EFF;
|
||
}
|
||
|
||
/* ==================== 列表标题 ==================== */
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin: 20rpx 0 20rpx; /* 减小上边距 */
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.list-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #00B4FF;
|
||
text-shadow: 0 0 15rpx #00B4FF;
|
||
letter-spacing: 2rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.list-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -6rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||
}
|
||
|
||
.list-count {
|
||
font-size: 24rpx;
|
||
color: #7A8FAA;
|
||
background: rgba(0, 180, 255, 0.1);
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid rgba(0, 180, 255, 0.3);
|
||
}
|
||
|
||
/* ==================== 卡片列表 ==================== */
|
||
.card-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
padding-bottom: 50rpx;
|
||
}
|
||
|
||
/* 卡片主体 - 装甲玻璃 */
|
||
.card {
|
||
background: rgba(0, 20, 40, 0.5);
|
||
backdrop-filter: blur(15px);
|
||
-webkit-backdrop-filter: blur(15px);
|
||
border: 2rpx solid rgba(0, 180, 255, 0.4);
|
||
border-radius: 40rpx;
|
||
padding: 30rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 20rpx 50rpx rgba(0,0,0,0.8), inset 0 0 30rpx rgba(0, 180, 255, 0.2);
|
||
transition: all 0.2s;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 卡片内部光晕 */
|
||
.card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle at 30% 30%, rgba(0, 180, 255, 0.1), transparent 70%);
|
||
opacity: 0.5;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 卡片边框动态流光 */
|
||
.card::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2rpx;
|
||
left: -2rpx;
|
||
right: -2rpx;
|
||
bottom: -2rpx;
|
||
border-radius: 42rpx;
|
||
background: linear-gradient(135deg, #00B4FF, #7A2EFF, #00B4FF);
|
||
z-index: -1;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.card:active::after {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.card:active {
|
||
transform: translateY(-6rpx);
|
||
box-shadow: 0 30rpx 70rpx rgba(0, 180, 255, 0.3);
|
||
}
|
||
|
||
/* 左侧打手信息 */
|
||
.card-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 2;
|
||
min-width: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #00B4FF;
|
||
background: #1A2A3A;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 0 30rpx rgba(0, 180, 255, 0.3);
|
||
position: relative;
|
||
}
|
||
|
||
.avatar.small {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.avatar::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -4rpx;
|
||
left: -4rpx;
|
||
right: -4rpx;
|
||
bottom: -4rpx;
|
||
border: 1px solid rgba(0, 180, 255, 0.4);
|
||
border-radius: 50%;
|
||
animation: pulse 3s infinite;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #E0F0FF;
|
||
margin-bottom: 4rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-shadow: 0 0 10rpx rgba(0, 180, 255, 0.3);
|
||
}
|
||
|
||
.uid {
|
||
font-size: 22rpx;
|
||
color: #A0B8D0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 中间机甲箭头 */
|
||
.card-middle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 10rpx;
|
||
flex-shrink: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 20rpx;
|
||
color: #00B4FF;
|
||
background: rgba(0, 180, 255, 0.1);
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid rgba(0, 180, 255, 0.3);
|
||
margin-bottom: 4rpx;
|
||
white-space: nowrap;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 40rpx;
|
||
color: #00B4FF;
|
||
line-height: 1;
|
||
transform: scaleX(1.5);
|
||
filter: drop-shadow(0 0 10rpx #00B4FF);
|
||
position: relative;
|
||
}
|
||
|
||
.arrow::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -10rpx;
|
||
width: 20rpx;
|
||
height: 2rpx;
|
||
background: #00B4FF;
|
||
box-shadow: 0 0 10rpx #00B4FF;
|
||
}
|
||
|
||
/* 右侧管事信息 + 金额 */
|
||
.card-right {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 3;
|
||
min-width: 0;
|
||
justify-content: flex-end;
|
||
z-index: 2;
|
||
}
|
||
|
||
.amount {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
margin-left: 15rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.num {
|
||
font-size: 34rpx;
|
||
font-weight: 800;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.num.blue {
|
||
color: #00B4FF;
|
||
text-shadow: 0 0 15rpx #00B4FF, 0 0 30rpx #7A2EFF;
|
||
}
|
||
|
||
.time {
|
||
font-size: 20rpx;
|
||
color: #7A8FAA;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
/* 卡片底部能量条 */
|
||
.card-energy {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
#00B4FF 20%,
|
||
#7A2EFF 50%,
|
||
#00B4FF 80%,
|
||
transparent 100%);
|
||
background-size: 200% 100%;
|
||
animation: energyFlow 3s linear infinite;
|
||
opacity: 0.6;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* 为每个卡片添加能量条（通过伪元素或额外元素，这里用绝对定位的块，需要在WXML中添加，但我们可以在样式里用::after，但需要修改WXML添加类） */
|
||
/* 由于不修改WXML，我们使用.card::after已经用于边框，所以另建一个伪元素？不行，只能用额外元素。 */
|
||
/* 为了不修改WXML，我们利用.card的::before用于光晕，::after用于边框，无法再加。所以建议在WXML中添加一个空view作为能量条，但用户不提供WXML，我们可以暂时不加。但为了效果更好，我们可以利用.card的box-shadow模拟？但动态效果有限。暂时不加，等待用户反馈。 */
|
||
|
||
/* ==================== 加载更多 ==================== */
|
||
.more-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
color: #A0B8D0;
|
||
font-size: 26rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* ==================== 没有更多 ==================== */
|
||
.no-more {
|
||
text-align: center;
|
||
padding: 50rpx 0;
|
||
color: #5A6F8A;
|
||
font-size: 24rpx;
|
||
letter-spacing: 2rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.no-more::before,
|
||
.no-more::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, transparent, #00B4FF, #7A2EFF, transparent);
|
||
}
|
||
|
||
.no-more::before {
|
||
left: 20rpx;
|
||
}
|
||
|
||
.no-more::after {
|
||
right: 20rpx;
|
||
}
|
||
|
||
/* ==================== 错误遮罩 ==================== */
|
||
.error-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(10, 12, 20, 0.95);
|
||
backdrop-filter: blur(15px);
|
||
-webkit-backdrop-filter: blur(15px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
|
||
.error-glitch {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(255, 0, 0, 0.05) 0px,
|
||
rgba(0, 255, 0, 0.05) 2px,
|
||
rgba(0, 0, 255, 0.05) 4px
|
||
);
|
||
mix-blend-mode: screen;
|
||
pointer-events: none;
|
||
animation: glitch 0.1s infinite;
|
||
}
|
||
|
||
.error-dialog {
|
||
background: rgba(0, 20, 40, 0.8);
|
||
border: 2rpx solid #FF4444;
|
||
border-radius: 50rpx;
|
||
padding: 60rpx 80rpx;
|
||
text-align: center;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
box-shadow: 0 0 100rpx rgba(255, 68, 68, 0.3);
|
||
z-index: 2;
|
||
max-width: 600rpx;
|
||
}
|
||
|
||
.error-icon {
|
||
font-size: 90rpx;
|
||
color: #FF4444;
|
||
margin-bottom: 30rpx;
|
||
filter: drop-shadow(0 0 30rpx #FF4444);
|
||
}
|
||
|
||
.error-msg {
|
||
font-size: 30rpx;
|
||
color: #E0E6F0;
|
||
margin-bottom: 40rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.error-btn {
|
||
padding: 20rpx 70rpx;
|
||
background: linear-gradient(135deg, #FF4444, #FF8866);
|
||
border-radius: 60rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 10rpx 40rpx rgba(255, 68, 68, 0.4);
|
||
}
|
||
|
||
.error-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
animation: scanMove 2s infinite;
|
||
}
|
||
|
||
.error-btn:active {
|
||
transform: scale(0.96);
|
||
} |