enhance(zotero): polish ui details of the zotero search component

This commit is contained in:
charlie
2023-08-09 12:16:48 +08:00
committed by Tienson Qin
parent 248b83525a
commit 1d7b6c9999
4 changed files with 164 additions and 129 deletions

View File

@@ -8,13 +8,13 @@
}
.form-select {
@apply py-2;
min-width: 20rem;
@apply py-2;
min-width: 20rem;
}
.form-input {
@apply py-2;
min-width: 20rem;
@apply py-2;
min-width: 20rem;
}
svg {
@@ -22,6 +22,26 @@
}
}
.zotero-search {
@apply w-[80vw] sm:w-[380px] lg:w-[620px];
> .input-wrap {
@apply relative p-2;
> input {
@apply p-1.5 border rounded text-sm;
color: var(--ls-primary-text-color);
border-color: var(--ls-secondary-border-color);
background-color: var(--ls-secondary-background-color);
}
.icon-loading {
@apply absolute top-4 right-4 opacity-75 scale-[.7];
}
}
}
.zotero-search-item-loading-indicator {
position: absolute;
top: 0;
@@ -37,6 +57,10 @@
align-items: center;
}
.zotero-search-item {
border-bottom-color: var(--ls-border-color);
}
.zotero-search-item:hover {
background-color: var(--ls-secondary-background-color);
}