freddie 0.0.61 → 0.0.63
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.
|
@@ -757,6 +757,28 @@
|
|
|
757
757
|
.ds-247420 :focus-visible { outline: 2px solid var(--panel-accent) !important; outline-offset: 2px; }
|
|
758
758
|
.ds-247420, .ds-247420 body { margin: 0; padding: 0; }
|
|
759
759
|
|
|
760
|
+
/* Base element padding — browser UA stylesheets strip padding on button/textarea
|
|
761
|
+
in some reset contexts; restore sane defaults so raw elements look right. */
|
|
762
|
+
.ds-247420 button {
|
|
763
|
+
padding: 8px 18px;
|
|
764
|
+
border-radius: var(--r-2);
|
|
765
|
+
font-family: var(--ff-ui);
|
|
766
|
+
font-size: var(--fs-sm);
|
|
767
|
+
cursor: pointer;
|
|
768
|
+
background: var(--bg-2);
|
|
769
|
+
color: var(--fg);
|
|
770
|
+
}
|
|
771
|
+
.ds-247420 textarea {
|
|
772
|
+
padding: 10px 12px;
|
|
773
|
+
border-radius: var(--r-2);
|
|
774
|
+
font-family: var(--ff-ui);
|
|
775
|
+
font-size: var(--fs-sm);
|
|
776
|
+
background: var(--bg-2);
|
|
777
|
+
color: var(--fg);
|
|
778
|
+
resize: vertical;
|
|
779
|
+
}
|
|
780
|
+
.ds-247420 textarea::placeholder { color: var(--fg-3); }
|
|
781
|
+
|
|
760
782
|
/* app-shell.css */
|
|
761
783
|
/* ============================================================
|
|
762
784
|
App shell — IDE-modern density patterns
|
|
@@ -1317,6 +1339,26 @@
|
|
|
1317
1339
|
}
|
|
1318
1340
|
.ds-247420 .cli .copy:hover { background: var(--panel-hover); color: var(--panel-text); }
|
|
1319
1341
|
|
|
1342
|
+
/* Base input element styles — text-like inputs get tonal padding to match btn/textarea */
|
|
1343
|
+
.ds-247420 input[type="text"],
|
|
1344
|
+
.ds-247420 input[type="email"],
|
|
1345
|
+
.ds-247420 input[type="password"],
|
|
1346
|
+
.ds-247420 input[type="search"],
|
|
1347
|
+
.ds-247420 input[type="number"],
|
|
1348
|
+
.ds-247420 input:not([type]) {
|
|
1349
|
+
padding: 8px 12px;
|
|
1350
|
+
background: var(--panel-2);
|
|
1351
|
+
color: var(--panel-text);
|
|
1352
|
+
font-family: var(--ff-ui);
|
|
1353
|
+
font-size: 14px;
|
|
1354
|
+
border-radius: 10px;
|
|
1355
|
+
border: 0;
|
|
1356
|
+
outline: 0;
|
|
1357
|
+
transition: background 80ms ease;
|
|
1358
|
+
}
|
|
1359
|
+
.ds-247420 input[type="text"]:hover, .ds-247420 input[type="text"]:focus, .ds-247420 input[type="email"]:hover, .ds-247420 input[type="email"]:focus, .ds-247420 input[type="password"]:hover, .ds-247420 input[type="password"]:focus, .ds-247420 input[type="search"]:hover, .ds-247420 input[type="search"]:focus, .ds-247420 input[type="number"]:hover, .ds-247420 input[type="number"]:focus, .ds-247420 input:not([type]):hover, .ds-247420 input:not([type]):focus { background: var(--panel-3); }
|
|
1360
|
+
.ds-247420 input[type="text"]::placeholder, .ds-247420 input[type="email"]::placeholder, .ds-247420 input[type="password"]::placeholder, .ds-247420 input[type="search"]::placeholder, .ds-247420 input[type="number"]::placeholder, .ds-247420 input:not([type])::placeholder { color: var(--panel-text-2); }
|
|
1361
|
+
|
|
1320
1362
|
/* Buttons */
|
|
1321
1363
|
.ds-247420 .btn {
|
|
1322
1364
|
display: inline-flex;
|
|
@@ -2223,3 +2265,95 @@
|
|
|
2223
2265
|
.ds-247420 .app-body { grid-template-columns: 360px 1fr; }
|
|
2224
2266
|
}
|
|
2225
2267
|
.ds-247420 .ds-preview-truncated { color: var(--panel-text-3); font-style: italic; padding: var(--space-2) 0 0 0; }
|
|
2268
|
+
|
|
2269
|
+
|
|
2270
|
+
/* ============================================================
|
|
2271
|
+
KPI grid · row form · rails+dots · chip tones · empty · table clickable
|
|
2272
|
+
Moved from consumer (freddie dashboard + theme) — generic 247420 primitives.
|
|
2273
|
+
============================================================ */
|
|
2274
|
+
|
|
2275
|
+
.ds-247420 .kpi {
|
|
2276
|
+
display: grid;
|
|
2277
|
+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
2278
|
+
gap: 1px;
|
|
2279
|
+
background: var(--panel-2);
|
|
2280
|
+
padding: 1px;
|
|
2281
|
+
border-radius: 20px;
|
|
2282
|
+
overflow: hidden;
|
|
2283
|
+
}
|
|
2284
|
+
.ds-247420 .kpi-card { background: var(--panel-1); padding: 14px 18px; }
|
|
2285
|
+
.ds-247420 .kpi-card .num {
|
|
2286
|
+
font-size: 1.75rem;
|
|
2287
|
+
color: var(--panel-text);
|
|
2288
|
+
font-weight: 400;
|
|
2289
|
+
font-family: var(--ff-mono);
|
|
2290
|
+
}
|
|
2291
|
+
.ds-247420 .kpi-card .lbl {
|
|
2292
|
+
font-size: 0.75rem;
|
|
2293
|
+
color: var(--panel-text-2);
|
|
2294
|
+
font-weight: 600;
|
|
2295
|
+
text-transform: uppercase;
|
|
2296
|
+
letter-spacing: 0.08em;
|
|
2297
|
+
margin-top: 2px;
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
.ds-247420 .row-form {
|
|
2301
|
+
display: flex;
|
|
2302
|
+
gap: 8px;
|
|
2303
|
+
flex-wrap: wrap;
|
|
2304
|
+
align-items: center;
|
|
2305
|
+
margin-bottom: 12px;
|
|
2306
|
+
}
|
|
2307
|
+
.ds-247420 .row-form input { flex: 1; min-width: 140px; padding: 10px 12px; }
|
|
2308
|
+
|
|
2309
|
+
.ds-247420 .chip.ok { background: var(--green); color: #fff; }
|
|
2310
|
+
.ds-247420 .chip.miss { background: var(--warn); color: #fff; }
|
|
2311
|
+
|
|
2312
|
+
.ds-247420 .empty { color: var(--panel-text-3); padding: 12px 0; }
|
|
2313
|
+
|
|
2314
|
+
.ds-247420 tr.clickable { cursor: pointer; }
|
|
2315
|
+
.ds-247420 tr.clickable:hover td { background: var(--panel-hover); }
|
|
2316
|
+
|
|
2317
|
+
.ds-247420 .rail-green { box-shadow: inset 4px 0 0 var(--green); }
|
|
2318
|
+
.ds-247420 .rail-purple { box-shadow: inset 4px 0 0 var(--purple); }
|
|
2319
|
+
.ds-247420 .rail-mascot { box-shadow: inset 4px 0 0 var(--mascot); }
|
|
2320
|
+
.ds-247420 .rail-sun { box-shadow: inset 4px 0 0 var(--sun); }
|
|
2321
|
+
.ds-247420 .rail-flame { box-shadow: inset 4px 0 0 var(--flame); }
|
|
2322
|
+
.ds-247420 .rail-sky { box-shadow: inset 4px 0 0 var(--sky); }
|
|
2323
|
+
.ds-247420 .dot-green { color: var(--green); }
|
|
2324
|
+
.ds-247420 .dot-purple { color: var(--purple); }
|
|
2325
|
+
.ds-247420 .dot-mascot { color: var(--mascot); }
|
|
2326
|
+
.ds-247420 .dot-sun { color: var(--sun); }
|
|
2327
|
+
.ds-247420 .dot-flame { color: var(--flame); }
|
|
2328
|
+
.ds-247420 .dot-sky { color: var(--sky); }
|
|
2329
|
+
|
|
2330
|
+
.ds-247420 .ds-section {
|
|
2331
|
+
margin: 32px 0;
|
|
2332
|
+
padding: 18px 22px;
|
|
2333
|
+
background: var(--panel-1);
|
|
2334
|
+
border-radius: 20px;
|
|
2335
|
+
}
|
|
2336
|
+
.ds-247420 .ds-section .ds-section-title { margin-top: 0; }
|
|
2337
|
+
.ds-247420 .ds-section .ds-lede { opacity: 0.8; max-width: 60ch; }
|
|
2338
|
+
.ds-247420 .ds-section .row {
|
|
2339
|
+
border-radius: 10px;
|
|
2340
|
+
margin: 6px 0;
|
|
2341
|
+
padding: 10px 14px;
|
|
2342
|
+
background: var(--panel-2);
|
|
2343
|
+
}
|
|
2344
|
+
.ds-247420 .ds-section .row .dot {
|
|
2345
|
+
display: inline-block;
|
|
2346
|
+
width: 8px; height: 8px;
|
|
2347
|
+
border-radius: 50%;
|
|
2348
|
+
margin-right: 8px;
|
|
2349
|
+
background: currentColor;
|
|
2350
|
+
opacity: 0.8;
|
|
2351
|
+
}
|
|
2352
|
+
.ds-247420 .ds-section .row-benefit { opacity: 0.75; margin-top: 4px; font-style: italic; }
|
|
2353
|
+
.ds-247420 .ds-section .row .sub { opacity: 0.85; margin-top: 4px; }
|
|
2354
|
+
.ds-247420 .ds-section a.row { display: block; text-decoration: none; color: inherit; }
|
|
2355
|
+
.ds-247420 .ds-section a.row .code {
|
|
2356
|
+
font-family: var(--ff-mono);
|
|
2357
|
+
opacity: 0.6;
|
|
2358
|
+
margin-right: 12px;
|
|
2359
|
+
}
|