| :root { |
| --bg: #F2F0EC; --card: #fff; --soft: #FCFBF9; --line: #EDEAE4; --line2: #F4F2EE; --border: #C9C4BB; |
| --ink: #191A19; --ink2: #57544F; --ink3: #6E6A63; --hover: #F7F5F1; |
| --teal: oklch(0.48 0.11 195); --teal2: oklch(0.62 0.11 195); --red: oklch(0.55 0.14 25); |
| --mono: 'Azeret Mono', ui-monospace, monospace; --sans: Figtree, system-ui, sans-serif; |
| } |
| * { box-sizing: border-box; } |
| [hidden] { display: none !important; } |
| body { margin: 0; background: var(--bg); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; } |
|
|
| .layout { max-width: 1320px; margin: 24px auto; padding: 0 16px; } |
| .card { background: var(--card); border: 1px solid #E4E1DB; border-radius: 10px; overflow: hidden; } |
|
|
| .top { display: flex; align-items: baseline; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--line); } |
| .logo { font: 500 15px var(--mono); letter-spacing: .14em; } |
| .tagline { font-size: 14px; color: var(--ink2); } |
|
|
| .searchbar { padding: 22px 28px; border-bottom: 1px solid var(--line); background: var(--soft); display: flex; flex-direction: column; gap: 12px; } |
| .searchbar .row { align-items: stretch; } |
| #input { flex: 1 1 auto; min-width: 0; height: 50px; border: 1.5px solid var(--border); border-radius: 8px; padding: 13px 16px; |
| font: 400 17px/22px var(--mono); color: var(--ink); background: #fff; outline: none; resize: none; |
| overflow-y: auto; white-space: pre-wrap; word-break: break-all; } |
| #input:focus { border-color: var(--ink); } |
| .searchbar .row #run { height: auto; } |
| .collapsed { flex: 1 1 auto; min-width: 0; height: 50px; display: flex; align-items: center; |
| border: 1.5px solid var(--border); border-radius: 8px; padding: 0 16px; cursor: pointer; background: #fff; } |
| .collapsed:hover { border-color: var(--ink); } |
| .collapsed-name { font: 400 15px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .collapsed-name.placeholder { color: var(--ink2); font-style: italic; } |
| .row { display: flex; align-items: center; gap: 12px; } |
| .row.hint { min-height: 20px; } |
| .btn { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border: 1.5px solid var(--border); |
| background: #fff; color: var(--ink); font: 600 15px var(--sans); border-radius: 8px; cursor: pointer; } |
| .btn:hover { border-color: var(--ink); } |
| .btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; } |
| .btn.dark:hover { background: #000; } |
| .btn.small { height: 36px; padding: 0 16px; font: 500 13px var(--sans); } |
| .status { font: 400 13.5px var(--mono); color: var(--teal2); } |
| .status.err { color: var(--red); } |
|
|
| .section { padding: 22px 28px; border-bottom: 1px solid var(--line); } |
| .h2 { font: 600 16px var(--sans); margin: 0 0 14px; } |
|
|
| .genome { display: flex; align-items: flex-end; gap: 36px; padding: 22px 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } |
| .genome .id { display: flex; flex-direction: column; gap: 6px; min-width: 0; } |
| .genome .acc { font: 500 19px var(--mono); word-break: break-all; } |
| .genome .name { font-size: 15px; color: var(--ink2); } |
| .facts { margin-left: auto; display: flex; gap: 32px; flex-wrap: wrap; } |
| .fact { display: flex; flex-direction: column; gap: 4px; } |
| .fact span { font-size: 11.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; } |
| .fact b { font: 400 16px var(--mono); } |
|
|
| .controls { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; } |
| .control-group { display: flex; flex-direction: column; gap: 5px; } |
| .control-group label { font: 500 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); } |
| .control-group select { height: 34px; border: 1.5px solid var(--border); border-radius: 6px; padding: 0 10px; |
| font: 400 13.5px var(--sans); color: var(--ink); background: #fff; } |
| .control-group input[type=range] { width: 180px; accent-color: var(--ink); } |
|
|
| .tabs { display: flex; align-items: center; gap: 26px; padding: 0 28px; border-bottom: 1px solid var(--line); } |
| .tab { font: 400 15px var(--sans); color: var(--ink2); padding: 16px 0; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left: 0; border-right: 0; border-top: 0; } |
| .tab.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); } |
|
|
| .legend { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--soft); } |
| .legend span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); } |
| .sw { flex: none; width: 10px; height: 10px; border-radius: 2px; display: inline-block; } |
|
|
| table.grid { width: 100%; border-collapse: collapse; font: 400 13.5px var(--mono); color: var(--ink2); } |
| table.grid th { text-align: left; padding: 9px 10px; background: var(--soft); border-bottom: 1px solid var(--line); |
| font: 500 11.5px var(--mono); letter-spacing: .05em; color: var(--ink3); position: sticky; top: 0; } |
| table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line2); } |
| table.grid tr:hover td { background: var(--hover); } |
| table.grid .ink { color: var(--ink); } |
| table.grid a { color: var(--teal); } |
| table.grid a:hover { text-decoration: underline; } |
|
|
| .scroll-pane { max-height: 640px; overflow-y: auto; } |
|
|
| .box { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid #E4E1DB; border-radius: 8px; background: #fff; margin-top: 14px; } |
| .box .t { font: 600 14px var(--sans); color: var(--ink); } |
| .box .s { font: 400 12px var(--mono); color: var(--ink2); } |
| .box pre { font: 400 12px/1.5 var(--mono); color: var(--ink2); background: var(--soft); border-radius: 6px; |
| padding: 10px; max-height: 320px; overflow: auto; white-space: pre-wrap; margin: 0; } |
|
|
| #synteny-plot { padding: 8px 0; overflow-x: auto; } |
|
|
