| 1 | /* list ------------------------------------------------------------------- */ |
| 2 | |
| 3 | .card.access { display: grid; padding: 4px; margin-bottom: 2px; } |
| 4 | |
| 5 | .access-row { |
| 6 | display: grid; |
| 7 | grid-template-columns: 112px 36px 1fr; |
| 8 | align-items: center; |
| 9 | gap: 12px; |
| 10 | min-height: 30px; |
| 11 | padding: 3px 10px; |
| 12 | border: 0; |
| 13 | border-radius: var(--radius); |
| 14 | background: none; |
| 15 | text-align: left; |
| 16 | cursor: pointer; |
| 17 | transition: background-color 150ms; |
| 18 | } |
| 19 | |
| 20 | .access-row:hover { background: var(--hover); } |
| 21 | .access-row[aria-pressed="true"] { background: var(--accent-wash); } |
| 22 | .access-row .who { font-weight: 600; } |
| 23 | .access-row[aria-pressed="true"] .who { color: var(--accent); } |
| 24 | .access-row .num { color: var(--muted); } |
| 25 | |
| 26 | .grants { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--text-2); } |
| 27 | .grant { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } |
| 28 | .grant :is(img, .monogram, .icon) { flex: none; width: 15px; height: 15px; font-size: 9px; border-radius: 22%; } |
| 29 | .grant.dash .icon { color: var(--muted); border-radius: 0; } |
| 30 | |
| 31 | .users-toolbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; } |
| 32 | .users-toolbar .count { margin-left: 6px; opacity: 0.7; font-variant-numeric: tabular-nums; } |
| 33 | |
| 34 | .users-toolbar .search-box { width: 260px; } |
| 35 | |
| 36 | .chip.filter { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-wash); color: var(--accent); } |
| 37 | .chip.filter:hover { background: var(--raised); color: var(--text); } |
| 38 | |
| 39 | .users-table { overflow: auto; } |
| 40 | .users-table table.data td { padding-block: 5px; white-space: nowrap; } |
| 41 | .users-table tbody tr { cursor: pointer; } |
| 42 | .users-table tbody tr:hover { background: var(--hover); } |
| 43 | .users-table tbody tr.selected { background: var(--accent-wash); } |
| 44 | .users-table .user-select { width: 36px; } |
| 45 | .users-table .user-select .checkbox { display: flex; justify-content: center; padding: 4px 0; } |
| 46 | .users-table tr.disabled td { color: var(--muted); } |
| 47 | .users-table td.username a { font-weight: 600; border-radius: 3px; } |
| 48 | .users-table tr.disabled td.username a { font-weight: 500; } |
| 49 | .users-table td.groups { width: 1%; } |
| 50 | .users-table td.groups .chips { flex-wrap: nowrap; } |
| 51 | |
| 52 | /* user page -------------------------------------------------------------- */ |
| 53 | |
| 54 | .user-page .page-head { margin-bottom: 12px; } |
| 55 | .user-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; } |
| 56 | .user-grid .column { flex: 1 1 320px; display: grid; gap: 8px; min-width: 0; } |
| 57 | .user-grid .card { padding: 10px 14px 12px; } |
| 58 | .user-grid h2.card-title { margin: 0 0 8px; color: var(--text); align-items: center; min-height: 26px; } |
| 59 | .user-grid h2.card-title.opens { margin-top: 14px; } |
| 60 | .user-grid p { margin: 0; font-size: 13px; } |
| 61 | .user-grid table.data td { padding: 4px 6px; } |
| 62 | .user-grid table.data tr:last-child td { border-bottom: 0; } |
| 63 | |
| 64 | .toggles { display: flex; flex-wrap: wrap; gap: 6px; } |
| 65 | |
| 66 | /* A group or step that's on or off: a button that acts at once, or a checkbox in a form. */ |
| 67 | .chip.toggle { position: relative; padding: 0 10px; border: 1px dashed var(--axis); background: none; color: var(--text-2); cursor: pointer; } |
| 68 | .chip.toggle:hover:not(:disabled) { border-color: var(--accent); background: none; color: var(--text); } |
| 69 | .chip.toggle:is([aria-pressed="true"], :has(:checked)) { border: 1px solid var(--accent); background: var(--accent-wash); color: var(--text); } |
| 70 | .chip.toggle:disabled { opacity: 0.6; cursor: progress; } |
| 71 | .chip.toggle input { position: absolute; opacity: 0; pointer-events: none; } |
| 72 | .chip.toggle:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; } |
| 73 | |
| 74 | .fields { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 4px 14px; font-size: 13px; } |
| 75 | .fields .label { color: var(--muted); } |
| 76 | .fields .field { display: grid; gap: 2px; min-width: 0; } |
| 77 | .field-error { color: color-mix(in srgb, var(--critical) 80%, var(--text)); font-size: 12px; } |
| 78 | |
| 79 | input.inline { |
| 80 | width: 100%; |
| 81 | height: 28px; |
| 82 | padding: 0 8px; |
| 83 | border: 1px solid var(--line); |
| 84 | border-radius: 6px; |
| 85 | background: var(--well); |
| 86 | color: var(--text); |
| 87 | font: inherit; |
| 88 | transition: border-color 150ms, box-shadow 150ms; |
| 89 | } |
| 90 | |
| 91 | input.inline:hover { border-color: var(--axis); } |
| 92 | input.inline:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } |
| 93 | input.inline[aria-invalid="true"] { border-color: var(--critical); } |
| 94 | input.inline[aria-busy="true"] { cursor: progress; opacity: 0.7; } |
| 95 | input.inline::placeholder { color: var(--muted); } |
| 96 | |
| 97 | a.grant { border-radius: 3px; transition: color 150ms; } |
| 98 | a.grant:hover { color: var(--accent); } |
| 99 | .passkeys span + span::before { content: ", "; } |