Make some css updates/fix change

Make some css updates/fix change

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 55px;
  display: flex;
  justify-content: space-between;
}

.main-window {
  display: flex;
  flex-direction: row;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;

  .inner {
    display: flex;
    flex-wrap: wrap;
  }

  a {
    display: inline-block;
    margin: 0 10px 8px 4px;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

// LEFT SIDE
.left-side {
  width: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  width: 144px;
}

.player-stats b {
  max-width: calc(~"100% - 40px");
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.state {
  height: 27px;

  span {
    padding-right: 5px;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
  //border-color: black;
  color: white;
}

.btn-stat:hover {
  background-color: rgba(0,128,0,0.35);
  border-color: @brand-primary;
  color: white;
}

.btn-stat:focus {
  outline: 0px;
  color: white;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px 7px;
  padding: 5px;
  text-align: center;
  background: rgba(183, 183, 183, 0.12);
  border-radius: 0.25rem;
  border: 1px solid rgba(128, 128, 128, 0.53);
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.plots-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plot-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }
}

.plot {
  margin: 5px;

  .popup.panel {
    position: absolute;
    width: 200px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }

  // &:hover > .popup.panel.hidden, .popup.panel.hidden:hover {
  //   display: block !important;
  // }
}

.arrow-indicator {
  position: absolute;
  left: -10px;
  top: calc(~"50% + 10px");
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: black;
  transform: rotate(45deg);
  border: 1px solid rgba(71, 58, 56, 0.95);
  border-top: none;
  border-right: none;
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  display: flex;
  flex-direction: column;
  width: 210px;
  justify-content: space-between;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 0.25);
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 1px;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

.schemes-pane {
  display: flex;
  flex-direction: row;
  margin: 5px;
  margin-top: 0;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  height: 100px;
}

.deck-cards {
  display: flex;
  height: 100px;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.discard .popup {
  position: absolute;
  left: -100px;
  top: 85px;
  bottom: initial;
  width: 500px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 110px;
  }

  &.our-side {
    top: initial;
    bottom: 85px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.player-home-row .additional-cards .popup {
  position: absolute;
  left: -380px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 400px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.dead .popup {
  position: absolute;
  left: -90px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 100px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.draw {
  .popup {
    left: -271px;
    position: absolute;
    bottom: 85px;
    width: 590px;
    min-height: 92px;

    .card {
      margin: 2px;
    }
  }

  .inner {
    height: 450px;
    overflow-y: scroll;
  }
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.honor-fan {
  position: relative;
  margin: 5px;
  padding: 5px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  flex: 1;
}

.ring-info {
  flex: 1;
}

img.ring {
  padding: 5px;
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

.province-deck {
  margin: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup.panel {
    position: absolute;
    width: 230px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 55px;
  display: flex;
  justify-content: space-between;
}

.main-window {
  display: flex;
  flex-direction: row;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;

  .inner {
    display: flex;
    flex-wrap: wrap;
  }

  a {
    display: inline-block;
    margin: 0 10px 8px 4px;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

// LEFT SIDE
.left-side {
  width: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  width: 144px;
}

.player-stats b {
  max-width: calc(~"100% - 40px");
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.state {
  height: 27px;

  span {
    padding-right: 5px;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
  //border-color: black;
  color: white;
}

.btn-stat:hover {
  background-color: rgba(0,128,0,0.35);
  border-color: @brand-primary;
  color: white;
}

.btn-stat:focus {
  outline: 0px;
  color: white;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px 7px;
  padding: 5px;
  text-align: center;
  background: rgba(183, 183, 183, 0.12);
  border-radius: 0.25rem;
  border: 1px solid rgba(128, 128, 128, 0.53);
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.plots-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plot-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }
}

.plot {
  margin: 5px;

  .popup.panel {
    position: absolute;
    width: 200px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }

  // &:hover > .popup.panel.hidden, .popup.panel.hidden:hover {
  //   display: block !important;
  // }
}

.arrow-indicator {
  position: absolute;
  left: -10px;
  top: calc(~"50% + 10px");
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: black;
  transform: rotate(45deg);
  border: 1px solid rgba(71, 58, 56, 0.95);
  border-top: none;
  border-right: none;
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  display: flex;
  flex-direction: column;
  width: 210px;
  justify-content: space-between;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 0.25);
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 1px;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

.schemes-pane {
  display: flex;
  flex-direction: row;
  margin: 5px;
  margin-top: 0;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  height: 100px;
}

.deck-cards {
  display: flex;
  height: 100px;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.discard .popup {
  position: absolute;
  left: -100px;
  top: 85px;
  bottom: initial;
  width: 500px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 110px;
  }

  &.our-side {
    top: initial;
    bottom: 85px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.player-home-row .additional-cards .popup {
  position: absolute;
  left: -380px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 400px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.dead .popup {
  position: absolute;
  left: -90px;
  top: 65px;
  bottom: initial;
  width: 465px;
  min-height: 92px;

  .arrow-indicator {
    transform: rotate(135deg);
    top: -11px;
    left: 100px;
  }

  &.our-side {
    top: initial;
    bottom: 70px;

    .arrow-indicator {
      transform: rotate(-45deg);
      top: inherit;
      bottom: -11px;
    }
  }
}

.draw {
  .popup {
    left: -271px;
    position: absolute;
    bottom: 85px;
    width: 590px;
    min-height: 92px;

    .card {
      margin: 2px;
    }
  }

  .inner {
    height: 450px;
    overflow-y: scroll;
  }
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.honor-fan {
  position: relative;
  margin: 5px;
  padding: 5px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  flex: 1;
}

.ring-info {
  flex: 1;
}

img.ring {
  padding: 5px;
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

province-deck {
  margin: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup.panel {
    position: absolute;
    width: 200px;
    min-height: 92px;
    left: 75px;
    top: 0;
    transform: translateY(-50%);
    background-color: black;
    &.hidden {
      display: none;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}


change column width=80, glutter width=0

change column width=80, glutter width=0

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/sunqb/bootstrap.git/'


reduce font size

reduce font size

fatal: unable to access 'https://github.com/quillcontent/qboot.git/': The requested URL returned error: 403


#40 加入搜索框后页面不正常显示bug修复

#40 加入搜索框后页面不正常显示bug修复

/* === Search Bar === */
@searchbarBorderColor: #b4b4b4;
@searchbarSize: 2.2rem;
.searchbar {
  padding: 8px 0;
  overflow: hidden;
  height: @searchbarSize;
  .align-items(center);

  .searchbar-cancel {
    margin-right: -3rem;
    width: 2.2rem;  //注意，这里比 2.5rem 要小，因为如果位置刚好一样，可能在动画的过程中出现抖动
    float: right;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    transition: all .3s;
    opacity: 0;
    transform: translate3d(0,0,0);
  }

  .search-input {
    transform: translate3d(0,0,0);
    margin-right: 0;
    transition: all .3s;

    input {
      margin: 0;
      height: 1.4rem;
    }
  }

  &.searchbar-active {
    .searchbar-cancel {
      margin-right: 0;
      opacity: 1;

      + .search-input {
        margin-right: 2.5rem;
      }
    }
  }
}

.search-input {
  position: relative;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 1.4rem;
    display: block;
    border: none;
    appearance: none;
    border-radius: 0.25rem;
    font-family: inherit;
    color: @color-text;
    font-size: 0.7rem;
    font-weight: normal;
    padding: 0 0.5rem;
    background-color: #fff;
    border: 1px solid @searchbarBorderColor;
    &::-webkit-input-placeholder {
      color: @color-text-gray-light;
      opacity: 1;
    }
  }
  .icon {
    position: absolute;
    font-size: 0.9rem;
    color: @searchbarBorderColor;
    top: 50%;
    left: 0.3rem;
    transform: translate3D(0,-50%,0);
  }

  label + input {
    padding-left: 1.4rem;
  }

}

.bar .searchbar {
  margin: 0 -0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, .1);

  .search-input input {
    border: 0;
  }
  .searchbar-cancel {
    color: @color-text-secondary;
  }
}

/* === Search Bar === */
@searchbarBorderColor: #b4b4b4;
@searchbarSize: 2.2rem;
.searchbar {
  padding: 8px 0;
  height: @searchbarSize;
  .align-items(center);

  .searchbar-cancel {
    margin-right: -3rem;
    width: 2.2rem;  //注意，这里比 2.5rem 要小，因为如果位置刚好一样，可能在动画的过程中出现抖动
    float: right;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    transition: all .3s;
    opacity: 0;
    transform: translate3d(0,0,0);
  }

  .search-input {
    transform: translate3d(0,0,0);
    margin-right: 0;
    transition: all .3s;

    input {
      margin: 0;
      height: 1.4rem;
    }
  }

  &.searchbar-active {
    .searchbar-cancel {
      margin-right: 0;
      opacity: 1;

      + .search-input {
        margin-right: 2.5rem;
      }
    }
  }
}

.search-input {
  position: relative;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 1.4rem;
    display: block;
    border: none;
    appearance: none;
    border-radius: 0.25rem;
    font-family: inherit;
    color: @color-text;
    font-size: 0.7rem;
    font-weight: normal;
    padding: 0 0.5rem;
    background-color: #fff;
    border: 1px solid @searchbarBorderColor;
    &::-webkit-input-placeholder {
      color: @color-text-gray-light;
      opacity: 1;
    }
  }
  .icon {
    position: absolute;
    font-size: 0.9rem;
    color: @searchbarBorderColor;
    top: 50%;
    left: 0.3rem;
    transform: translate3D(0,-50%,0);
  }

  label + input {
    padding-left: 1.4rem;
  }

}

.bar .searchbar {
  margin: 0 -0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, .1);

  .search-input input {
    border: 0;
  }
  .searchbar-cancel {
    color: @color-text-secondary;
  }
}


feat(ui): Use custom code highlight colors (from docs) (#12999)

fatal: unable to access 'https://github.com/beeftornado/sentry.git/': The requested URL returned error: 403


Create navbar.less

Create navbar.less

fatal: unable to access 'https://github.com/fotisz/MachineLearningIntro.git/': The requested URL returned error: 403


fix(menu bar): Fix displace of top bar after opening menu bar

// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------

// Body reset
// ----------

body {
	margin: 0;
	font-family: @baseFontFamily;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	color: @sd-text;
	background-color: @sd-background;
	overflow: hidden;
	height:100%;
}

// Links
// -----

a {
	color: @linkColor;
	text-decoration: none;
}
a:hover {
	color: @linkColorHover;
	text-decoration: underline;
}

// Layouts
// --------------------------------------------

// Main container
// ------------------------------------
#main-container {
	position:absolute;
	top:0; right: 0; left:0;
	padding-top:@topspace;
	.box-sizing(border-box);
	height:100%;
	background: @background-main;
	overflow-y:visible;
	.transition( all 0.3s ease);
	overflow-x:hidden;
	&.menu {
		left: @sf-main-menu-width !important;
	}
}

// Main section
// ------------------------------------

.main-section {
	position:absolute;
	top: @subnav-height+@topspace;
	bottom:0; left:0; right:0;
	margin:0;
	padding:0;
	z-index:1;
	padding-bottom:35px !important; /* because of scratchpad*/
	&.with-subnav {
		.preview-layout {
			top : @nav-height;
			.preview-pane {
				.actions {
					padding: 15px 20px;
					height: 28px;
				}
				.user-details-pane {
					top: 40px;
				}
			}
		}
	}
}

.main-section.search {
	top: @topspace;
}

// Preview layout
// ------------------------------------
.action-bar { //overhidding the header of preview layout
	position: absolute;
	top: -96px;
	left: 0; right: 0;
	height: 48px;
	background: #fff;
	z-index: 1;
	.border-box();
	padding: 10px;
	.transition(all ease 0.35s);
	border-bottom: 1px solid #dfdfdf;
	&.show {
		top: -48px;
	}
}

.preview-layout {
	position: absolute;
	top: 0; right: 0;
	left: 0; bottom: 0;
	.transition(right ease 0.2s);
	.list-pane, .preview-pane {
		> header {
			height: @nav-height;
			.border-box();
			//border-bottom: 1px solid #dfdfdf;
			position: absolute;
			left: 0; right: 0; top: 0;
			.box-shadow(0 1px 0 0 rgba(0,0,0,0.1));
		}
		> .content {
			position: absolute;
			top: @nav-height + 1;
			left: 0; right: 0; bottom: 0;
		}
	}
	.list-pane {
		position:absolute;
		background: @background-main;
		top: 0;
		right: @sidepreview-width; //sidebar preview static + scrollbar rigth space
		left: 0; bottom:0;
		border-right: 1px solid #d0d0d0;
		overflow: auto;
		overflow-x: hidden;
		z-index: 1;
		.transition(right ease 0.2s);
		.shadow-list-holder {
			padding: 20px;
		}
		> header {
			background-color:@sd-background;
		}
		> .content {
			overflow: auto;
		}
	}
	.preview-pane {
		position: absolute;
		width: @sidepreview-width;
		top: 0;
		right: 0; bottom: 0;
		background: #fff;
		overflow-y: auto;
		.transition(right ease 0.2s);
		z-index: 2;
		.box-shadow(inset 2px 0 3px -1px #d8d8d8);
		> header {
			padding: 0 20px;
			position: relative;
			.btn {
				margin-top: 10px;
			}
			.close-preview {
				position: absolute;
				top: 14px; right: 14px;
				.opacity(60);
				background: none;
				border: 0;
				padding: 0;
				&:hover {
					.opacity(80);
				}
			}
		}
		> .content {
			.additional-info {
				border-bottom: 1px solid #dfdfdf;
				padding: 10px 20px;
			}
			.action-menu {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
			}
		}
	}
	&.closed {
		.transition(right ease 0.2s);
		.list-pane {
			right: 0;
			border-right: 0;
		}
		.preview-pane {
			right: -@sidepreview-width;
		}
	}
}

// Split content
// ------------------------------------
.split-content {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	> .nav, > .header, > header {
		position: absolute;
		top: 0; left: 0; right: 0;
		height: @nav-height;
		border-bottom: 1px solid #f0f0f0;
		.border-box();
	}
	> .content {
		position: absolute;
		top: @nav-height; left: 0; right: 0; bottom: 0;
		overflow: auto;
		overflow-x: hidden;
		padding: 20px;
	}
}

// Tablist and tabpanes
// ------------------------------------

.tablist {
	.transition( all 0.3s ease);
	width:@tablist-width;
	position:absolute;
	top:0;
	bottom:0;
	z-index:20;
	background: @tablist-background;
	overflow:hidden;
	&.left-tablist {
		left:0;
                overflow: visible;
		.box-shadow(inset -8px 0 7px -6px #888);
	}
	&.right-tablist {
		right:0;
                overflow: visible;
		.box-shadow(inset 8px 0 7px -6px #888);
	}
	.navigation-tabs {
		margin: -1px 0 0;
		border: 0;
		list-style-type: none;
		> li {
			position:relative;
			float:none;
			margin-bottom:-1px;
			.btn {
				display:block;
				width: @tablist-width;
				height: @tablist-width - 2;
				//line-height: @tablist-width - 2;
				text-align: center;
				padding: 0;
				margin:0;
				.border-radius(0px);
				border: 1px solid #898989;
				border-width: 1px 0 !important;
				background: none;
				.box-shadow(none);
				&:hover {
					background: #b7b7b7;
					border: 1px solid #999999;
					border-width: 1px 0 !important;
				}
			}
			&.active {
				.btn {
					background: #b8b8b8;
				}
			}
		}
	}
}
.tabpane {
	position:absolute;
	width:@tabpane-width;
	top:0;
	bottom:0;
	background: @tabpane-background;
	border-color:@tabpane-border;
	border-style: solid;
	z-index:10;
	.box-sizing(border-box);
	.transition( all 0.3s ease);
	&.left-tabpane {
		left:-@tabpane-width;
		border-width: 0 3px 0 0;
		.box-shadow(2px 0px 8px 0px rgba(50,50,50,.35));

		&.open-tabpane {
			left:@tablist-width;
		}
	}
	&.right-tabpane {
		right:-@tabpane-width;
		border-width: 0 0 0 3px;
		.box-shadow(-2px 0px 8px 0px rgba(40,50,50,.35));
		&.open-tabpane {
		 	right:@tablist-width;
		}
	}
	.tabcontent {
		padding:@tabcontent-padding;
		padding-bottom: @tabcontent-padding + 30px; //because of scratchpad
		.box-sizing(border-box);
		position: absolute;
		bottom: 0;
		top: 0;
		left:1px;
		right:1px;
	 	overflow: hidden;
	}
}

// Notificaton pane
// ---------------------------------------------

.notification-pane {
	position: fixed;
	top: @nav-height;
	bottom: 0;
	right: -@notification-pane-width;
	width: @notification-pane-width;
	.box-sizing(border-box);
	background: #313131;
	z-index: 2000;
	.transition(right ease 0.3s);
	&.show {
		right: 0;
	}
	> .header {
		height: 65px;
		width: 100%;
		background: #212121;
		.box-shadow(inset 0 4px 4px -2px #000);
		border-botom: 1px solid #313131;
		.avatar {
			margin: 12px 16px;
		}
		.user-info {
			margin-left: 60px;
			height: 40px;
			padding: 12px 10px 2px 10px;
			.box-sizing(border-box);
			.name {
				color: #c5c5c5;
				font-size: 12px;
				display: block;
				line-height: 12px;
			}
			.displayname {
				font-size: 11px;
				color: #727272;
				display: block;
				line-height: 12px;
				margin-top: 2px;
			}
		}
		.actions {
			margin-left: 70px;
			height: 20px;
			.box-sizing(border-box);
			button {
				.reset-button();
			}
			a, button {
				font-size: 10px;
				color: #8d8d8d;
				text-decoration: none;
				text-transform: uppercase;
				.box-sizing(border-box);
				line-height: 20px;
				padding-right:16px;
				padding-left: 0;
				display: inline-block;
				margin: 0 !important;
				&:last-child {
					border:0;
				}
				&:hover {
					color: #ccc;
				}
			}
		}

	}
	> .content {
		position: absolute;
		top: 65px;
		left: 0; right: 0; bottom: 0;
		border-top: 2px solid #464646;
		.box-shadow(inset 4px 0 4px -2px #202020);
		.module {
			margin-top: 20px;
			.title {
				font-size: 16px;
				color:#f8f8f8;
				padding: 10px;
				.text-light();
			}
			.notification-list {
				right: 0; left: 0;
			}
		}
	}
}

// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------

// Body reset
// ----------

body {
	margin: 0;
	font-family: @baseFontFamily;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	color: @sd-text;
	background-color: @sd-background;
	overflow: hidden;
	height:100%;
}

// Links
// -----

a {
	color: @linkColor;
	text-decoration: none;
}
a:hover {
	color: @linkColorHover;
	text-decoration: underline;
}

// Layouts
// --------------------------------------------

// Main container
// ------------------------------------
#main-container {
	position:absolute;
	top:0; right: 0; left:0;
	padding-top:@topspace;
	.box-sizing(border-box);
	height:100%;
	background: @background-main;
	overflow-y:visible;
	.transition( all 0.3s ease);
	overflow-x:hidden;
	&.menu {
		left: @sf-main-menu-width !important;
		.subnav {
			left: @sf-main-menu-width;
			right: 0 !important;
		}
	}
}

// Main section
// ------------------------------------

.main-section {
	position:absolute;
	top: @subnav-height+@topspace;
	bottom:0; left:0; right:0;
	margin:0;
	padding:0;
	z-index:1;
	padding-bottom:35px !important; /* because of scratchpad*/
	&.with-subnav {
		.preview-layout {
			top : @nav-height;
			.preview-pane {
				.actions {
					padding: 15px 20px;
					height: 28px;
				}
				.user-details-pane {
					top: 40px;
				}
			}
		}
	}
}

.main-section.search {
	top: @topspace;
}

// Preview layout
// ------------------------------------
.action-bar { //overhidding the header of preview layout
	position: absolute;
	top: -96px;
	left: 0; right: 0;
	height: 48px;
	background: #fff;
	z-index: 1;
	.border-box();
	padding: 10px;
	.transition(all ease 0.35s);
	border-bottom: 1px solid #dfdfdf;
	&.show {
		top: -48px;
	}
}

.preview-layout {
	position: absolute;
	top: 0; right: 0;
	left: 0; bottom: 0;
	.transition(right ease 0.2s);
	.list-pane, .preview-pane {
		> header {
			height: @nav-height;
			.border-box();
			//border-bottom: 1px solid #dfdfdf;
			position: absolute;
			left: 0; right: 0; top: 0;
			.box-shadow(0 1px 0 0 rgba(0,0,0,0.1));
		}
		> .content {
			position: absolute;
			top: @nav-height + 1;
			left: 0; right: 0; bottom: 0;
		}
	}
	.list-pane {
		position:absolute;
		background: @background-main;
		top: 0;
		right: @sidepreview-width; //sidebar preview static + scrollbar rigth space
		left: 0; bottom:0;
		border-right: 1px solid #d0d0d0;
		overflow: auto;
		overflow-x: hidden;
		z-index: 1;
		.transition(right ease 0.2s);
		.shadow-list-holder {
			padding: 20px;
		}
		> header {
			background-color:@sd-background;
		}
		> .content {
			overflow: auto;
		}
	}
	.preview-pane {
		position: absolute;
		width: @sidepreview-width;
		top: 0;
		right: 0; bottom: 0;
		background: #fff;
		overflow-y: auto;
		.transition(right ease 0.2s);
		z-index: 2;
		.box-shadow(inset 2px 0 3px -1px #d8d8d8);
		> header {
			padding: 0 20px;
			position: relative;
			.btn {
				margin-top: 10px;
			}
			.close-preview {
				position: absolute;
				top: 14px; right: 14px;
				.opacity(60);
				background: none;
				border: 0;
				padding: 0;
				&:hover {
					.opacity(80);
				}
			}
		}
		> .content {
			.additional-info {
				border-bottom: 1px solid #dfdfdf;
				padding: 10px 20px;
			}
			.action-menu {
				position: absolute;
				top: 0;
				right: 0;
				width: 50px;
			}
		}
	}
	&.closed {
		.transition(right ease 0.2s);
		.list-pane {
			right: 0;
			border-right: 0;
		}
		.preview-pane {
			right: -@sidepreview-width;
		}
	}
}

// Split content
// ------------------------------------
.split-content {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	> .nav, > .header, > header {
		position: absolute;
		top: 0; left: 0; right: 0;
		height: @nav-height;
		border-bottom: 1px solid #f0f0f0;
		.border-box();
	}
	> .content {
		position: absolute;
		top: @nav-height; left: 0; right: 0; bottom: 0;
		overflow: auto;
		overflow-x: hidden;
		padding: 20px;
	}
}

// Tablist and tabpanes
// ------------------------------------

.tablist {
	.transition( all 0.3s ease);
	width:@tablist-width;
	position:absolute;
	top:0;
	bottom:0;
	z-index:20;
	background: @tablist-background;
	overflow:hidden;
	&.left-tablist {
		left:0;
                overflow: visible;
		.box-shadow(inset -8px 0 7px -6px #888);
	}
	&.right-tablist {
		right:0;
                overflow: visible;
		.box-shadow(inset 8px 0 7px -6px #888);
	}
	.navigation-tabs {
		margin: -1px 0 0;
		border: 0;
		list-style-type: none;
		> li {
			position:relative;
			float:none;
			margin-bottom:-1px;
			.btn {
				display:block;
				width: @tablist-width;
				height: @tablist-width - 2;
				//line-height: @tablist-width - 2;
				text-align: center;
				padding: 0;
				margin:0;
				.border-radius(0px);
				border: 1px solid #898989;
				border-width: 1px 0 !important;
				background: none;
				.box-shadow(none);
				&:hover {
					background: #b7b7b7;
					border: 1px solid #999999;
					border-width: 1px 0 !important;
				}
			}
			&.active {
				.btn {
					background: #b8b8b8;
				}
			}
		}
	}
}
.tabpane {
	position:absolute;
	width:@tabpane-width;
	top:0;
	bottom:0;
	background: @tabpane-background;
	border-color:@tabpane-border;
	border-style: solid;
	z-index:10;
	.box-sizing(border-box);
	.transition( all 0.3s ease);
	&.left-tabpane {
		left:-@tabpane-width;
		border-width: 0 3px 0 0;
		.box-shadow(2px 0px 8px 0px rgba(50,50,50,.35));

		&.open-tabpane {
			left:@tablist-width;
		}
	}
	&.right-tabpane {
		right:-@tabpane-width;
		border-width: 0 0 0 3px;
		.box-shadow(-2px 0px 8px 0px rgba(40,50,50,.35));
		&.open-tabpane {
		 	right:@tablist-width;
		}
	}
	.tabcontent {
		padding:@tabcontent-padding;
		padding-bottom: @tabcontent-padding + 30px; //because of scratchpad
		.box-sizing(border-box);
		position: absolute;
		bottom: 0;
		top: 0;
		left:1px;
		right:1px;
	 	overflow: hidden;
	}
}

// Notificaton pane
// ---------------------------------------------

.notification-pane {
	position: fixed;
	top: @nav-height;
	bottom: 0;
	right: -@notification-pane-width;
	width: @notification-pane-width;
	.box-sizing(border-box);
	background: #313131;
	z-index: 2000;
	.transition(right ease 0.3s);
	&.show {
		right: 0;
	}
	> .header {
		height: 65px;
		width: 100%;
		background: #212121;
		.box-shadow(inset 0 4px 4px -2px #000);
		border-botom: 1px solid #313131;
		.avatar {
			margin: 12px 16px;
		}
		.user-info {
			margin-left: 60px;
			height: 40px;
			padding: 12px 10px 2px 10px;
			.box-sizing(border-box);
			.name {
				color: #c5c5c5;
				font-size: 12px;
				display: block;
				line-height: 12px;
			}
			.displayname {
				font-size: 11px;
				color: #727272;
				display: block;
				line-height: 12px;
				margin-top: 2px;
			}
		}
		.actions {
			margin-left: 70px;
			height: 20px;
			.box-sizing(border-box);
			button {
				.reset-button();
			}
			a, button {
				font-size: 10px;
				color: #8d8d8d;
				text-decoration: none;
				text-transform: uppercase;
				.box-sizing(border-box);
				line-height: 20px;
				padding-right:16px;
				padding-left: 0;
				display: inline-block;
				margin: 0 !important;
				&:last-child {
					border:0;
				}
				&:hover {
					color: #ccc;
				}
			}
		}

	}
	> .content {
		position: absolute;
		top: 65px;
		left: 0; right: 0; bottom: 0;
		border-top: 2px solid #464646;
		.box-shadow(inset 4px 0 4px -2px #202020);
		.module {
			margin-top: 20px;
			.title {
				font-size: 16px;
				color:#f8f8f8;
				padding: 10px;
				.text-light();
			}
			.notification-list {
				right: 0; left: 0;
			}
		}
	}
}


Create fonts.less

Create fonts.less

fatal: unable to access 'https://github.com/Tach-Yon/Tap-Tap-Adventure.git/': The requested URL returned error: 403


Add less file!!!

Add less file!!!

#tidelineSettings {
  user-select: all;
}

error: pathspec 'app/components/chart/settings.less' did not match any file(s) known to git


Better mobile banner.

Better mobile banner.

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/simonpfry/AuctionHouse.git/'


Ad skipper css updates for Widgets integration.

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/OnCircle/gbox-video-player.git/'


Test page styles

Test page styles

body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.scroll {
    float: left;
    width: 20%;
    height: 400px;

    > .area {
        padding: .2em 1em;
        &.test1 {
            background: #F2E4D8;

            &.scroll.area + .bar {
                background: #808CA6;
                .thumb {
                    background: #283D59;
                }
            }
        }
    }
}

error: pathspec 'src/less/styles-example.less' did not match any file(s) known to git


OR-250 (OR-250-2) correct an error that remained after conflict resolution

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/'


Create style.less

Create style.less

@import "./variable";
@import "./fn";

//how to use it? 如何使用？
.pageview {
    top: 0;
    left: 0;
    width: 100%;
    min-width: @min_device_width_px;
    height: 100%;
    color: #7d7d7d;
    font-size: 14px;
}

.container {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 100*@u;
    position: relative;
    border-bottom: 1px solid #d6d6d6;

    &.fixed {
        position: fixed;
        border-bottom: none;
        top: 0;
        left: 0;
        z-index: 10;

        .container {
            position: relative;
            height: 100*@u;
            border-bottom: 1px solid #d6d6d6;
            background-color: #fbfbfb;
        }
    }

    .back {
        position: absolute;
        display: block;
        width: 100*@u;
        height: 100*@u;
        left: 0;
        top: 0;
    }

    .title {
        display: block;
        color: #434343;
        font-size: 34*@u;
        line-height: 100*@u;
        text-align: center;
    }
}

.back_ico {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAdCAYAAACjbey/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpBOTMwMDA0QTc4Q0VFMzExQTdCMUIwNzRBMjEzQTNFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QjZFQjRFMTlGQUQxMUU1ODM5OUIzQkIwNTg5NTUzNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QjZFQjRFMDlGQUQxMUU1ODM5OUIzQkIwNTg5NTUzNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RjVFMTNCMzkxOURFNTExQjQ5NkQwNTg1MkIxQzJFMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOTMwMDA0QTc4Q0VFMzExQTdCMUIwNzRBMjEzQTNFOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk338gMAAAFwSURBVHjanJVPRINxGMdXZkREjIjoNHaKncoijS5FokinuhSjS9SljiWabpG6lIgO6TBLKaVDdBoxolNERIxOMaLPw/dlZlvvsy8f+/c+n9/7Pr8/a8tkMpEW0gGnEG9vsbgAU1DyCrrgBkZhH7IeQTfcQRpyVmxfhhXEVZyCLVgLfoiGKO5RcRI2JIiEFfSqOKFRc7UXNBP0wQP0wzLs1buokSChke0OluCw0Sj1BEkVW+MW4LjZM9YKBjTPNt+zcP5fh6sFKRV3wgzkw8xvIBiEK4jBJFyHXV1RLcuCPk/AvWdtm+BEGyTrLQ6WshVWYFuP4hbkdesxNTHtFVhuYUzvg+3qElgeJamoqeNegeUJ7Iz7gQuY9gosRRiBMpzBnFdgKUnyqWme9wosrzAMH3AEi16B5U0Sez2AFa/A8g5D8AK7sO4VRNQL68kzbAqXwPKlKS7qLnbCnsrVKUtiW38Vflv5a/uW5NKOvz8BBgBlrUQb6joeEAAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-size: 16*@u 29*@u;
    background-position: center center;
}

.main {
    padding-top: 100*@u;

    ul, li {
        list-style: decimal;
    }

    ul {
        padding-top: 30*@u;
        padding-left: 30*@u;
        margin-left: 60*@u;
        margin-right: 60*@u;
    }
    li{
        margin-bottom:10*@u;
    }
}

error: pathspec 'src/less/style.less' did not match any file(s) known to git


Base for standard replacement theme

Base for standard replacement theme

/*
 *
 * INCOMPLETE, FUTURE REPLACEMENT OF STANDARD THEME
 *
 */

@import "preload.less";
@import "base.less";

/* COLORS
 * When creating a new skin,
 * copy/paste the following section and
 * modify color codes.
 *****************************************/

@text-color-1: #1D1B1D;
@text-color-2: #E2EFFF;
@background-color-1: #F3F7FA;
@background-color-2: #D3D7DA;
@border-color-1: #606060;
@border-color-2: #F3F7FA;
@infoPanel-color-1: @text-color-1;
@infoPanel-color-2: #B0B0B0;
@rename-color-1: @text-color-2;
@rename-color-2: @text-color-1;
@menu-color-1: @text-color-1;
@menu-color-2: #EEEEEE;
@odd-result-color: rgba(255,255,255,0.8);
@playing-row-color-1: #8996B9;
@playing-row-color-2: #000;
@selected-color: #98A7BD;

/* FUNCTIONS
*******************************/

.bottomToolbar() {
	.lightGradient();
}

.playlistbar() {
    background:-webkit-gradient(linear, left bottom, left top, color-stop(0%, #7C8697), color-stop(100%, #5D6677));
    background:-moz-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:-o-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    border-top: 1px solid #000;
    border-bottom: 1px solid #5E6570;
	color: #FFF;
}

.fatbar() {
    background:-webkit-gradient(linear, left bottom, left top, color-stop(0%, #7C8697), color-stop(100%, #5D6677));
    background:-moz-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:-o-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    border-top: 1px solid #5E6570;
    border-bottom: 1px solid #000;
	color: #FFF;
}

/* DEFAULT
*******************************/
html,
body{
	color: @text-color-1;
	background: @background-color-1;
	text-shadow: 0px 0px 0px transparent;
}
input[type=text],
textarea {
	background: @background-color-1;
	color: @text-color-1;
}

/* CONTENT
*******************************/
body {
}
#content {
}

/* LEFT
*******************************/
#content-left {

}

/* PLAYLISTS
*******************************/
#left-menu {
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0%, #7C8697), color-stop(100%, #5D6677));
    background:-moz-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:-o-linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
    background:linear-gradient(center bottom, #7C8697 0%, #5D6677 100%);
	color: #FFF;
}
.playlistElem {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	text-shadow: 0px 1px 1px #000;
}
#left-menu > ul > .selected,
#left-menu > .selected:nth-child(odd) {

}

#login {
	border-bottom: 1px solid @border-color-2;
}
#login a {
    color: #FFF;
	text-shadow: 0px 1px 1px #000;
	border: 1px solid transparent;
	font-size: 13px;
}

#playlists .remote .title {
    background: url(/images/circle_white.png) center right no-repeat;
}
#playlists .selected.remote .title {
    background-image: url(/images/circle_dark.png);
}
#playlists {
}
#new-playlist {
    text-decoration: none;
    color: #FFF;
	text-shadow: 0px 1px 1px #000;
}
#new-playlist span {
}
#new-playlist span:before {
    font-weight: bold;
    padding-right: 5px;
    content: "+";
}
#left-menu #new-playlist input[type=text],
#left-menu input.rename {
    border: solid 1px @border-color-1;
    color: @rename-color-1;
	background: @rename-color-2;
}
#left-menu .playlistElem.selected {
	background: @selected-color;
    color: #000;
	text-shadow: 0px 0px 0px transparent;
}

/* TABS
 ***********************************/
#tabs {
	border-bottom: 1px solid @border-color-2;
}
#tabs li {
}
#left-menu li.loading,
#left-menu li.selected.loading {
    background-image: url(/images/loading.gif);
    background-repeat: no-repeat;
    background-position: center right;
}

/* CONTROLS
 ***********************************/

#controls {
    .bottomToolbar();
}

/* RIGHT
 ***********************************/

#content-right {
	background: @background-color-2;
}

#search {
}

#search > input[type=text] {
    border: 0;
	background: @background-color-2;
    .border(30px);
}
#search .loader {
	background: url('/images/loading.gif');
}

#results-container {
	background: #C3C7CA;
//	background-image: -moz-radial-gradient(0% 50%, circle farthest-side, #C3C7CA 0%,#F3F7FA 70%, #FFF 100%);
//	background-image: -webkit-radial-gradient(50% 50%, circle farthest-side, #0000ff 0%,#ff00ff 100%);
//	background-image: -o-radial-gradient(50% 50%, circle farthest-side, #0000ff 0%,#ff00ff 100%);
//	background-image: radial-gradient(50% 50%, circle farthest-side, #0000ff 0%,#ff00ff 100%);
}
#results-container.target {
    background: inherit;
    color: inherit;
}

.results {
}
.results > .video {
	border-top: solid 1px transparent;
	border-bottom: solid 1px transparent;
	text-shadow: 0px 0px 0px transparent;
}
.results > .video .rating {
    border: 1px solid @text-color-1;
    opacity: 0.6;
}
.results > .video .rating div {
    background: @text-color-1;
}
.results > .video.selected .rating {
    border: 1px solid @text-color-2;
}
.results > .video.selected .rating div {
    background: @text-color-2;
}
.results > .video:nth-child(odd) {
    background-color: @odd-result-color;
}
.results > .playing,
.results > .playing:nth-child(odd) {
    color: @playing-row-color-2;
	background-color: @playing-row-color-1;
	text-shadow: 0px 0px 0px transparent;
	background: -moz-linear-gradient(center bottom, #697699 0%, #8996B9 50%, #A9B6D9 100%);
}
.results > .selected,
.results > .selected:nth-child(odd) {
    background-color: @selected-color;
	color: #000;
	text-shadow: 0px 0px 0px transparent;
}
.results > .disabled {
    color: #FFF;
}

.results > .playlist {
}

.results > .loadMore {
}

.results > .loading {
    background-image: url('/images/loading.gif');
    background-position: center left;
    background-repeat: no-repeat;
}

.results > .video > ul {
}
.results > .video > ul > li {
}
.results > .video > ul > .playing,
.results > .video > ul > .playing:nth-child(odd) {
    color: @playing-row-color-2;
	background-color: @playing-row-color-1;
}
.results > .video > ul > .selected,
.results > .video > ul > .selected:nth-child(odd) {
	background-color: @selected-color;
	color: @text-color-2;
}
.results > .video > ul > .disabled {
	color: #FFF;
}

.alternatives {
}
.alternatives li {
}
.alternatives > .playing {
	text-shadow: 0px 0px 0px transparent;
}

/* PLAYLISTBAR
*******************************/
#playlistbar {
	text-shadow: 0px 1px 1px #000;
	color: @text-color-1;
	.playlistbar();
}
#playlistbar .title {
    font-weight: bold;
}
#playlistbar .owner {
}
#playlistbar input {
}

/* FATBAR
*******************************/

#fatbar {
    .fatbar();
}
#fatbar .results li {
    background-color: inherit;
}
#fatbar .results li.selected {
    background-color: @selected-color;
    color: @text-color-2;
}

/* TIMELINE
*******************************/

#timeline-container {
    .bottomToolbar();
}
#position-label {
}
#end-label {
}

/* MISC
*******************************/

/* DRAG N DROP
*******************************/

#dragElem {
    color: @menu-color-1;
    background: @menu-color-2;
    border-radius: 3px;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.8);
}
.target {
	text-shadow: 0px 0px 0px transparent !important;
    color: @menu-color-1;
    background: @menu-color-2;
    border-radius: 3px;
}
#new-playlist.target {
    color: @menu-color-1;
    background: @menu-color-2;
    border-radius: 3px;
}
.reorderable {
    //border-top: 1px solid transparent;
    //border-bottom: 1px solid transparent;
}
.results > .insert-before,
#playlists > .insert-before {
    border-top: 1px solid #eee;
}
.results > .insert-after,
#playlists > .insert-after {
    border-bottom: 1px solid #eee;
}

/* CONTEXT MENU
*******************************/

#contextmenu {
    color: @menu-color-1;
    background: @menu-color-2;
    border-radius: 3px;
}
#contextmenu .option {
}
#contextmenu .option:hover {
    background: @selected-color;
    color: @menu-color-1;
}

/* TRANSLATOR PANEL
*******************************/

.selected-translation {
    border: 2px solid red;
}

error: pathspec 'styles/default-replacement.less' did not match any file(s) known to git


Adjust line-height

Adjust line-height

Local font rendering turned out to be much different to how it rendered
when run on a server.

fatal: unable to access 'https://github.com/TheJokersThief/AreYouDepressed-.git/': The requested URL returned error: 403


stylet AdditionalBar

stylet AdditionalBar

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/Det-Kongelige-Bibliotek/rex.git/'


Better mobile top header.

Better mobile top header.

fatal: unable to access 'https://github.com/simonpfry/AuctionHouse.git/': The requested URL returned error: 403


Box-sizing added to display responsive widget in portal correctly

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/yupiq/test-percent-credit-theme.git/'


Create spinner.less

Create spinner.less

error: pathspec 'less/icons/spinner.less' did not match any file(s) known to git


Fix settings view presentational issues

Fix settings view presentational issues

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/matthewlucock/really-black-ui.git/'


Update static/vendors/bootstrap/less/responsive-utilities.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

//
// Responsive: Utility classes
// --------------------------------------------------

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

.visible-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-visibility();
  }
}
.visible-xs-block {
  @media (max-width: @screen-xs-max) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: @screen-xs-max) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: @screen-xs-max) {
    display: inline-block !important;
  }
}

.visible-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-visibility();
  }
}
.visible-sm-block {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    display: block !important;
  }
}
.visible-sm-inline {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    display: inline !important;
  }
}
.visible-sm-inline-block {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    display: inline-block !important;
  }
}

.visible-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-visibility();
  }
}
.visible-md-block {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    display: block !important;
  }
}
.visible-md-inline {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    display: inline !important;
  }
}
.visible-md-inline-block {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    display: inline-block !important;
  }
}

.visible-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-visibility();
  }
}
.visible-lg-block {
  @media (min-width: @screen-lg-min) {
    display: block !important;
  }
}
.visible-lg-inline {
  @media (min-width: @screen-lg-min) {
    display: inline !important;
  }
}
.visible-lg-inline-block {
  @media (min-width: @screen-lg-min) {
    display: inline-block !important;
  }
}

.hidden-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-invisibility();
  }
}
.hidden-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-invisibility();
  }
}
.hidden-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-invisibility();
  }
}
.hidden-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-invisibility();
  }
}

// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.

// Note: Deprecated .visible-print as of v3.2.0
.visible-print {
  .responsive-invisibility();

  @media print {
    .responsive-visibility();
  }
}
.visible-print-block {
  display: none !important;

  @media print {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;

  @media print {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;

  @media print {
    display: inline-block !important;
  }
}

.hidden-print {
  @media print {
    .responsive-invisibility();
  }
}

error: pathspec 'static/vendors/bootstrap/less/responsive-utilities.less' did not match any file(s) known to git