@alivecss/aliveui 1.0.5 → 1.1.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.
package/dist/index.mjs CHANGED
@@ -2251,6 +2251,251 @@ video {
2251
2251
  color: rgba(0,0,0,0.3);
2252
2252
  user-select: none;
2253
2253
  }
2254
+
2255
+ /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
2256
+ AliveUI Build \u2014 Display & marketing components
2257
+ Browser frame \xB7 Phone frame \xB7 Stat card \xB7 Checklist \xB7 Dot grid
2258
+ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
2259
+
2260
+ /* \u2500\u2500 Browser Frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2261
+ .alive-browser {
2262
+ border-radius: 12px;
2263
+ overflow: hidden;
2264
+ border: 1px solid rgba(0,0,0,0.1);
2265
+ background: #fff;
2266
+ box-shadow: 0 24px 64px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
2267
+ }
2268
+ .alive-browser-bar {
2269
+ display: flex;
2270
+ align-items: center;
2271
+ gap: 8px;
2272
+ padding: 10px 16px;
2273
+ background: #f3f3f3;
2274
+ border-bottom: 1px solid rgba(0,0,0,0.08);
2275
+ flex-shrink: 0;
2276
+ }
2277
+ .alive-browser-dots {
2278
+ display: flex;
2279
+ gap: 6px;
2280
+ flex-shrink: 0;
2281
+ }
2282
+ .alive-browser-dot {
2283
+ width: 10px;
2284
+ height: 10px;
2285
+ border-radius: 50%;
2286
+ opacity: 0.85;
2287
+ }
2288
+ .alive-browser-dot:nth-child(1) { background: #ff5f57; }
2289
+ .alive-browser-dot:nth-child(2) { background: #febc2e; }
2290
+ .alive-browser-dot:nth-child(3) { background: #28c840; }
2291
+ .alive-browser-url {
2292
+ flex: 1;
2293
+ max-width: 280px;
2294
+ margin: 0 auto;
2295
+ padding: 4px 12px;
2296
+ border-radius: 6px;
2297
+ background: rgba(0,0,0,0.06);
2298
+ border: 1px solid rgba(0,0,0,0.08);
2299
+ font-size: 0.7rem;
2300
+ color: rgba(0,0,0,0.35);
2301
+ text-align: center;
2302
+ font-family: ui-monospace, monospace;
2303
+ white-space: nowrap;
2304
+ overflow: hidden;
2305
+ text-overflow: ellipsis;
2306
+ user-select: none;
2307
+ }
2308
+ .alive-browser-body {
2309
+ overflow: hidden;
2310
+ }
2311
+ /* Dark variant */
2312
+ .alive-browser-dark {
2313
+ border-color: rgba(255,255,255,0.1);
2314
+ background: #0f0f0f;
2315
+ box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
2316
+ }
2317
+ .alive-browser-dark .alive-browser-bar {
2318
+ background: #161616;
2319
+ border-bottom-color: rgba(255,255,255,0.07);
2320
+ }
2321
+ .alive-browser-dark .alive-browser-url {
2322
+ background: rgba(255,255,255,0.05);
2323
+ border-color: rgba(255,255,255,0.07);
2324
+ color: rgba(255,255,255,0.2);
2325
+ }
2326
+
2327
+ /* \u2500\u2500 Phone Frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2328
+ .alive-phone {
2329
+ position: relative;
2330
+ display: inline-flex;
2331
+ flex-direction: column;
2332
+ border-radius: 40px;
2333
+ border: 8px solid #1c1c1e;
2334
+ background: #fff;
2335
+ overflow: hidden;
2336
+ box-shadow:
2337
+ 0 32px 80px rgba(0,0,0,0.35),
2338
+ inset 0 0 0 1px rgba(255,255,255,0.1),
2339
+ 0 0 0 1px rgba(0,0,0,0.5);
2340
+ }
2341
+ .alive-phone::before {
2342
+ content: '';
2343
+ position: absolute;
2344
+ top: 10px;
2345
+ left: 50%;
2346
+ transform: translateX(-50%);
2347
+ width: 90px;
2348
+ height: 22px;
2349
+ background: #1c1c1e;
2350
+ border-radius: 11px;
2351
+ z-index: 10;
2352
+ }
2353
+ .alive-phone-screen {
2354
+ width: 100%;
2355
+ overflow: hidden;
2356
+ flex: 1;
2357
+ }
2358
+ .alive-phone-dark {
2359
+ background: #0f0f0f;
2360
+ }
2361
+ .alive-phone-dark .alive-phone-screen {
2362
+ background: #0f0f0f;
2363
+ }
2364
+ /* Sizes */
2365
+ .alive-phone-sm { width: 220px; border-radius: 32px; border-width: 6px; }
2366
+ .alive-phone-sm::before { width: 70px; height: 18px; border-radius: 9px; }
2367
+ .alive-phone-lg { width: 340px; border-radius: 48px; border-width: 10px; }
2368
+ .alive-phone-lg::before { width: 110px; height: 26px; border-radius: 13px; }
2369
+
2370
+ /* \u2500\u2500 Stat Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2371
+ .alive-stat {
2372
+ padding: 1.5rem;
2373
+ border-radius: 12px;
2374
+ background: #fff;
2375
+ border: 1px solid rgba(0,0,0,0.07);
2376
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
2377
+ }
2378
+ .alive-stat-label {
2379
+ font-size: 0.75rem;
2380
+ font-weight: 600;
2381
+ letter-spacing: 0.06em;
2382
+ color: rgba(0,0,0,0.4);
2383
+ text-transform: uppercase;
2384
+ margin-bottom: 0.5rem;
2385
+ }
2386
+ .alive-stat-value {
2387
+ font-size: 2.25rem;
2388
+ font-weight: 700;
2389
+ letter-spacing: -0.04em;
2390
+ line-height: 1;
2391
+ color: rgba(0,0,0,0.9);
2392
+ margin-bottom: 0.5rem;
2393
+ font-variant-numeric: tabular-nums;
2394
+ }
2395
+ .alive-stat-change {
2396
+ display: inline-flex;
2397
+ align-items: center;
2398
+ gap: 4px;
2399
+ font-size: 0.8125rem;
2400
+ font-weight: 600;
2401
+ }
2402
+ .alive-stat-up { color: #16a34a; }
2403
+ .alive-stat-down { color: #dc2626; }
2404
+ /* Dark variant */
2405
+ .alive-stat-dark {
2406
+ background: rgba(255,255,255,0.05);
2407
+ border-color: rgba(255,255,255,0.09);
2408
+ box-shadow: none;
2409
+ }
2410
+ .alive-stat-dark .alive-stat-label { color: rgba(255,255,255,0.35); }
2411
+ .alive-stat-dark .alive-stat-value { color: #ffffff; }
2412
+
2413
+ /* \u2500\u2500 Feature Checklist \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2414
+ .alive-checklist {
2415
+ display: flex;
2416
+ flex-direction: column;
2417
+ gap: 0.875rem;
2418
+ }
2419
+ .alive-checklist-item {
2420
+ display: flex;
2421
+ align-items: flex-start;
2422
+ gap: 0.75rem;
2423
+ font-size: 0.9375rem;
2424
+ color: rgba(0,0,0,0.75);
2425
+ line-height: 1.45;
2426
+ }
2427
+ .alive-checklist-icon {
2428
+ flex-shrink: 0;
2429
+ width: 20px;
2430
+ height: 20px;
2431
+ border-radius: 50%;
2432
+ background: rgba(74,222,128,0.15);
2433
+ border: 1.5px solid rgba(74,222,128,0.4);
2434
+ display: flex;
2435
+ align-items: center;
2436
+ justify-content: center;
2437
+ margin-top: 2px;
2438
+ }
2439
+ .alive-checklist-icon::after {
2440
+ content: '';
2441
+ display: block;
2442
+ width: 5px;
2443
+ height: 9px;
2444
+ border-right: 2px solid #16a34a;
2445
+ border-bottom: 2px solid #16a34a;
2446
+ transform: rotate(45deg) translate(-1px, -1px);
2447
+ }
2448
+ /* Dark variant */
2449
+ .alive-checklist-dark .alive-checklist-item { color: rgba(255,255,255,0.75); }
2450
+ .alive-checklist-dark .alive-checklist-icon {
2451
+ background: rgba(74,222,128,0.12);
2452
+ border-color: rgba(74,222,128,0.3);
2453
+ }
2454
+
2455
+ /* \u2500\u2500 Dot Grid Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2456
+ .alive-dot-grid {
2457
+ background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
2458
+ background-size: 24px 24px;
2459
+ }
2460
+ .alive-dot-grid-sm { background-size: 16px 16px; }
2461
+ .alive-dot-grid-lg { background-size: 32px 32px; }
2462
+ .alive-dot-grid-dark {
2463
+ background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
2464
+ }
2465
+
2466
+ /* \u2500\u2500 Terminal / Code Block \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2467
+ .alive-terminal {
2468
+ border-radius: 10px;
2469
+ overflow: hidden;
2470
+ background: #0f0f0f;
2471
+ border: 1px solid rgba(255,255,255,0.08);
2472
+ box-shadow: 0 16px 48px rgba(0,0,0,0.4);
2473
+ font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
2474
+ }
2475
+ .alive-terminal-bar {
2476
+ display: flex;
2477
+ align-items: center;
2478
+ gap: 8px;
2479
+ padding: 10px 16px;
2480
+ background: #161616;
2481
+ border-bottom: 1px solid rgba(255,255,255,0.06);
2482
+ flex-shrink: 0;
2483
+ }
2484
+ .alive-terminal-body {
2485
+ padding: 1.25rem 1.5rem;
2486
+ font-size: 0.8125rem;
2487
+ line-height: 1.7;
2488
+ color: rgba(255,255,255,0.75);
2489
+ overflow: auto;
2490
+ }
2491
+ .alive-terminal-prompt {
2492
+ color: rgba(255,255,255,0.25);
2493
+ user-select: none;
2494
+ }
2495
+ .alive-terminal-cmd { color: #60a5fa; }
2496
+ .alive-terminal-out { color: rgba(255,255,255,0.45); }
2497
+ .alive-terminal-ok { color: #4ade80; }
2498
+ .alive-terminal-err { color: #f87171; }
2254
2499
  `;
2255
2500
  }
2256
2501