| | |
| | | } |
| | | |
| | | & > #search-layout { |
| | | display: flex; |
| | | display: none; |
| | | flex-direction: row; |
| | | opacity: 0; |
| | | border: 1px solid var(--lightgray); |
| | | |
| | | &.display-results { |
| | | display: flex; |
| | | } |
| | | |
| | | @media all and (min-width: $tabletBreakpoint) { |
| | | &[data-preview] { |
| | | & .result-card > p.preview { |
| | | display: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | | & > div { |
| | | // vh - #search-space.margin-top |
| | | height: calc(75vh - 12vh); |
| | |
| | | } |
| | | |
| | | @media all and (max-width: $tabletBreakpoint) { |
| | | display: block; |
| | | display: block !important; |
| | | |
| | | & > *:not(#results-container) { |
| | | display: none !important; |
| | | } |
| | |
| | | & .highlight { |
| | | background: color-mix(in srgb, var(--tertiary) 60%, transparent); |
| | | border-radius: 5px; |
| | | scroll-margin-top: 2rem; |
| | | } |
| | | |
| | | & > #preview-container { |
| | | display: block; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | box-sizing: border-box; |
| | | font-family: inherit; |
| | | color: var(--dark); |
| | | line-height: 1.5em; |
| | | font-weight: $normalWeight; |
| | | background: var(--light); |
| | | border-top-right-radius: 5px; |
| | | border-bottom-right-radius: 5px; |
| | | overflow-y: auto; |
| | | padding: 1rem; |
| | | |
| | | & .preview-inner { |
| | | margin: 0 auto; |
| | | padding: 1em; |
| | | height: 100%; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | overflow-y: auto; |
| | | font-family: inherit; |
| | | color: var(--dark); |
| | | line-height: 1.5em; |
| | | font-weight: 400; |
| | | background: var(--light); |
| | | border-top-right-radius: 5px; |
| | | border-bottom-right-radius: 5px; |
| | | box-shadow: |
| | | 0 14px 50px rgba(27, 33, 48, 0.12), |
| | | 0 10px 30px rgba(27, 33, 48, 0.16); |
| | | } |
| | | |
| | | a.internal { |
| | | background-color: none; |
| | | width: min($pageWidth, 100%); |
| | | } |
| | | } |
| | | |
| | |
| | | margin: 0; |
| | | } |
| | | |
| | | & > ul > li { |
| | | margin: 0; |
| | | display: inline-block; |
| | | white-space: nowrap; |
| | | margin: 0; |
| | | overflow-wrap: normal; |
| | | } |
| | | |
| | | & > ul { |
| | | list-style: none; |
| | | display: flex; |
| | | padding-left: 0; |
| | | gap: 0.4rem; |
| | | margin: 0; |
| | | & > ul.tags { |
| | | margin-top: 0.45rem; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | background-clip: border-box; |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | & > ul > li > p { |
| | | border-radius: 8px; |
| | | background-color: var(--highlight); |
| | | overflow: hidden; |
| | | background-clip: border-box; |
| | | padding: 0.03rem 0.4rem; |
| | | margin: 0; |
| | | padding: 0.2rem 0.4rem; |
| | | margin: 0 0.1rem; |
| | | line-height: 1.4rem; |
| | | font-weight: $boldWeight; |
| | | color: var(--secondary); |
| | | opacity: 0.85; |
| | | } |
| | | |
| | | & > ul > li > .match-tag { |
| | | color: var(--tertiary); |
| | | font-weight: bold; |
| | | opacity: 1; |
| | | &.match-tag { |
| | | color: var(--tertiary); |
| | | } |
| | | } |
| | | |
| | | & > p { |