navigationBar.less

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
 * Navigation layers
 */

@import "variables.less";

// Fade In animation for URL bar transitions
@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

// (macOS) We need to keep a padding left to avoid overlapping
// with the window buttons to close/maximize/minimize the window.
.platform--darwin .navigatorWrapper .backforward {
  margin-left: @navbarLeftMarginDarwin;

  // Since we want to keep the navigator centered, we need to calculate the
  // difference between the width of the left box and the width of the right box.
  @centerOffset: @navbarLeftMarginDarwin + 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                 - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
}

// Windows specific fixes
.platform--win32 {
  div#window.frameless {
    border: 1px solid #000;
    box-sizing: border-box;
  }

  .navbarMenubarFlexContainer {
    padding-left: 5px;
    padding-top: 5px;
  }
  
  #urlInput { width: 100%; }

  // changes to ensure window can be as small as 480px wide
  // and still be useable and have the caption buttons intact
  @media (max-width: @breakpointExtensionButtonPadding) {
    .navigatorWrapper .topLevelEndButtons .deadArea {
      width: 0;
    }
  }
  @media (max-width: @breakpointSmallWin32) {
    #titleBar { width: 100px; }
    .menubarContainer {
      .menubar {
        .menubarItem {
          padding: 0 5px 1px;
        }
      }
    }
  }
  @media (max-width: @breakpointTinyWin32) {
    .loadTime { display: none; }
    .menubarContainer {
      .menubar {
        .menubarItem {
          padding: 0 3px 1px;
        }
      }
    }
  }
}

// Styles had to be reworked to properly position the new caption buttons for Windows
.navbarCaptionButtonContainer {
  display: flex;
  border-bottom: 1px solid #aaaaaa;
}
.navbarMenubarFlexContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  white-space: nowrap;
}
.navbarMenubarBlockContainer {
  display: block;
  width: 100%;
}

// Window Caption Buttons (for use w/ slim titlebar)
.windowCaptionButtons {
  display: flex;
  flex-direction: column;

  white-space: nowrap;

  .hidden {
    display: none;
  }

  button.captionButton {
    outline: none;
    vertical-align: top;
  }

  &.fullscreen {
    .win7 {
      margin-top: 1px;
    }
  }

  .container {
    display: flex;
    flex-grow: 0;
  }

  .win7 {
    margin-right: 6px;

    button.captionButton {
      outline: 0;
      height: 18px;
      color: #b1acac;
      border: 1px solid #adadad;
      border-top: 0;
      display: inline-block;
      background-color: #f5f5f5;
      box-shadow: inset 1px 1px rgba(255, 255, 255, 0.9);
      width: 25px;

      &.minimize {
        width: 28px;
        border-right: 0px;
        &:hover {
          background-color: #fff;
        }
        &:active {
          background-color: #cacacb;
        }
        border-radius: 0 0 0 4px;

        .widget {
          width: 10px;
          height: 3px;
          border: 1px solid #838383;
          background: #fff;
          display: inline-block;
          border-radius: 1px;
        }
      }

      &.maximize {
        border-right: 0px;
        width: 27px;
        &:hover {
          background-color: #fff;
          .widget {
            .widget2 {
              background-color: #fff;
            }
          }
        }
        &:active {
          background-color: #cacacb;
          .widget {
            .widget2 {
              background-color: #cacacb;
            }
          }
        }
        &.fullscreen {
          &:hover {
            background-color: #e5e5e5;
          }
          &:active {
            background-color: #cacacb;
          }
          .widget {
            .widget1 {
              width: 8px;
              top: 2px;
              left: 10px;
            }
            .widget2 {
              width: 8px;
              height: 8px;
              top: -5px;
              left: 6px;
              background: #fff;
              border-radius: 1px;
            }
            .widget3 {
              display: inline-block;
              width: 2px;
              height: 2px;
              border: 1px solid #838383;
              background: #fff;
              position: relative;
              top: -20px;
              left: -2px;
            }
          }
        }

        .widget {
          .widget1 {
            width: 10px;
            height: 8px;
            border: 1px solid #838383;
            background: #fff;
            position: relative;
            top: 2px;
            left: 7px;
            border-radius: 1px;
          }
          .widget2 {
            width: 4px;
            height: 2px;
            border: 1px solid #838383;
            background-color: #f5f5f5;
            position: relative;
            top: -5px;
            left: 10px;
            border-radius: 0;
          }
          .widget3 { display: none; }
          .widget4 { display: none; }
          .widget5 { display: none; }
        }
      }

      &.close {
        width: 48px;
        border-radius: 0 0 4px 0;
        &:hover {
          background-color: #d9504e;
        }
        &:active {
          background-color: #d7393d;
        }

        .widget {
          background: url('../img/windows/close.svg') no-repeat;
          display: inline-block;
          height: 12px;
          width: 12px;
          position: relative;
          top: 3px;

          .widget1 { display:none; }
          .widget2 { display:none; }
          .widget3 { display:none; }
        }
      }
    }
  }

  .win10 {
    button.captionButton {
      width: 45px;
      height: 29px;
      border: 0;
      background-color: transparent;

      &.fullscreen {
        height:21px;
      }

      &.minimize {
        &:hover {
          background-color: #e5e5e5;
        }
        &:active {
          background-color: #cacacb;
        }
        .widget {
          width: 10px;
          height: 1px;
          background: black;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          left: -1px;
        }
      }

      &.maximize {
        border-right: 0px;
        &:hover {
          background-color: #e5e5e5;
        }
        &:active {
          background-color: #cacacb;
        }
        &.fullscreen {
          &:hover {
            background-color: #e5e5e5;
          }
          &:active {
            background-color: #cacacb;
          }
          .widget {
            margin-top: 8px;
            .widget1 { width: 6px; height: 6px; }
            .widget2 { display: inline-block; }
            .widget3 {
              display: inline-block;
              width: 8px;
              height: 1px;
              background: black;
              position: relative;
              top: -21px;
              left: 1px;
            }
            .widget4 {
              display: inline-block;
              width: 1px;
              height: 8px;
              background: black;
              position: relative;
              top: -14px;
              left: 0px;
            }
            .widget5 {
              display: inline-block;
              width: 2px;
              height: 1px;
              background: black;
              position: relative;
              top: -14px;
              left: -2px;
            }
          }
        }
        .widget {
          width: 12px;
          height: 12px;
          display: inline-block;
          vertical-align: middle;

          .widget1 {
            width: 8px;
            height: 8px;
            border: 1px solid black;
            background: none;
            position: relative;
          }
          .widget2 {
            display: none;
            width: 1px;
            height: 2px;
            background: black;
            position: relative;
            top: -20px;
            left: 2px;
          }
          .widget3 { display: none; }
          .widget4 { display: none; }
          .widget5 { display: none; }
        }
      }

      &.close {
        &:hover {
          background-color: #e5182c;
          .widget {
            .widget1{ background:white; }
            .widget2{ background:white; }
          }
        }
        &:active {
          background-color: #ef717c;
          .widget {
            .widget1{ background:white; }
            .widget2{ background:white; }
          }
        }
        .widget {
          width: 11px;
          height: 11px;
          display: inline-block;
          vertical-align: middle;

          .widget1 {
            width: 14px;
            height: 1px;
            background: black;
            display: inline-block;
            transform: rotate(45deg);
            position: relative;
            top: -6px;
            left: -2px;
          }
          .widget2 {
            width: 14px;
            height: 1px;
            background: black;
            display: inline-block;
            transform: rotate(315deg);
            position: relative;
            top: -6px;
            left: -16px;
          }
          .widget3 { display: none; }
        }
      }
    }
  }

  .deadArea {
    display: flex;
    flex-grow:1;
    &.allowDragging {
      -webkit-app-region: drag;
      >* {
        -webkit-app-region: no-drag;
      }
    }
  }
}

// Menubar (for use w/ slim titlebar)
.menubarContainer {
  width: 100%;
  display: flex;
  flex-direction: row;

  .menubar {
    display: flex;
    cursor: default;
    -webkit-user-select: none;
    flex-grow: 0;

    .menubarItem {
      color: black;
      font: menu;
      font-size: 12px;
      -webkit-app-region: no-drag;
      padding: 0 10px 1px;
      border: 1px solid transparent;

      &:hover {
        background-color: #e5f3ff;
        border: 1px solid #cce8ff;
      }
    }

    .selected {
      background-color: #cce8ff !important;
      border: 1px solid #99d1ff !important;
    }
  }
  .deadArea {
    display: flex;
    flex-grow: 1;

    &.allowDragging {
      -webkit-app-region: drag;
      >* {
        -webkit-app-region: no-drag;
      }
    }
  }
}

// Here I grouped the rules to keep the layout of the top bar consistent.
// The tricky part is to keep the title in `#navigator` centered when the
// box on its left has different size than the one on the right.
// This is achieved by the local variable `@centerOffset`.
.navigatorWrapper {
  // Since we want to keep the navigator centered, we need to calculate the
  // difference between the width of the left box and the width of the right box.
  @centerOffset: 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                 - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);

  display: flex;

  // Buttons on the left
  .backforward {
    display: flex;

    .back,
    .forward {
      width: @navbarButtonWidth;
    }

    .back {
      padding-right: @navbarButtonSpacing;
    }

    .forward {
      padding-left: @navbarButtonSpacing;
    }

  }

  // Navigation bar at the center
  #navigator {
    display: flex;
    flex-grow: 1;
    min-width: 0%; // allow the navigator to shrink
    max-width: 900px;

    &.titleMode {
      padding-right: @centerOffset;
    }

    @media (max-width: @breakpointNarrowViewport) {
      padding-right: 0;
    }

    @media (max-width: @breakpointNarrowViewport) {
      width: 100%;
    }

    &.titleMode {
      @media (max-width: @breakpointNarrowViewport) {
        transition: padding @transitionDuration ease-in-out;
        padding-right: 0;
      }
    }
  }

  // Buttons on the right
  .topLevelEndButtons {
    display: flex;
    flex-direction: row;

    .braveMenu {
      width: @navbarBraveButtonWidth;
      margin-right: @navbarButtonSpacing;
      -webkit-app-region: no-drag;
      -webkit-user-select: none;

      &.braveShieldsDown {
        -webkit-filter: grayscale(100%);
      }

      &:not(.braveShieldsDisabled):hover {
        -webkit-filter: brightness(0.7);
      }

      &.braveShieldsDisabled {
        -webkit-filter: grayscale(100%);
        opacity: 0.4;
      }
    }

    .deadArea {
      display: flex;
      flex-grow: 0;
      width: @navbarBraveButtonMarginLeft;

      &.allowDragging {
        -webkit-app-region: drag;
        >* {
          -webkit-app-region: no-drag;
        }
      }
    }
  }
}


.navigatorWrapper {
  justify-content: space-between;
  align-items: center;
  height: @navbarHeight;
  box-sizing: border-box;

  /**
   * Left buttons
   */
  .backforward {
    display: flex;
    z-index: @zindexNavigationBar;
    transition: margin @transitionDuration ease-in-out;

    span {
      -webkit-app-region: no-drag;
      -webkit-user-select: none;
      color: @buttonColor;
      border-radius: 50%;
      font-weight: 300;
      opacity: 0.2;

      &:not([disabled]) {
        opacity: 0.85;
      }

      &:not([disabled]):hover {
        color: @buttonColor;
        opacity: 1.0;
        background-color: white;
      }
    }

    .back,
    .forward {
      font-size: 35px;
      text-align: center;
    }
  }
}

.urlbarForm {
  width: 0; // Fixes #4298
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;

  display: flex;
  flex-grow: 1;
  min-width: 0%; // allow the navigator to shrink
  position: relative;

  *:not(legend) {
    z-index: @zindexUrlbarNotLegend;
  }

  input:focus + legend:before {
    content: ' ';
    position: absolute;
    background: #fff;
    border: 2px solid @focusUrlbarOutline;
    border-radius: 4px;
    box-shadow: 0 0 1px @focusUrlbarOutline, inset 0 0 2px @focusUrlbarOutline;
    box-shadow: inset 0 1px 8px rgba(0, 137, 255, 0.5);
    color: #333;
    outline: none;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: @zindexNavigationBar;
  }

  #navigator:not(.titleMode) & {
    background: white;
    border-radius: @borderRadiusURL;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
    color: @chromeText;
  }
  @media (max-width: @breakpointNarrowViewport) {
    max-width: 80%;
  }
}

#navigator {
  font-size: 20px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  -webkit-user-select: none;
  z-index: @zindexNavigationBar;

  form {
    -webkit-app-region: drag;
    // Disable window dragging so that selecting text and dragging the favicon is possible.
    input, .urlbarIcon {
      -webkit-app-region: no-drag;
    }
  }

  &:not(.titleMode) {
    .urlbarForm, .browserButton {
      animation: fadeIn .6s;
      opacity: 0;
      animation-fill-mode: forwards;
    }
  }

  &.titleMode {
    &:extend(#navigator:not(.titleMode).urlbarForm);
    animation: fadeIn 1.2s;

    input {
      display: none;
    }
    #titleBar {
      display: inline-block;
      background:rgba(243, 243, 243, 0);
      color: @chromeText;
      font-size: 15px;
      max-width: 100%;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .endButtons {
      display: none;
    }

    .urlbarIcon {
      display: inline-block;
      opacity: 0.4;
      position: relative;
      left: 2px;
      min-width: 0;

      &[class*=" fa-"] {
        margin-right: 5px;
        margin-top: 3px;
        font-size: 14px;
        min-height: 12px;
        color: @chromeText;
        min-width: 14px;
      }
    }

    .bookmarkButton {
      &:not(.removeBookmarkButton) {
        display: none;
      }
    }
  }

  #titleBar {
    display: none;
    text-overflow: ellipsis;
  }

  .loadTime {
    color: @loadTimeColor;
    background: @navigationBarBackground;
    font-size: 12px;
    right: 10px;
    text-align: right;
    margin: 4px 0 0 0;
    top: 9px;
    cursor: default;
    padding-top: 1px;

    &.onFocus {
        display: none;
    }
  }

  .noScript {
    font-size: 16px;
    margin-left: 10px;
    color: @braveOrange;
  }

  /* Disable selection of button text */
  > span {
     -webkit-user-select: none;
  }

  > * {
    -webkit-app-region: no-drag;

    &.endButtons {
      margin-right: 20px;
      @media (max-width: @breakpointNarrowViewport) {
        margin-right: -5px;
      }
    }
  }

  .inputbar-wrapper {
    background: white;
    display: flex;
    flex: 1 1 0;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
  }

  input {
    background: @navigationBarBackground;
    border: none;
    box-sizing: border-box;
    color: @chromeText;
    cursor: text;
    font-size: @defaultFontSize;
    font-weight: normal;
    margin: 3px 0 0 3px;
    outline: none;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-width: 0%; // allow the navigator to shrink

    &:hover {
      background: @chromeControlsBackground2;
    }


    &.private {
      background: @privateTabBackground;
      color: @chromeText;
    }
  }

  span.navbutton.removeBookmarkButton {
    color: @braveOrange;
    opacity: 1;
  }

  .urlbarIcon {
    color: @focusUrlbarOutline;
    left: 14px;
    margin-top: 1px;
    font-size: 13px;
    min-height: 10px;
    min-width: 16px;

    &.fa-lock,
    &.fa-unlock {
      margin-top: 4px;
      font-size: 16px;
      min-height: 10px;
      min-width: 16px;
    }

    &.fa-unlock {
        color: @gray;
    }

    &.extendedValidation {
      color: green;
    }
  }
}


.topLevelEndButtons .braveMenu {
  background-image: -webkit-image-set(url(../app/extensions/brave/img/braveBtn.png) 1x,
                                      url(../app/extensions/brave/img/braveBtn2x.png) 2x,
                                      url(../app/extensions/brave/img/braveBtn3x.png) 3x);
  background-repeat: no-repeat;
  height: 27px;
  margin-top: 3px;
}