forms.less

@import "variables.less";

input,
select {
  box-sizing: border-box;
}

// Copied to commonStyles.js
.flyoutDialog {
  background-color: @toolbarBackground;
  border-radius: @borderRadius;
  box-shadow: @flyoutDialogBoxShadow;
  color: #000;
  font-size: 13px;
  padding: 10px 30px;
  position: absolute;
  text-align: left;
  top: @dialogTopOffset;
}

.noScriptInfo {
  .dialogInner {
    .flyoutDialog;
    right: 20px;
    width: auto;
    max-width: 400px;
    font-size: 15px;
    cursor: default;
    text-align: center;

    .truncate {
      margin-bottom: 5px;
    }

    .noScriptCheckbox {
      text-align: left;
      font-size: 110%;

      input[type=checkbox] {
        margin: 5px;
      }
    }

    .clickable {
      text-align: left;
      color: #5B5B5B;
      text-decoration: underline;
      margin: 10px 0;

      &:hover {
        color: #000;
      }
    }

    label {
      margin-left: 2px;
    }
  }
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

#navigator {
  .urlBarSuggestions {
    .flyoutDialog;
    color: @chromeText;
    left: 0;
    overflow-y: auto;
    padding: 0 0;
    width: 100%;
    z-index: @zindexForms;


    .suggestionTitle {
      display: inline-block;
      font-size: 15px;
      font-weight: 200;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      vertical-align: middle;
    }

    .suggestionLocation {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    li+li.suggestionSection {
      border-top: 1px solid @toolbarBorderColor;
    }

    .suggestionSection {
      display: flex;
      align-items: center;

      .suggestionSectionTitle {
        color: @gray;
        display: inline-block;
        font-size: 12px;
      }

      .suggestionSectionIcon {
        margin-right: 4px;
        &.bookmarksTitle {
          color: @braveOrange;
        }
        &.tabsTitle {
          color: @highlightBlue;
        }
        &.topSiteTitle, &.historyTitle, &.searchTitle {
          color: #333;
        }
      }
    }

    li {
      list-style-type: none;
      padding: 10px 20px;
      z-index: @zindexSuggestionText;

      &.bookmarkSuggestion:not(.selected) .suggestionTitle {
        color: @braveOrange;
      }

      &.tabSuggestion:not(.selected) .suggestionTitle {
        color: @highlightBlue;
      }

      &.topSiteSuggestion, &.searchSuggestion {
        padding: 7px 20px;
        .suggestionTitle {
          font-size: inherit;
          font-weight: inherit;
        }
      }

      &.selected {
        color: white;
        background-color: @highlightBlue;
        background: linear-gradient(#51A5F9, #2B78CA);
      }
      * {
        /* To allow for mouse listeners to work on the list items. */
        pointer-events: none;
      }
    }
  }
}