abidlabs/text2sql-logbook
0
1:root {2 --bg: #ffffff;3 --paper: #fdfcf9;4 --panel: #ffffff;5 --ink: #1f2937;6 --muted: #6b7280;7 --line: #e5e7eb;8 --accent: #f97316;9 --accent-strong: #ea580c;10 --accent-soft: #fff7ed;11 --accent-line: rgba(249, 115, 22, 0.16);12 --grid-line: rgba(31, 41, 55, 0.045);13 --code-bg: #f3f4f6;14 --radius: 12px;15 --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;16 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,17 sans-serif;18 --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;19}20 21* {22 box-sizing: border-box;23}24 25html,26body {27 margin: 0;28 padding: 0;29}30 31body {32 background: var(--bg);33 color: var(--ink);34 font-family: var(--sans);35 font-size: 16px;36 line-height: 1.65;37 -webkit-font-smoothing: antialiased;38}39 40#app {41 display: flex;42 min-height: 100vh;43}44 45/* ---- sidebar (composition-book cover) ---- */46#sidebar {47 width: 280px;48 flex: 0 0 280px;49 background: #17181c;50 color: #e7e7ea;51 position: sticky;52 top: 0;53 height: 100vh;54 overflow-y: auto;55 padding: 22px 16px;56 display: flex;57 flex-direction: column;58}59 60#book-head {61 display: flex;62 align-items: center;63 gap: 10px;64 padding: 8px;65 margin-bottom: 12px;66 border-radius: 10px;67 cursor: pointer;68 transition: background 0.12s;69}70#book-head:hover {71 background: rgba(255, 255, 255, 0.05);72}73#book-head.active #book-title {74 color: #fdba74;75}76 77#book-logo {78 width: 40px;79 height: 40px;80 object-fit: contain;81 flex: 0 0 auto;82}83 84#book-title {85 font-weight: 700;86 font-size: 15px;87 letter-spacing: -0.01em;88 color: #ffffff;89}90 91#tree {92 flex: 1;93 padding-top: 8px;94}95 96#tree a {97 display: block;98 padding: 6px 10px;99 border-radius: 8px;100 color: #c3c4cb;101 text-decoration: none;102 font-size: 14px;103 transition: background 0.12s, color 0.12s;104}105 106#tree a:hover {107 background: rgba(255, 255, 255, 0.06);108 color: #ffffff;109}110 111#tree a.active {112 background: rgba(249, 115, 22, 0.16);113 color: #fdba74;114 font-weight: 600;115}116 117#tree .depth-1 {118 padding-left: 22px;119}120#tree .depth-2 {121 padding-left: 34px;122}123#tree .depth-3 {124 padding-left: 46px;125}126 127 128/* ---- content ---- */129#content {130 flex: 1;131 display: flex;132 justify-content: center;133 padding: 48px 40px 120px;134 background-color: var(--paper);135 background-image:136 linear-gradient(var(--grid-line) 1px, transparent 1px),137 linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);138 background-size: 26px 26px;139 background-position: center top;140}141 142#page {143 width: 100%;144 max-width: 760px;145}146 147#page h1 {148 font-family: var(--serif);149 font-size: 34px;150 line-height: 1.15;151 letter-spacing: -0.02em;152 margin: 0 0 8px;153}154 155#page h2 {156 font-family: var(--serif);157 font-size: 24px;158 margin: 36px 0 10px;159}160 161#page h3 {162 font-size: 17px;163 font-weight: 700;164 margin: 26px 0 2px;165 letter-spacing: -0.01em;166}167 168#page h3::before {169 content: "";170 display: inline-block;171 width: 7px;172 height: 7px;173 border-radius: 2px;174 background: var(--accent);175 margin-right: 10px;176 vertical-align: middle;177 transform: translateY(-1px);178}179 180#page p {181 margin: 10px 0;182}183 184#page blockquote {185 margin: 14px 0;186 padding: 2px 16px;187 border-left: 3px solid #fdba74;188 color: var(--muted);189}190 191#page hr {192 border: none;193 border-top: 1px solid var(--line);194 margin: 30px 0 0;195}196 197#page code {198 font-family: var(--mono);199 font-size: 0.86em;200 background: var(--code-bg);201 padding: 2px 6px;202 border-radius: 6px;203}204 205#page pre {206 background: var(--code-bg);207 border: 1px solid var(--line);208 border-radius: var(--radius);209 padding: 14px 16px;210 overflow-x: auto;211}212#page pre code {213 background: none;214 padding: 0;215}216 217/* ---- code blocks + collapsible accordion ---- */218#page pre.hl {219 background: #17181c;220 border: none;221 color: #e7e7ea;222 font-size: 12.5px;223 line-height: 1.55;224}225#page pre.hl code {226 color: inherit;227 font-family: var(--mono);228}229.code-accordion {230 border: 1px solid var(--line);231 border-radius: var(--radius);232 overflow: hidden;233 margin: 12px 0;234 background: #17181c;235}236.code-accordion summary {237 list-style: none;238 cursor: pointer;239 display: flex;240 align-items: center;241 gap: 9px;242 padding: 10px 14px;243 font-family: var(--mono);244 font-size: 13px;245 color: #e7e7ea;246 background: #1e2027;247 user-select: none;248}249.code-accordion summary::-webkit-details-marker {250 display: none;251}252.code-accordion summary::before {253 content: "▸";254 color: var(--accent);255 transition: transform 0.12s;256}257.code-accordion[open] summary::before {258 transform: rotate(90deg);259}260.code-accordion .code-ico {261 color: var(--accent);262 font-weight: 700;263}264.code-accordion pre.hl {265 margin: 0;266 border-radius: 0;267}268.tok-comment {269 color: #7a7d87;270 font-style: italic;271}272.tok-string {273 color: #a5d6a7;274}275.tok-keyword {276 color: #fdba74;277}278.tok-number {279 color: #7fd0e0;280}281 282#page a {283 color: var(--accent);284}285 286#page ul {287 padding-left: 20px;288}289 290.ts {291 font-family: var(--mono);292 font-size: 12px;293 color: var(--muted);294 background: none;295 padding: 0;296}297 298/* ---- unfurl cards ---- */299.unfurl {300 display: block;301 border: 1px solid var(--line);302 border-radius: var(--radius);303 background: var(--panel);304 margin: 12px 0;305 overflow: hidden;306 text-decoration: none;307 color: inherit;308 transition: border-color 0.14s, box-shadow 0.14s;309}310.unfurl:hover {311 border-color: #cfcbe6;312 box-shadow: 0 4px 18px rgba(30, 20, 80, 0.06);313}314 315.unfurl-body {316 padding: 13px 16px;317 display: flex;318 gap: 12px;319 align-items: flex-start;320}321 322.unfurl-ico {323 font-size: 20px;324 line-height: 1.3;325 flex: 0 0 auto;326}327 328.unfurl-main {329 min-width: 0;330 flex: 1;331}332 333.unfurl-kind {334 font-family: var(--mono);335 font-size: 10.5px;336 text-transform: uppercase;337 letter-spacing: 0.08em;338 color: var(--accent);339 font-weight: 600;340}341 342.unfurl-title {343 font-weight: 650;344 font-size: 15px;345 margin: 1px 0 2px;346 white-space: nowrap;347 overflow: hidden;348 text-overflow: ellipsis;349}350 351.unfurl-desc {352 color: var(--muted);353 font-size: 13.5px;354 line-height: 1.45;355}356 357.unfurl-meta {358 margin-top: 6px;359 display: flex;360 flex-wrap: wrap;361 gap: 6px;362}363 364.chip {365 font-size: 11.5px;366 background: var(--code-bg);367 border-radius: 999px;368 padding: 2px 9px;369 color: var(--muted);370 font-family: var(--mono);371}372 373.unfurl-raw {374 font-family: var(--mono);375 font-size: 11px;376 color: var(--muted);377 border-top: 1px solid var(--line);378 padding: 7px 16px;379 white-space: nowrap;380 overflow: hidden;381 text-overflow: ellipsis;382}383 384.unfurl.embed {385 padding: 0;386 overflow: hidden;387}388.embed-head {389 display: flex;390 align-items: center;391 gap: 10px;392 padding: 10px 14px;393 border-bottom: 1px solid var(--line);394}395.embed-head .unfurl-kind {396 flex: 0 0 auto;397}398.embed-title {399 flex: 1;400 min-width: 0;401 font-weight: 650;402 font-size: 14px;403 color: var(--ink);404 text-decoration: none;405 white-space: nowrap;406 overflow: hidden;407 text-overflow: ellipsis;408}409.embed-title:hover {410 color: var(--accent);411}412.embed-open {413 flex: 0 0 auto;414 font-family: var(--mono);415 font-size: 12px;416 color: var(--accent);417 text-decoration: none;418}419.embed-frame {420 display: block;421 width: 100%;422 height: 560px;423 border: 0;424 background: var(--code-bg);425}426 427.unfurl.image {428 padding: 0;429}430.unfurl.image img {431 display: block;432 width: 100%;433 height: auto;434 max-height: 460px;435 object-fit: contain;436 background: var(--code-bg);437}438 439.artifact-chip {440 border: 1px solid var(--line);441 background: var(--panel);442 border-radius: var(--radius);443 padding: 10px 14px;444 margin: 8px 0;445 font-size: 14px;446}447.artifact-chip code {448 color: var(--accent);449}450 451/* ---- task board ---- */452.board-wrap {453 overflow-x: auto;454 border: 1px solid var(--line);455 border-radius: var(--radius);456 margin: 12px 0 20px;457 background: var(--panel);458}459table.board {460 border-collapse: collapse;461 width: 100%;462 font-size: 14px;463}464table.board th,465table.board td {466 text-align: left;467 padding: 9px 14px;468 border-bottom: 1px solid var(--line);469 vertical-align: top;470}471table.board thead th {472 background: var(--accent-soft);473 font-size: 12px;474 text-transform: uppercase;475 letter-spacing: 0.05em;476 color: #9a4a12;477 font-weight: 600;478 border-bottom: 1px solid var(--line);479}480table.board tbody tr:last-child td {481 border-bottom: none;482}483table.board .col-check {484 text-align: center;485 width: 92px;486 white-space: nowrap;487}488table.board tr.section-row td {489 background: var(--accent-soft);490 text-align: center;491 font-weight: 700;492 font-size: 13px;493 color: var(--accent-strong);494 padding: 7px 14px;495 letter-spacing: 0.02em;496}497.box {498 display: inline-flex;499 align-items: center;500 justify-content: center;501 width: 18px;502 height: 18px;503 border: 1.5px solid #cfcbe0;504 border-radius: 5px;505 font-size: 12px;506 color: #fff;507 line-height: 1;508}509.box.on {510 background: var(--accent);511 border-color: var(--accent);512}513.who-chip {514 display: inline-block;515 padding: 3px 12px;516 border-radius: 999px;517 font-size: 12.5px;518 font-weight: 600;519 white-space: nowrap;520}521.who-chip.muted {522 background: var(--code-bg);523 color: var(--muted);524 font-weight: 500;525}526 527/* ---- status badges + clickable rows ---- */528table.board .col-status {529 width: 130px;530 white-space: nowrap;531}532.badge {533 display: inline-block;534 padding: 3px 11px;535 border-radius: 999px;536 font-size: 12px;537 font-weight: 600;538 letter-spacing: 0.01em;539}540.badge.gray {541 background: var(--code-bg);542 color: var(--muted);543}544.badge.amber {545 background: var(--accent-soft);546 color: #b45309;547}548.badge.green {549 background: #e6f7ee;550 color: #1a8a55;551}552.badge.red {553 background: #fde8ec;554 color: #c62a4b;555}556table.board tr.linked-row {557 cursor: pointer;558}559table.board tr.linked-row:hover td {560 background: var(--accent-soft);561}562table.board tr.linked-row a {563 color: var(--ink);564 font-weight: 600;565 text-decoration: none;566}567table.board tr.linked-row:hover a {568 color: var(--accent-strong);569}570 571/* ---- connect footer + modal ---- */572#sidebar-foot {573 margin-top: auto;574 padding-top: 14px;575 border-top: 1px solid rgba(255, 255, 255, 0.1);576}577 578#connect-btn {579 width: 100%;580 display: flex;581 align-items: center;582 gap: 8px;583 background: rgba(255, 255, 255, 0.05);584 color: #c3c4cb;585 border: 1px solid rgba(255, 255, 255, 0.12);586 border-radius: 9px;587 padding: 9px 12px;588 font-size: 13.5px;589 font-family: var(--sans);590 cursor: pointer;591 transition: background 0.12s, color 0.12s, border-color 0.12s;592}593#connect-btn:hover {594 background: rgba(249, 115, 22, 0.14);595 border-color: rgba(249, 115, 22, 0.4);596 color: #fdba74;597}598#connect-btn .ico {599 font-size: 15px;600}601 602#modal[hidden] {603 display: none;604}605#modal {606 position: fixed;607 inset: 0;608 z-index: 100;609 display: flex;610 align-items: center;611 justify-content: center;612 padding: 24px;613}614.modal-backdrop {615 position: absolute;616 inset: 0;617 background: rgba(20, 18, 30, 0.5);618 backdrop-filter: blur(2px);619}620.modal-card {621 position: relative;622 background: var(--panel);623 border-radius: 16px;624 width: 100%;625 max-width: 620px;626 max-height: 85vh;627 overflow-y: auto;628 box-shadow: 0 24px 70px rgba(20, 15, 50, 0.28);629}630.modal-head {631 display: flex;632 align-items: center;633 justify-content: space-between;634 gap: 12px;635 padding: 18px 22px;636 border-bottom: 1px solid var(--line);637 position: sticky;638 top: 0;639 background: var(--panel);640}641.modal-title {642 display: flex;643 align-items: center;644 gap: 10px;645 font-family: var(--serif);646 font-size: 21px;647 letter-spacing: -0.01em;648}649.modal-logo {650 width: 26px;651 height: 26px;652 object-fit: contain;653}654.modal-actions {655 display: flex;656 align-items: center;657 gap: 8px;658}659.btn {660 font-family: var(--sans);661 font-size: 13.5px;662 font-weight: 600;663 border: 1px solid var(--line);664 background: var(--panel);665 color: var(--ink);666 border-radius: 9px;667 padding: 8px 13px;668 cursor: pointer;669 transition: background 0.12s, border-color 0.12s, color 0.12s;670}671.btn:hover {672 border-color: var(--accent);673 color: var(--accent-strong);674}675.btn.copied {676 border-color: #1a8a55;677 color: #1a8a55;678}679.btn.icon {680 font-size: 18px;681 line-height: 1;682 padding: 6px 11px;683 font-weight: 400;684}685.modal-body {686 padding: 20px 22px 26px;687}688.modal-intro {689 margin: 0 0 20px;690 color: var(--muted);691 line-height: 1.55;692}693#connect-steps {694 list-style: none;695 margin: 0;696 padding: 0;697}698#connect-steps li {699 margin-bottom: 18px;700}701.step-title {702 font-weight: 600;703 font-size: 14.5px;704 margin-bottom: 8px;705}706.codeblock {707 display: flex;708 align-items: center;709 gap: 8px;710 background: #17181c;711 border-radius: 10px;712 padding: 11px 12px 11px 15px;713}714.codeblock code {715 flex: 1;716 min-width: 0;717 overflow-x: auto;718 white-space: nowrap;719 font-family: var(--mono);720 font-size: 13px;721 color: #f0efff;722 background: none;723 padding: 0;724}725.codeblock .copy {726 flex: 0 0 auto;727 background: rgba(255, 255, 255, 0.08);728 color: #c3c4cb;729 border: 1px solid rgba(255, 255, 255, 0.14);730 border-radius: 7px;731 width: 30px;732 height: 30px;733 font-size: 14px;734 cursor: pointer;735 transition: background 0.12s, color 0.12s;736}737.codeblock .copy:hover {738 background: rgba(249, 115, 22, 0.2);739 color: #fdba74;740}741.codeblock .copy.copied {742 color: #52d08a;743}744 745@media (max-width: 720px) {746 #app {747 flex-direction: column;748 }749 #sidebar {750 width: 100%;751 flex: none;752 height: auto;753 position: static;754 }755 #content {756 padding: 28px 20px 80px;757 }758}759