/* bounty dashboard: custom dropdowns */ .dd { position: relative; width: 100%; min-width: 0; } .dd.compact { width: auto; } .add-row .dd { flex: 1; min-width: 180px; width: auto; } .dd-btn { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 13px; border-radius: 10px; border: 1px solid transparent; text-align: left; color: #e9e9e9; font-size: 13.5px; background: linear-gradient(180deg, #121212, #0d0d0d) padding-box, var(--edge) border-box; transition: background .2s, box-shadow .2s; } .dd-btn:hover { background: linear-gradient(180deg, #151515, #0f0f0f) padding-box, var(--edge-hi) border-box; } .dd-btn:focus-visible, .dd.is-open .dd-btn { outline: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.05); background: linear-gradient(180deg, #161616, #101010) padding-box, var(--edge-hi) border-box; } .dd-val { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .dd-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-ph { flex: 1; color: #7c7c7c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-chev { font-size: 10px; color: #6f6f6f; transition: transform .3s var(--spring); flex: none; } .dd.is-open .dd-chev { transform: rotate(180deg); color: #cfcfcf; } .dd-ic { width: 16px; text-align: center; font-size: 12px; color: #8e8e8e; flex: none; } .dd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.04); } /* the small "+ Add role" style used inside chip lists */ .dd.compact .dd-btn { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; gap: 8px; } .dd.action .dd-ph { color: #bdbdbd; } .dd.action .dd-btn:hover .dd-ph { color: #fff; } /* the menu itself, placed on */ .dd-menu { position: fixed; z-index: 200; display: flex; flex-direction: column; overflow: hidden; border-radius: 13px; border: 1px solid transparent; background: linear-gradient(180deg, #171717, #111) padding-box, var(--edge-hi) border-box; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .16s var(--ease), transform .22s var(--spring); } .dd-menu.up { transform: translateY(6px) scale(.98); transform-origin: bottom center; } .dd-menu.open { opacity: 1; transform: none; } .dd-search-wrap { position: relative; padding: 8px 8px 4px; flex: none; } .dd-search-wrap i { position: absolute; left: 20px; top: 19px; font-size: 11px; color: #666; } .dd-search { width: 100%; height: 34px; padding: 0 10px 0 30px; border-radius: 9px; outline: 0; font-size: 13px; color: #eee; border: 1px solid #242424; background: #0c0c0c; transition: border-color .15s; } .dd-search:focus { border-color: #3a3a3a; } .dd-list { overflow-y: auto; padding: 4px 6px 6px; overscroll-behavior: contain; } .dd-list::-webkit-scrollbar { width: 8px; } .dd-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; border: 2px solid #141414; } .dd-group { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c6c6c; padding: 10px 8px 4px; position: sticky; top: -4px; background: linear-gradient(#151515 70%, rgba(21,21,21,0)); } .dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: #cfcfcf; transition: background .12s, color .12s; } .dd-item.hot { background: #222; color: #fff; } .dd-item.hot .dd-ic { color: #d6d6d6; } .dd-item.on { color: #fff; font-weight: 600; } .dd-hint { margin-left: auto; font-size: 11px; color: #777; background: #1c1c1c; border-radius: 6px; padding: 1px 7px; } .dd-tick { margin-left: auto; font-size: 11px; color: #e8e8e8; } .dd-hint + .dd-tick { margin-left: 8px; } .dd-empty { padding: 16px 10px; text-align: center; color: #6f6f6f; font-size: 13px; } /* the Mod Cases filter bar */ .filterbar .dd { width: 200px; } @media (max-width: 980px) { .filterbar .dd { width: 100%; } } @media (prefers-reduced-motion: reduce) { .dd-menu { transition: none; } }