@xcanwin/manyoyo 4.1.4 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,15 +1,23 @@
1
1
  :root {
2
- --bg-top: #e8efe8;
3
- --bg-bottom: #f8fbf9;
4
- --panel: rgba(255, 255, 255, 0.86);
5
- --line: #cfddd3;
6
- --line-focus: #84bda1;
7
- --text: #10281e;
8
- --muted: #4e6458;
9
- --accent: #0a8b54;
10
- --accent-strong: #08784a;
11
- --danger: #b63f31;
12
- --shadow-soft: 0 18px 40px rgba(15, 46, 30, 0.14);
2
+ --font-ui: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
3
+ --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
4
+
5
+ --bg-canvas: #f3ede4;
6
+ --bg-canvas-alt: #efe4d3;
7
+ --bg-grid: rgba(138, 114, 83, 0.16);
8
+
9
+ --panel: #fffdfa;
10
+ --line: #d9c7ad;
11
+ --line-focus: #c4551f;
12
+
13
+ --text: #1f1a14;
14
+ --muted: #6a5f52;
15
+
16
+ --accent: #c4551f;
17
+ --accent-strong: #9d4418;
18
+ --danger: #bf332d;
19
+
20
+ --shadow-soft: 0 24px 58px rgba(44, 31, 15, 0.2);
13
21
  }
14
22
 
15
23
  * {
@@ -29,66 +37,84 @@ body {
29
37
  place-items: center;
30
38
  position: relative;
31
39
  overflow: hidden;
32
- font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
40
+ font-family: var(--font-ui);
33
41
  color: var(--text);
34
- background: linear-gradient(170deg, var(--bg-top) 0%, var(--bg-bottom) 72%);
42
+ background:
43
+ radial-gradient(125% 82% at 6% -6%, #f8f2ea 0%, rgba(248, 242, 234, 0) 57%),
44
+ radial-gradient(95% 66% at 94% 106%, #f2ddc6 0%, rgba(242, 221, 198, 0) 68%),
45
+ linear-gradient(168deg, var(--bg-canvas) 0%, var(--bg-canvas-alt) 100%);
35
46
  }
36
47
 
37
48
  body::before,
38
49
  body::after {
39
50
  content: "";
40
51
  position: absolute;
41
- border-radius: 999px;
52
+ inset: 0;
42
53
  pointer-events: none;
43
54
  }
44
55
 
45
56
  body::before {
46
- width: 360px;
47
- height: 360px;
48
- left: -120px;
49
- top: -140px;
50
- background: radial-gradient(circle at 30% 35%, rgba(96, 190, 143, 0.28) 0%, rgba(96, 190, 143, 0) 70%);
51
- animation: none;
57
+ background-image:
58
+ repeating-linear-gradient(
59
+ 90deg,
60
+ transparent 0,
61
+ transparent 27px,
62
+ var(--bg-grid) 27px,
63
+ var(--bg-grid) 28px
64
+ );
65
+ opacity: 0.2;
52
66
  }
53
67
 
54
68
  body::after {
55
- width: 300px;
56
- height: 300px;
57
- right: -90px;
58
- bottom: -130px;
59
- background: radial-gradient(circle at 60% 40%, rgba(33, 130, 86, 0.2) 0%, rgba(33, 130, 86, 0) 72%);
60
- animation: none;
69
+ background-image:
70
+ linear-gradient(148deg, rgba(196, 85, 31, 0.08) 0%, rgba(196, 85, 31, 0) 42%),
71
+ linear-gradient(-148deg, rgba(15, 124, 114, 0.08) 0%, rgba(15, 124, 114, 0) 38%);
61
72
  }
62
73
 
63
74
  .card {
64
75
  position: relative;
65
76
  z-index: 1;
66
- width: min(430px, calc(100vw - 30px));
67
- padding: 24px 24px 20px;
77
+ width: min(440px, calc(100vw - 30px));
78
+ padding: 26px 24px 20px;
68
79
  border: 1px solid var(--line);
69
- border-radius: 12px;
70
- background: var(--panel);
80
+ border-radius: 18px;
81
+ background:
82
+ linear-gradient(172deg, rgba(255, 255, 255, 0.97) 0%, rgba(249, 241, 230, 0.97) 100%);
71
83
  box-shadow: var(--shadow-soft);
72
- animation: cardIn 360ms ease both;
84
+ animation: cardIn 340ms ease both;
85
+ }
86
+
87
+ .card::before {
88
+ content: "";
89
+ position: absolute;
90
+ left: 0;
91
+ top: 0;
92
+ right: 0;
93
+ height: 4px;
94
+ border-radius: 18px 18px 0 0;
95
+ background: linear-gradient(90deg, #c4551f 0%, #0f7c72 100%);
73
96
  }
74
97
 
75
98
  .badge {
76
99
  display: inline-flex;
77
100
  align-items: center;
78
- border-radius: 6px;
79
- padding: 4px 10px;
80
- background: #e4f5eb;
81
- color: #0a7b48;
101
+ border-radius: 99px;
102
+ padding: 4px 11px;
103
+ background: #fee8db;
104
+ color: #8b3713;
82
105
  font-size: 11px;
83
106
  font-weight: 700;
84
- letter-spacing: 0.8px;
107
+ letter-spacing: 0.95px;
85
108
  margin-bottom: 10px;
109
+ text-transform: uppercase;
86
110
  }
87
111
 
88
112
  h1 {
89
113
  margin: 0 0 6px;
90
- font-size: 24px;
91
- line-height: 1.2;
114
+ font-family: var(--font-display);
115
+ font-size: 30px;
116
+ line-height: 1.05;
117
+ letter-spacing: 0.4px;
92
118
  }
93
119
 
94
120
  p {
@@ -100,14 +126,16 @@ p {
100
126
  label {
101
127
  display: block;
102
128
  margin: 11px 0 6px;
103
- font-size: 13px;
104
- font-weight: 600;
129
+ font-size: 12px;
130
+ font-weight: 700;
131
+ letter-spacing: 0.2px;
132
+ text-transform: uppercase;
105
133
  }
106
134
 
107
135
  input {
108
136
  width: 100%;
109
137
  border: 1px solid var(--line);
110
- border-radius: 8px;
138
+ border-radius: 10px;
111
139
  padding: 10px 11px;
112
140
  font-size: 14px;
113
141
  color: var(--text);
@@ -117,14 +145,14 @@ input {
117
145
  input:focus {
118
146
  outline: none;
119
147
  border-color: var(--line-focus);
120
- box-shadow: 0 0 0 3px rgba(10, 139, 84, 0.14);
148
+ box-shadow: 0 0 0 3px rgba(196, 85, 31, 0.15);
121
149
  }
122
150
 
123
151
  button {
124
152
  width: 100%;
125
153
  margin-top: 14px;
126
154
  border: 1px solid transparent;
127
- border-radius: 8px;
155
+ border-radius: 10px;
128
156
  padding: 10px 12px;
129
157
  font-size: 14px;
130
158
  font-weight: 700;
@@ -145,6 +173,12 @@ button:disabled {
145
173
  transform: none;
146
174
  }
147
175
 
176
+ button:focus-visible,
177
+ input:focus-visible {
178
+ outline: 2px solid rgba(196, 85, 31, 0.45);
179
+ outline-offset: 2px;
180
+ }
181
+
148
182
  .error {
149
183
  margin-top: 10px;
150
184
  min-height: 20px;
@@ -163,26 +197,6 @@ button:disabled {
163
197
  }
164
198
  }
165
199
 
166
- @keyframes orbA {
167
- 0%,
168
- 100% {
169
- transform: translate3d(0, 0, 0) scale(1);
170
- }
171
- 50% {
172
- transform: translate3d(16px, 18px, 0) scale(1.07);
173
- }
174
- }
175
-
176
- @keyframes orbB {
177
- 0%,
178
- 100% {
179
- transform: translate3d(0, 0, 0) scale(1);
180
- }
181
- 50% {
182
- transform: translate3d(-14px, -12px, 0) scale(1.08);
183
- }
184
- }
185
-
186
200
  @media (prefers-reduced-motion: reduce) {
187
201
  *,
188
202
  *::before,