/* Source module: input.css */ .field { position: relative; height: 30px; min-width: 210px; display: inline-flex; align-items: center; background: linear-gradient(#0b0c0d, #000100); border: 1px solid var(--brass-dark); color: var(--gold); box-shadow: inset 0 0 0 1px #050505; } .field.focus { border-color: var(--focus); box-shadow: inset 0 0 0 1px #071722, 0 0 0 1px #24617c; } .field.disabled { border-color: #343331; color: var(--disabled); background: #101110; } .field-label { padding: 0 9px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .field.placeholder { color: var(--text-3); } .field.placeholder .field-label { opacity: 0.62; } .caret-line { width: 1px; height: 16px; background: #f2f4ef; margin-left: 1px; box-shadow: 0 0 2px #fff; } .field-action { align-self: stretch; min-width: 30px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #6c542d; background: linear-gradient(#263d68, #172747); } .field-action img { max-width: 17px; max-height: 16px; image-rendering: pixelated; } .input-state-grid { gap: 7px 12px; } .input-state-grid .sample-label { margin-bottom: 4px; } .input-state-grid .field { width: 100%; } .command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 60px; } .command-grid .sample-label { margin-bottom: 4px; } .command-field { width: 100%; } .command-prefix { align-self: stretch; min-width: 52px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-right: 1px solid #5e4c2d; background: #191712; color: #d7c47e; } .command-prefix.green { color: #9bd8a7; } .command-prefix.mini { min-width: 42px; height: 20px; margin-right: 8px; border: 1px solid #4f422a; background: #17150f; } .command-query { flex: 1; padding: 0 8px; color: var(--text); } .command-open-demo { position: relative; } .command-suggestions { position: absolute; z-index: 3; left: 0; right: 0; top: 49px; border: 1px solid #5a4828; background: #020302; box-shadow: 0 8px 16px #000; } .command-suggestions > div { height: 26px; padding: 2px 6px; display: flex; align-items: center; border-bottom: 1px solid #25231f; color: var(--gold); } .number-inline { width: calc(50% - 6px); display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; } .number-inline .sample-label { margin: 0 0 4px; } .input-specs { margin-top: 10px; } .select-field { justify-content: space-between; } .select-field[role="button"], .select-field[role="combobox"] { cursor: pointer; } .select-field.has-select-icon::after { --select-top:var(--control-blue-top); --select-bottom:var(--control-blue-bottom); --select-edge-top:var(--control-edge-top); --select-edge-bottom:var(--control-edge-bottom); content:""; box-sizing:border-box; flex:0 0 21px; height:18px; align-self:center; margin:0 3px 0 5px; border:1px solid transparent; background: linear-gradient(180deg,var(--select-top),var(--select-bottom)) padding-box, linear-gradient(180deg,var(--select-edge-top),var(--select-edge-bottom)) border-box; box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.025); } .select-field.has-select-icon::before { content:""; position:absolute; z-index:1; top:50%; right:8px; width:11px; height:6px; background:var(--control-glyph); clip-path:polygon(0 0,100% 0,50% 100%); transform:translateY(-50%); pointer-events:none; } .select-field.has-select-icon:hover::after, .select-field.has-select-icon.is-hover::after { --select-top:#29457f;--select-bottom:#24386a;--select-edge-top:#725f4e;--select-edge-bottom:#524444; } .select-field.has-select-icon:active::after, .select-field.has-select-icon.is-pressed::after { --select-top:#29457f;--select-bottom:#24386a;--select-edge-top:#725f4e;--select-edge-bottom:#524444;transform:translateY(1px); } .select-field.has-select-icon:active::before, .select-field.has-select-icon.is-pressed::before { transform:translateY(calc(-50% + 1px)); } .select-field:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; } .spinner { width: 23px; align-self: stretch; border-left: 1px solid #4b412d; } .spin-half { appearance: none; width: 100%; height: 50%; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; } .spin-half + .spin-half { border-top: 1px solid #2e2d28; } .spin-half:hover { background: rgba(255, 255, 255, 0.035); } .spin-half:active { background: rgba(0, 0, 0, 0.35); } .tri-up, .tri-down { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; } .tri-up { border-bottom: 8px solid #b99550; } .tri-down { border-top: 8px solid #b99550; }