From 4ce65d59ca91871cfd126497158200a818720bce Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 13 Apr 2024 13:30:08 +0200 Subject: Adding upstream version 0.13.1. Signed-off-by: Daniel Baumann --- asset/css/search-base.less | 269 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 269 insertions(+) create mode 100644 asset/css/search-base.less (limited to 'asset/css/search-base.less') diff --git a/asset/css/search-base.less b/asset/css/search-base.less new file mode 100644 index 0000000..e4af764 --- /dev/null +++ b/asset/css/search-base.less @@ -0,0 +1,269 @@ +// Style + +.search-bar .filter-input-area, +.term-input-area:not(.vertical) { + // Scrollbar style + + // Firefox + scrollbar-width: thin; + scrollbar-color: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg) transparent; + + &::-webkit-scrollbar { + display: none; + height: .5em; + } + + &:hover::-webkit-scrollbar { + display: initial; + } + + &::-webkit-scrollbar-thumb { + border-radius: .25em; + background: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg); + } +} + +.search-bar, +.term-input-area { + [data-index] input:invalid { + background-color: var(--search-term-invalid-bg, @search-term-invalid-bg); + color: var(--search-term-invalid-color, @search-term-invalid-color); + } + + [data-index] input:disabled { + background-color: var(--search-term-disabled-bg, @search-term-disabled-bg); + } + + .selected input { + background-color: var(--search-term-selected-bg, @search-term-selected-bg); + color: var(--search-term-selected-color, @search-term-selected-color); + font-style: italic; + } +} + +.search-suggestions { + background: var(--suggestions-bg, @suggestions-bg); + color: var(--suggestions-color, @suggestions-color); + border: 1px solid var(--suggestions-border-color, @suggestions-border-color); + border-bottom-right-radius: .5em; + border-bottom-left-radius: .5em; + + > ul { + list-style-type: none; + + > li { + border-top: 1px solid var(--suggestions-separation-bg, @suggestions-separation-bg); + } + > li.suggestion-title + li { + border: none; + } + > li:not(.default) + li.suggestion-title { + border: none; + } + } + + .default { + color: var(--suggestions-default-opt-color, @suggestions-default-opt-color); + font-style: italic; + + [type="button"] { + background-color: var(--suggestions-default-opt-bg, @suggestions-default-opt-bg); + } + } + + .suggestion-title { + font-size: 80%; + } + + .failure-message { + font-weight: bold; + + em { + font-weight: normal; + color: var(--suggestions-failure-message-color, @suggestions-failure-message-color); + } + } + + .nothing-to-suggest { + color: var(--suggestions-color, @suggestions-color); + } + + .relation-path { + padding: 0 .2em; + background-color: var(--suggestions-relation-path-bg, @suggestions-relation-path-bg); + } + + [type="button"] { + .appearance(none); + border: none; + background: none; + } + + [type="button"]:focus, + [type="button"].selected { + background: var(--suggestions-focus-bg, @suggestions-focus-bg); + color: var(--suggestions-focus-color, @suggestions-focus-color); + outline: none; + + .relation-path { + background-color: var(--suggestions-relation-path-focus-bg, @suggestions-relation-path-focus-bg); + } + } + + [type="button"]:not(:focus):hover, + [type="button"]:not(.selected):hover { + background: var(--suggestions-hover-bg, @suggestions-hover-bg); + } +} + +// Layout +.search-bar .filter-input-area, +.term-input-area:not(.vertical) { + overflow: auto hidden; + overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit + display: flex; + flex-wrap: nowrap; + width: 100%; + height: ~"calc(2em + 10px)"; // Search bar height + approximate scrollbar height + + // Lets inputs grow based on their contents, Inspired by https://css-tricks.com/auto-growing-inputs-textareas/ + label { + position: relative; + display: inline-block; + min-width: 2em; + height: 100%; + + &::after, + input { + width: auto; + padding: .25em .5em; + resize: none; + } + + input { + width: 100%; + position: absolute; + top: 0; + line-height: 20/12; // 20 (px) desired / default font size (px) + } + + &::after { + height: 0; + content: attr(data-label); + visibility: hidden; + white-space: nowrap; + padding: 0 7/12em; // 7 (px) desired / default font size (px) + } + } + + > label { + flex: 1 0 auto; + + &::after, + input { + max-width: none; + min-width: 8em; + } + } + + > .terms { + display: inline; + flex-shrink: 0; + + label { + margin-right: 1px; + } + } +} + +.term-input-area.vertical { + display: flex; + flex-direction: column-reverse; + + > .terms { + @gap: 1px; + @termsPerRow: 2; + + display: flex; + flex-wrap: wrap; + gap: @gap; + margin-top: @gap; + + label { + @termWidth: 100%/@termsPerRow; + @totalGapWidthPerRow: (@termsPerRow - 1) * @gap; + + min-width: ~"calc(@{termWidth} - (@{totalGapWidthPerRow} / @{termsPerRow}))"; + flex: 1 1 auto; + + input { + text-overflow: ellipsis; + } + } + } +} + +.term-input-area { + label input:focus { + @labelPad: 7/12em; + outline-width: 3px; + outline-offset: ~"calc(-@{labelPad} + 3px)"; + } +} + +.search-suggestions { + z-index: 2; // Required so that nothing else can overlap it (such as opaque elements and the impact overlay) + position: absolute; + overflow: auto; + min-width: 5em; + + &:empty { + display: none; + } + + > ul { + margin: 0; + padding: 0; + + li.suggestion-title { + padding: 1.25em .625em 0 .625em; + } + + li.failure-message { + padding: .5em 1em; + + em { + margin-right: .5em; + } + } + + li.nothing-to-suggest { + padding: .5em 1em; + } + } + + [type="button"] { + padding: .5em 1em; + display: block; + width: 100%; + text-align: left; + + &[data-class="operator"], &[data-class="logical_operator"] { + text-align: center; + } + + &.has-details { + display: flex; + align-items: baseline; + justify-content: space-between; + } + + .relation-path { + margin-left: .5em; + + &::first-line { + font-size: .8em; + } + } + } +} -- cgit v1.2.3