<commit_before>
.main-header
  // display: flex
  // flex-wrap: wrap
  // justify-content: space-between
  background: rgba(0, 0, 0, 0.18);

.main-header-group
  background: rgba(0, 0, 0, 0.35);
  max-heigth: 50px
  position fixed
  top 0px
  width 100%

  display: flex
  flex-direction: row
  flex-wrap: wrap
  border: 0 solid rgba(FOREGROUND, 0.5)
  z-index 100

  &:empty
    flex: 1

  // disable selecting text
  -webkit-touch-callout none
  -webkit-user-select none
  -khtml-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none

.main-header-item
  @extends $reset-button
  outline none
  overflow: hidden
  align-items: center
  background: rgba(MAIN_HIGHLIGHT, 0)
  border-radius: 2
  color: white
  cursor: normal
  display: flex
  padding: 0.5rem 1.5vw 0.2em
  white-space: nowrap


  &:hover
    background: rgba(MEDIUM_GRAY, 0.3)

  &.logo
    img
      width 42px
      height 42px
    color:  #efefef;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    line-height: 36px;
    text-align: center;
    transform: rotate(-11.719deg)
    &:hover
      background: transparent
    &.selected
      background: transparent
      border-bottom: none;

  &.selected
    background: rgba(MEDIUM_GRAY, 0.5)
    transition border 0.3s, background-color 0.3s
    border-bottom: solid 2px #8cbc8c;


  > a
    color: inherit
    text-decoration: none

a.main-header-item
  box-shadow: 0 0 0 inset
  transition: box-shadow 0.2s
  text-transform: uppercase
  letter-spacing: .2em


  &[data-active]
    box-shadow: 0 -3px 0 inset

.account-bar-avatar
  border-radius: 50%
  height: 3rem
  margin: -1.5rem 0 -1.5rem 1vw
  position: relative
  width: 3rem

.login
  @extends $reset-button
  float: right
  padding: 0.5rem 1.5vw 0.2em
  color rgba(255, 255, 255, 0.4)
  overflow: hidden
  align-items: center
  display: flex
  text-transform: uppercase
  line-height 4.5em

  img
    max-height 20px
    margin-right 8px

  .guest-hello
    padding-right 10px

  .logout
    padding-left 6px

  &:hover
    color white

  .options
    width 100px
    display inline-block
    padding-left 6px

    a
      margin-right 5px
      text-transform capitalize
      display inline-block
      width 18px
      height 18px
      line-height 18px
      font-size 12px
      text-align center
      color #000
      background none repeat scroll 0 0 rgba(255, 255, 255, 0.4)
      border-radius 50%

      &:hover
        color #fff

@media all and (max-width: 1200px)
  .login .label
    display none
<commit_msg>improve opacity fade in header<commit_after>
.main-header
  // display: flex
  // flex-wrap: wrap
  // justify-content: space-between
  background: rgba(0, 0, 0, 0.18);

.main-header-group
  // background: rgba(0, 0, 0, 0.35);
  background linear-gradient( 0, rgba(0,0,0,0.2), rgba(0,0,0,0.5), rgba(0,0,0,0.9), rgba(0,0,0,0.9), rgba(0,0,0,1.0) );
  max-heigth: 50px
  position fixed
  top 0px
  width 100%

  display: flex
  flex-direction: row
  flex-wrap: wrap
  border: 0 solid rgba(FOREGROUND, 0.5)
  z-index 100

  &:empty
    flex: 1

  // disable selecting text
  -webkit-touch-callout none
  -webkit-user-select none
  -khtml-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none

.main-header-item
  @extends $reset-button
  outline none
  overflow: hidden
  align-items: center
  background: rgba(MAIN_HIGHLIGHT, 0)
  border-radius: 2
  color: white
  cursor: normal
  display: flex
  padding: 0.5rem 1.5vw 0.2em
  white-space: nowrap


  &:hover
    background: rgba(MEDIUM_GRAY, 0.3)

  &.logo
    img
      width 42px
      height 42px
    color:  #efefef;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    line-height: 36px;
    text-align: center;
    transform: rotate(-11.719deg)
    &:hover
      background: transparent
    &.selected
      background: transparent
      border-bottom: none;

  &.selected
    background: rgba(MEDIUM_GRAY, 0.5)
    transition border 0.3s, background-color 0.3s
    border-bottom: solid 2px #8cbc8c;


  > a
    color: inherit
    text-decoration: none

a.main-header-item
  box-shadow: 0 0 0 inset
  transition: box-shadow 0.2s
  text-transform: uppercase
  letter-spacing: .2em


  &[data-active]
    box-shadow: 0 -3px 0 inset

.account-bar-avatar
  border-radius: 50%
  height: 3rem
  margin: -1.5rem 0 -1.5rem 1vw
  position: relative
  width: 3rem

.login
  @extends $reset-button
  float: right
  padding: 0.5rem 1.5vw 0.2em
  color rgba(255, 255, 255, 0.4)
  overflow: hidden
  align-items: center
  display: flex
  text-transform: uppercase
  line-height 4.5em

  img
    max-height 20px
    margin-right 8px

  .guest-hello
    padding-right 10px

  .logout
    padding-left 6px

  &:hover
    color white

  .options
    width 100px
    display inline-block
    padding-left 6px

    a
      margin-right 5px
      text-transform capitalize
      display inline-block
      width 18px
      height 18px
      line-height 18px
      font-size 12px
      text-align center
      color #000
      background none repeat scroll 0 0 rgba(255, 255, 255, 0.4)
      border-radius 50%

      &:hover
        color #fff

@media all and (max-width: 1200px)
  .login .label
    display none

{'fraction_non_alphanumeric': 0.10274494853221502, 'fraction_numerical': 0.05794891345787267, 'mean_word_length': 2.445173998686802, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '353459', 'n_tokens_mistral': 2194, 'n_tokens_neox': 1887, 'n_words': 522}