demo/preview.html — sigil-web-styles

<!DOCTYPE html><html><head><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><title>sigil-web-styles Preview</title><style>:root {

2 --color-bg: #0d0d0d;

3 --color-surface: #1a1a1a;

4 --color-surface-hover: #222222;

5 --color-primary: #d4a017;

6 --color-primary-hover: #b8860b;

7 --color-text: #e8e8e8;

8 --color-text-muted: #888888;

9 --color-border: #2a2a2a;

10 --color-success: #22c55e;

11 --color-warning: #f59e0b;

12 --color-error: #ef4444;

13}

15* {

16 margin: 0;

17 padding: 0;

18 box-sizing: border-box;

19}

21body {

22 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;

23 font-size: 16px;

24 line-height: 1.6;

25 color: var(--color-text);

26 background: var(--color-bg);

27}

29h1 {

30 font-size: 1.75rem;

31 font-weight: 700;

32 line-height: 1.2;

33 margin-bottom: 1rem;

34}

36h2 {

37 font-size: 1.375rem;

38 font-weight: 600;

39 line-height: 1.3;

40 margin-bottom: 0.75rem;

41}

43h3 {

44 font-size: 1.125rem;

45 font-weight: 600;

46 line-height: 1.4;

47 margin-bottom: 0.5rem;

48}

50small, .text-small {

51 font-size: 0.875rem;

52}

54.text-caption {

55 font-size: 0.8rem;

56 color: var(--color-text-muted);

57}

59.mono {

60 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

61 font-size: 0.85rem;

62}

64code, pre {

65 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

66 font-size: 0.875rem;

67}

69a {

70 color: var(--color-primary);

71 text-decoration: none;

72}

74a:hover {

75 text-decoration: underline;

76}

78.header {

79 background: var(--color-surface);

80 border-bottom: 1px solid var(--color-border);

81 padding: 0.75rem 1.5rem;

82 display: flex;

83 align-items: center;

84 gap: 1.5rem;

85}

87.header-logo {

88 font-size: 1.25rem;

89 font-weight: 700;

90 letter-spacing: -0.02em;

91 color: var(--color-primary);

92 text-decoration: none;

93}

95.header-nav a {

96 color: var(--color-text-muted);

97 text-decoration: none;

98}

100.header-nav a:hover {

101 color: var(--color-text);

102}

103

104.main {

105 max-width: 1200px;

106 margin: 0 auto;

107 padding: 1.5rem;

108}

109

110.main-narrow {

111 max-width: 960px;

112 margin: 0 auto;

113 padding: 1.5rem;

114}

115

116.page-title {

117 font-size: 1.5rem;

118 margin-bottom: 1rem;

119 color: var(--color-text);

120}

121

122.status-panel {

123 display: flex;

124 align-items: center;

125 gap: 2rem;

126 margin-bottom: 2rem;

127 padding: 1.5rem;

128 background: linear-gradient(180deg, var(--color-surface) 0%, #141414 100%);

129 border-radius: 0.5rem;

130 box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);

131}

132

133.status-details {

134 color: var(--color-text-muted);

135 font-size: 0.9rem;

136}

137

138.status-details div {

139 margin-bottom: 0.25rem;

140}

141

142.run-status-line {

143 margin-bottom: 1rem;

144 font-size: 0.9rem;

145 color: var(--color-text-muted);

146 display: flex;

147 align-items: center;

148 flex-wrap: wrap;

149 gap: 0.25rem;

150}

151

152.run-status-line .mono {

153 font-family: 'JetBrains Mono', 'Fira Code', monospace;

154 font-size: 0.85rem;

155}

156

157.dim {

158 color: var(--color-text-muted);

159}

160

161.check-history {

162 margin-top: 1rem;

163}

164

165.check-history h2 {

166 margin-bottom: 1rem;

167 font-size: 1.25rem;

168}

169

170@media (max-width: 640px) {

171 .main, .main-narrow {

172 padding: 1rem;

173 }

174

175 .status-panel {

176 flex-direction: column;

177 align-items: flex-start;

178 gap: 1rem;

179 }

180

181}

182

183.footer {

184 text-align: center;

185 padding: 2rem 1rem;

186 color: var(--color-text-muted);

187 font-size: 0.8rem;

188}

189

190.footer a {

191 color: var(--color-text-muted);

192}

193

194.grid {

195 display: grid;

196 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

197 gap: 1rem;

198}

199

200.service-grid {

201 display: grid;

202 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

203 gap: 1rem;

204}

205

206.repo-group {

207 margin-bottom: 2rem;

208}

209

210.repo-heading {

211 font-size: 1rem;

212 color: var(--color-text-muted);

213 font-family: 'JetBrains Mono', 'Fira Code', monospace;

214 margin-bottom: 0.5rem;

215 font-weight: normal;

216}

217

218@media (max-width: 640px) {

219 .grid, .service-grid {

220 grid-template-columns: 1fr;

221 }

222

223}

224

225.card {

226 background: linear-gradient(180deg, var(--color-surface) 0%, #141414 100%);

227 border: 1px solid var(--color-border);

228 border-radius: 0.5rem;

229 padding: 1.25rem;

230 box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);

231 transition: transform 0.15s, box-shadow 0.15s;

232 color: var(--color-text);

233 text-decoration: none;

234 display: block;

235}

236

237.card:hover {

238 transform: translateY(-2px);

239 box-shadow: 0 4px 12px rgba(0,0,0,0.4);

240}

241

242.card-accent {

243 border-left: 4px solid var(--color-text-muted);

244}

245

246.card-accent.accent-success {

247 border-left-color: var(--color-success);

248}

249

250.card-accent.accent-error {

251 border-left-color: var(--color-error);

252}

253

254.card-accent.accent-warning {

255 border-left-color: var(--color-warning);

256}

257

258.card-accent.accent-primary {

259 border-left-color: var(--color-primary);

260}

261

262.table {

263 width: 100%;

264 border-collapse: collapse;

265}

266

267.table th {

268 text-align: left;

269 padding: 0.5rem 0.75rem;

270 border-bottom: 1px solid var(--color-border);

271 color: var(--color-text-muted);

272 font-size: 0.8rem;

273 text-transform: uppercase;

274 letter-spacing: 0.05em;

275 font-weight: 500;

276}

277

278.table td {

279 padding: 0.5rem 0.75rem;

280 border-bottom: 1px solid var(--color-border);

281}

282

283.table tr {

284 cursor: pointer;

285}

286

287.table tr:hover td {

288 background: var(--color-surface-hover);

289}

290

291.table tr td a {

292 color: inherit;

293}

294

295.table tr td a.row-link {

296 display: block;

297 text-decoration: none;

298}

299

300.badge {

301 display: inline-block;

302 padding: 0.125rem 0.5rem;

303 border-radius: 4px;

304 font-size: 0.8rem;

305 font-weight: 500;

306}

307

308.badge-success {

309 background: #052e16;

310 color: var(--color-success);

311}

312

313.badge-error {

314 background: #2d0a0a;

315 color: var(--color-error);

316}

317

318.badge-warning {

319 background: #1a1500;

320 color: var(--color-warning);

321}

322

323.badge-primary {

324 background: #1a1200;

325 color: var(--color-primary);

326}

327

328.badge-muted {

329 background: var(--color-surface);

330 color: var(--color-text-muted);

331}

332

333.status {

334 display: inline-block;

335 padding: 0.125rem 0.5rem;

336 border-radius: 4px;

337 font-size: 0.8rem;

338 font-weight: 500;

339}

340

341.status-up {

342 background: #052e16;

343 color: var(--color-success);

344}

345

346.status-down {

347 background: #2d0a0a;

348 color: var(--color-error);

349}

350

351.status-degraded {

352 background: #1a1500;

353 color: var(--color-warning);

354}

355

356.status-unknown {

357 background: var(--color-surface);

358 color: var(--color-text-muted);

359}

360

361.status-passed {

362 background: #052e16;

363 color: var(--color-success);

364}

365

366.status-failed {

367 background: #2d0a0a;

368 color: var(--color-error);

369}

370

371.status-errored {

372 background: #1a0d00;

373 color: var(--color-warning);

374}

375

376.status-running {

377 background: #1a1200;

378 color: var(--color-primary);

379 animation: pulse 2s infinite;

380}

381

382.status-starting {

383 background: #0d1a1a;

384 color: #5eead4;

385 animation: pulse 2s infinite;

386}

387

388.status-pending, .status-waiting {

389 background: var(--color-surface);

390 color: var(--color-text-muted);

391}

392

393.status-skipped, .status-cancelled {

394 background: var(--color-surface);

395 color: var(--color-text-muted);

396}

397

398@keyframes pulse {

399 from {

400 opacity: 1;

401 }

402 |50%| {

403 opacity: 0.6;

404 }

405 to {

406 opacity: 1;

407 }

408}

409

410.status-dot {

411 display: inline-block;

412 width: 8px;

413 height: 8px;

414 border-radius: 50%;

415 background: var(--color-text-muted);

416}

417

418.dot-up, .status-up .status-dot {

419 background: var(--color-success);

420}

421

422.dot-down, .status-down .status-dot {

423 background: var(--color-error);

424}

425

426.dot-degraded, .status-degraded .status-dot {

427 background: var(--color-warning);

428}

429

430.status-badge {

431 display: inline-block;

432 padding: 0.5rem 1.25rem;

433 border-radius: 0.25rem;

434 font-weight: 600;

435 text-transform: uppercase;

436 font-size: 0.875rem;

437}

438

439.status-badge.status-up {

440 background: var(--color-success);

441 color: #000;

442}

443

444.status-badge.status-down {

445 background: var(--color-error);

446 color: #fff;

447}

448

449.status-badge.status-degraded {

450 background: var(--color-warning);

451 color: #000;

452}

453

454.status-badge.status-unknown {

455 background: var(--color-text-muted);

456 color: #fff;

457}

458

459.btn {

460 display: inline-block;

461 padding: 0.5rem 1.25rem;

462 border: none;

463 border-radius: 0.375rem;

464 font-size: 0.875rem;

465 font-weight: 600;

466 cursor: pointer;

467 text-decoration: none;

468 transition: background 0.15s, transform 0.1s;

469}

470

471.btn-primary {

472 background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);

473 color: #000;

474 box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

475}

476

477.btn-primary:active {

478 transform: translateY(1px);

479}

480

481.btn-primary:hover {

482 background: var(--color-primary-hover);

483}

484

485.btn-secondary {

486 background: var(--color-surface);

487 color: var(--color-text);

488 border: 1px solid var(--color-border);

489}

490

491.btn-secondary:hover {

492 background: var(--color-surface-hover);

493}

494

495input, textarea, select {

496 background: var(--color-bg);

497 color: var(--color-text);

498 border: 1px solid var(--color-border);

499 border-radius: 0.375rem;

500 padding: 0.5rem 0.75rem;

501 font-size: 0.875rem;

502 font-family: inherit;

503 box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);

504 transition: border-color 0.15s, box-shadow 0.15s;

505}

506

507input:focus, textarea:focus, select:focus {

508 outline: none;

509 border-color: var(--color-primary);

510 box-shadow: 0 0 0 2px rgba(212,160,23,0.25);

511}

512

513label {

514 display: block;

515 font-size: 0.875rem;

516 font-weight: 500;

517 margin-bottom: 0.25rem;

518 color: var(--color-text-muted);

519}

520

521pre {

522 background: #000;

523 border: 1px solid var(--color-border);

524 border-radius: 6px;

525 padding: 1rem;

526 overflow-x: auto;

527 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

528 font-size: 0.8rem;

529 line-height: 1.7;

530}

531

532code {

533 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

534 font-size: 0.875rem;

535}

536

537:not(pre) > code {

538 background: var(--color-surface);

539 padding: 0.125rem 0.375rem;

540 border-radius: 3px;

541}

542

543.log-viewer {

544 background: #000;

545 border: 1px solid var(--color-border);

546 border-radius: 6px;

547 padding: 1rem;

548 overflow-x: auto;

549 font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

550 font-size: 0.8rem;

551 line-height: 1.7;

552 max-height: 70vh;

553 overflow-y: auto;

554}

555

556.log-line {

557 white-space: pre;

558 color: var(--color-text-muted);

559}

560

561.log-line-stderr {

562 color: var(--color-error);

563}

564

565.log-seq {

566 color: var(--color-text-muted);

567 user-select: none;

568 margin-right: 1rem;

569 min-width: 3ch;

570 display: inline-block;

571 text-align: right;

572}

573

574.empty {

575 text-align: center;

576 padding: 3rem;

577 color: var(--color-text-muted);

578}

579

580.a-bold {

581 font-weight: bold;

582}

583

584.a-dim {

585 opacity: 0.6;

586}

587

588.a-italic {

589 font-style: italic;

590}

591

592.a-underline {

593 text-decoration: underline;

594}

595

596.a-black {

597 color: #555;

598}

599

600.a-red {

601 color: var(--color-error);

602}

603

604.a-green {

605 color: var(--color-success);

606}

607

608.a-yellow {

609 color: var(--color-primary);

610}

611

612.a-blue {

613 color: #60a5fa;

614}

615

616.a-magenta {

617 color: #c084fc;

618}

619

620.a-cyan {

621 color: #22d3ee;

622}

623

624.a-white {

625 color: var(--color-text);

626}

627

628.a-bright-black {

629 color: var(--color-text-muted);

630}

631

632.a-bright-red {

633 color: #f87171;

634}

635

636.a-bright-green {

637 color: #4ade80;

638}

639

640.a-bright-yellow {

641 color: #fde047;

642}

643

644.a-bright-blue {

645 color: #93c5fd;

646}

647

648.a-bright-magenta {

649 color: #d8b4fe;

650}

651

652.a-bright-cyan {

653 color: #67e8f9;

654}

655

656.a-bright-white {

657 color: #fff;

658}

659

660

</style></head><body><header class='header'><a href='/' class='header-logo'>sigil-web-styles</a><nav class='header-nav'><a href='#'>Dashboard</a></nav></header><main class='main'><h1 class='page-title'>Component Preview</h1><section style='margin-bottom:2rem'><h2>Typography</h2><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Body text with <a href='#'>a link</a> and <code>inline code</code>.</p><small>Small text</small><p class='text-caption'>Caption text</p><p class='mono'>Monospace text</p></section><section style='margin-bottom:2rem'><h2>Buttons</h2><a class='btn btn-primary' href='#'>Primary</a> <a class='btn btn-secondary' href='#'>Secondary</a></section><section style='margin-bottom:2rem'><h2>Badges &amp; Status</h2><p><span class='status status-up'>up</span> <span class='status status-down'>down</span> <span class='status status-degraded'>degraded</span> <span class='status status-passed'>passed</span> <span class='status status-failed'>failed</span> <span class='status status-running'>running</span> <span class='status status-pending'>pending</span></p><p style='margin-top:1rem'>Dots: <span class='status-dot dot-up'></span> <span class='status-dot dot-down'></span> <span class='status-dot dot-degraded'></span> <span class='status-dot'></span></p><p style='margin-top:1rem'><span class='status-badge status-up'>UP</span> <span class='status-badge status-down'>DOWN</span> <span class='status-badge status-degraded'>DEGRADED</span></p></section><section style='margin-bottom:2rem'><h2>Cards</h2><div class='grid'><div class='card card-accent accent-success'><div style='font-weight:600'>Service A</div><div style='color:var(--color-text-muted)'><span class='status-dot dot-up'></span> up</div></div><div class='card card-accent accent-error'><div style='font-weight:600'>Service B</div><div style='color:var(--color-text-muted)'><span class='status-dot dot-down'></span> down</div></div><div class='card card-accent accent-warning'><div style='font-weight:600'>Service C</div><div style='color:var(--color-text-muted)'><span class='status-dot dot-degraded'></span> degraded</div></div></div></section><section style='margin-bottom:2rem'><h2>Status Panel</h2><div class='status-panel'><span class='status-badge status-up'>UP</span><div class='status-details'><div>Uptime: 99.9%</div><div>Latency: 12ms</div></div></div></section><section style='margin-bottom:2rem'><h2>Table</h2><table class='table'><thead><tr><th>Job</th><th>Branch</th><th>Status</th><th>Duration</th></tr></thead><tbody><tr><td>build-sigil</td><td>master</td><td><span class='status status-passed'>passed</span></td><td>2m 15s</td></tr><tr><td>test-web</td><td>master</td><td><span class='status status-failed'>failed</span></td><td>1m 42s</td></tr><tr><td>deploy</td><td>master</td><td><span class='status status-running'>running</span></td><td>running...</td></tr></tbody></table></section><section style='margin-bottom:2rem'><h2>Form Inputs</h2><div style='max-width:400px'><label>Text Input</label><input type='text' placeholder='Enter value...' style='width:100%;margin-bottom:1rem'><label>Textarea</label><textarea rows='3' style='width:100%' placeholder='Enter text...'></textarea></div></section><section style='margin-bottom:2rem'><h2>Log Viewer</h2><div class='log-viewer'><div class='log-line'><span class='log-seq'>1</span><span class='a-green'>==></span> Building...</div><div class='log-line'><span class='log-seq'>2</span>  <span class='a-cyan'>COMPILE</span>  palette.sgl</div><div class='log-line'><span class='log-seq'>3</span>  <span class='a-cyan'>COMPILE</span>  components.sgl</div><div class='log-line log-line-stderr'><span class='log-seq'>4</span><span class='a-red'>ERROR:</span> something went wrong</div><div class='log-line'><span class='log-seq'>5</span><span class='a-green'>Build complete!</span></div></div></section></main><footer class='footer'>Crafted with <a href='https://usesigil.org'>Sigil</a></footer></body></html>