@jjlmoya/utils-nautical 1.4.0 → 1.6.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,351 +0,0 @@
1
- .sail-area-calculator {
2
- --sa-primary: #003b73;
3
- --sa-primary-light: #0055a4;
4
- --sa-secondary: #ef4135;
5
- --sa-radius: 16px;
6
- --n-bg: #fff;
7
- --n-bg-muted: #f1f5f9;
8
- --n-text: #0f172a;
9
- --n-text-muted: #475569;
10
- --n-text-dim: #64748b;
11
- --n-border: #e2e8f0;
12
- --n-shadow: rgba(0, 0, 0, 0.05);
13
- --n-primary: #3b82f6;
14
- --n-primary-on: #fff;
15
- --n-accent: #6366f1;
16
- --n-cyan: #0891b2;
17
- --n-success: #10b981;
18
- --n-warning: #f59e0b;
19
- --n-error: #f43f5e;
20
-
21
- padding: 1rem;
22
- max-width: 1200px;
23
- margin: 0 auto;
24
- }
25
-
26
- .theme-dark .sail-area-calculator {
27
- --n-bg: #0f172a;
28
- --n-bg-muted: #1e293b;
29
- --n-text: #f8fafc;
30
- --n-text-muted: #94a3b8;
31
- --n-text-dim: #64748b;
32
- --n-border: #334155;
33
- --n-shadow: rgba(0, 0, 0, 0.3);
34
- --n-primary: #60a5fa;
35
- --n-primary-on: #fff;
36
- --n-accent: #818cf8;
37
- --n-cyan: #22d3ee;
38
- --n-success: #34d399;
39
- --n-warning: #fbbf24;
40
- --n-error: #fb7185;
41
- }
42
-
43
- .sa-calculator-wrapper {
44
- background: var(--n-bg);
45
- border: 1px solid var(--n-border);
46
- border-radius: var(--sa-radius);
47
- padding: 1.5rem;
48
- display: flex;
49
- flex-direction: column;
50
- gap: 2rem;
51
- }
52
-
53
- .sa-main-controls {
54
- display: flex;
55
- flex-direction: column;
56
- gap: 1.5rem;
57
- }
58
-
59
- .sa-section-group h3 {
60
- font-size: 0.75rem;
61
- text-transform: uppercase;
62
- letter-spacing: 0.1em;
63
- color: var(--n-text-muted);
64
- margin-bottom: 1rem;
65
- display: flex;
66
- align-items: center;
67
- gap: 0.5rem;
68
- opacity: 0.8;
69
- border-bottom: 1px solid var(--n-border);
70
- padding-bottom: 0.4rem;
71
- }
72
-
73
- .sa-compact-grid {
74
- display: grid;
75
- grid-template-columns: repeat(2, 1fr);
76
- gap: 1rem;
77
- }
78
-
79
- .sa-input-row {
80
- display: flex;
81
- flex-direction: column;
82
- gap: 0.4rem;
83
- }
84
-
85
- .sa-input-row label {
86
- font-size: 0.7rem;
87
- font-weight: 700;
88
- color: var(--n-text-muted);
89
- }
90
-
91
- .sa-elegant-input {
92
- background: var(--n-bg-muted);
93
- border: 1.5px solid var(--n-border);
94
- border-radius: 10px;
95
- padding: 0.7rem 0.9rem;
96
- font-size: 0.95rem;
97
- color: var(--n-text);
98
- font-weight: 600;
99
- width: 100%;
100
- }
101
-
102
- .sa-elegant-input:focus {
103
- border-color: var(--sa-primary-light);
104
- outline: none;
105
- }
106
-
107
- .sa-input-with-unit {
108
- position: relative;
109
- display: flex;
110
- align-items: center;
111
- }
112
-
113
- .sa-unit-tag {
114
- position: absolute;
115
- right: 10px;
116
- font-size: 0.65rem;
117
- font-weight: 900;
118
- color: var(--n-text-muted);
119
- background: var(--n-bg);
120
- border: 1px solid var(--n-border);
121
- padding: 2px 6px;
122
- border-radius: 4px;
123
- }
124
-
125
- .sa-unit-tag select {
126
- color: var(--n-text-muted);
127
- }
128
-
129
- .sa-sidebar-results {
130
- background: var(--n-bg-muted);
131
- padding: 1.5rem;
132
- border-radius: var(--sa-radius);
133
- border: 1px solid var(--n-border);
134
- text-align: center;
135
- }
136
-
137
- .sad-value-large {
138
- font-size: 3.5rem;
139
- font-weight: 950;
140
- letter-spacing: -0.04em;
141
- color: var(--sa-primary);
142
- line-height: 1;
143
- }
144
-
145
- .theme-dark .sail-area-calculator .sad-value-large {
146
- color: var(--n-accent);
147
- }
148
-
149
- .sad-label {
150
- font-size: 0.75rem;
151
- font-weight: 850;
152
- color: var(--n-text-muted);
153
- text-transform: uppercase;
154
- letter-spacing: 0.15em;
155
- }
156
-
157
- .sa-gauge-track {
158
- height: 4px;
159
- background: var(--n-border);
160
- border-radius: 2px;
161
- margin: 1.5rem 0;
162
- position: relative;
163
- }
164
-
165
- .sa-gauge-indicator {
166
- position: absolute;
167
- top: 50%;
168
- width: 14px;
169
- height: 14px;
170
- background: var(--sa-secondary);
171
- border: 3px solid var(--n-bg-muted);
172
- border-radius: 50%;
173
- transform: translate(-50%, -50%);
174
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
175
- transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
176
- }
177
-
178
- .sa-verdict-box {
179
- background: var(--n-bg);
180
- padding: 1rem;
181
- border-radius: 12px;
182
- border: 1px solid var(--n-border);
183
- }
184
-
185
- .sa-verdict-box h4 {
186
- font-size: 0.95rem;
187
- margin-bottom: 0.4rem;
188
- color: var(--n-text);
189
- }
190
-
191
- .sa-verdict-box p {
192
- font-size: 0.8rem;
193
- line-height: 1.5;
194
- color: var(--n-text-muted);
195
- }
196
-
197
- .sa-stats-summary {
198
- display: grid;
199
- grid-template-columns: 1fr 1fr;
200
- gap: 1rem;
201
- margin-top: 1.5rem;
202
- padding-top: 1.5rem;
203
- border-top: 1px dashed var(--n-border);
204
- }
205
-
206
- .sa-stat-item span {
207
- font-size: 0.75rem;
208
- color: var(--n-text-muted);
209
- display: block;
210
- }
211
-
212
- .sa-stat-item span:last-child {
213
- font-size: 1.2rem;
214
- font-weight: 900;
215
- color: var(--n-text);
216
- }
217
-
218
- .sa-export-btn-premium {
219
- width: 100%;
220
- margin-top: 1.5rem;
221
- padding: 1rem;
222
- background: var(--sa-primary);
223
- color: var(--n-primary-on);
224
- border: none;
225
- border-radius: 10px;
226
- font-size: 0.75rem;
227
- font-weight: 800;
228
- letter-spacing: 0.05em;
229
- cursor: pointer;
230
- display: flex;
231
- align-items: center;
232
- justify-content: center;
233
- gap: 0.5rem;
234
- }
235
-
236
- .sa-slider-box {
237
- background: var(--n-bg-muted);
238
- padding: 1.5rem;
239
- border-radius: 12px;
240
- border: 1px solid var(--n-border);
241
- }
242
-
243
- .sa-slider-header {
244
- display: flex;
245
- justify-content: space-between;
246
- align-items: center;
247
- margin-bottom: 1.5rem;
248
- }
249
-
250
- .sa-slider-header label {
251
- font-size: 0.85rem;
252
- font-weight: 800;
253
- color: var(--n-text);
254
- }
255
-
256
- .sa-percentage-badge {
257
- background: var(--sa-primary);
258
- color: var(--n-primary-on);
259
- padding: 4px 10px;
260
- border-radius: 20px;
261
- font-size: 0.8rem;
262
- font-weight: 900;
263
- }
264
-
265
- .sa-slider-wrapper {
266
- padding: 0 5px;
267
- }
268
-
269
- .sa-modern-slider {
270
- appearance: none;
271
- width: 100%;
272
- height: 6px;
273
- background: var(--n-border);
274
- border-radius: 10px;
275
- outline: none;
276
- margin: 1rem 0;
277
- }
278
-
279
- .sa-modern-slider::-webkit-slider-thumb {
280
- appearance: none;
281
- width: 24px;
282
- height: 24px;
283
- background: var(--sa-primary);
284
- border: 4px solid var(--n-bg-muted);
285
- border-radius: 50%;
286
- cursor: pointer;
287
- box-shadow: 0 2px 10px rgba(0, 59, 115, 0.2);
288
- transition: transform 0.2s;
289
- }
290
-
291
- .sa-modern-slider::-webkit-slider-thumb:hover {
292
- transform: scale(1.1);
293
- }
294
-
295
- .sa-modern-slider::-moz-range-thumb {
296
- width: 24px;
297
- height: 24px;
298
- background: var(--sa-primary);
299
- border: 4px solid var(--n-bg-muted);
300
- border-radius: 50%;
301
- cursor: pointer;
302
- }
303
-
304
- .sa-modern-slider::-moz-range-track {
305
- height: 6px;
306
- background: var(--n-border);
307
- border-radius: 10px;
308
- }
309
-
310
- .sa-slider-ticks {
311
- display: flex;
312
- justify-content: space-between;
313
- margin-top: 0.5rem;
314
- }
315
-
316
- .sa-slider-ticks span {
317
- font-size: 0.65rem;
318
- font-weight: 700;
319
- color: var(--n-text-muted);
320
- }
321
-
322
- @media (min-width: 1024px) {
323
- .sail-area-calculator {
324
- padding: 2rem;
325
- }
326
-
327
- .sa-calculator-wrapper {
328
- display: grid;
329
- grid-template-columns: 1fr 400px;
330
- gap: 3rem;
331
- padding: 2.5rem;
332
- }
333
-
334
- .sa-compact-grid {
335
- grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
336
- }
337
-
338
- .sa-main-controls {
339
- gap: 2.5rem;
340
- }
341
-
342
- .sa-sidebar-results {
343
- position: sticky;
344
- top: 2rem;
345
- padding: 2.5rem;
346
- }
347
-
348
- .sad-value-large {
349
- font-size: 5.5rem;
350
- }
351
- }
@@ -1,239 +0,0 @@
1
- .speed-converter {
2
- --n-bg: #fff;
3
- --n-bg-muted: #f1f5f9;
4
- --n-text: #0f172a;
5
- --n-text-muted: #475569;
6
- --n-text-dim: #64748b;
7
- --n-border: #e2e8f0;
8
- --n-shadow: rgba(0, 0, 0, 0.05);
9
- --n-primary: #3b82f6;
10
- --n-primary-on: #fff;
11
- --n-accent: #6366f1;
12
- --n-cyan: #0891b2;
13
- --n-success: #10b981;
14
- --n-warning: #f59e0b;
15
- --n-error: #f43f5e;
16
-
17
- max-width: 900px;
18
- margin: 0 auto;
19
- display: flex;
20
- flex-direction: column;
21
- gap: 2rem;
22
- }
23
-
24
- .theme-dark .speed-converter {
25
- --n-bg: #0f172a;
26
- --n-bg-muted: #1e293b;
27
- --n-text: #f8fafc;
28
- --n-text-muted: #94a3b8;
29
- --n-text-dim: #64748b;
30
- --n-border: #334155;
31
- --n-shadow: rgba(0, 0, 0, 0.3);
32
- --n-primary: #60a5fa;
33
- --n-primary-on: #fff;
34
- --n-accent: #818cf8;
35
- --n-cyan: #22d3ee;
36
- --n-success: #34d399;
37
- --n-warning: #fbbf24;
38
- --n-error: #fb7185;
39
- }
40
-
41
- .sc-input-grid {
42
- display: grid;
43
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
44
- gap: 1rem;
45
- background: var(--n-bg);
46
- border: 1px solid var(--n-border);
47
- border-radius: 1.5rem;
48
- padding: 2rem;
49
- }
50
-
51
- .sc-input-group {
52
- display: flex;
53
- flex-direction: column;
54
- gap: 0.5rem;
55
- }
56
-
57
- .sc-input-group label {
58
- font-size: 0.8rem;
59
- font-weight: 600;
60
- color: var(--n-text-muted);
61
- text-transform: uppercase;
62
- }
63
-
64
- .sc-input-wrapper {
65
- background: var(--n-bg-muted);
66
- border: 2px solid var(--n-border);
67
- border-radius: 0.8rem;
68
- padding: 0.8rem 1rem;
69
- transition: border-color 0.2s;
70
- }
71
-
72
- .sc-input-wrapper:focus-within {
73
- border-color: var(--n-cyan);
74
- }
75
-
76
- .sc-input-wrapper input {
77
- background: transparent;
78
- border: none;
79
- outline: none;
80
- color: var(--n-text);
81
- font-size: 1.5rem;
82
- font-weight: 800;
83
- width: 100%;
84
- }
85
-
86
- .sc-input-wrapper input::-webkit-outer-spin-button,
87
- .sc-input-wrapper input::-webkit-inner-spin-button {
88
- appearance: none;
89
- }
90
-
91
- .sc-beaufort-summary {
92
- background: var(--n-primary);
93
- color: var(--n-primary-on);
94
- border-radius: 1.5rem;
95
- padding: 2rem;
96
- display: grid;
97
- grid-template-columns: auto 1fr;
98
- gap: 1rem 2rem;
99
- align-items: center;
100
- }
101
-
102
- .sc-force-circle {
103
- width: 80px;
104
- height: 80px;
105
- border-radius: 50%;
106
- background: rgba(255, 255, 255, 0.15);
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- font-size: 2.5rem;
111
- font-weight: 800;
112
- color: var(--n-primary-on);
113
- flex-shrink: 0;
114
- }
115
-
116
- .sc-force-text-box {
117
- display: flex;
118
- flex-direction: column;
119
- gap: 0.3rem;
120
- }
121
-
122
- .sc-force-name {
123
- margin: 0;
124
- font-size: 1.4rem;
125
- font-weight: 800;
126
- color: var(--n-primary-on);
127
- }
128
-
129
- .sc-force-detail {
130
- margin: 0;
131
- opacity: 0.8;
132
- font-size: 0.9rem;
133
- color: var(--n-primary-on);
134
- }
135
-
136
- .sc-sea-state-box {
137
- grid-column: 1 / -1;
138
- background: rgba(255, 255, 255, 0.1);
139
- border-radius: 1rem;
140
- padding: 1rem 1.5rem;
141
- }
142
-
143
- .sc-sea-text .label {
144
- font-size: 0.7rem;
145
- text-transform: uppercase;
146
- opacity: 0.7;
147
- color: var(--n-primary-on);
148
- font-weight: 700;
149
- }
150
-
151
- .sc-sea-text p {
152
- margin: 0.2rem 0 0;
153
- font-weight: 600;
154
- color: var(--n-primary-on);
155
- }
156
-
157
- .sc-table-container {
158
- background: var(--n-bg);
159
- border: 1px solid var(--n-border);
160
- border-radius: 1.5rem;
161
- overflow: hidden;
162
- }
163
-
164
- .sc-table-container h3 {
165
- padding: 1.5rem;
166
- margin: 0;
167
- font-size: 1rem;
168
- color: var(--n-text-muted);
169
- border-bottom: 1px solid var(--n-border);
170
- font-weight: 700;
171
- }
172
-
173
- .sc-scroll-area {
174
- overflow-x: auto;
175
- }
176
-
177
- .sc-beaufort-table {
178
- width: 100%;
179
- border-collapse: collapse;
180
- }
181
-
182
- .sc-beaufort-table th {
183
- text-align: left;
184
- padding: 0.8rem 1rem;
185
- font-size: 0.75rem;
186
- color: var(--n-text-muted);
187
- text-transform: uppercase;
188
- border-bottom: 2px solid var(--n-border);
189
- }
190
-
191
- .sc-beaufort-table td {
192
- padding: 0.8rem 1rem;
193
- font-size: 0.9rem;
194
- color: var(--n-text-muted);
195
- border-bottom: 1px solid var(--n-border);
196
- }
197
-
198
- .sc-clickable-row {
199
- cursor: pointer;
200
- transition: background 0.15s;
201
- }
202
-
203
- .sc-clickable-row:hover {
204
- background: var(--n-bg-muted);
205
- }
206
-
207
- .sc-clickable-row.active {
208
- background: var(--n-primary);
209
- }
210
-
211
- .sc-clickable-row.active td {
212
- color: var(--n-primary-on);
213
- }
214
-
215
- .sc-force-tag {
216
- background: var(--n-bg-muted);
217
- padding: 0.2rem 0.5rem;
218
- border-radius: 0.4rem;
219
- font-weight: 700;
220
- font-size: 0.85rem;
221
- color: var(--n-text);
222
- }
223
-
224
- .sc-clickable-row.active .sc-force-tag {
225
- background: rgba(255, 255, 255, 0.2);
226
- color: var(--n-primary-on);
227
- }
228
-
229
- @media (max-width: 640px) {
230
- .sc-beaufort-summary {
231
- grid-template-columns: 1fr;
232
- }
233
-
234
- .sc-force-circle {
235
- width: 60px;
236
- height: 60px;
237
- font-size: 2rem;
238
- }
239
- }