give login-buttons DIV `display: inline-block`

#login-buttons .login-header {
    float: left;
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
}

#login-buttons .loading {
    width: 24px;
    height: 24px;
    background-image: url(data:image/gif;base64,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);
}

@login-buttons-accounts-dialog-width: 178px;

#login-buttons {
  display: inline-block;
}

/*
  To get an inline block in IE <= 7, you need to either:

  * set `display: inline` on a block element and trigger hasLayout; or
  * set `display: inline-block` on a naturally-inline element like SPAN or INS.

  We take the first approach so that login-buttons can be a DIV.  In
  IE <=7, then, the `display: inline-block` directive above triggers
  hasLayout, and then the hack-protected directive below overrides it
  with `display: inline`.

  The selector below matches `#login-buttons` in IE 6-7 and nothing on
  other browsers.  It is intended to be both future-proof (valid CSS) and
  minifier-safe.  See
  http://www.impressivewebs.com/ie7-ie8-css-hacks/.
*/

* html #login-buttons, *:first-child+html #login-buttons {
  display: inline;
}

#login-buttons .login-button, .accounts-dialog .login-button {
    float: left;
    cursor: pointer;
    padding: 1px 4px;
    height: 20px;

    font-size: 80%;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
    line-height: 1.5;
    color: white;
    text-shadow: #062C50 0px 1px 0px;

    text-align: center;

    background: #79859D;
    border: 1px solid #062C50;
    border-top-color: #103372;
    border-left-color: #103372;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}

#login-buttons .login-header {
    margin-right: 4px;
}

#login-buttons .login-button-disabled, .accounts-dialog .login-button-disabled {
    color: #ccc;
}

#login-buttons .configure-button {
    background: red;
}

#login-buttons .login-link-text {
    margin-left: 5px; /* so that other elements aren't too close */
}

.accounts-dialog .login-button {
    width: @login-buttons-accounts-dialog-width;
    margin-bottom: 4px;
}

#login-buttons .login-image {
    float: left;
    margin: 2px 5px 2px 0px;
    width: 16px;
    height: 16px;
}

#login-buttons .no-services {
    color: red;
}

#login-buttons .login-link-and-dropdown-list {
    right: 5px;
    position: relative;
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

#login-buttons .login-close-text {
    float: right;
    position: relative;
    left: 1px; /* = #login-buttons.border-width */
    padding-bottom: 3px;
}

#login-buttons .login-close-text-clear {
    clear: right;
}

@login-buttons-accounts-dialog-padding-left: 8px;

.accounts-dialog {
    border: 1px solid #666;
    z-index: 1000;
    background: white;

    -moz-box-shadow:    0 3px 6px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
    box-shadow:         0 3px 6px 1px rgba(0, 0, 0, 0.3);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    margin-top: -5px;
    padding-top: 4px; /* = border-width - margin-top */

    margin-right: -8px;
    padding-right: 8px; /* = -margin-right */

    padding-left: @login-buttons-accounts-dialog-padding-left;
    padding-bottom: 8px;

    width: @login-buttons-accounts-dialog-width + 9; /* not sure what this 9 is */
}

#login-dropdown-list {
    position: absolute;
    right: 0px;
    top: 0px;
}

#login-buttons .hline {
    text-decoration: line-through;
}

#login-buttons .or {
    text-align: center;
}

#login-buttons .hline {
    color: lightgrey;
}

#login-buttons .or-text {
    font-weight: bold;
}

.accounts-dialog label, .accounts-dialog .title {
    font-weight: bold;
    font-size: 80%;
}

.accounts-dialog input {
    width: @login-buttons-accounts-dialog-width + 4;
}

.accounts-dialog .login-button-form-submit {
    margin-top: 8px;
}

.accounts-dialog .message {
    font-size: 80%;
    margin-top: 2px;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-dialog .error-message {
    color: red;
}

.accounts-dialog .info-message {
    color: green;
}

.accounts-dialog .additional-link {
    font-size: 60%;
}

.accounts-dialog #login-buttons-cancel-reset-password {
    float: right;
}

.accounts-dialog #login-buttons-cancel-enroll-account {
    float: right;
}

#login-buttons #signup-link {
    float: right;
}

#login-buttons #forgot-password-link {
    float: left;
}

#login-buttons #back-to-login-link {
    float: right;
}

.accounts-centered-dialog {
    font-family: 'Helvetica Neue', Helvetica, Arial, default;

    z-index: 1000;
    position: fixed;

    left: 50%;
    margin-left: -(@login-buttons-accounts-dialog-width
                 + @login-buttons-accounts-dialog-padding-left) / 2;

    top: 50%;
    margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;
#configure-login-service-dialog {
    width: @configure-login-service-dialog-width;
    margin-left: -(@configure-login-service-dialog-width
                 + @login-buttons-accounts-dialog-padding-left) / 2;
    margin-top: -180px; /* = approximately -height/2, though height can change */
}

#configure-login-service-dialog .login-button-configure {
    float: right;
}

#just-validated-dismiss-button, #messages-dialog-dismiss-button {
    margin-top: 4px;
}

.hide-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;

    /* XXX consider replacing with DXImageTransform */
    background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

    background-color: rgba(0, 0, 0, 0.7);
}

#configure-login-service-dialog table {
    width: 100%;
}

#configure-login-service-dialog .configuration_labels {
    width: 30%;
}

#configure-login-service-dialog .configuration_inputs {
    width: 70%;
}

#configure-login-service-dialog input {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
}

#configure-login-service-dialog ol {
    margin-top: 10px;
    margin-bottom: 10px;
}

#configure-login-service-dialog .new-section {
    margin-top: 10px;
}

#configure-login-service-dialog ol li {
    margin-left: 30px;
}

#configure-login-service-dialog .url {
  font-family: "Courier New", Courier, monospace;
}

#login-buttons .login-header {
    float: left;
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
}

#login-buttons .loading {
    width: 24px;
    height: 24px;
    background-image: url(data:image/gif;base64,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);
}

@login-buttons-accounts-dialog-width: 178px;

#login-buttons .login-button, .accounts-dialog .login-button {
    float: left;
    cursor: pointer;
    padding: 1px 4px;
    height: 20px;

    font-size: 80%;
    font-family: 'Helvetica Neue', Helvetica, Arial, default;
    line-height: 1.5;
    color: white;
    text-shadow: #062C50 0px 1px 0px;

    text-align: center;

    background: #79859D;
    border: 1px solid #062C50;
    border-top-color: #103372;
    border-left-color: #103372;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}

#login-buttons .login-header {
    margin-right: 4px;
}

#login-buttons .login-button-disabled, .accounts-dialog .login-button-disabled {
    color: #ccc;
}

#login-buttons .configure-button {
    background: red;
}

#login-buttons .login-link-text {
    margin-left: 5px; /* so that other elements aren't too close */
}

.accounts-dialog .login-button {
    width: @login-buttons-accounts-dialog-width;
    margin-bottom: 4px;
}

#login-buttons .login-image {
    float: left;
    margin: 2px 5px 2px 0px;
    width: 16px;
    height: 16px;
}

#login-buttons .no-services {
    color: red;
}

#login-buttons .login-link-and-dropdown-list {
    right: 5px;
    position: relative;
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

#login-buttons .login-close-text {
    float: right;
    position: relative;
    left: 1px; /* = #login-buttons.border-width */
    padding-bottom: 3px;
}

#login-buttons .login-close-text-clear {
    clear: right;
}

@login-buttons-accounts-dialog-padding-left: 8px;

.accounts-dialog {
    border: 1px solid #666;
    z-index: 1000;
    background: white;

    -moz-box-shadow:    0 3px 6px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
    box-shadow:         0 3px 6px 1px rgba(0, 0, 0, 0.3);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    margin-top: -5px;
    padding-top: 4px; /* = border-width - margin-top */

    margin-right: -8px;
    padding-right: 8px; /* = -margin-right */

    padding-left: @login-buttons-accounts-dialog-padding-left;
    padding-bottom: 8px;

    width: @login-buttons-accounts-dialog-width + 9; /* not sure what this 9 is */
}

#login-dropdown-list {
    position: absolute;
    right: 0px;
    top: 0px;
}

#login-buttons .hline {
    text-decoration: line-through;
}

#login-buttons .or {
    text-align: center;
}

#login-buttons .hline {
    color: lightgrey;
}

#login-buttons .or-text {
    font-weight: bold;
}

.accounts-dialog label, .accounts-dialog .title {
    font-weight: bold;
    font-size: 80%;
}

.accounts-dialog input {
    width: @login-buttons-accounts-dialog-width + 4;
}

.accounts-dialog .login-button-form-submit {
    margin-top: 8px;
}

.accounts-dialog .message {
    font-size: 80%;
    margin-top: 2px;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-dialog .error-message {
    color: red;
}

.accounts-dialog .info-message {
    color: green;
}

.accounts-dialog .additional-link {
    font-size: 60%;
}

.accounts-dialog #login-buttons-cancel-reset-password {
    float: right;
}

.accounts-dialog #login-buttons-cancel-enroll-account {
    float: right;
}

#login-buttons #signup-link {
    float: right;
}

#login-buttons #forgot-password-link {
    float: left;
}

#login-buttons #back-to-login-link {
    float: right;
}

.accounts-centered-dialog {
    font-family: 'Helvetica Neue', Helvetica, Arial, default;

    z-index: 1000;
    position: fixed;

    left: 50%;
    margin-left: -(@login-buttons-accounts-dialog-width
                 + @login-buttons-accounts-dialog-padding-left) / 2;

    top: 50%;
    margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;
#configure-login-service-dialog {
    width: @configure-login-service-dialog-width;
    margin-left: -(@configure-login-service-dialog-width
                 + @login-buttons-accounts-dialog-padding-left) / 2;
    margin-top: -180px; /* = approximately -height/2, though height can change */
}

#configure-login-service-dialog .login-button-configure {
    float: right;
}

#just-validated-dismiss-button, #messages-dialog-dismiss-button {
    margin-top: 4px;
}

.hide-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;

    /* XXX consider replacing with DXImageTransform */
    background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

    background-color: rgba(0, 0, 0, 0.7);
}

#configure-login-service-dialog table {
    width: 100%;
}

#configure-login-service-dialog .configuration_labels {
    width: 30%;
}

#configure-login-service-dialog .configuration_inputs {
    width: 70%;
}

#configure-login-service-dialog input {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
}

#configure-login-service-dialog ol {
    margin-top: 10px;
    margin-bottom: 10px;
}

#configure-login-service-dialog .new-section {
    margin-top: 10px;
}

#configure-login-service-dialog ol li {
    margin-left: 30px;
}

#configure-login-service-dialog .url {
  font-family: "Courier New", Courier, monospace;
}


renamed item-buttons

renamed item-buttons

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


Increased arrow size

Increased arrow size

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/MenesesEvandro/WCF.git/'


add the btn-transparent style

add the btn-transparent style

fatal: unable to access 'https://github.com/socializer/socializer-ui-mock.git/': The requested URL returned error: 403


Fixes #4298

Fixes #4298

While the `overflow: hidden` resolved the titlebar issue, it did so at
the cost of clipping suggestions. This approach achieves the desired
results, without clipping.

/* 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;
}

/* 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 {
    overflow: hidden;
    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 {
  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;
}


Create menu.import.less

Create menu.import.less

#menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .btns-group,
  .btns-group-vertical {
    margin: 2em auto 2em;
    width: 80%;

    .btn-secondary {
      .font-s1;
      padding-top: .5em;
      padding-bottom: .5em;
    }
  }

  .btns-group-vertical .btn-secondary {
    .force-wrap;
    padding-right: 2.5em;
    text-align: left;
    text-indent: 0;
    white-space: normal; // Resets wrapping
    width: 100%;

    & + .btn-secondary {
      margin-top: .5rem;

      &:before {
        .position(absolute, -.5rem, 50%, auto, auto, 1px, .5rem);
        background: lighten(#517096, 5%);
        content: '';
      }
    }

    [class^="icon-"],
    [class*=" icon-"] {
      .position(absolute, .5em, .5em, auto, auto);
      line-height: 20px;
    }
  }

  .list-todos {
    a {
      box-shadow: rgba(255,255,255,.15) 0 1px 0 0;
      display: block;
      line-height: 1.5em;
      padding: .75em 2.5em;
      position: relative;
    }

    .count-list {
      .transition( all 200ms ease-in );
      background: rgba(255,255,255,.1);
      border-radius: 1em;
      float: right;
      font-size: .7rem;
      line-height: 1;
      margin-top: .25rem;
      margin-right: -1.5em;
      padding: .3em .5em;
    }

    [class^="icon-"],
    [class*=" icon-"] {
      .font-s2;
      float: left;
      margin-left: -1.5rem;
      margin-right: .5rem;
      margin-top: .1rem;
      width: 1em;
    }

    .icon-lock {
      .font-s1;
      margin-top: .2rem;
      opacity: .8;
    }

    .list-todo {
      color: rgba(255,255,255,.4);

      &:hover,
      &:active,
      &.active {
        color: @color-empty;
        .count-list { background: @color-primary; }
      }

      .cordova &:hover {
        // Prevent hover states from being noticeable on Cordova apps
        color: rgba(255,255,255,.4);
      }
    }
  }
}

error: pathspec 'client/stylesheets/globals/menu.import.less' did not match any file(s) known to git


remove line

remove line

fatal: unable to access 'https://github.com/SilentComics/silentcomics.github.io.git/': The requested URL returned error: 403


Update style.less

Update style.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/prasadkblr/direct-channel-dashboard.git/'


Update buttons to Roxanne's style guide.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Coveo/styleguide.git/'


Add padding to all .icons

Add padding to all .icons

@import "ui-variables";

.icon:before {
  margin-right: @component-icon-padding;
}

a.icon, button.icon {
  text-decoration: none;
  color: @text-color;
  &:hover{
    color: @text-color-highlight;
  }
}

@import "ui-variables";

a.icon, button.icon {
  text-decoration: none;
  color: @text-color;
  &:hover{
    color: @text-color-highlight;
  }
}


OR-1243 Remove useless scrolling

OR-1243 Remove useless scrolling

* Remove body bottom margin in order to not have scroll when all
elements are displayed
* Remove old `#footer` class

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Add 40px bottom margin to project list.

Add 40px bottom margin to project list.

#project-list {
  padding: 0;
  margin: 0px 0px 40px 0px;

  li {
    list-style: none;
    border-bottom: 1px solid #cccccc;
    padding-top: 14px;
    padding-bottom: 0px;
    &:first-child {
      border-top: 1px solid #cccccc;
    }
  }

  .project-expander {
    float: right;
    cursor: pointer;
    &:hover {
      color: #2a6496;
    }
  }

  .project-info {
    float: left;
    h4 {
      margin-top: 0;
      margin-bottom: 4px;
    }

    .project-description {
      margin-bottom: 4px;
    }

    .project-last-modified {
      color: #a0a0a0;
      margin-bottom: 16px;
      strong {
        font-weight: normal;
        color: #000000;
      }
    }
  }
}

.project-flows {
	display: none;
	background-color: #f9f9f9;
	padding: 10px 15px 10px 15px;

	h5 {
		margin-top: 5px;
	}

	.list-group {
		margin-bottom: 10px;
	}

	.list-group-item {
		background: transparent;
		padding: 7px 12px 7px 12px;
	}
}

// Flow panel heading.
.flow-expander {
  cursor: pointer;
}

.expanded-flow-job-list {
  .list-group-item {
    .job-buttons {
      visibility: hidden;
    }

    &:hover {
      background-color: #f5f5f5;

      .job-buttons {
        visibility: visible;
      }
    }
  }

  .dependency {
    background-color: #f0f0f0;
  }

  .dependent {
    background-color: #fafafa;
  }
}

// Permissions page table.
.permission-table {
  .tb-perm {
    width: 41px;
    margin: 0px;
  }

  .tb-admin {
    width: 41px;
    margin: 0px;
  }

  .tb-read {
    width: 33px;
    margin: 0px;
  }

  .tb-write {
    width: 34px;
    margin: 0px;
  }

  .tb-execute {
    width: 51px;
    margin: 0px;
  }

  .tb-schedule {
    margin: 0px;
    width: 60px;
  }

  .tb-action {
    margin: 0px;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
  }
}

#project-list {
  padding: 0;
  margin: 0;

  li {
    list-style: none;
    border-bottom: 1px solid #cccccc;
    padding-top: 14px;
    padding-bottom: 0px;
    &:first-child {
      border-top: 1px solid #cccccc;
    }
  }

  .project-expander {
    float: right;
    cursor: pointer;
    &:hover {
      color: #2a6496;
    }
  }

  .project-info {
    float: left;
    h4 {
      margin-top: 0;
      margin-bottom: 4px;
    }

    .project-description {
      margin-bottom: 4px;
    }

    .project-last-modified {
      color: #a0a0a0;
      margin-bottom: 16px;
      strong {
        font-weight: normal;
        color: #000000;
      }
    }
  }
}

.project-flows {
	display: none;
	background-color: #f9f9f9;
	padding: 10px 15px 10px 15px;

	h5 {
		margin-top: 5px;
	}

	.list-group {
		margin-bottom: 10px;
	}

	.list-group-item {
		background: transparent;
		padding: 7px 12px 7px 12px;
	}
}

// Flow panel heading.
.flow-expander {
  cursor: pointer;
}

.expanded-flow-job-list {
  .list-group-item {
    .job-buttons {
      visibility: hidden;
    }

    &:hover {
      background-color: #f5f5f5;

      .job-buttons {
        visibility: visible;
      }
    }
  }

  .dependency {
    background-color: #f0f0f0;
  }

  .dependent {
    background-color: #fafafa;
  }
}

// Permissions page table.
.permission-table {
  .tb-perm {
    width: 41px;
    margin: 0px;
  }

  .tb-admin {
    width: 41px;
    margin: 0px;
  }

  .tb-read {
    width: 33px;
    margin: 0px;
  }

  .tb-write {
    width: 34px;
    margin: 0px;
  }

  .tb-execute {
    width: 51px;
    margin: 0px;
  }

  .tb-schedule {
    margin: 0px;
    width: 60px;
  }

  .tb-action {
    margin: 0px;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
  }
}


Make titles smaller and reduce main content padding on mobile.

Signed-off-by: aixxe <b1c1d8736f20db3fb6c1c66bb1455ed43909f0d8@aixxe.net>

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aixxe/kayo.git/'


BAP-4667: Pinned items bar broken after browser's window resizing

 - fixed empty message for pinbar

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/trustify/oroplatform.git/'


Fixes media position on extra viewport content

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/studiomotio/www1.git/'


remove unused variable

remove unused variable

// Prefix
@ant-prefix             : ant;

// Color
@primary-color          : #2db7f5;
@info-color             : #2db7f5;
@success-color          : #87d068;
@error-color            : #f50;
@warning-color          : #fa0;
@normal-color           : #d9d9d9;

// ------ Base & Require ------
@body-background        : #fff;
@font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
@code-family            : Consolas,Menlo,Courier,monospace;
@text-color             : #666;
@heading-color          : #404040;
@text-color-secondary   : #999;
@font-size-base         : 12px;
@line-height-base       : 1.5;
@border-radius-base     : 6px;
@border-radius-sm       : 4px;

// ICONFONT
@iconfont-css-prefix    : anticon;
@icon-url               : "https://at.alicdn.com/t/font_uzv8nkw1nabgldi";

// LINK
@link-color             : #2db7f5;
@link-hover-color       : tint(@link-color, 20%);
@link-active-color      : shade(@link-color, 5%);
@link-hover-decoration  : none;

// Animation
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base      : #d9d9d9;        // base border outline a component
@border-color-split     : #e9e9e9;        // split border inside a component

// Outline
@outline-blur-size      : 0;
@outline-width          : 2px;
@outline-color          : @primary-color;

// Background color
@background-color-base  : #f7f7f7;        // basic gray background

// Shadow
@shadow-color           : rgba(0, 0, 0, .2);
@box-shadow-base        : @shadow-1-down;
@shadow-1-up            : 0 -1px 6px @shadow-color;
@shadow-1-down          : 0 1px 6px @shadow-color;
@shadow-1-left          : -1px 0 6px @shadow-color;
@shadow-1-right         : 1px 0 6px @shadow-color;
@shadow-2               : 0 2px 8px @shadow-color;

// Buttons
@btn-font-weight        : 500;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm   : @border-radius-sm;

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;
@btn-group-border       : shade(@primary-color, 5%);

@btn-default-color      : @text-color;
@btn-default-bg         : @background-color-base;
@btn-default-border     : @border-color-base;

@btn-ghost-color        : @text-color;
@btn-ghost-bg           : transparent;
@btn-ghost-border       : @border-color-base;

@btn-disable-color      : #ccc;
@btn-disable-bg         : @background-color-base;
@btn-disable-border     : @border-color-base;

@btn-padding-base       : 4px 15px;
@btn-font-size-lg       : 14px;
@btn-padding-lg         : 4px 15px 5px 15px;
@btn-padding-sm         : 1px 7px;

@btn-circle-size        : 28px;
@btn-circle-size-lg     : 32px;
@btn-circle-size-sm     : 22px;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;
@screen-xs-max          : (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm              : 768px;
@screen-sm-min          : @screen-sm;
@screen-sm-max          : (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md              : 992px;
@screen-md-min          : @screen-md;
@screen-md-max          : (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg              : 1200px;
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

// Layout and Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

// z-index list
@zindex-affix           : 11;
@zindex-back-top        : 10;
@zindex-modal-mask      : 1000;
@zindex-modal           : 1000;
@zindex-notification    : 1010;
@zindex-message         : 1010;
@zindex-popover         : 1030;
@zindex-picker          : 1050;
@zindex-dropdown        : 1050;
@zindex-tooltip         : 1060;

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

// Form
// ---
@label-required-color        : #f50;
@label-color                 : @text-color;
@form-item-margin-bottom     : 24px;

// Input
// ---
@input-height-base           : 28px;
@input-height-lg             : 32px;
@input-height-sm             : 22px;
@input-padding-horizontal    : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm   : 1px;
@input-padding-vertical-lg   : 6px;
@input-placeholder-color     : #ccc;
@input-color                 : @text-color;
@input-border-color          : @border-color-base;
@input-bg                    : #fff;
@input-hover-border-color    : @primary-color;
@input-disabled-bg           : @background-color-base;

// Tooltip
// ---
//* Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(64, 64, 64, .85);
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

// Popover
// ---
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 4px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadeout(@border-color-base, 30%);

// Prefix
@ant-prefix             : ant;

// Color
@primary-color          : #2db7f5;
@info-color             : #2db7f5;
@success-color          : #87d068;
@error-color            : #f50;
@warning-color          : #fa0;
@normal-color           : #d9d9d9;

// ------ Base & Require ------
@body-background        : #fff;
@font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
@code-family            : Consolas,Menlo,Courier,monospace;
@text-color             : #666;
@heading-color          : #404040;
@text-color-secondary   : #999;
@font-size-base         : 12px;
@line-height-base       : 1.5;
@line-height-computed   : floor((@font-size-base * @line-height-base));
@border-radius-base     : 6px;
@border-radius-sm       : 4px;

// ICONFONT
@iconfont-css-prefix    : anticon;
@icon-url               : "https://at.alicdn.com/t/font_uzv8nkw1nabgldi";

// LINK
@link-color             : #2db7f5;
@link-hover-color       : tint(@link-color, 20%);
@link-active-color      : shade(@link-color, 5%);
@link-hover-decoration  : none;

// Animation
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base      : #d9d9d9;        // base border outline a component
@border-color-split     : #e9e9e9;        // split border inside a component

// Outline
@outline-blur-size      : 0;
@outline-width          : 2px;
@outline-color          : @primary-color;

// Background color
@background-color-base  : #f7f7f7;        // basic gray background

// Shadow
@shadow-color           : rgba(0, 0, 0, .2);
@box-shadow-base        : @shadow-1-down;
@shadow-1-up            : 0 -1px 6px @shadow-color;
@shadow-1-down          : 0 1px 6px @shadow-color;
@shadow-1-left          : -1px 0 6px @shadow-color;
@shadow-1-right         : 1px 0 6px @shadow-color;
@shadow-2               : 0 2px 8px @shadow-color;

// Buttons
@btn-font-weight        : 500;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm   : @border-radius-sm;

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;
@btn-group-border       : shade(@primary-color, 5%);

@btn-default-color      : @text-color;
@btn-default-bg         : @background-color-base;
@btn-default-border     : @border-color-base;

@btn-ghost-color        : @text-color;
@btn-ghost-bg           : transparent;
@btn-ghost-border       : @border-color-base;

@btn-disable-color      : #ccc;
@btn-disable-bg         : @background-color-base;
@btn-disable-border     : @border-color-base;

@btn-padding-base       : 4px 15px;
@btn-font-size-lg       : 14px;
@btn-padding-lg         : 4px 15px 5px 15px;
@btn-padding-sm         : 1px 7px;

@btn-circle-size        : 28px;
@btn-circle-size-lg     : 32px;
@btn-circle-size-sm     : 22px;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;
@screen-xs-max          : (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm              : 768px;
@screen-sm-min          : @screen-sm;
@screen-sm-max          : (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md              : 992px;
@screen-md-min          : @screen-md;
@screen-md-max          : (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg              : 1200px;
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

// Layout and Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

// z-index list
@zindex-affix           : 11;
@zindex-back-top        : 10;
@zindex-modal-mask      : 1000;
@zindex-modal           : 1000;
@zindex-notification    : 1010;
@zindex-message         : 1010;
@zindex-popover         : 1030;
@zindex-picker          : 1050;
@zindex-dropdown        : 1050;
@zindex-tooltip         : 1060;

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

// Form
// ---
@label-required-color        : #f50;
@label-color                 : @text-color;
@form-item-margin-bottom     : 24px;

// Input
// ---
@input-height-base           : 28px;
@input-height-lg             : 32px;
@input-height-sm             : 22px;
@input-padding-horizontal    : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm   : 1px;
@input-padding-vertical-lg   : 6px;
@input-placeholder-color     : #ccc;
@input-color                 : @text-color;
@input-border-color          : @border-color-base;
@input-bg                    : #fff;
@input-hover-border-color    : @primary-color;
@input-disabled-bg           : @background-color-base;

// Tooltip
// ---
//* Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(64, 64, 64, .85);
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;

// Popover
// ---
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 4px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadeout(@border-color-base, 30%);