repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
lawb terminal
stars
latest
clone command
git clone gitlawb://did:key:z6MkvfHn...poLu/lawb-terminalgit clone gitlawb://did:key:z6MkvfHn.../lawb-terminald17cf07esync from playground1d ago| #1 | :root { |
| #2 | color-scheme: dark; |
| #3 | --bg: #0a0a0c; |
| #4 | --bg-sidebar: #0d0d10; |
| #5 | --bg-card: rgba(255, 255, 255, 0.02); |
| #6 | --border: rgba(255, 255, 255, 0.08); |
| #7 | --border-active: rgba(180, 140, 255, 0.3); |
| #8 | --text: #e0e0e0; |
| #9 | --text-dim: rgba(255, 255, 255, 0.5); |
| #10 | --text-muted: rgba(255, 255, 255, 0.35); |
| #11 | --accent: #b48cff; |
| #12 | --accent-dim: rgba(180, 140, 255, 0.15); |
| #13 | --gold: #c9a84c; |
| #14 | --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| #15 | --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; |
| #16 | } |
| #17 | |
| #18 | * { |
| #19 | box-sizing: border-box; |
| #20 | margin: 0; |
| #21 | padding: 0; |
| #22 | } |
| #23 | |
| #24 | html, body, #root { |
| #25 | min-height: 100vh; |
| #26 | background: var(--bg); |
| #27 | color: var(--text); |
| #28 | font-family: var(--font-sans); |
| #29 | line-height: 1.6; |
| #30 | } |
| #31 | |
| #32 | /* Disclaimer Banner */ |
| #33 | .disclaimer-banner { |
| #34 | background: rgba(30, 10, 10, 0.95); |
| #35 | border-bottom: 1px solid rgba(255, 80, 80, 0.2); |
| #36 | padding: 0.75rem 1.5rem; |
| #37 | position: sticky; |
| #38 | top: 0; |
| #39 | z-index: 100; |
| #40 | } |
| #41 | |
| #42 | .disclaimer-content { |
| #43 | max-width: 1200px; |
| #44 | margin: 0 auto; |
| #45 | display: flex; |
| #46 | align-items: flex-start; |
| #47 | gap: 1rem; |
| #48 | } |
| #49 | |
| #50 | .disclaimer-content p { |
| #51 | font-size: 0.75rem; |
| #52 | color: rgba(255, 180, 180, 0.7); |
| #53 | line-height: 1.5; |
| #54 | } |
| #55 | |
| #56 | .disclaimer-content strong { |
| #57 | color: rgba(255, 100, 100, 0.9); |
| #58 | } |
| #59 | |
| #60 | .disclaimer-close { |
| #61 | background: none; |
| #62 | border: 1px solid rgba(255, 80, 80, 0.3); |
| #63 | color: rgba(255, 120, 120, 0.7); |
| #64 | cursor: pointer; |
| #65 | font-size: 0.9rem; |
| #66 | padding: 0.2rem 0.5rem; |
| #67 | border-radius: 4px; |
| #68 | flex-shrink: 0; |
| #69 | transition: all 0.2s; |
| #70 | } |
| #71 | |
| #72 | .disclaimer-close:hover { |
| #73 | background: rgba(255, 80, 80, 0.1); |
| #74 | color: rgba(255, 120, 120, 1); |
| #75 | } |
| #76 | |
| #77 | /* Header */ |
| #78 | .header { |
| #79 | display: flex; |
| #80 | align-items: center; |
| #81 | gap: 1rem; |
| #82 | padding: 1rem 1.5rem; |
| #83 | border-bottom: 1px solid var(--border); |
| #84 | background: rgba(10, 10, 12, 0.9); |
| #85 | backdrop-filter: blur(12px); |
| #86 | position: sticky; |
| #87 | top: 0; |
| #88 | z-index: 50; |
| #89 | } |
| #90 | |
| #91 | .disclaimer-banner ~ .header { |
| #92 | top: 0; |
| #93 | } |
| #94 | |
| #95 | .site-title { |
| #96 | font-family: var(--font-mono); |
| #97 | font-size: 1.4rem; |
| #98 | font-weight: 600; |
| #99 | letter-spacing: 0.15em; |
| #100 | color: var(--text); |
| #101 | cursor: pointer; |
| #102 | user-select: none; |
| #103 | transition: color 0.2s; |
| #104 | } |
| #105 | |
| #106 | .site-title:hover { |
| #107 | color: var(--accent); |
| #108 | } |
| #109 | |
| #110 | .sparkle { |
| #111 | font-size: 1rem; |
| #112 | opacity: 0.8; |
| #113 | } |
| #114 | |
| #115 | .sidebar-toggle { |
| #116 | background: none; |
| #117 | border: 1px solid var(--border); |
| #118 | color: var(--text-dim); |
| #119 | font-size: 1.2rem; |
| #120 | cursor: pointer; |
| #121 | padding: 0.3rem 0.6rem; |
| #122 | border-radius: 4px; |
| #123 | transition: all 0.2s; |
| #124 | display: none; |
| #125 | } |
| #126 | |
| #127 | .sidebar-toggle:hover { |
| #128 | background: rgba(255, 255, 255, 0.05); |
| #129 | color: var(--text); |
| #130 | } |
| #131 | |
| #132 | /* Layout */ |
| #133 | .layout { |
| #134 | display: flex; |
| #135 | min-height: calc(100vh - 60px); |
| #136 | } |
| #137 | |
| #138 | /* Sidebar */ |
| #139 | .sidebar { |
| #140 | width: 260px; |
| #141 | flex-shrink: 0; |
| #142 | background: var(--bg-sidebar); |
| #143 | border-right: 1px solid var(--border); |
| #144 | padding: 1.5rem 0; |
| #145 | overflow-y: auto; |
| #146 | height: calc(100vh - 60px); |
| #147 | position: sticky; |
| #148 | top: 60px; |
| #149 | } |
| #150 | |
| #151 | .sidebar-section { |
| #152 | padding: 0 1rem; |
| #153 | } |
| #154 | |
| #155 | .sidebar-section-title { |
| #156 | font-family: var(--font-mono); |
| #157 | font-size: 0.65rem; |
| #158 | letter-spacing: 0.25em; |
| #159 | text-transform: uppercase; |
| #160 | color: var(--text-muted); |
| #161 | padding: 0.5rem 0.75rem; |
| #162 | margin-bottom: 0.25rem; |
| #163 | } |
| #164 | |
| #165 | .sidebar-nav { |
| #166 | list-style: none; |
| #167 | } |
| #168 | |
| #169 | .sidebar-link { |
| #170 | display: flex; |
| #171 | align-items: center; |
| #172 | gap: 0.6rem; |
| #173 | width: 100%; |
| #174 | background: none; |
| #175 | border: none; |
| #176 | color: var(--text-dim); |
| #177 | font-family: var(--font-sans); |
| #178 | font-size: 0.85rem; |
| #179 | padding: 0.45rem 0.75rem; |
| #180 | border-radius: 6px; |
| #181 | cursor: pointer; |
| #182 | transition: all 0.15s; |
| #183 | text-align: left; |
| #184 | } |
| #185 | |
| #186 | .sidebar-link:hover { |
| #187 | background: rgba(255, 255, 255, 0.04); |
| #188 | color: var(--text); |
| #189 | } |
| #190 | |
| #191 | .sidebar-link.active { |
| #192 | background: var(--accent-dim); |
| #193 | color: var(--accent); |
| #194 | border-left: 2px solid var(--accent); |
| #195 | } |
| #196 | |
| #197 | .sidebar-emoji { |
| #198 | font-size: 1rem; |
| #199 | width: 1.5rem; |
| #200 | text-align: center; |
| #201 | flex-shrink: 0; |
| #202 | } |
| #203 | |
| #204 | .sidebar-divider { |
| #205 | text-align: center; |
| #206 | color: var(--text-muted); |
| #207 | font-size: 0.7rem; |
| #208 | padding: 1rem 0; |
| #209 | letter-spacing: 0.3em; |
| #210 | } |
| #211 | |
| #212 | /* Main Content */ |
| #213 | .main { |
| #214 | flex: 1; |
| #215 | padding: 2rem 3rem; |
| #216 | max-width: 900px; |
| #217 | min-height: calc(100vh - 60px); |
| #218 | } |
| #219 | |
| #220 | /* Hero */ |
| #221 | .hero { |
| #222 | display: flex; |
| #223 | flex-direction: column; |
| #224 | align-items: center; |
| #225 | justify-content: center; |
| #226 | min-height: 70vh; |
| #227 | text-align: center; |
| #228 | gap: 2rem; |
| #229 | } |
| #230 | |
| #231 | .hero-portrait { |
| #232 | display: flex; |
| #233 | justify-content: center; |
| #234 | } |
| #235 | |
| #236 | .portrait-frame { |
| #237 | width: 280px; |
| #238 | height: 280px; |
| #239 | border: 2px solid var(--border); |
| #240 | border-radius: 12px; |
| #241 | overflow: hidden; |
| #242 | background: radial-gradient(ellipse at center, rgba(180, 140, 255, 0.05), transparent 70%); |
| #243 | display: flex; |
| #244 | align-items: center; |
| #245 | justify-content: center; |
| #246 | position: relative; |
| #247 | } |
| #248 | |
| #249 | .portrait-frame::before { |
| #250 | content: ""; |
| #251 | position: absolute; |
| #252 | inset: 0; |
| #253 | border: 1px solid rgba(180, 140, 255, 0.1); |
| #254 | border-radius: 11px; |
| #255 | pointer-events: none; |
| #256 | } |
| #257 | |
| #258 | .portrait-placeholder { |
| #259 | display: flex; |
| #260 | align-items: center; |
| #261 | justify-content: center; |
| #262 | } |
| #263 | |
| #264 | .portrait-ascii { |
| #265 | font-family: var(--font-mono); |
| #266 | font-size: 1.1rem; |
| #267 | color: var(--accent); |
| #268 | white-space: pre; |
| #269 | line-height: 1.3; |
| #270 | opacity: 0.7; |
| #271 | } |
| #272 | |
| #273 | .hero-welcome { |
| #274 | color: var(--text-dim); |
| #275 | font-size: 0.95rem; |
| #276 | max-width: 400px; |
| #277 | font-style: italic; |
| #278 | } |
| #279 | |
| #280 | .get-started-btn { |
| #281 | background: transparent; |
| #282 | border: 1px solid var(--accent); |
| #283 | color: var(--accent); |
| #284 | font-family: var(--font-mono); |
| #285 | font-size: 0.9rem; |
| #286 | padding: 0.7rem 2rem; |
| #287 | border-radius: 6px; |
| #288 | cursor: pointer; |
| #289 | letter-spacing: 0.05em; |
| #290 | transition: all 0.2s; |
| #291 | } |
| #292 | |
| #293 | .get-started-btn:hover { |
| #294 | background: var(--accent-dim); |
| #295 | box-shadow: 0 0 20px rgba(180, 140, 255, 0.1); |
| #296 | } |
| #297 | |
| #298 | /* Page Content */ |
| #299 | .page-content { |
| #300 | animation: fadeIn 0.3s ease; |
| #301 | } |
| #302 | |
| #303 | @keyframes fadeIn { |
| #304 | from { |
| #305 | opacity: 0; |
| #306 | transform: translateY(8px); |
| #307 | } |
| #308 | to { |
| #309 | opacity: 1; |
| #310 | transform: translateY(0); |
| #311 | } |
| #312 | } |
| #313 | |
| #314 | .page-title { |
| #315 | font-family: var(--font-mono); |
| #316 | font-size: 1.8rem; |
| #317 | font-weight: 600; |
| #318 | letter-spacing: -0.01em; |
| #319 | color: var(--text); |
| #320 | margin-bottom: 0.5rem; |
| #321 | } |
| #322 | |
| #323 | .page-ornament { |
| #324 | text-align: center; |
| #325 | color: var(--text-muted); |
| #326 | font-size: 0.75rem; |
| #327 | letter-spacing: 0.4em; |
| #328 | padding: 0.75rem 0; |
| #329 | border-bottom: 1px solid var(--border); |
| #330 | margin-bottom: 1.5rem; |
| #331 | } |
| #332 | |
| #333 | .page-body p { |
| #334 | color: var(--text-dim); |
| #335 | font-size: 0.9rem; |
| #336 | margin-bottom: 0.5rem; |
| #337 | line-height: 1.7; |
| #338 | } |
| #339 | |
| #340 | .page-body p.list-item { |
| #341 | padding-left: 1rem; |
| #342 | position: relative; |
| #343 | } |
| #344 | |
| #345 | .page-body p.list-item::before { |
| #346 | content: "•"; |
| #347 | position: absolute; |
| #348 | left: 0; |
| #349 | color: var(--accent); |
| #350 | } |
| #351 | |
| #352 | /* Responsive */ |
| #353 | @media (max-width: 768px) { |
| #354 | .sidebar-toggle { |
| #355 | display: block; |
| #356 | } |
| #357 | |
| #358 | .sidebar { |
| #359 | position: fixed; |
| #360 | top: 60px; |
| #361 | left: 0; |
| #362 | height: calc(100vh - 60px); |
| #363 | z-index: 40; |
| #364 | transform: translateX(-100%); |
| #365 | transition: transform 0.25s ease; |
| #366 | box-shadow: none; |
| #367 | } |
| #368 | |
| #369 | .sidebar.open { |
| #370 | transform: translateX(0); |
| #371 | box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); |
| #372 | } |
| #373 | |
| #374 | .main { |
| #375 | padding: 1.5rem 1.25rem; |
| #376 | } |
| #377 | |
| #378 | .portrait-frame { |
| #379 | width: 220px; |
| #380 | height: 220px; |
| #381 | } |
| #382 | |
| #383 | .portrait-ascii { |
| #384 | font-size: 0.85rem; |
| #385 | } |
| #386 | } |
| #387 | |
| #388 | /* Tip Button */ |
| #389 | .tip-trigger { |
| #390 | margin-left: auto; |
| #391 | background: transparent; |
| #392 | border: 1px solid var(--gold); |
| #393 | color: var(--gold); |
| #394 | font-family: var(--font-mono); |
| #395 | font-size: 0.8rem; |
| #396 | padding: 0.4rem 1rem; |
| #397 | border-radius: 6px; |
| #398 | cursor: pointer; |
| #399 | white-space: nowrap; |
| #400 | transition: all 0.2s; |
| #401 | } |
| #402 | |
| #403 | .tip-trigger:hover { |
| #404 | background: rgba(201, 168, 76, 0.1); |
| #405 | box-shadow: 0 0 16px rgba(201, 168, 76, 0.1); |
| #406 | } |
| #407 | |
| #408 | .tip-overlay { |
| #409 | position: fixed; |
| #410 | inset: 0; |
| #411 | background: rgba(0, 0, 0, 0.7); |
| #412 | backdrop-filter: blur(4px); |
| #413 | z-index: 200; |
| #414 | display: flex; |
| #415 | align-items: center; |
| #416 | justify-content: center; |
| #417 | animation: fadeIn 0.2s ease; |
| #418 | } |
| #419 | |
| #420 | .tip-modal { |
| #421 | background: var(--bg-sidebar); |
| #422 | border: 1px solid var(--border); |
| #423 | border-radius: 12px; |
| #424 | padding: 2rem; |
| #425 | width: 90%; |
| #426 | max-width: 380px; |
| #427 | position: relative; |
| #428 | display: flex; |
| #429 | flex-direction: column; |
| #430 | gap: 1rem; |
| #431 | } |
| #432 | |
| #433 | .tip-close { |
| #434 | position: absolute; |
| #435 | top: 0.75rem; |
| #436 | right: 0.75rem; |
| #437 | background: none; |
| #438 | border: none; |
| #439 | color: var(--text-muted); |
| #440 | font-size: 1.1rem; |
| #441 | cursor: pointer; |
| #442 | padding: 0.25rem; |
| #443 | transition: color 0.15s; |
| #444 | } |
| #445 | |
| #446 | .tip-close:hover { |
| #447 | color: var(--text); |
| #448 | } |
| #449 | |
| #450 | .tip-title { |
| #451 | font-family: var(--font-mono); |
| #452 | font-size: 1.1rem; |
| #453 | color: var(--text); |
| #454 | } |
| #455 | |
| #456 | .tip-subtitle { |
| #457 | font-size: 0.8rem; |
| #458 | color: var(--text-muted); |
| #459 | margin-top: -0.5rem; |
| #460 | } |
| #461 | |
| #462 | .tip-amounts { |
| #463 | display: flex; |
| #464 | gap: 0.5rem; |
| #465 | } |
| #466 | |
| #467 | .tip-amount { |
| #468 | flex: 1; |
| #469 | background: rgba(255, 255, 255, 0.03); |
| #470 | border: 1px solid var(--border); |
| #471 | color: var(--text-dim); |
| #472 | font-family: var(--font-mono); |
| #473 | font-size: 0.95rem; |
| #474 | padding: 0.6rem; |
| #475 | border-radius: 6px; |
| #476 | cursor: pointer; |
| #477 | transition: all 0.15s; |
| #478 | } |
| #479 | |
| #480 | .tip-amount:hover { |
| #481 | border-color: var(--accent); |
| #482 | color: var(--text); |
| #483 | } |
| #484 | |
| #485 | .tip-amount.active { |
| #486 | background: var(--accent-dim); |
| #487 | border-color: var(--accent); |
| #488 | color: var(--accent); |
| #489 | } |
| #490 | |
| #491 | .tip-custom-input { |
| #492 | background: rgba(255, 255, 255, 0.03); |
| #493 | border: 1px solid var(--border); |
| #494 | color: var(--text); |
| #495 | font-family: var(--font-mono); |
| #496 | font-size: 0.9rem; |
| #497 | padding: 0.6rem 0.75rem; |
| #498 | border-radius: 6px; |
| #499 | outline: none; |
| #500 | transition: border-color 0.15s; |
| #501 | width: 100%; |
| #502 | } |
| #503 | |
| #504 | .tip-custom-input::placeholder { |
| #505 | color: var(--text-muted); |
| #506 | } |
| #507 | |
| #508 | .tip-custom-input:focus { |
| #509 | border-color: var(--accent); |
| #510 | } |
| #511 | |
| #512 | .tip-recipient { |
| #513 | font-size: 0.75rem; |
| #514 | color: var(--text-muted); |
| #515 | } |
| #516 | |
| #517 | .tip-recipient code { |
| #518 | font-family: var(--font-mono); |
| #519 | color: var(--text-dim); |
| #520 | background: rgba(255, 255, 255, 0.04); |
| #521 | padding: 0.15rem 0.4rem; |
| #522 | border-radius: 3px; |
| #523 | font-size: 0.7rem; |
| #524 | } |
| #525 | |
| #526 | .tip-error { |
| #527 | font-size: 0.75rem; |
| #528 | color: #ff6b6b; |
| #529 | padding: 0.5rem; |
| #530 | background: rgba(255, 60, 60, 0.08); |
| #531 | border-radius: 4px; |
| #532 | } |
| #533 | |
| #534 | .tip-btn { |
| #535 | width: 100%; |
| #536 | padding: 0.7rem; |
| #537 | border-radius: 6px; |
| #538 | font-family: var(--font-mono); |
| #539 | font-size: 0.9rem; |
| #540 | cursor: pointer; |
| #541 | transition: all 0.2s; |
| #542 | border: none; |
| #543 | text-decoration: none; |
| #544 | text-align: center; |
| #545 | display: block; |
| #546 | } |
| #547 | |
| #548 | .tip-btn-primary { |
| #549 | background: var(--accent); |
| #550 | color: #000; |
| #551 | } |
| #552 | |
| #553 | .tip-btn-primary:hover:not(:disabled) { |
| #554 | box-shadow: 0 0 20px rgba(180, 140, 255, 0.2); |
| #555 | } |
| #556 | |
| #557 | .tip-btn-primary:disabled { |
| #558 | opacity: 0.5; |
| #559 | cursor: not-allowed; |
| #560 | } |
| #561 | |
| #562 | .tip-btn-secondary { |
| #563 | background: transparent; |
| #564 | border: 1px solid var(--border); |
| #565 | color: var(--text-dim); |
| #566 | } |
| #567 | |
| #568 | .tip-btn-secondary:hover { |
| #569 | border-color: var(--accent); |
| #570 | color: var(--text); |
| #571 | } |
| #572 | |
| #573 | .tip-no-wallet { |
| #574 | display: flex; |
| #575 | flex-direction: column; |
| #576 | gap: 0.75rem; |
| #577 | align-items: center; |
| #578 | } |
| #579 | |
| #580 | .tip-no-wallet p { |
| #581 | font-size: 0.85rem; |
| #582 | color: var(--text-muted); |
| #583 | text-align: center; |
| #584 | } |
| #585 | |
| #586 | .tip-success { |
| #587 | display: flex; |
| #588 | flex-direction: column; |
| #589 | align-items: center; |
| #590 | gap: 0.75rem; |
| #591 | text-align: center; |
| #592 | padding: 1rem 0; |
| #593 | } |
| #594 | |
| #595 | .tip-success-icon { |
| #596 | font-size: 2.5rem; |
| #597 | } |
| #598 | |
| #599 | .tip-success h3 { |
| #600 | font-family: var(--font-mono); |
| #601 | font-size: 1.3rem; |
| #602 | color: var(--accent); |
| #603 | } |
| #604 | |
| #605 | .tip-success p { |
| #606 | font-size: 0.85rem; |
| #607 | color: var(--text-dim); |
| #608 | } |
| #609 | |
| #610 | .tip-tx-link { |
| #611 | font-family: var(--font-mono); |
| #612 | font-size: 0.75rem; |
| #613 | color: var(--accent); |
| #614 | text-decoration: none; |
| #615 | transition: opacity 0.15s; |
| #616 | } |
| #617 | |
| #618 | .tip-tx-link:hover { |
| #619 | opacity: 0.8; |
| #620 | } |
| #621 | |
| #622 | /* Scrollbar */ |
| #623 | ::-webkit-scrollbar { |
| #624 | width: 6px; |
| #625 | } |
| #626 | |
| #627 | ::-webkit-scrollbar-track { |
| #628 | background: transparent; |
| #629 | } |
| #630 | |
| #631 | ::-webkit-scrollbar-thumb { |
| #632 | background: rgba(255, 255, 255, 0.1); |
| #633 | border-radius: 3px; |
| #634 | } |
| #635 | |
| #636 | ::-webkit-scrollbar-thumb:hover { |
| #637 | background: rgba(255, 255, 255, 0.2); |
| #638 | } |
| #639 |