@jjlmoya/utils-cooking 1.22.0 → 1.24.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,272 +1,293 @@
1
- .ingredient-rescaler-container {
2
- max-width: 100%;
3
- padding: 1.5rem;
4
- background: var(--ir-bg-card);
5
- border: 1px solid var(--ir-border);
6
- border-radius: var(--ir-radius);
7
- box-shadow: var(--ir-shadow-lg);
8
- }
1
+ :root {
2
+ --ir-primary: hsl(220deg, 90%, 56%);
3
+ --ir-primary-light: hsl(220deg, 90%, 92%);
4
+ --ir-bg-card: hsl(0deg, 0%, 100%);
5
+ --ir-bg-app: hsl(210deg, 20%, 98%);
6
+ --ir-border: hsl(210deg, 20%, 90%);
7
+ --ir-text-main: hsl(210deg, 30%, 20%);
8
+ --ir-text-muted: hsl(210deg, 15%, 50%);
9
+ --ir-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
10
+ --ir-radius: 1rem;
11
+ }
12
+
13
+ .theme-dark {
14
+ --ir-bg-card: hsl(220deg, 25%, 12%);
15
+ --ir-bg-app: hsl(220deg, 30%, 7%);
16
+ --ir-border: hsl(220deg, 20%, 20%);
17
+ --ir-text-main: hsl(210deg, 20%, 95%);
18
+ --ir-text-muted: hsl(210deg, 15%, 70%);
19
+ --ir-primary-light: hsl(220deg, 90%, 12%);
20
+ }
9
21
 
22
+ .ingredient-rescaler-container {
23
+ max-width: 100%;
24
+ padding: 1.5rem;
25
+ background: var(--ir-bg-card);
26
+ border: 1px solid var(--ir-border);
27
+ border-radius: var(--ir-radius);
28
+ box-shadow: var(--ir-shadow-lg);
29
+ }
30
+
31
+ .ir-grid {
32
+ display: grid;
33
+ grid-template-columns: 1fr;
34
+ gap: 2rem;
35
+ margin-bottom: 2rem;
36
+ }
37
+
38
+ @media (min-width: 768px) {
10
39
  .ir-grid {
11
- display: grid;
12
- grid-template-columns: 1fr;
13
- gap: 2rem;
14
- margin-bottom: 2rem;
15
- }
16
-
17
- @media (min-width: 768px) {
18
- .ir-grid {
19
- grid-template-columns: 1fr 1fr;
20
- }
21
- }
22
-
23
- .ir-section {
24
- background: var(--ir-bg-app);
25
- padding: 1.5rem;
26
- border-radius: 1.25rem;
27
- border: 1px solid var(--ir-border);
28
- }
29
-
30
- .ir-section-primary {
31
- background: var(--ir-bg-card);
32
- border: 2px solid var(--ir-primary);
33
- }
34
-
35
- .ir-section-title {
36
- font-size: 1.125rem;
37
- font-weight: 700;
38
- color: var(--ir-text-main);
39
- margin-bottom: 1rem;
40
- display: flex;
41
- align-items: center;
42
- gap: 0.5rem;
43
- }
44
-
45
- .ir-section-primary .ir-section-title {
46
- color: var(--ir-primary);
47
- }
48
-
49
- .ir-fields {
50
- display: grid;
51
40
  grid-template-columns: 1fr 1fr;
52
- gap: 1rem;
53
- margin-bottom: 1.5rem;
54
- }
55
-
56
- .ir-field {
57
- display: flex;
58
- flex-direction: column;
59
- gap: 0.5rem;
60
- }
61
-
62
- .ir-label {
63
- font-size: 0.75rem;
64
- font-weight: 700;
65
- color: var(--ir-text-muted);
66
- text-transform: uppercase;
67
- letter-spacing: 0.05em;
68
- }
69
-
70
- .ir-input {
71
- width: 100%;
72
- padding: 0.75rem 1rem;
73
- border-radius: 0.75rem;
74
- border: 1px solid var(--ir-border);
75
- background: var(--ir-bg-card);
76
- color: var(--ir-text-main);
77
- font-weight: 600;
78
- font-size: 1.125rem;
79
- text-align: center;
80
- transition: all 0.3s ease;
81
- }
82
-
83
- .ir-input:focus {
84
- outline: none;
85
- border-color: var(--ir-primary);
86
- box-shadow: 0 0 0 3px hsl(220deg, 90%, 56%, 0.1);
87
- }
88
-
89
- .ir-factor-display {
90
- margin-top: 1rem;
91
- padding: 1rem;
92
- background: var(--ir-primary-light);
93
- border-radius: 0.75rem;
94
- border: 1px solid var(--ir-primary);
95
- display: flex;
96
- justify-content: space-between;
97
- align-items: center;
98
- }
99
-
100
- .ir-factor-label {
101
- font-size: 0.875rem;
102
- font-weight: 600;
103
- color: var(--ir-text-muted);
104
- }
105
-
106
- .ir-factor-value {
107
- font-size: 2rem;
108
- font-weight: 800;
109
- color: var(--ir-primary);
110
- }
111
-
112
- .ir-textarea-container {
113
- display: flex;
114
- flex-direction: column;
115
- height: 100%;
116
- gap: 0.5rem;
117
- }
118
-
119
- .ir-textarea {
120
- width: 100%;
121
- flex: 1;
122
- min-height: 200px;
123
- padding: 1rem;
124
- border-radius: 0.75rem;
125
- border: 1px solid var(--ir-border);
126
- background: var(--ir-bg-card);
127
- color: var(--ir-text-main);
128
- font-size: 0.875rem;
129
- resize: none;
130
- line-height: 1.6;
131
- transition: all 0.3s ease;
132
- }
133
-
134
- .ir-textarea:focus {
135
- outline: none;
136
- border-color: var(--ir-primary);
137
- box-shadow: 0 0 0 3px hsl(220deg, 90%, 56%, 0.1);
138
- }
139
-
140
- .ir-textarea::placeholder {
141
- color: hsl(210deg, 15%, 75%);
142
- }
143
-
144
- .ir-results-card {
145
- background: var(--ir-text-main);
146
- border-radius: 1.25rem;
147
- border: 1px solid var(--ir-border);
148
- overflow: hidden;
149
- box-shadow: var(--ir-shadow-lg);
150
- }
151
-
152
- .ir-results-header {
153
- padding: 1rem 1.5rem;
154
- background: hsl(210deg, 30%, 15%);
155
- border-bottom: 1px solid hsl(210deg, 30%, 25%);
156
- display: flex;
157
- justify-content: space-between;
158
- align-items: center;
159
- }
160
-
161
- .theme-dark .ir-results-header {
162
- background: hsl(220deg, 25%, 8%);
163
- border-bottom-color: hsl(220deg, 25%, 20%);
164
- }
165
-
166
- .ir-results-title {
167
- color: var(--ir-bg-card);
168
- font-weight: 700;
169
- display: flex;
170
- align-items: center;
171
- gap: 0.5rem;
172
- }
173
-
174
- .theme-dark .ir-results-title {
175
- color: var(--ir-text-main);
176
- }
177
-
178
- .ir-copy-btn {
179
- font-size: 0.75rem;
180
- background: hsl(210deg, 30%, 35%);
181
- color: var(--ir-bg-card);
182
- padding: 0.5rem 1rem;
183
- border-radius: 0.5rem;
184
- border: none;
185
- cursor: pointer;
186
- transition: all 0.3s ease;
187
- font-weight: 600;
188
- display: flex;
189
- align-items: center;
190
- gap: 0.5rem;
191
- }
192
-
193
- .theme-dark .ir-copy-btn {
194
- background: hsl(220deg, 25%, 30%);
195
- color: var(--ir-text-main);
196
- }
197
-
198
- .ir-copy-btn:hover {
199
- background: hsl(210deg, 30%, 45%);
200
- }
201
-
202
- .theme-dark .ir-copy-btn:hover {
203
- background: hsl(220deg, 25%, 40%);
204
- }
205
-
206
- .ir-copy-btn.ir-copied {
207
- background: hsl(142deg, 72%, 45%);
208
- }
209
-
210
- .ir-results-container {
211
- padding: 2rem;
212
- font-size: 1rem;
213
- display: flex;
214
- flex-direction: column;
215
- gap: 0.75rem;
216
- min-height: 200px;
217
- background: var(--ir-bg-card);
218
- color: var(--ir-text-main);
219
- }
220
-
221
- .ir-empty-state {
222
- height: 100%;
223
- display: flex;
224
- flex-direction: column;
225
- align-items: center;
226
- justify-content: center;
227
- gap: 1rem;
228
- opacity: 0.5;
229
- color: var(--ir-text-muted);
230
- }
231
-
232
- .ir-empty-icon {
233
- width: 3rem;
234
- height: 3rem;
235
41
  }
236
-
237
- .ir-result-row {
238
- display: flex;
239
- justify-content: space-between;
240
- align-items: center;
241
- background: var(--ir-bg-app);
242
- padding: 0.75rem;
243
- border-radius: 0.5rem;
244
- border-left: 4px solid transparent;
245
- transition: all 0.3s ease;
246
- }
247
-
248
- .ir-result-row:hover {
249
- background: var(--ir-primary-light);
250
- border-left-color: var(--ir-primary);
251
- }
252
-
253
- .ir-original-amount {
254
- color: hsl(210deg, 15%, 75%);
255
- font-size: 0.75rem;
256
- text-decoration: line-through;
257
- opacity: 0.75;
258
- }
259
-
260
- .ir-new-value {
261
- color: var(--ir-primary);
262
- font-weight: 800;
263
- font-size: 1.125rem;
264
- }
265
-
266
- .ir-no-amount-row {
267
- color: var(--ir-text-muted);
268
- font-style: italic;
269
- font-size: 0.875rem;
270
- padding: 0.5rem;
271
- background: transparent;
272
- }
42
+ }
43
+
44
+ .ir-section {
45
+ background: var(--ir-bg-app);
46
+ padding: 1.5rem;
47
+ border-radius: 1.25rem;
48
+ border: 1px solid var(--ir-border);
49
+ }
50
+
51
+ .ir-section-primary {
52
+ background: var(--ir-bg-card);
53
+ border: 2px solid var(--ir-primary);
54
+ }
55
+
56
+ .ir-section-title {
57
+ font-size: 1.125rem;
58
+ font-weight: 700;
59
+ color: var(--ir-text-main);
60
+ margin-bottom: 1rem;
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 0.5rem;
64
+ }
65
+
66
+ .ir-section-primary .ir-section-title {
67
+ color: var(--ir-primary);
68
+ }
69
+
70
+ .ir-fields {
71
+ display: grid;
72
+ grid-template-columns: 1fr 1fr;
73
+ gap: 1rem;
74
+ margin-bottom: 1.5rem;
75
+ }
76
+
77
+ .ir-field {
78
+ display: flex;
79
+ flex-direction: column;
80
+ gap: 0.5rem;
81
+ }
82
+
83
+ .ir-label {
84
+ font-size: 0.75rem;
85
+ font-weight: 700;
86
+ color: var(--ir-text-muted);
87
+ text-transform: uppercase;
88
+ letter-spacing: 0.05em;
89
+ }
90
+
91
+ .ir-input {
92
+ width: 100%;
93
+ padding: 0.75rem 1rem;
94
+ border-radius: 0.75rem;
95
+ border: 1px solid var(--ir-border);
96
+ background: var(--ir-bg-card);
97
+ color: var(--ir-text-main);
98
+ font-weight: 600;
99
+ font-size: 1.125rem;
100
+ text-align: center;
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ .ir-input:focus {
105
+ outline: none;
106
+ border-color: var(--ir-primary);
107
+ box-shadow: 0 0 0 3px hsl(220deg, 90%, 56%, 0.1);
108
+ }
109
+
110
+ .ir-factor-display {
111
+ margin-top: 1rem;
112
+ padding: 1rem;
113
+ background: var(--ir-primary-light);
114
+ border-radius: 0.75rem;
115
+ border: 1px solid var(--ir-primary);
116
+ display: flex;
117
+ justify-content: space-between;
118
+ align-items: center;
119
+ }
120
+
121
+ .ir-factor-label {
122
+ font-size: 0.875rem;
123
+ font-weight: 600;
124
+ color: var(--ir-text-muted);
125
+ }
126
+
127
+ .ir-factor-value {
128
+ font-size: 2rem;
129
+ font-weight: 800;
130
+ color: var(--ir-primary);
131
+ }
132
+
133
+ .ir-textarea-container {
134
+ display: flex;
135
+ flex-direction: column;
136
+ height: 100%;
137
+ gap: 0.5rem;
138
+ }
139
+
140
+ .ir-textarea {
141
+ width: 100%;
142
+ flex: 1;
143
+ min-height: 200px;
144
+ padding: 1rem;
145
+ border-radius: 0.75rem;
146
+ border: 1px solid var(--ir-border);
147
+ background: var(--ir-bg-card);
148
+ color: var(--ir-text-main);
149
+ font-size: 0.875rem;
150
+ resize: none;
151
+ line-height: 1.6;
152
+ transition: all 0.3s ease;
153
+ }
154
+
155
+ .ir-textarea:focus {
156
+ outline: none;
157
+ border-color: var(--ir-primary);
158
+ box-shadow: 0 0 0 3px hsl(220deg, 90%, 56%, 0.1);
159
+ }
160
+
161
+ .ir-textarea::placeholder {
162
+ color: hsl(210deg, 15%, 75%);
163
+ }
164
+
165
+ .ir-results-card {
166
+ background: var(--ir-text-main);
167
+ border-radius: 1.25rem;
168
+ border: 1px solid var(--ir-border);
169
+ overflow: hidden;
170
+ box-shadow: var(--ir-shadow-lg);
171
+ }
172
+
173
+ .ir-results-header {
174
+ padding: 1rem 1.5rem;
175
+ background: hsl(210deg, 30%, 15%);
176
+ border-bottom: 1px solid hsl(210deg, 30%, 25%);
177
+ display: flex;
178
+ justify-content: space-between;
179
+ align-items: center;
180
+ }
181
+
182
+ .theme-dark .ir-results-header {
183
+ background: hsl(220deg, 25%, 8%);
184
+ border-bottom-color: hsl(220deg, 25%, 20%);
185
+ }
186
+
187
+ .ir-results-title {
188
+ color: var(--ir-bg-card);
189
+ font-weight: 700;
190
+ display: flex;
191
+ align-items: center;
192
+ gap: 0.5rem;
193
+ }
194
+
195
+ .theme-dark .ir-results-title {
196
+ color: var(--ir-text-main);
197
+ }
198
+
199
+ .ir-copy-btn {
200
+ font-size: 0.75rem;
201
+ background: hsl(210deg, 30%, 35%);
202
+ color: var(--ir-bg-card);
203
+ padding: 0.5rem 1rem;
204
+ border-radius: 0.5rem;
205
+ border: none;
206
+ cursor: pointer;
207
+ transition: all 0.3s ease;
208
+ font-weight: 600;
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 0.5rem;
212
+ }
213
+
214
+ .theme-dark .ir-copy-btn {
215
+ background: hsl(220deg, 25%, 30%);
216
+ color: var(--ir-text-main);
217
+ }
218
+
219
+ .ir-copy-btn:hover {
220
+ background: hsl(210deg, 30%, 45%);
221
+ }
222
+
223
+ .theme-dark .ir-copy-btn:hover {
224
+ background: hsl(220deg, 25%, 40%);
225
+ }
226
+
227
+ .ir-copy-btn.ir-copied {
228
+ background: hsl(142deg, 72%, 45%);
229
+ }
230
+
231
+ .ir-results-container {
232
+ padding: 2rem;
233
+ font-size: 1rem;
234
+ display: flex;
235
+ flex-direction: column;
236
+ gap: 0.75rem;
237
+ min-height: 200px;
238
+ background: var(--ir-bg-card);
239
+ color: var(--ir-text-main);
240
+ }
241
+
242
+ .ir-empty-state {
243
+ height: 100%;
244
+ display: flex;
245
+ flex-direction: column;
246
+ align-items: center;
247
+ justify-content: center;
248
+ gap: 1rem;
249
+ opacity: 0.5;
250
+ color: var(--ir-text-muted);
251
+ }
252
+
253
+ .ir-empty-icon {
254
+ width: 3rem;
255
+ height: 3rem;
256
+ }
257
+
258
+ .ir-result-row {
259
+ display: flex;
260
+ justify-content: space-between;
261
+ align-items: center;
262
+ background: var(--ir-bg-app);
263
+ padding: 0.75rem;
264
+ border-radius: 0.5rem;
265
+ border-left: 4px solid transparent;
266
+ transition: all 0.3s ease;
267
+ }
268
+
269
+ .ir-result-row:hover {
270
+ background: var(--ir-primary-light);
271
+ border-left-color: var(--ir-primary);
272
+ }
273
+
274
+ .ir-original-amount {
275
+ color: hsl(210deg, 15%, 75%);
276
+ font-size: 0.75rem;
277
+ text-decoration: line-through;
278
+ opacity: 0.75;
279
+ }
280
+
281
+ .ir-new-value {
282
+ color: var(--ir-primary);
283
+ font-weight: 800;
284
+ font-size: 1.125rem;
285
+ }
286
+
287
+ .ir-no-amount-row {
288
+ color: var(--ir-text-muted);
289
+ font-style: italic;
290
+ font-size: 0.875rem;
291
+ padding: 0.5rem;
292
+ background: transparent;
293
+ }