style(all): 小程序全页面 Soft UI 浅色柔彩主题（全局重置）
- page 背景改 Soft 柔彩渐变(粉紫/薄荷/天蓝 + #3a4672 文本) - 全局共享 .card/.card-title/.desc/.section-head/.muted/.btn-main/.btn-ghost 转柔白面+软阴影+深蓝文本 - 答题组件(ot-qcard/ot-opt/ot-qtext/ot-progress/ot-back 等) 转 Soft 浅色 - 表单控件(.input/.picker/.ot-opt/.cell/.step 等) 全局柔白+深蓝灰文本(!important 覆盖各页暗色) - 自定义 tabBar 去暗/金→柔白玻璃+蓝紫激活 - 图标均 mask SVG(无 emoji) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pine
+58
-40
@@ -9,11 +9,17 @@
|
||||
不依赖任何 App 层 DOM（Taro 下 App.render 不会渲染成包裹页面的容器）。 */
|
||||
/* page = 微信真正的根节点，背景直接铺这里（Taro 下 App.render 不渲染成包裹容器的 DOM）。
|
||||
星点：平铺小格(各自尺寸 + repeat)；光晕与底：满屏(100%)；逐层 background-size/repeat 匹配。 */
|
||||
/* 干净深空底色（无动画、无 canvas，真机流畅不遮挡） */
|
||||
/* Soft UI 浅色柔彩底色（无动画、无 canvas，真机流畅不遮挡） */
|
||||
page {
|
||||
background: #05060d;
|
||||
color: #ffffff;
|
||||
background: #f4f6ff;
|
||||
color: #3a4672;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
background-image:
|
||||
radial-gradient(64% 42% at 12% 2%, rgba(229, 167, 224, 0.26), transparent 60%),
|
||||
radial-gradient(56% 40% at 94% 4%, rgba(158, 225, 236, 0.30), transparent 60%),
|
||||
radial-gradient(50% 42% at 84% 100%, rgba(151, 225, 212, 0.22), transparent 60%),
|
||||
linear-gradient(165deg, #edf2ff 0%, #f6eefc 40%, #ecf7f6 72%, #eaf4ff 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条：所有页面内容可滚动，但不显示滚动条（含内部横向滚动容器） */
|
||||
@@ -70,38 +76,39 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用卡片（Appica 风格：暗色面 + 层级阴影） */
|
||||
/* 通用卡片（Soft UI：柔白面 + 软阴影 + 大圆角） */
|
||||
.card {
|
||||
background: linear-gradient(180deg, #0e0e12, #0a0a0d);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(99, 132, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.42);
|
||||
box-shadow: 0 10rpx 28rpx rgba(59, 79, 125, 0.09);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
color: #23315c;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 26px;
|
||||
color: #c4c2c3;
|
||||
color: #6a76a8;
|
||||
line-height: 1.6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
background: linear-gradient(135deg, #5b8cff, #9d6bff);
|
||||
background: linear-gradient(135deg, #6b8bff, #8f7bff);
|
||||
color: #ffffff;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
padding: 0 40px;
|
||||
line-height: 2.6;
|
||||
box-shadow: 0 8rpx 24rpx rgba(120, 110, 255, 0.4);
|
||||
box-shadow: 0 8rpx 24rpx rgba(98, 132, 255, 0.28);
|
||||
}
|
||||
|
||||
.btn-main::after {
|
||||
@@ -109,9 +116,9 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: #e8e8e8;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #5a6aa3;
|
||||
border: 1px solid rgba(99, 132, 255, 0.22);
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
@@ -126,12 +133,12 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.section-head {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
color: #23315c;
|
||||
margin: 32px 0 16px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #8e8e8e;
|
||||
color: #9aa4c6;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -158,9 +165,9 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
color: #a8c4ff;
|
||||
background: rgba(140, 160, 255, 0.12);
|
||||
border: 1px solid rgba(140, 160, 255, 0.3);
|
||||
color: #6284ff;
|
||||
background: rgba(99, 132, 255, 0.10);
|
||||
border: 1px solid rgba(99, 132, 255, 0.24);
|
||||
border-radius: 999px;
|
||||
padding: 4px 14px;
|
||||
}
|
||||
@@ -168,15 +175,15 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.ot-quiz-title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
color: #23315c;
|
||||
}
|
||||
|
||||
.ot-quiz-tag {
|
||||
margin-left: 14px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #6b8bff, #8f7bff);
|
||||
border-radius: 999px;
|
||||
padding: 4px 16px;
|
||||
vertical-align: middle;
|
||||
@@ -184,13 +191,13 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.ot-progress-text {
|
||||
font-size: 24px;
|
||||
color: #8e8e8e;
|
||||
color: #9aa4c6;
|
||||
}
|
||||
|
||||
.ot-progress {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
background: rgba(99, 132, 255, 0.14);
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -198,14 +205,14 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.ot-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #ffd28a, #ff8f6b);
|
||||
background: linear-gradient(90deg, #6b8bff, #8f7bff);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.ot-part {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
color: #ffd28a;
|
||||
color: #6284ff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -214,20 +221,21 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
font-size: 22px;
|
||||
color: #8e8e8e;
|
||||
color: #9aa4c6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ot-qcard {
|
||||
background: #0c0c0e;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(99, 132, 255, 0.12);
|
||||
border-radius: 16px;
|
||||
padding: 28px 30px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8rpx 24rpx rgba(59, 79, 125, 0.08);
|
||||
}
|
||||
|
||||
.ot-qcard.answered {
|
||||
border-color: rgba(255, 210, 138, 0.5);
|
||||
border-color: rgba(98, 132, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 一题一屏：卡片更突出，题目/选项更大 */
|
||||
@@ -251,12 +259,12 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
color: #6f6f6f;
|
||||
color: #a3abc9;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ot-check {
|
||||
color: #ffd28a;
|
||||
color: #6284ff;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@@ -264,7 +272,7 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: #23315c;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -279,31 +287,31 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: #141417;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: #f6f8ff;
|
||||
border: 1px solid rgba(99, 132, 255, 0.14);
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.ot-opt.sel {
|
||||
border-color: #ffd28a;
|
||||
background: rgba(255, 210, 138, 0.08);
|
||||
border-color: #6284ff;
|
||||
background: rgba(99, 132, 255, 0.08);
|
||||
}
|
||||
|
||||
.opt-key {
|
||||
font-family: 'BubbledotICG', monospace;
|
||||
color: #8e8e8e;
|
||||
color: #8a94c0;
|
||||
font-size: 26px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ot-opt.sel .opt-key {
|
||||
color: #ffd28a;
|
||||
color: #6284ff;
|
||||
}
|
||||
|
||||
.opt-text {
|
||||
font-size: 27px;
|
||||
color: #c4c2c3;
|
||||
color: #4a5580;
|
||||
line-height: 1.55;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -356,3 +364,13 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.ic-thumb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
|
||||
.ic-share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); }
|
||||
.ic-cmt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
|
||||
|
||||
/* ============================================================
|
||||
Soft UI 全局降级：表单控件/选项统一柔白面 + 深蓝灰文本（覆盖各页暗色控件）
|
||||
============================================================ */
|
||||
.input, .picker, .ot-opt, .sv-opt, .sv-textarea, .sv-lk, .ed-form, .ed-img.placeholder,
|
||||
.ca-textarea, .ca-code .input, .pt-picker, .pt-textarea, .pa-textarea, .pa-picker, .step, .summary, .cell {
|
||||
background: #ffffff !important;
|
||||
border-color: rgba(99, 132, 255, 0.16) !important;
|
||||
color: #3a4672 !important;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background: linear-gradient(to top, rgba(8, 9, 12, 0.97), rgba(10, 11, 16, 0.88));
|
||||
box-shadow: 0 -6rpx 30rpx rgba(0, 0, 0, 0.35);
|
||||
background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(244,246,255,0.88));
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: 0 -6rpx 30rpx rgba(59, 79, 125, 0.10);
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@@ -36,12 +37,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
color: #8a8a93;
|
||||
color: #9aa4c6;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-item--active {
|
||||
color: #ffd28a;
|
||||
color: #6284ff;
|
||||
}
|
||||
|
||||
.tab-item--active::before {
|
||||
@@ -53,7 +54,7 @@
|
||||
width: 64rpx;
|
||||
height: 2rpx;
|
||||
border-radius: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, #ffd28a, transparent);
|
||||
background: linear-gradient(90deg, transparent, #6284ff, transparent);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@@ -65,7 +66,7 @@
|
||||
}
|
||||
|
||||
.tab-item--active .tab-item__icon {
|
||||
filter: drop-shadow(0 2rpx 10rpx rgba(255, 210, 138, 0.55));
|
||||
filter: drop-shadow(0 2rpx 10rpx rgba(98, 132, 255, 0.55));
|
||||
}
|
||||
|
||||
.tab-item--active .tab-icon {
|
||||
@@ -83,7 +84,7 @@
|
||||
margin-top: -30rpx;
|
||||
z-index: 2;
|
||||
justify-content: flex-start;
|
||||
color: rgba(255, 210, 138, 0.55);
|
||||
color: rgba(98, 132, 255, 0.55);
|
||||
}
|
||||
|
||||
.home-blob {
|
||||
@@ -95,11 +96,11 @@
|
||||
height: 108rpx;
|
||||
/* 上圆下收的异形（水滴/倒角蛋形） */
|
||||
border-radius: 52% 52% 44% 44% / 58% 58% 42% 42%;
|
||||
background: linear-gradient(180deg, #2c2640, #15121e 72%);
|
||||
border: 2rpx solid rgba(255, 210, 138, 0.4);
|
||||
background: linear-gradient(180deg, #ffffff, #eef1ff 72%);
|
||||
border: 2rpx solid rgba(98, 132, 255, 0.30);
|
||||
box-shadow:
|
||||
0 8rpx 26rpx rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 22rpx rgba(255, 210, 138, 0.1);
|
||||
0 8rpx 26rpx rgba(59, 79, 125, 0.16),
|
||||
inset 0 0 22rpx rgba(98, 132, 255, 0.1);
|
||||
}
|
||||
|
||||
.home-inner {
|
||||
@@ -120,24 +121,24 @@
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 2rpx;
|
||||
color: #fff;
|
||||
color: #23315c;
|
||||
}
|
||||
|
||||
/* 激活：底座点亮 + 星星辉光 */
|
||||
.tab-item--home.tab-item--active {
|
||||
color: #ffd28a;
|
||||
color: #6284ff;
|
||||
}
|
||||
|
||||
.tab-item--home.tab-item--active .home-blob {
|
||||
border-color: rgba(255, 210, 138, 0.9);
|
||||
border-color: rgba(98, 132, 255, 0.9);
|
||||
box-shadow:
|
||||
0 0 36rpx rgba(255, 210, 138, 0.45),
|
||||
0 0 36rpx rgba(98, 132, 255, 0.45),
|
||||
0 8rpx 26rpx rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 28rpx rgba(255, 210, 138, 0.22);
|
||||
inset 0 0 28rpx rgba(98, 132, 255, 0.22);
|
||||
}
|
||||
|
||||
.tab-item--home.tab-item--active .ic-star {
|
||||
filter: drop-shadow(0 0 10rpx rgba(255, 210, 138, 0.9));
|
||||
filter: drop-shadow(0 0 10rpx rgba(98, 132, 255, 0.9));
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user