mirror of https://github.com/zulip/zulip.git
378 lines
9.5 KiB
CSS
378 lines
9.5 KiB
CSS
#searchbox {
|
|
width: 100%;
|
|
height: var(--header-height);
|
|
|
|
.navbar-search {
|
|
margin: 3.5px 0;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.search_icon {
|
|
grid-area: search-icon;
|
|
align-self: center;
|
|
text-decoration: none;
|
|
padding: 0 7px;
|
|
font-size: 17px;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: hsl(0deg 0% 0%);
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.search_close_button {
|
|
grid-area: search-close;
|
|
width: 28px;
|
|
height: 100%;
|
|
background: none;
|
|
border: none;
|
|
opacity: 0.5;
|
|
line-height: 0;
|
|
border-radius: 4px;
|
|
/* Leave room for the focus outline. */
|
|
margin-right: 1px;
|
|
|
|
&:focus {
|
|
/* Reduce height to leave 1px on top and bottom for the outline. */
|
|
height: calc(100% - 2px);
|
|
}
|
|
|
|
&:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:disabled {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.zulip-icon-close {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.search-input-and-pills {
|
|
grid-area: search-pills;
|
|
display: flex;
|
|
padding: 0;
|
|
flex-wrap: wrap;
|
|
gap: 2px 2px;
|
|
align-self: center;
|
|
}
|
|
|
|
.search-input-and-pills.freshly-opened {
|
|
> .pill {
|
|
border-color: var(--focus-outline-input-pill);
|
|
}
|
|
}
|
|
|
|
.navbar-search:not(.expanded) {
|
|
right: 0;
|
|
|
|
.search_close_button {
|
|
display: none;
|
|
}
|
|
|
|
#searchbox-input-container {
|
|
width: var(--search-box-width);
|
|
}
|
|
|
|
.search-input {
|
|
border-radius: 5px;
|
|
color: var(--color-text-search);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
@media (width >= $md_min) {
|
|
box-shadow:
|
|
0 4px 20px var(--color-search-box-hover-shadow),
|
|
0 1px 5px var(--color-search-box-hover-shadow);
|
|
}
|
|
|
|
.search_icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
.search-input {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (height < $short_navbar_cutoff_height) {
|
|
#searchbox-input-container .search_icon {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-search.expanded {
|
|
width: 100%;
|
|
box-shadow:
|
|
0 4px 20px var(--color-search-shadow-wide),
|
|
0 1px 5px var(--color-search-shadow-tight);
|
|
|
|
.search-input {
|
|
cursor: text;
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
/* 3px chosen so that the cursor clicks the search button
|
|
and close button from the same position. */
|
|
width: calc(100% - 3px);
|
|
/* z-index to not see the gear icon underneath */
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.typeahead.dropdown-menu {
|
|
/* Match the typeahead's width to its parent container. */
|
|
right: 0;
|
|
top: 0;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
box-shadow: none;
|
|
position: relative;
|
|
width: 100%;
|
|
background: var(--color-background-search);
|
|
color: var(--color-text-search);
|
|
|
|
border-width: 0;
|
|
border-top-width: 1px;
|
|
border-top-color: var(--color-search-dropdown-top-border);
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
.active > a {
|
|
background-color: var(--color-background-search-option-hover);
|
|
background-image: none;
|
|
color: var(--color-text-search-hover);
|
|
}
|
|
|
|
.typeahead-menu > li > a {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.input-append {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.search-input {
|
|
/* Avoid massive inheritance chain on font-size. */
|
|
font-size: var(--base-font-size-px);
|
|
/* override height-input-pill from default input pills to account for pill border */
|
|
line-height: calc(
|
|
var(--height-input-pill) + var(--vertical-spacing-input-pill)
|
|
);
|
|
min-height: calc(
|
|
var(--height-input-pill) + var(--vertical-spacing-input-pill)
|
|
);
|
|
/* override bootstrap padding for input[type="text"] */
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 0;
|
|
font-family: "Source Sans 3 VF", sans-serif;
|
|
font-weight: 400;
|
|
background: transparent;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
flex-grow: 1;
|
|
|
|
color: var(--color-text-search);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:empty::before {
|
|
content: attr(data-placeholder-text);
|
|
color: var(--color-text-search-placeholder);
|
|
}
|
|
}
|
|
|
|
#searchbox-input-container {
|
|
display: grid;
|
|
/* The next two styles override .input-append style from app_components.js */
|
|
letter-spacing: normal;
|
|
font-size: 100%;
|
|
/* Override style for .pill-container that isn't relevant for search. */
|
|
border: none;
|
|
grid-template:
|
|
"search-icon search-pills search-close" minmax(
|
|
var(--search-box-height),
|
|
auto
|
|
)
|
|
/ auto minmax(0, 1fr) 28px;
|
|
align-items: start;
|
|
cursor: pointer;
|
|
|
|
/* Override styles for .pill-container that aren't relevant for search. */
|
|
.pill {
|
|
margin: 0;
|
|
min-width: unset;
|
|
}
|
|
|
|
&:not(.focused) {
|
|
max-height: var(--search-box-height);
|
|
overflow: hidden;
|
|
|
|
.search-input-and-pills {
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&.focused .user-pill-container {
|
|
flex-flow: row wrap;
|
|
height: unset;
|
|
}
|
|
|
|
.user-pill-container {
|
|
gap: 5px;
|
|
|
|
> .pill-label {
|
|
min-width: fit-content;
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
/* Replaced by the 5px gap. */
|
|
margin-right: 0;
|
|
}
|
|
|
|
.pill {
|
|
height: var(--height-input-pill);
|
|
border: none;
|
|
border-radius: 3px;
|
|
max-width: none;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
|
|
&:not(.deactivated-pill) {
|
|
background-color: var(--color-background-user-pill);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pill-label {
|
|
min-width: 30px;
|
|
}
|
|
|
|
@media (width >= $md_min) {
|
|
.navbar-search {
|
|
background: var(--color-background-search);
|
|
}
|
|
|
|
.navbar-search:not(.expanded) {
|
|
box-shadow: 0 0 2px var(--color-search-box-hover-shadow);
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
.navbar-search:not(.expanded) .search_icon:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.navbar-search.expanded {
|
|
background: var(--color-background-search);
|
|
}
|
|
}
|
|
|
|
@media (height < $short_navbar_cutoff_height) {
|
|
#searchbox_form:not(.expanded) {
|
|
margin: 0;
|
|
/* Now that the header is shorter, the search box will take up the whole
|
|
height (which looks weird), so add 2px of space above and below it.
|
|
The extra pixel is to account for the header's bottom border (box shadow). */
|
|
margin-top: 2px;
|
|
height: calc(var(--header-height) - 5px);
|
|
|
|
#searchbox-input-container {
|
|
height: calc(var(--search-box-height) - 5px);
|
|
}
|
|
}
|
|
|
|
/* It looks fine to fill the navbar when the typeahead is open. */
|
|
#searchbox_form.expanded {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@media (width < $sm_min) {
|
|
#searchbox_form.expanded {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 9px;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
/* To be visible over `.left-sidebar-toggle-unreadcount` */
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
.typeahead-menu > li > a {
|
|
padding: 3px 30px;
|
|
/* Override white-space: nowrap from zulip.css */
|
|
white-space: normal;
|
|
|
|
.search_list_item {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.search_list_item .pill-container {
|
|
margin-left: 5px;
|
|
/* This contains only one pill, which handles its own border */
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.pill {
|
|
align-items: baseline;
|
|
margin: 0;
|
|
|
|
&:focus {
|
|
/* Keep the border the same color, there's no user interaction for users in the typeahead menu */
|
|
border-color: var(--color-background-input-pill);
|
|
}
|
|
|
|
.exit {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.pill-image {
|
|
/* Add line-height equal to height to mimic baseline alignment. */
|
|
line-height: var(--length-input-pill-image);
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
/* Break really long words (unlikely to happen). */
|
|
.search_list_item span {
|
|
word-break: break-word;
|
|
}
|
|
}
|