stylus/edit/global-search.css

#search-replace-dialog {
  position: fixed;
  top: 0;
  right: 64px;
  min-width: 200px;
  max-width: calc(100vw - 4rem);
  box-sizing: border-box;
  z-index: 10000;
  background-color: white;
  box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
  border: 1px solid hsla(0, 0%, 50%, .4);
  transition: opacity .25s;
  border-top: none;
}

#search-replace-dialog:not(:focus-within):not(:hover) {
  opacity: .5;
}

#search-replace-dialog > * {
  padding-right: .75em;
  display: flex;
  align-items: stretch;
  background-color: hsla(0, 0%, 50%, .1);
}

#search-replace-dialog [data-type="content"] {
  flex: 1;
  display: flex;
  white-space: nowrap;
}

#search-replace-dialog [data-type="content"] > :not(:last-child) {
  margin-right: .5rem;
}

#search-replace-dialog [data-type="content"] button {
  align-self: center;
}

#search-replace-dialog[data-type="replace"] button svg {
  display: none;
}

#search-replace-dialog [data-type="input-wrapper"] {
  position: relative;
  display: flex;
  flex: 1;
}

#search-replace-dialog textarea {
  resize: none;
  width: min-content;
  min-width: 10em;
  max-width: none;
  min-height: 1.3em;
  max-height: 10vh;
  line-height: 1.3em;
  padding: .25rem .25rem .25rem .5rem;
  margin: 0;
  border: none;
  background-color: white;
  font-weight: bold;
  white-space: pre; /* issue #1000 */
  color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
  flex: 1;
}

#search-replace-dialog textarea:invalid {
  box-shadow: none; /* Firefox is weird */
}

#search-replace-dialog :disabled {
  opacity: .5;
}

/*********** actions ****************/

#search-replace-dialog [data-type="actions"] {
  flex: 0;
  display: flex;
  align-items: center;
  padding-left: .5em;
  opacity: .5;
  transition: opacity .25s;
}

#search-replace-dialog:focus-within [data-type="actions"],
#search-replace-dialog [data-type="actions"]:hover {
  opacity: 1;
}

#search-replace-dialog [data-action] {
  display: block;
  padding: 2px .5em;
}

#search-replace-dialog [data-type="actions"] a:last-child {
  margin-right: -.5em;
}

/*********** case-sensitivity ****************/

#search-replace-dialog [data-action="case"] {
  text-decoration: none;
  font-weight: bold;
  color: currentColor;
  cursor: pointer;
  padding: 0 .5em;
  line-height: 20px;
  display: block;
  position: relative;
}

#search-replace-dialog [data-action="case"][data-enabled]:after {
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-color: hsla(180, 100%, 30%, .5);
  border-style: none none solid none;
  border-width: 4px;
}

#search-replace-dialog [data-action="case"]:hover {
  text-decoration: underline;
}

/*********** clear input ****************/

#search-replace-dialog textarea:not(:valid) + [data-type="hover"] {
  opacity: 0;
  pointer-events: none;
}

#search-replace-dialog [data-type="hover"] {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}

#search-replace-dialog:hover [data-type="hover"] {
  opacity: 1;
  pointer-events: auto;
}

#search-replace-dialog [data-action="clear"] {
  padding: 3px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsla(0, 0%, 100%, .75);
}

#search-replace-dialog [data-type="status"] {
  background-color: hsla(0, 0%, 50%, .2);
  padding-top: 2px;
  padding-left: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#search-replace-dialog [data-type="tally"] {
  opacity: .5;
  margin-left: 1em;
}

#search-replace-dialog [data-type="tally"]:hover {
  opacity: 1;
}

/*********** CM search highlight restyling, which shouldn't need color variables ****************/
body.find-open .search-target-editor {
  box-shadow: 0 0 0 1px hsl(33, 100%, 50%), 0 0 3px hsla(33, 100%, 50%, .4);
  /* same as our global.css focus rule */
}

body.find-open .cm-searching {
  background-color: rgba(255, 255, 0, .4);
}

body.find-open .cm-searching.search-target-match {
  background-color: darkorange;
  color: black;
}

body.find-open .CodeMirror-search-match {
  background: gold;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
}

/* hide default CM search highlight styling */
body .cm-searching,
body .CodeMirror-search-match {
  background-color: transparent;
  border-color: transparent;
}

@media (max-width: 500px) {
  #search-replace-dialog {
    left: 0;
    right: 0;
    max-width: none;
  }
  #search-replace-dialog textarea {
    min-width: 50px;
  }
}

@media (max-width: 800px) {
  #search-replace-dialog[data-type="replace"] {
    left: 0;
    right: 0;
    max-width: none;
  }
  #search-replace-dialog[data-type="replace"] button:not(.hidden) {
    display: none !important;
  }
  #search-replace-dialog[data-type="replace"] button.hidden {
    display: block !important;
    font-size: 0;
    width: 24px;
    text-align: center;
    cursor: pointer;
  }
  #search-replace-dialog[data-type="replace"] button svg {
    display: inline;
  }
  #search-replace-dialog[data-type="replace"] textarea {
    min-width: 50px;
    max-width: calc(50vw - 120px);
    width: auto;
  }
}