ui/src/assets/topbar.scss

// Copyright (C) 2018 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "theme";

@mixin omnibox-width() {
}

.pf-topbar {
  grid-area: topbar;
  position: relative;
  z-index: 3;
  overflow: visible;
  background-color: var(--pf-color-background-secondary);
  box-shadow: $box-shadow-1;
  min-height: var(--topbar-height);
  display: flex;
  justify-content: center;
  align-items: center;

  &--hide-sidebar {
    .pf-omnibox--query-mode {
      padding-left: 48px;
    }
  }

  &__error-box {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  &__error-popup {
    width: 100px;
    font-size: 14px;
    font-family: var(--pf-font-compact);
  }
}

.pf-omnibox {
  @include transition(0.25s);
  width: 90%;
  max-width: 600px;
  display: grid;
  grid-template-areas: "icon input stepthrough";
  grid-template-columns: 34px auto max-content;
  border-radius: $border-radius;
  background-color: var(--pf-color-background);
  border: solid 1px transparent;
  line-height: 34px;

  &:focus-within {
    border-color: var(--pf-color-primary);
    box-shadow: $box-shadow-1;
  }

  &:before {
    @include material-icon("search");
    margin: 5px;
    color: var(--pf-color-text-muted);
    grid-area: icon;
  }

  input {
    grid-area: input;
    border: 0;
    padding: 0 10px;
    font-size: 18px;
    font-family: inherit;
    color: inherit;
    background-color: transparent;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--pf-color-text-muted);
      font-family: var(--pf-font-compact);
      font-weight: 400;
    }
  }

  &--query-mode {
    background-color: #111;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    height: var(--topbar-height);
    border: none;

    input {
      color: #9ddc67;
      font-family: var(--pf-font-monospace);
      padding-left: 0;
    }

    &:before {
      content: "attach_money";
      color: #9ddc67;
      font-size: 26px;
      padding-top: 5px;
    }
  }

  &--command-mode {
    &:before {
      @include material-icon("chevron_right");
      margin: 5px;
      color: var(--pf-color-text-muted);
      grid-area: icon;
    }
  }

  &--prompt-mode {
    &:before {
      @include material-icon("question_mark");
      margin: 5px;
      color: var(--pf-color-text-muted);
      grid-area: icon;
    }
  }

  &--message-mode {
    border-radius: $border-radius;
    input::placeholder {
      font-weight: 400;
      font-family: var(--pf-font-monospace);
      color: var(--pf-color-text-muted);
    }
    &:before {
      content: "info";
    }
  }

  &__stepthrough {
    grid-area: stepthrough;
    display: flex;
    font-size: 14px;
    font-weight: 300;
    color: var(--pf-color-text-muted);

    &-current {
      padding-right: 10px;
    }
  }
}

.pf-omnibox-dropdown {
  font-family: var(--pf-font-compact);

  ul {
    padding: 0;
    margin: 0;
  }

  .pf-keycap {
    font-size: smaller;
  }

  .pf-omnibox-options-container {
    max-height: 450px;
    overflow-y: auto;

    .pf-omnibox-section-header {
      font-size: smaller;
      margin: 4px 0;
      border-bottom: solid 1px var(--pf-color-border);
    }

    li {
      list-style-type: none;
      display: flex;
      gap: 4px;
      user-select: none;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: $border-radius;
      align-items: center;
      line-height: 1.2;

      .pf-title {
        flex-grow: 1;
      }

      .pf-omnibox__tag {
        font-size: smaller;
      }

      &:hover {
        background-color: color_hover(transparent);
      }

      &.pf-highlighted {
        background-color: var(--pf-color-primary);
        color: var(--pf-color-text-on-primary);
      }
    }
  }

  .pf-omnibox-dropdown-footer {
    display: flex;
    justify-content: center;
    padding: 8px 0 6px 0;
    gap: 12px;
    border-top: solid 1px var(--pf-color-border);

    section {
      display: flex;
      justify-content: center;
      gap: 4px;
    }
  }
}