Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182[data-component="text-input-v2"] { box-sizing: border-box; display: flex; flex-direction: row; align-items: stretch; padding-block: 0; padding-inline: 0 8px; gap: 8px; width: 280px; height: 28px; border: 0; border-radius: 6px; outline: 1px solid transparent; outline-offset: 0; background: linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base); box-shadow: var(--v2-elevation-button-neutral); flex: none; align-self: stretch; transition: background 85ms ease-out, outline-color 85ms ease-out, box-shadow 85ms ease-out;}
[data-component="text-input-v2"][data-appearance="large"] { height: 32px;}
[data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) { background: linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)), linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);}
[data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) { outline-color: var(--v2-border-border-focus); box-shadow: none;}
[data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) { outline-color: var(--v2-state-fg-danger); box-shadow: none;}
[data-component="text-input-v2"]:where([data-disabled]) { opacity: 0.5; cursor: not-allowed;}
[data-component="text-input-v2"] [data-slot="text-input-v2-value"] { display: flex; flex-direction: row; align-items: center; align-self: stretch; padding: 0; gap: 6px; min-width: 0; flex: 1 1 auto; min-height: 0;}
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] { display: flex; flex: none; align-items: center; justify-content: center; padding-inline-start: 8px; color: var(--v2-icon-icon-muted);}
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) { display: block; flex: none;}
[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] { padding-inline-start: 0;}
[data-component="text-input-v2"] [data-slot="text-input-v2-input"] { display: block; width: 100%; min-width: 0; height: 100%; padding-block: 0; padding-inline: 8px 0; margin: 0; border: 0; background: transparent; outline: none; font-style: normal; font-weight: 440; font-size: 13px; line-height: var(--line-height-compact); letter-spacing: -0.04px; color: var(--v2-text-text-base); font-variation-settings: "slnt" 0;}
[data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder { color: var(--v2-text-text-faint); user-select: none;}
[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none;}
[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] { font-variant-numeric: tabular-nums;}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] { display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: center; flex: none; width: 20px; height: 20px; padding: 2px; gap: 3px; border: 0; border-radius: 4px; background: transparent; color: var(--v2-icon-icon-muted); cursor: pointer; outline: none;}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { background-color: var(--v2-overlay-simple-overlay-hover);}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) { background-color: var(--v2-overlay-simple-overlay-pressed);}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus { outline: none;}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible { outline: 2px solid var(--v2-border-border-focus); outline-offset: 1px;}
[data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] { cursor: not-allowed; pointer-events: none;}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] { display: block; flex: none; color: currentColor;}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] { width: 28px; height: 28px; padding: 0; border-radius: 6px; margin-inline-end: -8px;}
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] { color: var(--v2-state-fg-danger); caret-color: var(--v2-state-fg-danger);}
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder { color: var(--v2-state-fg-danger); opacity: 1;}