<commit_before>//
// Action Menus
// --------------------------------------------------

#menuview {
  .navbar {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
  }
  .navbar-header {
    float: left;
    min-width: percentage((1 / @grid-columns));
  }
  .navbar-brand {
    float: none;
    img {
      height: @navbar-height;
      display: inline;
    }
  }
  
  .navbar-nav {
    float: right;
    > li {
      float: right;
    }
  }
  .navbar-form {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    .box-shadow(none);
  }
  @media (max-width: @screen-sm-min) {
    .dropdown-menu .divider {
      background-color: @navbar-default-border;
    }
  }
}

#globalsearch {

  // Remove the bootstrap border on the form when the screen is small
  @media (max-width: @screen-sm-max) {
    border: none;
  }
 
  .btn {
    // When the global search is active, the button has an "hover"-kind color
    background-color: @navbar-default-link-hover-bg;
    border: 1px solid @navbar-default-link-hover-bg;
    box-shadow: none;
    color: @navbar-default-link-color;
    &:hover,
    &:focus {
      background-color: @navbar-default-link-hover-bg;
      box-shadow: none;
    }
  }
  
  // The global search input
  #headerglobalsearchinput { // we need to be that specific to be applied
    border-radius: 0;
    min-width: 0;
    border: 0;
    transition: width 0.3s, padding 0.3s;
    width: 200px; // we need to set a width in pixels otherwise the transition is not applied nicely
  }
  
  // When the global search is close
  &.globalsearch-close {
    // The button is transparent
    .btn {
      background-color: transparent;
      border: 1px solid transparent;
      // Except when it is hovering!
      &:hover,
      &:focus {
        background-color: @navbar-default-link-hover-bg;
        box-shadow: none;
      }
    }
    
    // The input has no width (it's hidden basically, but we need to set the width to 0 to have the nice transition)
    #headerglobalsearchinput { // we need to be that specific to be applied
      padding: 0;
      width: 0;
    }
  }
}

@media (min-width: @screen-sm-min) {
  .navbar-nav > li > a {
    /* When the page name is long, add ellipsis. */
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// Navbar avatar ==========================================================

.navbar-avatar {
  > a {
    max-height: @navbar-height;
    
    > img {
      @avatar-size: floor(ceil(@navbar-height/2)/2)*2;
      border-radius: @thumbnail-border-radius;
      height: @avatar-size;
      margin-top: -@navbar-padding-vertical+@navbar-height/2-@avatar-size/2;
      vertical-align: middle;
      width: @avatar-size;
    }
  }
}

// Icon in a navbar  ======================================================

.icon-navbar {
  cursor: pointer;
}

// Navbar dropdown ========================================================

@media (min-width: @screen-sm-min) {
  // We use mixin guards to simulate conditional assignment. We need the hover and active background color to fall back
  // on the default background color if transparent (e.g. if the user doesn't specify it in the color theme).
  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and (@hover-bg = transparent) {
    // Make sure the hover background color falls back on the default background color.
    .navbar-dropdown(@bg, @bg, @active-bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and (@active-bg = transparent) {
    // Make sure the active background color falls back on the default background color.
    .navbar-dropdown(@bg, @hover-bg, @bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and not (@active-bg = transparent) {
    @navbar-dropdown-contrast: 30%;

    @separator-color: contrast(@bg,
      darken(@bg, @navbar-dropdown-contrast),
      lighten(@bg, @navbar-dropdown-contrast));
    @separator-hover-color: contrast(@hover-bg,
      darken(@hover-bg, @navbar-dropdown-contrast),
      lighten(@hover-bg, @navbar-dropdown-contrast));
    @separator-active-color: contrast(@active-bg,
      darken(@active-bg, @navbar-dropdown-contrast),
      lighten(@active-bg, @navbar-dropdown-contrast));

    > a {
      /**
       * We have two anchors in the same menu entry: one has the label and the caret for extra small screens (phones,
       * where the menu is displayed vertically) and the other has the caret for larger screens (where the menu is
       * displayed horizontally).
       */
      float: left;
    }
    > .dropdown-split-left {
      /* Display it closer to the menu toggle. */
      padding-right: ceil(@navbar-padding-horizontal / 2);
      > .caret {
        /* Hide the caret used for extra small screens. */
        display: none;
      }
      /* The separator between the label and the toggle. */
      &:after {
        background-color: @separator-color;
        content: "";
        display: inline-block;
        height: @line-height-computed;
        position: absolute;
        right: 0;
        top: @navbar-padding-vertical;
        width: 1px;
      }
      &:hover:after {
        /* Update the separator color based on the hover color. */
        background-color: @separator-hover-color;
      }
      &:focus:after,
      &:active:after {
        /* Update the separator color based on the active color. */
        background-color: @separator-active-color;
      }
    }
    > .dropdown-split-right {
      /* Display it closer to the menu label. */
      padding-left: ceil(@navbar-padding-horizontal / 2);
      > .caret {
        /* Reset the left margin for the caret used on large screens. */
        margin-left: 0;
      }
    }
    &.open > .dropdown-split-left {
      /* Highlight only the toggle (right side) when the menu is open. */
      background-color: transparent;
      color: @navbar-default-link-color;
      &:hover {
        /* The link can be hovered when the menu is open because only the toggle is active. */
        background-color: @navbar-default-link-hover-bg;
        color: @navbar-default-link-hover-color;
      }
    }
  }

  .navbar-nav > .dropdown-split {
    .navbar-dropdown(@navbar-default-bg, @navbar-default-link-hover-bg, @navbar-default-link-active-bg)
  }
}

// Content menu  ======================================================

#contentmenu {
  .text-right();
  
 .dropdown {
    display: inline-block;
    font-size: @font-size-large;
    width: @font-size-large * 2.5;
    
    > a {
      color: @headings-color;
      padding: @font-size-large;
    }
  }
}

<commit_msg>XWIKI-12635: Search input improvements on the top bar.<commit_after>//
// Action Menus
// --------------------------------------------------

#menuview {
  .navbar {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
  }
  .navbar-header {
    float: left;
    min-width: percentage((1 / @grid-columns));
  }
  .navbar-brand {
    float: none;
    img {
      height: @navbar-height;
      display: inline;
    }
  }
  
  .navbar-nav {
    float: right;
    > li {
      float: right;
    }
  }
  .navbar-form {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    .box-shadow(none);
  }
  @media (max-width: @screen-sm-min) {
    .dropdown-menu .divider {
      background-color: @navbar-default-border;
    }
  }
}

#globalsearch {

  margin: 0;

  // Remove the bootstrap border on the form when the screen is small
  @media (max-width: @screen-sm-max) {
    border: none;
  }
 
  .btn {
    // When the global search is active, the button has an "hover"-kind color
    background-color: @navbar-default-link-hover-bg;
    border: 1px solid @navbar-default-link-hover-bg;
    box-shadow: none;
    color: @navbar-default-link-color;
    height: @navbar-height;
    margin: 0;
    padding: 10px @navbar-padding-horizontal;
    &:hover,
    &:focus {
      background-color: @navbar-default-link-hover-bg;
      box-shadow: none;
    }
  }
  
  // The global search input
  #headerglobalsearchinput { // we need to be that specific to be applied
    border-radius: 0;
    border: 0;
    min-width: 0;
    transition: width 0.3s, padding 0.3s;
    width: 200px; // we need to set a width in pixels otherwise the transition is not applied nicely
  }
  
  // When the global search is close
  &.globalsearch-close {
    // The button is transparent
    .btn {
      background-color: transparent;
      border: 1px solid transparent;
      // Except when it is hovering!
      &:hover,
      &:focus {
        background-color: @navbar-default-link-hover-bg;
        box-shadow: none;
      }
    }
    
    // The input has no width (it's hidden basically, but we need to set the width to 0 to have the nice transition)
    #headerglobalsearchinput { // we need to be that specific to be applied
      padding: 0;
      width: 0;
    }
  }
}

@media (min-width: @screen-sm-min) {
  .navbar-nav > li > a {
    /* When the page name is long, add ellipsis. */
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// Navbar avatar ==========================================================

.navbar-avatar {
  > a {
    max-height: @navbar-height;
    
    > img {
      @avatar-size: floor(ceil(@navbar-height/2)/2)*2;
      border-radius: @thumbnail-border-radius;
      height: @avatar-size;
      margin-top: -@navbar-padding-vertical+@navbar-height/2-@avatar-size/2;
      vertical-align: middle;
      width: @avatar-size;
    }
  }
}

// Icon in a navbar  ======================================================

.icon-navbar {
  cursor: pointer;
}

// Navbar dropdown ========================================================

@media (min-width: @screen-sm-min) {
  // We use mixin guards to simulate conditional assignment. We need the hover and active background color to fall back
  // on the default background color if transparent (e.g. if the user doesn't specify it in the color theme).
  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and (@hover-bg = transparent) {
    // Make sure the hover background color falls back on the default background color.
    .navbar-dropdown(@bg, @bg, @active-bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and (@active-bg = transparent) {
    // Make sure the active background color falls back on the default background color.
    .navbar-dropdown(@bg, @hover-bg, @bg)
  }

  .navbar-dropdown(@bg; @hover-bg; @active-bg) when not (@bg = transparent) and not (@hover-bg = transparent) and not (@active-bg = transparent) {
    @navbar-dropdown-contrast: 30%;

    @separator-color: contrast(@bg,
      darken(@bg, @navbar-dropdown-contrast),
      lighten(@bg, @navbar-dropdown-contrast));
    @separator-hover-color: contrast(@hover-bg,
      darken(@hover-bg, @navbar-dropdown-contrast),
      lighten(@hover-bg, @navbar-dropdown-contrast));
    @separator-active-color: contrast(@active-bg,
      darken(@active-bg, @navbar-dropdown-contrast),
      lighten(@active-bg, @navbar-dropdown-contrast));

    > a {
      /**
       * We have two anchors in the same menu entry: one has the label and the caret for extra small screens (phones,
       * where the menu is displayed vertically) and the other has the caret for larger screens (where the menu is
       * displayed horizontally).
       */
      float: left;
    }
    > .dropdown-split-left {
      /* Display it closer to the menu toggle. */
      padding-right: ceil(@navbar-padding-horizontal / 2);
      > .caret {
        /* Hide the caret used for extra small screens. */
        display: none;
      }
      /* The separator between the label and the toggle. */
      &:after {
        background-color: @separator-color;
        content: "";
        display: inline-block;
        height: @line-height-computed;
        position: absolute;
        right: 0;
        top: @navbar-padding-vertical;
        width: 1px;
      }
      &:hover:after {
        /* Update the separator color based on the hover color. */
        background-color: @separator-hover-color;
      }
      &:focus:after,
      &:active:after {
        /* Update the separator color based on the active color. */
        background-color: @separator-active-color;
      }
    }
    > .dropdown-split-right {
      /* Display it closer to the menu label. */
      padding-left: ceil(@navbar-padding-horizontal / 2);
      > .caret {
        /* Reset the left margin for the caret used on large screens. */
        margin-left: 0;
      }
    }
    &.open > .dropdown-split-left {
      /* Highlight only the toggle (right side) when the menu is open. */
      background-color: transparent;
      color: @navbar-default-link-color;
      &:hover {
        /* The link can be hovered when the menu is open because only the toggle is active. */
        background-color: @navbar-default-link-hover-bg;
        color: @navbar-default-link-hover-color;
      }
    }
  }

  .navbar-nav > .dropdown-split {
    .navbar-dropdown(@navbar-default-bg, @navbar-default-link-hover-bg, @navbar-default-link-active-bg)
  }
}

// Content menu  ======================================================

#contentmenu {
  .text-right();
  
 .dropdown {
    display: inline-block;
    font-size: @font-size-large;
    width: @font-size-large * 2.5;
    
    > a {
      color: @headings-color;
      padding: @font-size-large;
    }
  }
}


{'fraction_non_alphanumeric': 0.1631247251941961, 'fraction_numerical': 0.006375494650447017, 'mean_word_length': 2.365474722564735, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5458175', 'n_tokens_mistral': 4371, 'n_tokens_neox': 4107, 'n_words': 1184}