forms.less

@import "variables.less";

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

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

.siteInfo {
  >ul {
    .flyoutDialog;
    text-align: left;
    width: auto;

    li {
      list-style-type: none;
      padding: 10px 0;

      .fa {
        padding-right: 10px;
      }
      &.extendedValidation {
        color: green;
      }

      ul {
        max-height: 300px;
        overflow-y: auto;
        margin-top: -20px;
        padding: 0 10px;
        max-width: 400px;
      }
    }
  }
}

.clearBrowsingDataPanel {
  .clearBrowsingData {
    .flyoutDialog;
    background-color: #f7f7f7;
    border-radius: @borderRadius;
    max-width: 325px;
    padding: 0;
    text-align: left;
    width: 473px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-y: auto;
    max-height: 100%;

    .clickable {
      color: #5B5B5B;
      &:hover {
        color: #000;
      }
    }

    .formSection {
      padding: 16px 30px;
      &.clearBrowsingDataWarning {
        background-color: #dddee0;
      }

      &.clearBrowsingDataTitle {
        color: #ff5000;
        font-size: 1.2em;
      }

      &.clearBrowsingDataOptions {
        padding: 0 30px;
      }

      &.clearBrowsingDataButtons {
        text-align: right;
        padding: 16px 10px;
      }
    }
  }
}

.commonDialog {
  .commonForm {
    .flyoutDialog;
    background-color: #f7f7f7;
    border-radius: @borderRadius;
    max-width: 422px;
    padding: 0;
    text-align: left;
    max-width: 600px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-y: auto;
    max-height: 100%;

    .clickable {
      color: #5B5B5B;
      &:hover {
        color: #000;
      }
    }

    .formSection {
      padding: 16px 30px;
      &.commonFormTitle {
        color: #ff5000;
        font-size: 1.2em;
      }
      &.commonFormButtons {
        text-align: center;
      }
      &.commonFormBottom {
        background-color: #dddee0;
        text-align: center;
      }
      .commonFormButtonGroup {
        margin: 0 auto;
        display: inline-block;
      }
    }
  }
}

// TODO: Make this use commonDialog
.importBrowserDataPanel {
  .importBrowserData {
    .flyoutDialog;
    background-color: #f7f7f7;
    border-radius: @borderRadius;
    max-width: 422px;
    padding: 0;
    text-align: left;
    width: 614px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-y: auto;
    max-height: 100%;

    .clickable {
      color: #5B5B5B;
      &:hover {
        color: #000;
      }
    }

    .formSection {
      padding: 16px 30px;
      &.importBrowserDataWarning {
        background-color: #dddee0;
      }

      &.importBrowserDataTitle {
        color: #ff5000;
        font-size: 1.2em;
      }

      &.importBrowserDataOptions {
        padding: 0 30px;
      }

      &.importBrowserSubDataOptions {
        padding: 0 0 0 20px;
      }

      &.importBrowserDataButtons {
        text-align: right;
        padding: 16px 10px;
      }
    }
  }
}

// TODO: Make this use commonDialog
.manageAutofillDataPanel {
  .manageAutofillData {
    .flyoutDialog;
    background-color: #f7f7f7;
    border-radius: @borderRadius;
    max-width: 450px;
    padding: 0;
    text-align: left;
    width: 473px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-y: auto;
    max-height: 100%;

    .formRow {
      padding: 16px 30px;
      &.manageAutofillDataTitle {
        color: #ff5000;
        font-size: 1.2em;
      }

      &.manageAutofillDataOptions {
        padding: 0 30px;

        > label {
          padding-right: 2px;
          width: 100px;
          text-align: left;
        }

        > input {
          padding: 2px;
          margin: 0;
          width: 300px;
        }

        > select {
          width: 6em;
        }
      }

      &.manageAutofillDataButtons {
        text-align: right;
        padding: 16px 10px;
      }
    }
  }
}

// TODO: Make this use commonDialog
.checkDefaultBrowserDialog {
  .checkDefaultBrowser {
    .flyoutDialog;
    background-color: #f7f7f7;
    border-radius: @borderRadius;
    max-width: 422px;
    padding: 1;
    text-align: left;
    width: 614px;
    height: 120px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: 100%;

    .clickable {
      color: #5B5B5B;
      &:hover {
        color: #000;
      }
    }

    .checkDefaultBrowserButtons {
      text-align: right;
      padding: 16px 10px;
      position: relative;
      top: -30px;
    }

    .makeBraveDefault {
      font-weight: bold;
      display: inline-block;
      position: relative;
      top: -35px;
      margin-left: 15px;
    }

    .braveIcon {
      background-image: -webkit-image-set(url(../app/extensions/brave/img/braveAbout.png) 2x);
      background-repeat: no-repeat;
      height: 64px;
      width: 64px;
      display: inline-block;
      position: relative;
      top: 10px;
    }

    .checkDefaultOnStartup {
      left: 75px;
      position: relative;
      top: -25px;
    }
  }
}


.braveryPanelContainer {
  .braveryPanel {
    .flyoutDialog;
    border-radius: @borderRadius;
    padding: 0;
    text-align: left;
    width: 500px;
    right: 20px;
    -webkit-user-select: none;
    cursor: default;
    color: #3B3B3B;
    overflow-y: auto;
    max-height: calc(~'100% - @{dialogTopOffset}');

    .clickable {
      color: #5B5B5B;
      &:hover {
        color: #000;
      }
    }

    .braveryPanelHeader {
      color: white;
      display: flex;
      background-color: #808080;
      padding: 20px;
      border-top-left-radius: @borderRadius;
      border-top-right-radius: @borderRadius;

      .switchControl {
        padding: 0;
        .switchControlTopText {
          color: #d3d3d3;
        }
      }

      .braveryPanelHeaderLeft{
        min-width: 0;
        .braverySettingsFor {
          font-size: 20px;
          font-weight: normal;
          vertical-align: middle;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          display: inherit;
        }

        .braverySiteIcon {
          display: inline-block;
          margin-right: 6px;
          vertical-align: middle;
        }
      }

      .braveryPanelHeaderRight {
        margin-left: auto;
      }
    }

    .braveryPanelStats {
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-around;
      padding: 20px;

      .braveryStat {
        font-size: 40px;
        color: @statsGray;

        &.adsBlockedStat {
          color: @statsRed;
        }
        &.trackersBlockedStat {
          color: @statsOrange;
        }
        &.redirectedResourcesStat {
          color: @statsBlue;
        }
        &.fpStat {
          color: @statsYellow;
        }
      }
      .statDisabled {
        opacity: 0.3;
      }
      .statClickable {
        cursor: pointer;
      }
      &>div {
        max-width: 75px;
      }
    }

    .braveryPanelBody {
      background-color: #eee;
      padding: 20px;
      border-bottom-left-radius: @borderRadius;
      border-bottom-right-radius: @borderRadius;

      .braveryAdvanced {
        display: flex;
        flex-direction: row;
      }

      .braveryAdvancedTitle {
        display: flex;

        &.disabled {
          opacity: 0.3;
        }

        .braveryAdvancedIndicator {
          margin-left: 5px;
          margin-right: 5px;
          margin-top: 2px;
        }
      }

      .braveryControlGroup {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 5px 10px auto 10px;

        .braverySelectTitle {
          margin-bottom: 4px;
          margin-left: 8px;
          &.disabled {
            opacity: 0.3;
          }
        }

        select {
          font-size: 13px;
          margin-bottom: 25px;
        }
      }

      .info {
        display: inline;
        cursor: pointer;
        padding-left: 2px;
        font-size: 15px;
      }

      hr {
        background-color: #ccc;
        border: 0;
        height: 1px;
        margin: 10px 0;

        &.braveryBottomSplitter {
          margin-top: 30px;
        }
      }

      .reloadButton {
        display: flex;
        float: right;
        margin-right: 10px;
        margin-bottom: 10px;
        .reloadText {
          margin-right: 10px;
        }
      }
    }

    ul {
      -webkit-user-select: initial;
      cursor: text;
    }

    li {
      list-style-type: none;
      padding: 10px 0;

      .fa {
        padding-right: 10px;
      }
      &.extendedValidation {
        color: green;
      }

      ul {
        font-size: smaller;
        max-height: 300px;
        overflow-y: scroll;
        margin-top: -20px;
        padding: 0 10px;
      }
    }
  }
}

.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;
      &:hover {
        color: #000;
      }
      text-decoration: underline;
      margin-top: 10px;
    }
    button {
      margin: 2px;
      margin-top: 10px;
    }
    label {
      margin-left: 2px;
    }
  }
}

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

.dialog > .bookmarkDialog {
  width: 350px;
  position: absolute;
  top: 30px;
}

.dialog > .bookmarkDialog > .bookmarkForm {
  width: 350px;
}

.dialog > .bookmarkDialog .fa-close {
  color: @buttonColor;
  font-size: 16px;
  float: right;
  margin-top: 7px;
  margin-right: 10px;
  &:hover {
    color: #000;
  }
}

.bookmarkForm {
  .genericForm;
  background: linear-gradient(#FFFFFF, #DEDEDE);
  margin-top: 10px;
  padding: 0;
  min-width: 310px;

  .arrowUp {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FFFFFF;
    position: relative;
    bottom: 10px;
    left: 37px;

    &.withHomeButton {
      left: 61px;
    }
  }

  .bookmarkFormRow {
    margin-bottom: 10px;
  }

  .bookmarkButtons {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 10px;
  }

  .bookmarkFormInner {
    padding: 10px 30px;

    h2 {
      -webkit-user-select: none;
      cursor: default;
        min-width: 250px;
    }
  }

  label {
    color: @darkGray;
    margin-left: 5px;
  }

  h2 {
    color: @braveOrange;
    font-weight: normal;
    font-size: 16px;
  }

  input,
  select {
    display: block;
    width: 100%;
    max-width: 250px;
    height: 25px;
    border-radius: 5px;
    padding: 0 5px;
    margin: 5px 0 5px 0;
    font-size: 0.9em;
    border: solid 1px #ececec;
    background: white;
    color: #444444;
    outline: none;
  }

  input {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }

  select {
    box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.8);
  }
}

.bookmarkFormFooter {
  background: @black10;
  padding: 10px 30px;

  span {
    font-size: 12px;
    text-align: left;
  }
}

.genericForm {
  .flyoutDialog;
  display: table;
  text-align: left;
  width: auto;

  .genericFormSubtitle {
    margin-bottom: 6px;
  }

  h2 {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .genericFormTable {
    display: flex;
    flex-flow: column nowrap;
    min-width: 350px;

    > div {
      &:not(.formHeader) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 2px;
      }

      > label {
        padding-right: 4px;
        width: 20%;
        text-align: right;
      }

      > input, select {
        padding: 2px;
        margin: 0;
        width: 80%;
      }

    }
  }
}

#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;
      }
    }
  }
}

// From commonStyles.js
.formControl {
  background: white;
  border: solid 1px @black10;
  border-radius: @borderRadius;
  box-shadow: inset 0 1px 1px @black10;
  box-sizing: border-box;
  display: block;
  color: @darkGray;
  font-size: 14.5px;
  height: 2.25em;
  outline: none;
  padding: 0.4em;
  width: 100%;
}