zotero/scss/win/components/_input.scss
Dan Stillman 77a3a8815e
Some checks are pending
CI / Detect changes (push) Waiting to run
CI / Test () (push) Blocked by required conditions
CI / Test (macOS NFS) (push) Blocked by required conditions
CI / Test (Windows arm64) (push) Blocked by required conditions
CI / Test (Windows x64) (push) Blocked by required conditions
CI / Utilities Tests (push) Waiting to run
CI / Build, Upload (push) Waiting to run
Add a query syntax to the quick search
Zotero.SearchQuery turns a query like `by:smith after:2020 tag:"to read"
crispr` or `creator is smith and (tag is foo or bar)` into a
Zotero.Search, matching whatever text is left over using the current
search mode. Anything that doesn't look like a clause is free text, so a
DOI or a title with a colon in it is matched literally.

The search box syntax-highlights the parts of recognized conditions and
offers autocomplete for condition names, for the values of conditions
that have a fixed set of them (like item type), and for tags and
creators from the selected libraries.
2026-08-20 16:09:20 -04:00

132 lines
3 KiB
SCSS

@mixin windows-input-hover {
@media (prefers-color-scheme: light) {
background-color: var(--color-background50);
background-image: none;
}
@media (prefers-color-scheme: dark) {
background-color: var(--fill-quarternary);
background-image: none;
}
}
@mixin windows-input-active {
outline: none;
background-clip: border-box, padding-box;
background-repeat: no-repeat;
@media (prefers-color-scheme: light) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue);
background-color: unset;
background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}
@media (prefers-color-scheme: dark) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue);
background-color: unset;
background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
linear-gradient(var(--fill-senary), var(--fill-senary));
}
}
@mixin windows-input-disabled {
@media (prefers-color-scheme: light) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--fill-quinary);
background-color: var(--color-background70);
background-image: none;
}
@media (prefers-color-scheme: dark) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--fill-quinary);
background-color: var(--fill-senary);
background-image: none;
}
}
:is(
input:where(
[type=color], [type=date], [type=datetime-local], [type=email], [type=month],
[type=number], [type=password], [type=search], [type=tel], [type=text], [type=time],
[type=url], [type=week], [type=autocomplete],
:not([type])
),
textbox,
search-textbox,
query-textbox,
textarea
):where(:not([no-native])) {
appearance: none;
height: 26px;
padding: 0;
padding-inline-start: 5px;
border: solid 1px transparent;
border-radius: 3px;
background-origin: border-box;
background-clip: padding-box;
// Overwrite default background color
background-color: unset;
@media (prefers-color-scheme: light) {
border: 1px solid rgba(0, 0, 0, 0.0578);
border-bottom-color: rgba(0, 0, 0, 0.4458);
background-color: var(--color-background70);
}
@media (prefers-color-scheme: dark) {
border: 1px solid rgba(255, 255, 255, 0.08);
border-bottom-color: rgba(255, 255, 255, 0.5442);
background-color: var(--fill-quinary);
}
&:not([disabled]):not([readonly]) {
&::placeholder {
color: var(--fill-secondary);
}
&:hover {
@include windows-input-hover;
}
&:active,
&:focus,
&:focus-visible {
@include windows-input-active;
}
&::selection {
background-color: var(--accent-blue);
color: var(--accent-white);
}
&:-moz-window-inactive {
&::selection {
background-color: var(--tag-gray);
}
}
}
&:disabled,
&:read-only {
&::placeholder {
color: var(--fill-tertiary);
}
&::selection {
background-color: var(--tag-gray);
color: var(--accent-white);
}
@include windows-input-disabled;
}
}
textarea:not([no-native]) {
height: unset;
}