/* ---------- a select living in a card header ---------- */ /* Sized to read as a caption rather than as a form field — it sits where the descriptive text sits on every other card. */ select.inline-sel { padding: 2px 6px; font-size: 12px; color: var(--muted); max-width: 260px; } select.inline-sel:hover { color: var(--text); border-color: var(--accent); } /* ---------- dream panel: exclusion filters ---------- One button per kind, in the header of the card it filters. Repos and labels are two unrelated decisions, and pairing them in a two-column popup meant every rule in here had to work at half width. */ .card-filters { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } /* Both this and .expand would otherwise claim the header's slack and split it, leaving the filters stranded mid-header. */ .card-filters ~ .expand { margin-left: 6px; } .excl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: 11px; } /* The tab badge's own left margin, on top of the button's gap, reads as a space. */ .excl-btn .count { margin-left: 0; } .excl-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .excl-btn[disabled] { opacity: .45; cursor: default; } .excl-btn[disabled]:hover { border-color: var(--border); } /* Positioned by script against the button that opened it, and drawn from a layer at the end of . A card clips its overflow so its table can have rounded corners, and is a query container so its KPI strips size against it — a popup inside the header is cut off at the header's bottom edge either way, and no rule inside the card can undo that. */ .excl-pop { position: fixed; z-index: 60; left: 0; top: 0; width: min(340px, calc(100vw - 24px)); max-height: min(440px, 70vh); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); overflow: hidden; display: flex; flex-direction: column; } :root[data-theme="light"] .excl-pop { box-shadow: 0 8px 24px rgba(31,35,40,.12); } .excl-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; } /* Two buttons and a sentence in 340px: the sentence is the part that gives. */ .excl-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .excl-head .ghost { flex: none; padding: 4px 9px; font-size: 11px; } /* Only the first of the two takes the slack, so they stay a pair. */ .excl-head > button:first-of-type { margin-left: auto; } .excl-head .ghost[disabled] { opacity: .45; cursor: default; } .excl-head .ghost[disabled]:hover { border-color: var(--border); } /* The global `input[type="search"]` rule sets a 260px floor, which is right for the toolbar and too wide for this popup. Qualified with .excl-pop so it wins on specificity rather than on source order. */ .excl-pop input[type="search"] { width: 100%; min-width: 0; padding: 5px 8px; font-size: 12px; } .excl-search { flex: none; padding: 9px 12px; border-bottom: 1px solid var(--border); } .excl-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 0 8px; } /* The row pins its checkbox with absolute positioning and leaves the name an ordinary block. Flex and grid both looked right and weren't: each has free space to hand out, and each managed to hand it to the wrong place — the box ended up adrift in the middle of the row with the name crushed against the right edge. There is no free space here to distribute, so there is nothing left to distribute wrongly. */ .excl-opt { display: block; position: relative; padding: 5px 12px 5px 37px; cursor: pointer; font-size: 12px; color: var(--text); text-align: left; } .excl-opt:hover { background: var(--panel-2); } .excl-opt > input[type="checkbox"] { position: absolute; left: 12px; top: 50%; /* Half the height, rather than a translate: one fewer thing between the declared position and where the box lands. */ width: 15px; height: 15px; margin: -7px 0 0 0; accent-color: var(--accent); } .excl-opt > .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } /* What's currently hidden should be findable without reading every row. */ .excl-opt.on .nm { color: var(--accent); } .excl-sep { padding: 8px 12px 4px; margin-top: 2px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } /* A rule under the search box and above the first group draws a second line 4px below the one the search box already has. */ .excl-list > .excl-sep:first-child { border-top: none; margin-top: 0; padding-top: 2px; } /* ---------- a list that takes the slack ---------- On the overview a card is stretched to its row's height, and its row is as tall as whichever card in it has the most to say. A table just ends where its rows end, so a card whose rows are single-line sitting beside one whose titles wrap left a slab of empty card underneath it. The scroller takes the leftover height instead and keeps scrolling, which is why the module that opts in also raises its preview row count: filling the space is only an improvement if there are rows to fill it with. `flex-basis: 0` rather than auto, or the card's natural height would include all twenty-five rows and this card would set the row height instead of answering to it. The floor is what stops a card from collapsing to its header when nothing beside it is taller. */ .grid .card > .body.fill-list { display: flex; flex-direction: column; } /* `.tscroll` is a table's wrapper and `.scroll` is a list's; either one can be the thing that takes the leftover height. Both, because the two cards using this on Issue Analytics hold ranked bars rather than tables. */ .grid .card > .body.fill-list > .tscroll, .grid .card > .body.fill-list > .scroll { flex: 1 1 0; min-height: 200px; max-height: none; } /* ---------- dream panel: by label, one column per label ---------- auto-fit rather than a column count pinned to how many labels are up: the card is full width on the overview and full width again in its own tab, but the sidebar collapses under both, so the width available isn't something the label count can predict. Below the floor they wrap to a second row, which is also what six labels do on a laptop. */ .bl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border); } .bl-col { background: var(--panel); min-width: 0; display: flex; flex-direction: column; } .bl-col > header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); } /* The select is the column's title, so it takes the slack and ellipsises — "Ongoing Freeze - Do NOT Merge" is not going to fit in 240px whatever we do. */ .bl-col > header .inline-sel { flex: 1; min-width: 0; max-width: none; } .bl-col > header .count { flex: none; margin-left: 0; } .bl-del { flex: none; padding: 2px 7px; font-size: 13px; line-height: 1.2; } .bl-del:hover { color: var(--bad); border-color: var(--bad); } .bl-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; } /* A cap on the overview only. In the card's own tab the whole point is to read the lists, and there the column grows to whatever it holds. */ .grid .bl-list { max-height: 300px; } .bl-row { padding: 7px 10px; border-bottom: 1px solid var(--border); } .bl-row:last-child { border-bottom: none; } .bl-row:hover { background: var(--panel-2); } .bl-row .t { display: block; font-size: 12px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-row .t:hover { color: var(--accent); text-decoration: underline; } .bl-row .m { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; color: var(--muted); min-width: 0; } /* The repo is the part worth truncating — the age beside it is four characters and losing it costs more than losing the tail of a repo name. */ .bl-row .m > .repo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-row .m .sep { opacity: .5; } .bl-col .empty, .bl-col .more { padding: 12px 10px; font-size: 11px; } .picker { padding: 40px 0; text-align: center; } .picker h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; } .picker p { margin: 0 0 20px; color: var(--muted); font-size: 13px; } .picker .chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 720px; margin: 0 auto; } .picker .chips button { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } /* Tighter on the left when there's a face: the avatar's own round edge is already doing the work the padding would. */ .picker .chips button { padding: 5px 13px; } .picker .chips button:has(.pfp) { padding: 3px 13px 3px 4px; } .picker .chips button:hover { border-color: var(--accent); color: var(--accent); } .loading { color: var(--muted); padding: 40px 0; text-align: center; font-size: 13px; }