Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
8.3 kB · 331 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332@property --bottom-fade { syntax: "<length>"; inherits: false; initial-value: 0px;}
@keyframes scroll { 0% { --bottom-fade: 20px; } 90% { --bottom-fade: 20px; } 100% { --bottom-fade: 0; }}
[data-component="list"] { display: flex; flex-direction: column; gap: 12px; overflow: hidden; /*padding: 0 12px;*/
[data-slot="list-search-wrapper"] { display: flex; flex-shrink: 0; align-items: center; gap: 8px; align-self: stretch; margin-bottom: 4px;
> [data-component="icon-button-v2"] { width: 24px; height: 24px; flex-shrink: 0; background-color: transparent; opacity: 0.5; transition: opacity 0.15s ease;
&:hover:not(:disabled), &:focus-visible:not(:disabled), &:active:not(:disabled) { background-color: transparent; opacity: 0.7; }
&:hover:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-hover); }
&:active:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-active); } } }
[data-slot="list-search"] { display: flex; flex: 1; padding: 8px; align-items: center; gap: 12px;
border-radius: var(--radius-md); background: var(--surface-base);
[data-slot="list-search-container"] { display: flex; align-items: center; gap: 8px; flex: 1 0 0; max-height: 20px;
[data-slot="list-search-input"] { width: 100%;
&[data-slot="input-input"] { line-height: 20px; max-height: 20px; } } }
> [data-component="icon-button-v2"] { width: 20px; height: 20px; background-color: transparent; opacity: 0.5; transition: opacity 0.15s ease;
&:hover:not(:disabled), &:focus-visible:not(:disabled), &:active:not(:disabled) { background-color: transparent; opacity: 0.7; }
&:hover:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-hover); }
&:active:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-active); } }
> [data-component="icon-button-v2"] { background-color: transparent;
&:hover:not(:disabled), &:focus:not(:disabled), &:active:not(:disabled) { background-color: transparent; }
&:hover:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-hover); }
&:active:not(:disabled) [data-slot="icon-svg"] { color: var(--icon-active); } } }
[data-slot="list-scroll"] { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000); animation: scroll; animation-timeline: --scroll; scroll-timeline: --scroll y; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; }
[data-slot="list-empty-state"] { display: flex; padding: 32px 48px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; align-self: stretch;
[data-slot="list-message"] { display: flex; justify-content: center; align-items: center; gap: 2px; max-width: 100%; color: var(--text-weak); white-space: nowrap;
/* text-14-regular */ font-family: var(--font-family-sans); font-size: 14px; font-style: normal; font-weight: var(--font-weight-regular); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); }
[data-slot="list-filter"] { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; } }
[data-slot="list-group"] { position: relative; display: flex; flex-direction: column;
&:last-child { padding-bottom: 12px; }
[data-slot="list-header"] { display: flex; z-index: 10; padding: 8px 12px 8px 8px; justify-content: space-between; align-items: center; align-self: stretch; background: var(--surface-raised-stronger-non-alpha); position: sticky; top: 0;
color: var(--text-weak);
/* text-14-medium */ font-family: var(--font-family-sans); font-size: 14px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal);
&::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
&[data-stuck="true"]::after { opacity: 1; } }
[data-slot="list-items"] { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch;
[data-slot="list-item"] { display: flex; position: relative; width: 100%; padding: 6px 8px 6px 8px; align-items: center; color: var(--text-strong); scroll-margin-top: 28px;
/* text-14-medium */ font-family: var(--font-family-sans); font-size: 14px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal);
[data-slot="list-item-selected-icon"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; aspect-ratio: 1/1; [data-slot="icon-svg"] { color: var(--icon-strong-base); } } [data-slot="list-item-active-icon"] { display: none; align-items: center; justify-content: center; flex-shrink: 0; aspect-ratio: 1/1; [data-slot="icon-svg"] { color: var(--icon-strong-base); } }
[data-slot="list-item-extra-icon"] { color: var(--icon-base); margin-left: -4px; }
[data-slot="list-item-divider"] { position: absolute; bottom: 0; left: var(--list-divider-inset, 16px); right: var(--list-divider-inset, 16px); height: 1px; background: var(--border-weak-base); pointer-events: none; }
[data-slot="list-item"]:last-child [data-slot="list-item-divider"] { display: none; }
&[data-active="true"] { border-radius: var(--radius-md); background: var(--surface-raised-base-hover); [data-slot="list-item-active-icon"] { display: inline-flex; } [data-slot="list-item-extra-icon"] { display: block !important; color: var(--icon-strong-base) !important; } } &:active { background: var(--surface-raised-base-active); } &:focus-visible { outline: none; } }
[data-slot="list-item-add"] { display: flex; position: relative; width: 100%; padding: 6px 8px 6px 8px; align-items: center; color: var(--text-strong);
/* text-14-medium */ font-family: var(--font-family-sans); font-size: 14px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal);
[data-component="input"] { width: 100%; } } } } }}