@jjlmoya/utils-tools 1.8.0 → 1.10.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.
Files changed (52) hide show
  1. package/package.json +7 -4
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/entries.ts +26 -0
  4. package/src/tool/date-diff-calculator/component.astro +0 -200
  5. package/src/tool/date-diff-calculator/date-difference-calculator.css +198 -0
  6. package/src/tool/date-diff-calculator/entry.ts +24 -0
  7. package/src/tool/date-diff-calculator/index.ts +2 -25
  8. package/src/tool/drive-direct-link/component.astro +0 -173
  9. package/src/tool/drive-direct-link/entry.ts +24 -0
  10. package/src/tool/drive-direct-link/google-drive-direct-download-link.css +171 -0
  11. package/src/tool/drive-direct-link/index.ts +2 -25
  12. package/src/tool/email-list-cleaner/component.astro +0 -204
  13. package/src/tool/email-list-cleaner/email-list-cleaner.css +202 -0
  14. package/src/tool/email-list-cleaner/entry.ts +24 -0
  15. package/src/tool/email-list-cleaner/index.ts +2 -25
  16. package/src/tool/env-badge-spain/component.astro +0 -156
  17. package/src/tool/env-badge-spain/entry.ts +24 -0
  18. package/src/tool/env-badge-spain/environmental-badge-simulator-spain.css +154 -0
  19. package/src/tool/env-badge-spain/index.ts +2 -25
  20. package/src/tool/morse-beacon/component.astro +0 -298
  21. package/src/tool/morse-beacon/entry.ts +24 -0
  22. package/src/tool/morse-beacon/index.ts +2 -25
  23. package/src/tool/morse-beacon/morse-beacon.css +296 -0
  24. package/src/tool/password-generator/component.astro +0 -88
  25. package/src/tool/password-generator/entry.ts +24 -0
  26. package/src/tool/password-generator/index.ts +2 -25
  27. package/src/tool/password-generator/password-generator.css +86 -0
  28. package/src/tool/routes/component.astro +0 -254
  29. package/src/tool/routes/entry.ts +24 -0
  30. package/src/tool/routes/index.ts +2 -25
  31. package/src/tool/routes/optimal-routes.css +252 -0
  32. package/src/tool/rule-of-three/component.astro +0 -249
  33. package/src/tool/rule-of-three/entry.ts +24 -0
  34. package/src/tool/rule-of-three/index.ts +2 -25
  35. package/src/tool/rule-of-three/rule-of-three.css +247 -0
  36. package/src/tool/seo-content-optimizer/component.astro +0 -278
  37. package/src/tool/seo-content-optimizer/entry.ts +24 -0
  38. package/src/tool/seo-content-optimizer/index.ts +2 -25
  39. package/src/tool/seo-content-optimizer/seo-content-optimizer.css +276 -0
  40. package/src/tool/speed-reader/component.astro +0 -400
  41. package/src/tool/speed-reader/entry.ts +24 -0
  42. package/src/tool/speed-reader/index.ts +2 -25
  43. package/src/tool/speed-reader/speed-reader.css +398 -0
  44. package/src/tool/text-pixel-calculator/component.astro +0 -96
  45. package/src/tool/text-pixel-calculator/entry.ts +24 -0
  46. package/src/tool/text-pixel-calculator/index.ts +2 -25
  47. package/src/tool/text-pixel-calculator/text-pixel-width-calculator.css +94 -0
  48. package/src/tool/whatsapp-link/component.astro +0 -264
  49. package/src/tool/whatsapp-link/entry.ts +24 -0
  50. package/src/tool/whatsapp-link/index.ts +2 -25
  51. package/src/tool/whatsapp-link/whatsapp-link-generator.css +262 -0
  52. package/src/tools.ts +1 -1
@@ -40,179 +40,6 @@ const t = (ui ?? {}) as DriveDirectLinkUI;
40
40
  </div>
41
41
  </div>
42
42
 
43
- <style>
44
- .gdl-root {
45
- --gdl-blue: #2563eb;
46
- --gdl-blue-light: #3b82f6;
47
- --gdl-green: #10b981;
48
- --gdl-green-bg: rgba(16, 185, 129, 0.08);
49
- --gdl-green-border: rgba(16, 185, 129, 0.3);
50
- --gdl-card-bg: #fff;
51
- --gdl-card-border: #e2e8f0;
52
- --gdl-field-bg: #f8fafc;
53
- --gdl-field-border: #cbd5e1;
54
- --gdl-text-main: #1e293b;
55
- --gdl-text-label: #374151;
56
- --gdl-error-bg: rgba(239, 68, 68, 0.1);
57
- --gdl-error-border: rgba(239, 68, 68, 0.3);
58
- --gdl-divider: rgba(0, 0, 0, 0.08);
59
-
60
- width: 100%;
61
- max-width: 600px;
62
- margin: 0 auto;
63
- }
64
-
65
- :global(.theme-dark) .gdl-root {
66
- --gdl-card-bg: #1e293b;
67
- --gdl-card-border: #334155;
68
- --gdl-field-bg: #0f172a;
69
- --gdl-field-border: #475569;
70
- --gdl-text-main: #f1f5f9;
71
- --gdl-text-label: #cbd5e1;
72
- --gdl-divider: rgba(255, 255, 255, 0.08);
73
- }
74
-
75
- .gdl-card {
76
- background: var(--gdl-card-bg);
77
- border: 1px solid var(--gdl-card-border);
78
- border-radius: 1.5rem;
79
- padding: 2.5rem;
80
- display: flex;
81
- flex-direction: column;
82
- gap: 1.5rem;
83
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
84
- }
85
-
86
- .gdl-field {
87
- display: flex;
88
- flex-direction: column;
89
- gap: 0.75rem;
90
- }
91
-
92
- .gdl-label {
93
- font-size: 1rem;
94
- font-weight: 500;
95
- color: var(--gdl-text-label);
96
- }
97
-
98
- .gdl-input {
99
- width: 100%;
100
- padding: 1rem 1.25rem;
101
- background: var(--gdl-field-bg);
102
- border: 1px solid var(--gdl-field-border);
103
- border-radius: 0.75rem;
104
- color: var(--gdl-text-main);
105
- font-size: 1rem;
106
- outline: none;
107
- transition: border-color 0.2s, box-shadow 0.2s;
108
- box-sizing: border-box;
109
- }
110
-
111
- .gdl-input:focus {
112
- border-color: var(--gdl-blue);
113
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
114
- background: var(--gdl-card-bg);
115
- }
116
-
117
- .gdl-btn-primary {
118
- background: linear-gradient(135deg, var(--gdl-blue-light) 0%, var(--gdl-blue) 100%);
119
- color: #fff;
120
- border: none;
121
- border-radius: 0.75rem;
122
- padding: 1rem 1.5rem;
123
- font-size: 1.0625rem;
124
- font-weight: 600;
125
- cursor: pointer;
126
- transition: transform 0.2s, box-shadow 0.2s;
127
- box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
128
- }
129
-
130
- .gdl-btn-primary:hover {
131
- transform: translateY(-2px);
132
- box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
133
- }
134
-
135
- .gdl-btn-primary:active {
136
- transform: translateY(0);
137
- }
138
-
139
- .gdl-result {
140
- flex-direction: column;
141
- gap: 1rem;
142
- padding-top: 1.5rem;
143
- border-top: 1px solid var(--gdl-divider);
144
- }
145
-
146
- .gdl-result-label {
147
- font-size: 0.9375rem;
148
- font-weight: 600;
149
- color: var(--gdl-green);
150
- }
151
-
152
- .gdl-output-row {
153
- display: flex;
154
- gap: 0.5rem;
155
- }
156
-
157
- .gdl-output {
158
- color: var(--gdl-green);
159
- background: var(--gdl-green-bg);
160
- border-color: var(--gdl-green-border);
161
- flex: 1;
162
- }
163
-
164
- .gdl-copy-btn {
165
- display: flex;
166
- align-items: center;
167
- justify-content: center;
168
- background: var(--gdl-green-bg);
169
- border: 1px solid var(--gdl-green-border);
170
- border-radius: 0.75rem;
171
- color: var(--gdl-green);
172
- width: 3rem;
173
- min-width: 3rem;
174
- cursor: pointer;
175
- transition: background 0.2s;
176
- }
177
-
178
- .gdl-copy-btn:hover {
179
- background: rgba(16, 185, 129, 0.2);
180
- }
181
-
182
- .gdl-test-btn {
183
- display: block;
184
- text-align: center;
185
- background: var(--gdl-green-bg);
186
- color: var(--gdl-green);
187
- border: 1px solid var(--gdl-green-border);
188
- border-radius: 0.75rem;
189
- padding: 0.75rem 1rem;
190
- font-size: 1rem;
191
- font-weight: 600;
192
- text-decoration: none;
193
- transition: background 0.2s, border-color 0.2s;
194
- }
195
-
196
- .gdl-test-btn:hover {
197
- background: rgba(16, 185, 129, 0.2);
198
- border-color: rgba(16, 185, 129, 0.5);
199
- }
200
-
201
- .gdl-error {
202
- color: #ef4444;
203
- background: var(--gdl-error-bg);
204
- border: 1px solid var(--gdl-error-border);
205
- border-radius: 0.75rem;
206
- padding: 1rem;
207
- font-size: 0.9375rem;
208
- }
209
-
210
- @media (max-width: 480px) {
211
- .gdl-card {
212
- padding: 1.5rem;
213
- }
214
- }
215
- </style>
216
43
 
217
44
  <script>
218
45
  import type { DriveDirectLinkUI } from './ui';
@@ -0,0 +1,24 @@
1
+ import type { ToolsToolEntry } from '../../types';
2
+ import type { DriveDirectLinkUI } from './ui';
3
+
4
+ export const driveDirectLink: ToolsToolEntry<DriveDirectLinkUI> = {
5
+ id: 'drive-direct-link',
6
+ icons: { bg: 'mdi:google-drive', fg: 'mdi:download' },
7
+ i18n: {
8
+ es: () => import('./i18n/es').then((m) => m.content),
9
+ en: () => import('./i18n/en').then((m) => m.content),
10
+ fr: () => import('./i18n/fr').then((m) => m.content),
11
+ de: () => import('./i18n/de').then((m) => m.content),
12
+ it: () => import('./i18n/it').then((m) => m.content),
13
+ pt: () => import('./i18n/pt').then((m) => m.content),
14
+ nl: () => import('./i18n/nl').then((m) => m.content),
15
+ pl: () => import('./i18n/pl').then((m) => m.content),
16
+ tr: () => import('./i18n/tr').then((m) => m.content),
17
+ id: () => import('./i18n/id').then((m) => m.content),
18
+ sv: () => import('./i18n/sv').then((m) => m.content),
19
+ ru: () => import('./i18n/ru').then((m) => m.content),
20
+ ja: () => import('./i18n/ja').then((m) => m.content),
21
+ ko: () => import('./i18n/ko').then((m) => m.content),
22
+ zh: () => import('./i18n/zh').then((m) => m.content),
23
+ },
24
+ };
@@ -0,0 +1,171 @@
1
+ .gdl-root {
2
+ --gdl-blue: #2563eb;
3
+ --gdl-blue-light: #3b82f6;
4
+ --gdl-green: #10b981;
5
+ --gdl-green-bg: rgba(16, 185, 129, 0.08);
6
+ --gdl-green-border: rgba(16, 185, 129, 0.3);
7
+ --gdl-card-bg: #fff;
8
+ --gdl-card-border: #e2e8f0;
9
+ --gdl-field-bg: #f8fafc;
10
+ --gdl-field-border: #cbd5e1;
11
+ --gdl-text-main: #1e293b;
12
+ --gdl-text-label: #374151;
13
+ --gdl-error-bg: rgba(239, 68, 68, 0.1);
14
+ --gdl-error-border: rgba(239, 68, 68, 0.3);
15
+ --gdl-divider: rgba(0, 0, 0, 0.08);
16
+
17
+ width: 100%;
18
+ max-width: 600px;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ :global(.theme-dark) .gdl-root {
23
+ --gdl-card-bg: #1e293b;
24
+ --gdl-card-border: #334155;
25
+ --gdl-field-bg: #0f172a;
26
+ --gdl-field-border: #475569;
27
+ --gdl-text-main: #f1f5f9;
28
+ --gdl-text-label: #cbd5e1;
29
+ --gdl-divider: rgba(255, 255, 255, 0.08);
30
+ }
31
+
32
+ .gdl-card {
33
+ background: var(--gdl-card-bg);
34
+ border: 1px solid var(--gdl-card-border);
35
+ border-radius: 1.5rem;
36
+ padding: 2.5rem;
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: 1.5rem;
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
41
+ }
42
+
43
+ .gdl-field {
44
+ display: flex;
45
+ flex-direction: column;
46
+ gap: 0.75rem;
47
+ }
48
+
49
+ .gdl-label {
50
+ font-size: 1rem;
51
+ font-weight: 500;
52
+ color: var(--gdl-text-label);
53
+ }
54
+
55
+ .gdl-input {
56
+ width: 100%;
57
+ padding: 1rem 1.25rem;
58
+ background: var(--gdl-field-bg);
59
+ border: 1px solid var(--gdl-field-border);
60
+ border-radius: 0.75rem;
61
+ color: var(--gdl-text-main);
62
+ font-size: 1rem;
63
+ outline: none;
64
+ transition: border-color 0.2s, box-shadow 0.2s;
65
+ box-sizing: border-box;
66
+ }
67
+
68
+ .gdl-input:focus {
69
+ border-color: var(--gdl-blue);
70
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
71
+ background: var(--gdl-card-bg);
72
+ }
73
+
74
+ .gdl-btn-primary {
75
+ background: linear-gradient(135deg, var(--gdl-blue-light) 0%, var(--gdl-blue) 100%);
76
+ color: #fff;
77
+ border: none;
78
+ border-radius: 0.75rem;
79
+ padding: 1rem 1.5rem;
80
+ font-size: 1.0625rem;
81
+ font-weight: 600;
82
+ cursor: pointer;
83
+ transition: transform 0.2s, box-shadow 0.2s;
84
+ box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
85
+ }
86
+
87
+ .gdl-btn-primary:hover {
88
+ transform: translateY(-2px);
89
+ box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
90
+ }
91
+
92
+ .gdl-btn-primary:active {
93
+ transform: translateY(0);
94
+ }
95
+
96
+ .gdl-result {
97
+ flex-direction: column;
98
+ gap: 1rem;
99
+ padding-top: 1.5rem;
100
+ border-top: 1px solid var(--gdl-divider);
101
+ }
102
+
103
+ .gdl-result-label {
104
+ font-size: 0.9375rem;
105
+ font-weight: 600;
106
+ color: var(--gdl-green);
107
+ }
108
+
109
+ .gdl-output-row {
110
+ display: flex;
111
+ gap: 0.5rem;
112
+ }
113
+
114
+ .gdl-output {
115
+ color: var(--gdl-green);
116
+ background: var(--gdl-green-bg);
117
+ border-color: var(--gdl-green-border);
118
+ flex: 1;
119
+ }
120
+
121
+ .gdl-copy-btn {
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ background: var(--gdl-green-bg);
126
+ border: 1px solid var(--gdl-green-border);
127
+ border-radius: 0.75rem;
128
+ color: var(--gdl-green);
129
+ width: 3rem;
130
+ min-width: 3rem;
131
+ cursor: pointer;
132
+ transition: background 0.2s;
133
+ }
134
+
135
+ .gdl-copy-btn:hover {
136
+ background: rgba(16, 185, 129, 0.2);
137
+ }
138
+
139
+ .gdl-test-btn {
140
+ display: block;
141
+ text-align: center;
142
+ background: var(--gdl-green-bg);
143
+ color: var(--gdl-green);
144
+ border: 1px solid var(--gdl-green-border);
145
+ border-radius: 0.75rem;
146
+ padding: 0.75rem 1rem;
147
+ font-size: 1rem;
148
+ font-weight: 600;
149
+ text-decoration: none;
150
+ transition: background 0.2s, border-color 0.2s;
151
+ }
152
+
153
+ .gdl-test-btn:hover {
154
+ background: rgba(16, 185, 129, 0.2);
155
+ border-color: rgba(16, 185, 129, 0.5);
156
+ }
157
+
158
+ .gdl-error {
159
+ color: #ef4444;
160
+ background: var(--gdl-error-bg);
161
+ border: 1px solid var(--gdl-error-border);
162
+ border-radius: 0.75rem;
163
+ padding: 1rem;
164
+ font-size: 0.9375rem;
165
+ }
166
+
167
+ @media (max-width: 480px) {
168
+ .gdl-card {
169
+ padding: 1.5rem;
170
+ }
171
+ }
@@ -1,28 +1,5 @@
1
- import type { ToolDefinition, ToolsToolEntry } from '../../types';
2
- import type { DriveDirectLinkUI } from './ui';
3
-
4
- export const driveDirectLink: ToolsToolEntry<DriveDirectLinkUI> = {
5
- id: 'drive-direct-link',
6
- icons: { bg: 'mdi:google-drive', fg: 'mdi:download' },
7
- i18n: {
8
- es: () => import('./i18n/es').then((m) => m.content),
9
- en: () => import('./i18n/en').then((m) => m.content),
10
- fr: () => import('./i18n/fr').then((m) => m.content),
11
- de: () => import('./i18n/de').then((m) => m.content),
12
- it: () => import('./i18n/it').then((m) => m.content),
13
- pt: () => import('./i18n/pt').then((m) => m.content),
14
- nl: () => import('./i18n/nl').then((m) => m.content),
15
- pl: () => import('./i18n/pl').then((m) => m.content),
16
- tr: () => import('./i18n/tr').then((m) => m.content),
17
- id: () => import('./i18n/id').then((m) => m.content),
18
- sv: () => import('./i18n/sv').then((m) => m.content),
19
- ru: () => import('./i18n/ru').then((m) => m.content),
20
- ja: () => import('./i18n/ja').then((m) => m.content),
21
- ko: () => import('./i18n/ko').then((m) => m.content),
22
- zh: () => import('./i18n/zh').then((m) => m.content),
23
- },
24
- };
25
-
1
+ import { driveDirectLink } from './entry';
2
+ export * from './entry';
26
3
  export const DRIVE_DIRECT_LINK_TOOL: ToolDefinition = {
27
4
  entry: driveDirectLink,
28
5
  Component: () => import('./component.astro'),
@@ -77,210 +77,6 @@ const t = (ui ?? {}) as EmailListCleanerUI;
77
77
  </div>
78
78
  </div>
79
79
 
80
- <style>
81
- .elc-root {
82
- --elc-indigo: #6366f1;
83
- --elc-indigo-dark: #4f46e5;
84
- --elc-purple: #a855f7;
85
- --elc-green: #10b981;
86
- --elc-rose: #f43f5e;
87
- --elc-card-bg: rgba(255, 255, 255, 0.7);
88
- --elc-card-border: rgba(255, 255, 255, 0.4);
89
- --elc-field-bg: #fff;
90
- --elc-field-border: #e2e8f0;
91
- --elc-text-main: #1e293b;
92
- --elc-text-label: #64748b;
93
- --elc-result-bg: rgba(99, 102, 241, 0.05);
94
- --elc-divider: #e2e8f0;
95
- --elc-stat-bg: rgba(255, 255, 255, 0.5);
96
- --elc-stat-border: rgba(255, 255, 255, 0.4);
97
-
98
- width: 100%;
99
- max-width: 860px;
100
- margin: 0 auto;
101
- }
102
-
103
- :global(.theme-dark) .elc-root {
104
- --elc-card-bg: rgba(15, 23, 42, 0.6);
105
- --elc-card-border: rgba(255, 255, 255, 0.1);
106
- --elc-field-bg: #1e293b;
107
- --elc-field-border: #334155;
108
- --elc-text-main: #f1f5f9;
109
- --elc-text-label: #94a3b8;
110
- --elc-result-bg: rgba(99, 102, 241, 0.08);
111
- --elc-divider: #334155;
112
- --elc-stat-bg: rgba(30, 41, 59, 0.4);
113
- --elc-stat-border: rgba(255, 255, 255, 0.1);
114
- }
115
-
116
- .elc-card {
117
- background: var(--elc-card-bg);
118
- backdrop-filter: blur(12px);
119
- border: 1px solid var(--elc-card-border);
120
- border-radius: 1.5rem;
121
- padding: 2.5rem;
122
- box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
123
- display: flex;
124
- flex-direction: column;
125
- gap: 2rem;
126
- }
127
-
128
- .elc-field {
129
- display: flex;
130
- flex-direction: column;
131
- gap: 0.75rem;
132
- }
133
-
134
- .elc-label-row {
135
- display: flex;
136
- justify-content: space-between;
137
- align-items: center;
138
- }
139
-
140
- .elc-label {
141
- font-size: 0.8125rem;
142
- font-weight: 700;
143
- color: var(--elc-text-label);
144
- text-transform: uppercase;
145
- letter-spacing: 0.05em;
146
- }
147
-
148
- .elc-badge {
149
- font-size: 0.75rem;
150
- font-weight: 600;
151
- background: rgba(99, 102, 241, 0.1);
152
- color: var(--elc-indigo);
153
- padding: 0.2rem 0.65rem;
154
- border-radius: 99px;
155
- }
156
-
157
- .elc-textarea {
158
- width: 100%;
159
- min-height: 220px;
160
- padding: 1rem 1.25rem;
161
- border-radius: 1rem;
162
- border: 2px solid var(--elc-field-border);
163
- background: var(--elc-field-bg);
164
- color: var(--elc-text-main);
165
- font-size: 0.9375rem;
166
- resize: vertical;
167
- outline: none;
168
- transition: border-color 0.2s;
169
- box-sizing: border-box;
170
- }
171
-
172
- .elc-textarea:focus {
173
- border-color: var(--elc-indigo);
174
- box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
175
- }
176
-
177
- .elc-textarea-result {
178
- min-height: 180px;
179
- background: var(--elc-result-bg);
180
- }
181
-
182
- .elc-actions {
183
- display: flex;
184
- gap: 0.75rem;
185
- flex-wrap: wrap;
186
- }
187
-
188
- .elc-btn {
189
- display: flex;
190
- align-items: center;
191
- gap: 0.5rem;
192
- padding: 0.75rem 1.375rem;
193
- border-radius: 0.75rem;
194
- font-size: 0.9375rem;
195
- font-weight: 700;
196
- border: none;
197
- cursor: pointer;
198
- transition: all 0.2s;
199
- }
200
-
201
- .elc-btn-primary {
202
- background: linear-gradient(135deg, var(--elc-indigo), var(--elc-purple));
203
- color: #fff;
204
- }
205
-
206
- .elc-btn-primary:hover {
207
- transform: translateY(-2px);
208
- box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
209
- }
210
-
211
- .elc-btn-secondary {
212
- background: rgba(99, 102, 241, 0.1);
213
- color: var(--elc-indigo);
214
- }
215
-
216
- .elc-btn-secondary:hover {
217
- background: rgba(99, 102, 241, 0.2);
218
- }
219
-
220
- .elc-results {
221
- flex-direction: column;
222
- gap: 1.5rem;
223
- border-top: 2px dashed var(--elc-divider);
224
- padding-top: 2rem;
225
- }
226
-
227
- .elc-stats {
228
- display: grid;
229
- grid-template-columns: repeat(3, 1fr);
230
- gap: 1rem;
231
- }
232
-
233
- .elc-stat {
234
- background: var(--elc-stat-bg);
235
- border: 1px solid var(--elc-stat-border);
236
- border-radius: 1rem;
237
- padding: 1.25rem;
238
- display: flex;
239
- flex-direction: column;
240
- align-items: center;
241
- gap: 0.25rem;
242
- }
243
-
244
- .elc-stat-value {
245
- font-size: 1.75rem;
246
- font-weight: 800;
247
- color: var(--elc-indigo);
248
- }
249
-
250
- .elc-stat-removed {
251
- color: var(--elc-rose);
252
- }
253
-
254
- .elc-stat-clean {
255
- color: var(--elc-green);
256
- }
257
-
258
- .elc-stat-label {
259
- font-size: 0.75rem;
260
- font-weight: 700;
261
- color: var(--elc-text-label);
262
- text-transform: uppercase;
263
- letter-spacing: 0.04em;
264
- }
265
-
266
- @media (max-width: 640px) {
267
- .elc-card {
268
- padding: 1.5rem;
269
- }
270
-
271
- .elc-stats {
272
- grid-template-columns: 1fr;
273
- }
274
-
275
- .elc-actions {
276
- flex-direction: column;
277
- }
278
-
279
- .elc-btn {
280
- justify-content: center;
281
- }
282
- }
283
- </style>
284
80
 
285
81
  <script>
286
82
  import type { EmailListCleanerUI } from './ui';