File size: 5,831 Bytes
3972381 75503a8 3972381 1dbe522 3972381 66a69dd 3972381 f2bb329 66a69dd 22b0ca4 3972381 1dbe522 3972381 1dbe522 3972381 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | :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; }
|