Fixed colors repeating in items Switched positions of teal and purple color

/*
 * # Semantic Item View
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */

/*******************************
            Standard
*******************************/

/*--------------
      Items
---------------*/

.ui.items {
  margin: 1em 0em 0em;
}
.ui.items:first-child {
  margin-top: 0em;
}
.ui.items:last-child {
  margin-bottom: -1em;
}

/* Force Clearing */
.ui.items:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/*--------------
      Item
---------------*/

.ui.items > .row > .item,
.ui.items > .item {
  display: block;
  float: left;
  position: relative;
  top: 0px;

  width: 316px;
  min-height: 375px;
  margin: 0em 0.5em 2.5em;
  padding: 0em;

  background-color: #FFFFFF;
  line-height: 1.2;
  font-size: 1em;

  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);

  -moz-border-radius: 0.33em;
  -webkit-border-radius: 0.33em;
  border-radius: 0.33em;

  -webkit-transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  -o-transition: box-shadow 0.2s ease;
  -ms-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;

  padding: 0.5em;
}

.ui.items a.item,
.ui.items .item a {
  cursor: pointer;
}

.ui.items .item,
.ui.items .item > .image,
.ui.items .item > .image .overlay,
.ui.items .item > .content,
.ui.items .item > .content > .meta,
.ui.items .item > .content > .extra {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*--------------
      Images
---------------*/

.ui.items .item > .image {
  display: block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}
.ui.items .item > .image > img {
  display: block;
  width: 100%;
}

/*--------------
     Content
---------------*/
.ui.items .item > .content {
  padding: 0.75em 0.5em;
}
.ui.items .item > .content > .name {
  display: block;

  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.2em;
  color: rgba(0, 0, 0, 0.7);
}
.ui.items .item > .content > .description {
  clear: both;
  margin: 0em 0em;
  color: rgba(0, 0, 0, 0.45);
}
.ui.items .item > .content > .description p {
  margin: 0em 0em 0.2em;
}
.ui.items .item > .content > .description p:last-child {
  margin-bottom: 0em;
}

/*--------------
      Meta
---------------*/

.ui.items .item .meta {
  float: right;
  color: rgba(0, 0, 0, 0.35);
}
.ui.items .item > .content > .meta + .name {
  float: left;
}

/*--------------
     Labels
---------------*/

/*-----star----- */

/* hover */
.ui.items .item .star.label:hover::after {
  border-right-color: #F6EFC3;
}
.ui.items .item .star.label:hover::after {
  border-top-color: #F6EFC3;
}
.ui.items .item .star.label:hover .icon {
  color: #AC9400
}

/* active */
.ui.items .item .star.label.active::after {
  border-right-color: #F6EFC3;
}
.ui.items .item .star.label.active::after {
  border-top-color: #F6EFC3;
}
.ui.items .item .star.label.active .icon {
  color: #AC9400
}

/*-----like----- */

/* hover */
.ui.items .item .like.label:hover::after {
  border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
  border-top-color: #F5E1E2;
}
.ui.items .item .like.label:hover .icon {
  color: #EF404A
}
/* active */
.ui.items .item .like.label.active::after {
  border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
  border-top-color: #F5E1E2;
}
.ui.items .item .like.label.active .icon {
  color: #EF404A
}

/*--------------
      Extra
---------------*/

.ui.items .item .extra {
  position: absolute;
  width: 100%;
  padding: 0em 0.5em;
  bottom: -2em;
  left: 0em;
  height: 1.5em;
  color: rgba(0, 0, 0, 0.25);

  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.ui.items .item .extra > img {
  display: inline-block;
  border-radius: 500px 500px 500px 500px;
  margin-right: 0.25em;
  vertical-align: middle;
  width: 2em;
}
.ui.items .item .extra .left {
  float: left;
}
.ui.items .item .extra .right {
  float: right;
}

/*******************************
           States
*******************************/

.ui.items .item:hover {
  cursor: pointer;
  z-index: 5;

  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
  color: rgba(0, 0, 0, 0.5);
}

.ui.items .item:nth-of-type(6n+1):hover {
  border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(6n+2):hover {
  border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(6n+3):hover {
  border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(6n+4):hover {
  border-bottom-color: #D95C5C !important;
}
.ui.items .item:nth-of-type(6n+5):hover {
  border-bottom-color: #00B5AD !important;
}
.ui.items .item:nth-of-type(6n+6):hover {
  border-bottom-color: #564F8A !important;
}

/*******************************
           Variations
*******************************/

/*--------------
    Connected
---------------*/

.ui.connected.items {
  display: table;
  width: 100%;
  margin-left: 0em !important;
  margin-right: 0em !important;
}
.ui.connected.items > .row > .item,
.ui.connected.items > .item {
  float: none;
  display: table-cell;
  vertical-align: top;
  height: auto;
  border-radius: 0px;
  margin: 0em;
  width: 33.33%;
}
.ui.connected.items > .row {
  display: table;
  margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
  margin-top: 0em;
}

/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
}
.ui.connected.items > .row:last-child > .item:first-child,
.ui.connected.items > .item:first-child {
  border-radius: 0em 0em 0em 0.33em;
}
.ui.connected.items > .row:last-child > .item:last-child,
.ui.connected.items > .item:last-child {
  border-radius: 0em 0em 0.33em 0em;
}

/* Hover */
.ui.connected.items .item:hover {
  border-bottom-width: 0.2em;
}

/* Item Count */
.ui.one.connected.items > .row > .item,
.ui.one.connected.items > .item {
  width: 50%;
  padding-left: 2%;
  padding-right: 2%;
}
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
  width: 50%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.three.connected.items > .row > .item,
.ui.three.connected.items > .item {
  width: 33.333%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.four.connected.items > .row > .item,
.ui.four.connected.items > .item {
  width: 25%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.five.connected.items > .row > .item,
.ui.five.connected.items > .item {
  width: 20%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.six.connected.items > .row > .item,
.ui.six.connected.items > .item {
  width: 16.66%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.seven.connected.items > .row > .item,
.ui.seven.connected.items > .item {
  width: 14.28%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.eight.connected.items > .row > .item,
.ui.eight.connected.items > .item {
  width: 12.5%;
  padding-left: 0.25%;
  padding-right: 0.25%;
}
.ui.nine.connected.items > .row > .item,
.ui.nine.connected.items > .item {
  width: 11.11%;
  padding-left: 0.25%;
  padding-right: 0.25%;
}
.ui.ten.connected.items > .row > .item,
.ui.ten.connected.items > .item {
  width: 10%;
  padding-left: 0.2%;
  padding-right: 0.2%;
}
.ui.eleven.connected.items > .row > .item,
.ui.eleven.connected.items > .item {
  width: 9.09%;
  padding-left: 0.2%;
  padding-right: 0.2%;
}
.ui.twelve.connected.items > .row > .item,
.ui.twelve.connected.items > .item {
  width: 8.3333%;
  padding-left: 0.1%;
  padding-right: 0.1%;
}

/*-------------------
      Responsive
--------------------*/

@media only screen and (max-width : 768px) {
  .ui.stackable.items {
    display: block !important;
  }
  .ui.stackable.items > .item,
  .ui.stackable.items > .row > .item {
    display: block !important;
    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
}

/*--------------------
      Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
  display: table;
}

.ui.horizontal.items > .item > .image
.ui.items > .horizontal.item > .image {
  display: table-cell;
  width: 50%;
}
.ui.horizontal.items > .item > .image + .content,
.ui.items > .horizontal.item > .image + .content {
  width: 50%;
  display: table-cell;
}
.ui.horizontal.items > .item > .content,
.ui.items > .horizontal.item > .content {
  padding: 1% 1.7% 11% 3%;
  vertical-align: top;
}

.ui.horizontal.items > .item > .meta,
.ui.items > .horizontal.item > .meta {
  position: absolute;
  padding: 0%;
  bottom: 7%;
  left: 3%;
  width: 94%;
}
.ui.horizontal.items > .item > .image + .content + .meta,
.ui.items > .horizontal.item > .image + .content + .meta {
  bottom: 7%;
  left: 53%;
  width: 44%;
}

.ui.horizontal.items > .item .avatar,
.ui.items > .horizontal.item .avatar {
  width: 11.5%;
}

.ui.items > .item .avatar {
  max-width: 25px;
}

/*--------------
    Item Count
---------------*/

.ui.one.items {
  margin-left: -2%;
  margin-right: -2%;
}
.ui.one.items > .item {
  width: 100%;
  margin-left: 2%;
  margin-right: 2%;
}

.ui.two.items {
  margin-left: -1%;
  margin-right: -1%;
}
.ui.two.items > .item {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
}
.ui.two.items > .item:nth-child(2n+1) {
  clear: left;
}

.ui.three.items {
  margin-left: -1%;
  margin-right: -1%;
}
.ui.three.items > .item {
  width: 31.333%;
  margin-left: 1%;
  margin-right: 1%;
}
.ui.three.items > .item:nth-child(3n+1) {
  clear: left;
}

.ui.four.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.four.items > .item {
  width: 24%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.four.items > .item:nth-child(4n+1) {
  clear: left;
}

.ui.five.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.five.items > .item {
  width: 19%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.five.items > .item:nth-child(5n+1) {
  clear: left;
}

.ui.six.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.six.items > .item {
  width: 15.66%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.six.items > .item:nth-child(6n+1) {
  clear: left;
}

.ui.seven.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.seven.items > .item {
  width: 13.28%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  font-size: 11px;
}
.ui.seven.items > .item:nth-child(7n+1) {
  clear: left;
}

.ui.eight.items {
  margin-left: -0.25%;
  margin-right: -0.25%;
}
.ui.eight.items > .item {
  width: 12.0%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 11px;
}
.ui.eight.items > .item:nth-child(8n+1) {
  clear: left;
}

.ui.nine.items {
  margin-left: -0.25%;
  margin-right: -0.25%;
}
.ui.nine.items > .item {
  width: 10.61%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 10px;
}
.ui.nine.items > .item:nth-child(9n+1) {
  clear: left;
}

.ui.ten.items {
  margin-left: -0.2%;
  margin-right: -0.2%;
}
.ui.ten.items > .item {
  width: 9.6%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 10px;
}
.ui.ten.items > .item:nth-child(10n+1) {
  clear: left;
}

.ui.eleven.items {
  margin-left: -0.2%;
  margin-right: -0.2%;
}
.ui.eleven.items > .item {
  width: 8.69%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 9px;
}
.ui.eleven.items > .item:nth-child(11n+1) {
  clear: left;
}

.ui.twelve.items {
  margin-left: -0.1%;
  margin-right: -0.1%;
}
.ui.twelve.items > .item {
  width: 8.1333%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  font-size: 9px;
}
.ui.twelve.items > .item:nth-child(12n+1) {
  clear: left;
}

/*
 * # Semantic Item View
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 17 2013
 */

/*******************************
            Standard
*******************************/

/*--------------
      Items
---------------*/

.ui.items {
  margin: 1em 0em 0em;
}
.ui.items:first-child {
  margin-top: 0em;
}
.ui.items:last-child {
  margin-bottom: -1em;
}

/* Force Clearing */
.ui.items:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/*--------------
      Item
---------------*/

.ui.items > .row > .item,
.ui.items > .item {
  display: block;
  float: left;
  position: relative;
  top: 0px;

  width: 316px;
  min-height: 375px;
  margin: 0em 0.5em 2.5em;
  padding: 0em;

  background-color: #FFFFFF;
  line-height: 1.2;
  font-size: 1em;

  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);

  -moz-border-radius: 0.33em;
  -webkit-border-radius: 0.33em;
  border-radius: 0.33em;

  -webkit-transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  -o-transition: box-shadow 0.2s ease;
  -ms-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;

  padding: 0.5em;
}

.ui.items a.item,
.ui.items .item a {
  cursor: pointer;
}

.ui.items .item,
.ui.items .item > .image,
.ui.items .item > .image .overlay,
.ui.items .item > .content,
.ui.items .item > .content > .meta,
.ui.items .item > .content > .extra {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*--------------
      Images
---------------*/

.ui.items .item > .image {
  display: block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}
.ui.items .item > .image > img {
  display: block;
  width: 100%;
}

/*--------------
     Content
---------------*/
.ui.items .item > .content {
  padding: 0.75em 0.5em;
}
.ui.items .item > .content > .name {
  display: block;

  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.2em;
  color: rgba(0, 0, 0, 0.7);
}
.ui.items .item > .content > .description {
  clear: both;
  margin: 0em 0em;
  color: rgba(0, 0, 0, 0.45);
}
.ui.items .item > .content > .description p {
  margin: 0em 0em 0.2em;
}
.ui.items .item > .content > .description p:last-child {
  margin-bottom: 0em;
}

/*--------------
      Meta
---------------*/

.ui.items .item .meta {
  float: right;
  color: rgba(0, 0, 0, 0.35);
}
.ui.items .item > .content > .meta + .name {
  float: left;
}

/*--------------
     Labels
---------------*/

/*-----star----- */

/* hover */
.ui.items .item .star.label:hover::after {
  border-right-color: #F6EFC3;
}
.ui.items .item .star.label:hover::after {
  border-top-color: #F6EFC3;
}
.ui.items .item .star.label:hover .icon {
  color: #AC9400
}

/* active */
.ui.items .item .star.label.active::after {
  border-right-color: #F6EFC3;
}
.ui.items .item .star.label.active::after {
  border-top-color: #F6EFC3;
}
.ui.items .item .star.label.active .icon {
  color: #AC9400
}

/*-----like----- */

/* hover */
.ui.items .item .like.label:hover::after {
  border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
  border-top-color: #F5E1E2;
}
.ui.items .item .like.label:hover .icon {
  color: #EF404A
}
/* active */
.ui.items .item .like.label.active::after {
  border-right-color: #F5E1E2;
}
.ui.items .item .like.label.active::after {
  border-top-color: #F5E1E2;
}
.ui.items .item .like.label.active .icon {
  color: #EF404A
}

/*--------------
      Extra
---------------*/

.ui.items .item .extra {
  position: absolute;
  width: 100%;
  padding: 0em 0.5em;
  bottom: -2em;
  left: 0em;
  height: 1.5em;
  color: rgba(0, 0, 0, 0.25);

  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.ui.items .item .extra > img {
  display: inline-block;
  border-radius: 500px 500px 500px 500px;
  margin-right: 0.25em;
  vertical-align: middle;
  width: 2em;
}
.ui.items .item .extra .left {
  float: left;
}
.ui.items .item .extra .right {
  float: right;
}

/*******************************
           States
*******************************/

.ui.items .item:hover {
  cursor: pointer;
  z-index: 5;

  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.ui.items .item:hover .extra {
  color: rgba(0, 0, 0, 0.5);
}

.ui.items .item:nth-of-type(n+1):hover {
  border-bottom-color: #6ECFF5 !important;
}
.ui.items .item:nth-of-type(n+2):hover {
  border-bottom-color: #5C6166 !important;
}
.ui.items .item:nth-of-type(n+3):hover {
  border-bottom-color: #A1CF64 !important;
}
.ui.items .item:nth-of-type(n+4):hover {
  border-bottom-color: #D95C5C !important;
}
.ui.items .item:nth-of-type(n+5):hover {
  border-bottom-color: #564F8A !important;
}
.ui.items .item:nth-of-type(n+6):hover {
  border-bottom-color: #00B5AD !important;
}

/*******************************
           Variations
*******************************/

/*--------------
    Connected
---------------*/

.ui.connected.items {
  display: table;
  width: 100%;
  margin-left: 0em !important;
  margin-right: 0em !important;
}
.ui.connected.items > .row > .item,
.ui.connected.items > .item {
  float: none;
  display: table-cell;
  vertical-align: top;
  height: auto;
  border-radius: 0px;
  margin: 0em;
  width: 33.33%;
}
.ui.connected.items > .row {
  display: table;
  margin: 0.5em 0em;
}
.ui.connected.items > .row:first-child {
  margin-top: 0em;
}

/* Borders */
.ui.connected.items > .item,
.ui.connected.items > .row:last-child > .item {
  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
}
.ui.connected.items > .row:last-child > .item:first-child,
.ui.connected.items > .item:first-child {
  border-radius: 0em 0em 0em 0.33em;
}
.ui.connected.items > .row:last-child > .item:last-child,
.ui.connected.items > .item:last-child {
  border-radius: 0em 0em 0.33em 0em;
}

/* Hover */
.ui.connected.items .item:hover {
  border-bottom-width: 0.2em;
}

/* Item Count */
.ui.one.connected.items > .row > .item,
.ui.one.connected.items > .item {
  width: 50%;
  padding-left: 2%;
  padding-right: 2%;
}
.ui.two.connected.items > .row > .item,
.ui.two.connected.items > .item {
  width: 50%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.three.connected.items > .row > .item,
.ui.three.connected.items > .item {
  width: 33.333%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.four.connected.items > .row > .item,
.ui.four.connected.items > .item {
  width: 25%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.five.connected.items > .row > .item,
.ui.five.connected.items > .item {
  width: 20%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.six.connected.items > .row > .item,
.ui.six.connected.items > .item {
  width: 16.66%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.seven.connected.items > .row > .item,
.ui.seven.connected.items > .item {
  width: 14.28%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}
.ui.eight.connected.items > .row > .item,
.ui.eight.connected.items > .item {
  width: 12.5%;
  padding-left: 0.25%;
  padding-right: 0.25%;
}
.ui.nine.connected.items > .row > .item,
.ui.nine.connected.items > .item {
  width: 11.11%;
  padding-left: 0.25%;
  padding-right: 0.25%;
}
.ui.ten.connected.items > .row > .item,
.ui.ten.connected.items > .item {
  width: 10%;
  padding-left: 0.2%;
  padding-right: 0.2%;
}
.ui.eleven.connected.items > .row > .item,
.ui.eleven.connected.items > .item {
  width: 9.09%;
  padding-left: 0.2%;
  padding-right: 0.2%;
}
.ui.twelve.connected.items > .row > .item,
.ui.twelve.connected.items > .item {
  width: 8.3333%;
  padding-left: 0.1%;
  padding-right: 0.1%;
}

/*-------------------
      Responsive
--------------------*/

@media only screen and (max-width : 768px) {
  .ui.stackable.items {
    display: block !important;
  }
  .ui.stackable.items > .item,
  .ui.stackable.items > .row > .item {
    display: block !important;
    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
}

/*--------------------
      Horizontal
---------------------*/
.ui.horizontal.items > .item,
.ui.items > .horizontal.item {
  display: table;
}

.ui.horizontal.items > .item > .image
.ui.items > .horizontal.item > .image {
  display: table-cell;
  width: 50%;
}
.ui.horizontal.items > .item > .image + .content,
.ui.items > .horizontal.item > .image + .content {
  width: 50%;
  display: table-cell;
}
.ui.horizontal.items > .item > .content,
.ui.items > .horizontal.item > .content {
  padding: 1% 1.7% 11% 3%;
  vertical-align: top;
}

.ui.horizontal.items > .item > .meta,
.ui.items > .horizontal.item > .meta {
  position: absolute;
  padding: 0%;
  bottom: 7%;
  left: 3%;
  width: 94%;
}
.ui.horizontal.items > .item > .image + .content + .meta,
.ui.items > .horizontal.item > .image + .content + .meta {
  bottom: 7%;
  left: 53%;
  width: 44%;
}

.ui.horizontal.items > .item .avatar,
.ui.items > .horizontal.item .avatar {
  width: 11.5%;
}

.ui.items > .item .avatar {
  max-width: 25px;
}

/*--------------
    Item Count
---------------*/

.ui.one.items {
  margin-left: -2%;
  margin-right: -2%;
}
.ui.one.items > .item {
  width: 100%;
  margin-left: 2%;
  margin-right: 2%;
}

.ui.two.items {
  margin-left: -1%;
  margin-right: -1%;
}
.ui.two.items > .item {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
}
.ui.two.items > .item:nth-child(2n+1) {
  clear: left;
}

.ui.three.items {
  margin-left: -1%;
  margin-right: -1%;
}
.ui.three.items > .item {
  width: 31.333%;
  margin-left: 1%;
  margin-right: 1%;
}
.ui.three.items > .item:nth-child(3n+1) {
  clear: left;
}

.ui.four.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.four.items > .item {
  width: 24%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.four.items > .item:nth-child(4n+1) {
  clear: left;
}

.ui.five.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.five.items > .item {
  width: 19%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.five.items > .item:nth-child(5n+1) {
  clear: left;
}

.ui.six.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.six.items > .item {
  width: 15.66%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.ui.six.items > .item:nth-child(6n+1) {
  clear: left;
}

.ui.seven.items {
  margin-left: -0.5%;
  margin-right: -0.5%;
}
.ui.seven.items > .item {
  width: 13.28%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  font-size: 11px;
}
.ui.seven.items > .item:nth-child(7n+1) {
  clear: left;
}

.ui.eight.items {
  margin-left: -0.25%;
  margin-right: -0.25%;
}
.ui.eight.items > .item {
  width: 12.0%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 11px;
}
.ui.eight.items > .item:nth-child(8n+1) {
  clear: left;
}

.ui.nine.items {
  margin-left: -0.25%;
  margin-right: -0.25%;
}
.ui.nine.items > .item {
  width: 10.61%;
  margin-left: 0.25%;
  margin-right: 0.25%;
  font-size: 10px;
}
.ui.nine.items > .item:nth-child(9n+1) {
  clear: left;
}

.ui.ten.items {
  margin-left: -0.2%;
  margin-right: -0.2%;
}
.ui.ten.items > .item {
  width: 9.6%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 10px;
}
.ui.ten.items > .item:nth-child(10n+1) {
  clear: left;
}

.ui.eleven.items {
  margin-left: -0.2%;
  margin-right: -0.2%;
}
.ui.eleven.items > .item {
  width: 8.69%;
  margin-left: 0.2%;
  margin-right: 0.2%;
  font-size: 9px;
}
.ui.eleven.items > .item:nth-child(11n+1) {
  clear: left;
}

.ui.twelve.items {
  margin-left: -0.1%;
  margin-right: -0.1%;
}
.ui.twelve.items > .item {
  width: 8.1333%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  font-size: 9px;
}
.ui.twelve.items > .item:nth-child(12n+1) {
  clear: left;
}


Create main.less

Create main.less

error: pathspec 'app/themes/default/main.less' did not match any file(s) known to git


fix RTL styles for device icons

fix RTL styles for device icons

@import 'lib';

.product-details {
    .actions {
        .width(2);
        float: right;
        margin-bottom: 16px;
    }
    .icon {
        padding: 4px;
        background: #fff;
        .border-radius(2px);
        .box-shadow(0 1px 2px #000);
    }
    .vitals {
        float: left;
        word-wrap: break-word;
    }
    .visual {
        float: left;
        width: 88px;
        height: 100px;
    }
}
.description {
    clear: both;
    padding: 16px;
    p {
        .max-width(10);
        margin: 0 auto;
    }
}

.device-list {
    h4, ul {
        display: inline-block;
        line-height: 20px;
        vertical-align: top;
    }
    ul {
        color: @medium-gray;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
        height: 22px;
        line-height: 20px;
        position: relative;
        padding-left: 23px;
        margin-left: 5px;
        overflow: hidden;
        &:before, &:after {
            content: '';
            background: @white;
            display: block;
            position: absolute;
            border-radius: 2px;
            top: 0;
            left: 0;
            border: 2px solid @medium-gray;
        }
        &.tablet,
        &.desktop {
            padding-left: 26px;
        }
        &.mobile {
            &:before {
                left: 3px;
                width: 10px;
                height: 12px;
                border-width: 3px 2px 6px;
            }
            &:after {
                border-width: 1px;
                border-color: @white;
                left: 9px;
                top: 17px;
            }
        }
        &.tablet {
            &:before {
                top: 3px;
                left: 0px;
                width: 16px;
                height: 10px;
            }
            &:after {
                display: none;
            }
        }
        &.desktop {
            &:before {
                top: 3px;
                width: 16px;
                height: 8px;
            }
            &:after {
                top: 15px;
                width: 6px;
                left: 5px;
            }
        }
    }
}

.html-rtl .device-list {
    li {
        margin: 0 5px 0 0;
    }
}

// 7 columns
@media (max-width: @7col) {
    .product-details {

    }
}

//4 columns
@media (max-width: @4col) {
    .description {
        border-width: 1px 0;
        padding: 16px;
    }
    .product-details {
        .vitals {
            .width(2);
        }
        .actions {
            .width(1);
        }
    }
    .device-list {
        h4 {
            display: none;
        }
        li {
            width: 0;
            margin-left: 0;
        }
    }
}

// 3 columns
@media (max-width: @3col) {
    .product-details {
        .visual {
        }
        .vitals {
            .width(3);
            float: none;
        }
        .actions {
            float: none;
            clear: both;
            .width(3);
        }
    }
}

@import 'lib';

.product-details {
    .actions {
        .width(2);
        float: right;
        margin-bottom: 16px;
    }
    .icon {
        padding: 4px;
        background: #fff;
        .border-radius(2px);
        .box-shadow(0 1px 2px #000);
    }
    .vitals {
        float: left;
        word-wrap: break-word;
    }
    .visual {
        float: left;
        width: 88px;
        height: 100px;
    }
}
.description {
    clear: both;
    padding: 16px;
    p {
        .max-width(10);
        margin: 0 auto;
    }
}

.device-list {
    h4, ul {
        display: inline-block;
        line-height: 20px;
        vertical-align: top;
    }
    ul {
        color: @medium-gray;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
        height: 22px;
        line-height: 20px;
        position: relative;
        padding-left: 23px;
        margin-left: 16px;
        overflow: hidden;
        &:before, &:after {
            content: '';
            background: @white;
            display: block;
            position: absolute;
            border-radius: 2px;
            top: 0;
            left: 0;
            border: 2px solid @medium-gray;
        }
        &.tablet,
        &.desktop {
            padding-left: 26px;
        }
        &.mobile {
            &:before {
                left: 3px;
                width: 10px;
                height: 12px;
                border-width: 3px 2px 6px;
            }
            &:after {
                border-width: 1px;
                border-color: @white;
                left: 9px;
                top: 17px;
            }
        }
        &.tablet {
            &:before {
                top: 3px;
                left: 0px;
                width: 16px;
                height: 10px;
            }
            &:after {
                display: none;
            }
        }
        &.desktop {
            &:before {
                top: 3px;
                width: 16px;
                height: 8px;
            }
            &:after {
                top: 15px;
                width: 6px;
                left: 5px;
            }
        }
    }
}

.html-rtl .device-list {
    h4, ul {
        float: right;
    }
    h4 {
        margin: 5px 0 5px 10px;
    }
    li {
        + li {
            margin: 0 10px 0 0;
        }
    }
}

// 7 columns
@media (max-width: @7col) {
    .product-details {

    }
}

//4 columns
@media (max-width: @4col) {
    .description {
        border-width: 1px 0;
        padding: 16px;
    }
    .product-details {
        .vitals {
            .width(2);
        }
        .actions {
            .width(1);
        }
    }
    .device-list {
        h4 {
            display: none;
        }
        li {
            width: 0;
            margin-left: 0;
        }
    }
}

// 3 columns
@media (max-width: @3col) {
    .product-details {
        .visual {
        }
        .vitals {
            .width(3);
            float: none;
        }
        .actions {
            float: none;
            clear: both;
            .width(3);
        }
    }
}


Hides "change" when single option

Hides "change" when single option

Uses the custom "single-option" class assigned to the container of the only existing option selector to force the after pseudo-element to be hidden (by setting it's opacity to 0, just as it's done when the user has added the item to the cart).

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/hevnly/asset-bazaar.git/'


Create thumbnails.less

Create thumbnails.less

//
// Thumbnails
// --------------------------------------------------

// Mixin and adjust the regular image class
.thumbnail {
  display: block;
  padding: @thumbnail-padding;
  margin-bottom: @line-height-computed;
  line-height: @line-height-base;
  background-color: @thumbnail-bg;
  border: 1px solid @thumbnail-border;
  border-radius: @thumbnail-border-radius;
  .transition(all .2s ease-in-out);

  > img,
  a > img {
    &:extend(.img-responsive);
    margin-left: auto;
    margin-right: auto;
  }

  // Add a hover state for linked versions only
  a&:hover,
  a&:focus,
  a&.active {
    border-color: @link-color;
  }

  // Image captions
  .caption {
    padding: @thumbnail-caption-padding;
    color: @thumbnail-caption-color;
  }
}

error: pathspec 'static/app/components/bootstrap/css/less/thumbnails.less' did not match any file(s) known to git


Create in.less

Create in.less

.in(@list; @rules) {
  .iterate(@list; @count; @rules) when (@count > 0)  {
    .iterate(@list; (@count - 1); @rules);
    @key: extract(extract(@list, @count), 1);
    @value: extract(extract(@list, @count), 2);
    @rules();
  }
  .iterate(@list; length(@list); @rules);
}

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


Add font-awesome bordered-pulled file

Add font-awesome bordered-pulled file

with font-awesome patterns

// Bordered & Pulled
// -------------------------

.@{fa-css-prefix}-border {
  padding: .2em .25em .15em;
  border: solid .08em @fa-border-color;
  border-radius: .1em;
}

.pull-right { float: right; }
.pull-left { float: left; }

.@{fa-css-prefix} {
  &.pull-left { margin-right: .3em; }
  &.pull-right { margin-left: .3em; }
}

error: pathspec 'cp-strap/src/stylesheets/icons/font-awesome/less/bordered-pulled.less' did not match any file(s) known to git


Create lessfunctions.less

Create lessfunctions.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/DigitalKrony/JavaScript.git/'


fix DatePicker align

fix DatePicker align

fatal: unable to access 'https://github.com/hjin-me/ant-design.git/': The requested URL returned error: 403


hotfix: hide end of long filename with ellipsis

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


Removed unnecessary rule

Removed unnecessary rule

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


add field style

add field style

.ui-field {
	display: block;
	position: relative;
	padding-left: 16px;
	padding-top: 8px;
	margin-bottom: 16px;
	vertical-align: top;
	//border-right: 2px solid #fff;
	&.state-focus {
		label {
			color: #4891F4;
		}
	}
	label {
		//position: absolute;
		top: 3px;
		right:10px;
		display: block;
		font-size: .7em;
		color: rgba(0,0,0,.3);
		padding:0 2px 0 0;
	}
	textarea {
		height: 32px;
	}
	textarea,
	input[type=text],
	input[type=password]{
		float:none;
		width:100%;
		padding:8px 8px 8px 0;
		border:none;
		margin:0;
		background-color:transparent;
		border-radius: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		//outline:none;
		&::-webkit-input-placeholder {
		    color: rgba(0,0,0,.2);
		}
		&:-moz-placeholder {
		    color: rgba(0,0,0,.2);
		}
		&::-moz-placeholder {
		    color: rgba(0,0,0,.2);
		}
		&:-ms-input-placeholder {
		    color: rgba(0,0,0,.2);
		}
		&:hover {
			cursor: default;
			//background-color: rgba(100, 100, 100, .06);
		}
		&:focus {
			cursor: text;
		}
	}
	input[readonly],
	textarea[readonly]{
		//color: #9A9A9A;
		//color: rgba(0, 0, 0, 1);
		//background-color: rgba(255,255,255,1);
		border-bottom: 1px dashed rgba(0,0,0,.12);
		&:hover {
			cursor: default;
			//background-color: rgba(255,255,255,1);
		}
		&:focus, &:active {
			cursor: text;
			border-bottom: 1px dashed rgba(0,0,0,.12) !important;
			//background-color: rgba(255,255,255,1);
		}
	}
	.field-ink{
		position: absolute;
		bottom: 11px;
		height: 2px;
		width: 2px;
		background-color: #4891F4;
	}

	.error-message {
		font-size: .7em;
		color: #F44336;
		color: #D6392C;
		height: 10px;
		margin-top: 2px;
		display: block;
	}

	&.field-date {
		color: rgb(153, 153, 153);

		//overflow: hidden;
		input,
		input[readonly],
		input[readonly]:hover,
		input[readonly]:focus,
		input[readonly]:active {
			/*.disableselect;
			cursor: default;
			position: absolute;
			background-color: transparent;
			color: transparent;
			//visibility: hidden;
			display: none;*/
		}
		.icon {
			font-size: .9em;
			//background-color: rgba(255, 255, 255, 0.4);
			border-radius: 2px;
		}
		.text {
			color: #4D4D4D;
			float:none;
			width:100%;
			padding:8px 0;
			border:none;
			margin:0;
			background-color:transparent;
			border-radius: 0;
			border-bottom: 1px solid rgba(100,100,100,.1);
			margin-bottom: 1px;
		}
		.date-input {
			// text-transform: capitalize;
			// font-size: 1.3em;
			// color: #888888;
			// display: inline-block;
			// padding: 2px 0;
			// margin: 3px 0 3px 3px;

			// margin: 4px;
			// padding: 4px 0;
			// font-size: 1.4em;
			// line-height: 1.4em;
			// text-overflow: ellipsis;
			// display: inline-block;
			// width: 100%;
			// height: 32px;
			// white-space: nowrap;
			// overflow: hidden;
			// margin-left: 0;
			// border: none;
		}
	}

	span.field{
		float:none;
		width:100%;
		display:block;
		padding:6px 8px 6px 10px;
		border:none;
		margin:0 0 1px 0;
		background-color:rgba(0, 0, 0, .2);
		outline:none;
	}
	&.field-html {
		.txt {
			//color: rgba(0,0,0,.7);
			border:none;
			//line-height: 1.4em;
			/*font-size: 1.1em;
			*/
		}
	}
	textarea {
		display: block;
		width:100%;
		//font-size: .85em;
		border:none;
		padding:8px 0 8px 0;
		overflow:hidden;
		margin: 0;
		resize:none;
		border-radius: 0;
		background-color:transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		-moz-tab-size:4;
		-o-tab-size:4;
		//-webkit-tab-size:4;
		tab-size:4;
		&.properties{
			height:140px;
		}
		&.cke_source {
			font:12px Monaco;
		}
		&.editor {
			height:100px;
		}
		&:hover {
			cursor: default;
			//background-color: rgba(100, 100, 100, .06);
		}
		&:focus {
			cursor: text;
			//border-bottom: 2px solid #4891F4;
			margin-bottom: 0;
		}
	}
	.check-wrapper {
		//background-color: rgba(100, 100, 100, .03);
	}
	select{
		//color: @font-color;
		//font-size: 11px;
		//width:90%;
		outline: none; //1px solid #6CF;
		margin:0px 0;
	}
	input[type=checkbox]{
	   margin:4px 4px;
	   //border-left:1px solid darken(@base-color, 1%);
	}
	.ui-checkbox {
	   margin:1px 0;
	}
	.selectlist {
		display: block;
		list-style: none;
		padding:0;
		margin:0;
		background-color:rgba(0,0,0,.2);
		li {
			cursor: pointer;
			float :left;
			cursor:pointer;
			text-align:center;
			text-transform: uppercase;
			padding: 3px 6px 3px;
			border-radius: 2px;
			color: rgba(255,255,255,.2);
			margin:2px 2px 1px 0;

			&:hover {
				//color: rgba(255,255,255,1);
				background: rgba(255,255,255,.1);
			}
			&.s {
				//color: #fff;
				background-color: transparent;
			}
			&:first-child {
				//margin-left: 0;
			}
		}
	}
	img.btn {
		position:absolute;
		top:4px;
		right:4px;
		cursor:pointer
	}
	.maintb {
		height:15px;
	}
	.codetb, .texttb, .htmltb {
		float:right;
		display:inline;
	}
	&:hover {
		label {
			//display: block;
		}
	}
	&:focus {
		&.field-error {
			label {
				color: #F44336;
				color: #D6392C;
			}
			input {
				border-bottom: 1px solid #F44336;
			}
			// .field-ink{
			// 	background-color: #F44336 !important;
			// }
		}
	}
	&.label-before {
		.display(flex);
		padding-top: 4px;
		padding-bottom: 1px;
		//border-bottom: 1px solid rgba(100,100,100,.1);
		margin-left: 16px;
		padding-left: 0;
		label {
			.flex(none);
			margin-left: 0;
			padding-left: 0;
			padding:8px 10px 8px 0;
			text-transform: capitalize;
			right:0;
			opacity: .6;
			font-size: 1em;
			color: rgba(0, 0, 0, 0.8);
		}
		input[type=text]{
			.flex(1);
/*			float:none;
			padding:8px 10px 8px 0;
			//border:none;
			margin:0;
			background-color:transparent;*/
			&::-webkit-input-placeholder {
			    color: rgba(0,0,0,.2);
			}
			&:-moz-placeholder {
			    color: rgba(0,0,0,.2);
			}
			&::-moz-placeholder {
			    color: rgba(0,0,0,.2);
			}
			&:-ms-input-placeholder {
			    color: rgba(0,0,0,.2);
			}
			&:hover {
				cursor: default;
				//background-color: rgba(100, 100, 100, .06);
			}
			&:focus {
				cursor: text;

				//background-color: rgba(113, 170, 211, 0.1);
			}
		}
		&.state-focus {
			//border-bottom: 2px solid #4891F4;
			padding-bottom: 0;
		}
	}
	&.nolabel:hover {
		label {
			display: none;
		}
	}
	&.big {
		input[type=text] {
			font-size: 1.2em;
			//font-weight: bold;
		}
	}
	&.full {
		display: inline-block;
		width: 100%;
	}
	&.half {
		display: inline-block;
		width: 50%;
	}
	&.third {
		display: inline-block;
		width: 33%;
		&:last-child {
			width: 34%;
		}
	}
	&.nolabel {
		.control-text {
			display: none;
		}
	}
	&.hidelabel {
		label {
			display: none;
		}
	}
	&.twothird {
		display: inline-block;
		width: 66%;
		&:last-child {
			width: 67%;
		}
	}
	&.fourth {
		display: inline-block;
		width: 25%;
	}
	&.twofourth {
		display: inline-block;
		width: 50%;
	}
	&.threefourth {
		display: inline-block;
		width: 75%;
	}
	&.field-error {
		label {
			color: #F44336;
			color: #D6392C;
		}
		textarea, input {
			border-bottom: 1px solid #F44336;
		}
		.field-ink{
			background-color: #F44336 !important;
		}
	}
}

.ui-segment {

	&.full {
		display: inline-block;
		width: 100%;
	}
	&.half {
		display: inline-block;
		width: 50%;
	}
	&.third {
		display: inline-block;
		width: 33%;
		&:last-child {
			width: 34%;
		}
	}
	&.twothird {
		display: inline-block;
		width: 66%;
		&:last-child {
			width: 67%;
		}
	}
	&.fourth {
		display: inline-block;
		width: 25%;
	}
	&.twofourth {
		display: inline-block;
		width: 50%;
	}
	&.threefourth {
		display: inline-block;
		width: 75%;
	}
}

&.field-datehour {
	.ui-field {
		//.column(6);
		//width: 50%;
	}
}

error: pathspec 'lib/skin/base/control/field.less' did not match any file(s) known to git


Remove margins on nested matches list

Remove margins on nested matches list

.command-panel {
  position: relative;
  padding: 0;

  .is-loading {
    display: block;
    margin: 0 auto 10px auto;
    width: 100px;
    background-color: #111111;
    background-size: auto;
    background-position: 5px 5px;
    padding: 5px 5px 10px 30px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(0,0,0,1);
    border-left: 1px solid rgba(0,0,0,1);
  }

  .preview-count {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    -webkit-user-select: none;
  }

  .preview-list {
    max-height: 300px;
    overflow: auto;
    margin: 0 0 10px 0;
    position: relative;
    cursor: default;

    .path {
      position: relative;
      -webkit-user-select: none;
    }

    .path-details:before {
      font-family: 'Octicons Regular';
      font-size: 12px;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      margin-left: 5px;
      -webkit-font-smoothing: antialiased;
      content: "\f05b";
      position: relative;
      top: 0;
    }

    .is-collapsed .path-details:before {
      content: "\f05a";
    }

    .path-name:before {
      font-family: 'Octicons Regular';
      font-size: 16px;
      width: 16px;
      height: 16px;
      margin-right: 5px;
      -webkit-font-smoothing: antialiased;
      content: "\f011";
      position: relative;
      top: 1px;
    }

    .path.readme .path-name:before {
      content: "\f007";
    }

    .operation {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 10px;
    }

    .line-number {
      margin-right: 1ex;
      text-align: right;
      display: inline-block;
    }

    .path-match-number {
      padding-left: 8px;
    }

    .preview {
      word-break: break-all;

      .match {
        -webkit-border-radius: 2px;
        padding: 1px;
      }
    }

    .matches {
      list-style-type: none;
      margin: 0;
    }
  }

  .header:after {
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
  }

  .expand-collapse {
    float: right;
    -webkit-user-select: none;
    margin: 0;

    li {
      display: inline-block;
      cursor: pointer;
      font-size: 11px;
      margin-left: 5px;
      padding: 5px 10px;
      border-radius: 3px;
      line-height: normal;
    }
  }

  .prompt-and-editor {
    display: -webkit-flex;

    .editor {
      position: relative;
      -webkit-flex: 1;
    }
  }

  .error-messages {
    list-style-type: none;
    margin: 0;
    padding: 5px 1em;
    color: white;
  }
}

.command-panel {
  position: relative;
  padding: 0;

  .is-loading {
    display: block;
    margin: 0 auto 10px auto;
    width: 100px;
    background-color: #111111;
    background-size: auto;
    background-position: 5px 5px;
    padding: 5px 5px 10px 30px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(0,0,0,1);
    border-left: 1px solid rgba(0,0,0,1);
  }

  .preview-count {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    -webkit-user-select: none;
  }

  .preview-list {
    max-height: 300px;
    overflow: auto;
    margin: 0 0 10px 0;
    position: relative;
    cursor: default;

    .path {
      position: relative;
      -webkit-user-select: none;
    }

    .path-details:before {
      font-family: 'Octicons Regular';
      font-size: 12px;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      margin-left: 5px;
      -webkit-font-smoothing: antialiased;
      content: "\f05b";
      position: relative;
      top: 0;
    }

    .is-collapsed .path-details:before {
      content: "\f05a";
    }

    .path-name:before {
      font-family: 'Octicons Regular';
      font-size: 16px;
      width: 16px;
      height: 16px;
      margin-right: 5px;
      -webkit-font-smoothing: antialiased;
      content: "\f011";
      position: relative;
      top: 1px;
    }

    .path.readme .path-name:before {
      content: "\f007";
    }

    .operation {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 10px;
    }

    .line-number {
      margin-right: 1ex;
      text-align: right;
      display: inline-block;
    }

    .path-match-number {
      padding-left: 8px;
    }

    .preview {
      word-break: break-all;

      .match {
        -webkit-border-radius: 2px;
        padding: 1px;
      }
    }

    .matches {
      list-style-type: none;
    }
  }

  .header:after {
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
  }

  .expand-collapse {
    float: right;
    -webkit-user-select: none;
    margin: 0;

    li {
      display: inline-block;
      cursor: pointer;
      font-size: 11px;
      margin-left: 5px;
      padding: 5px 10px;
      border-radius: 3px;
      line-height: normal;
    }
  }

  .prompt-and-editor {
    display: -webkit-flex;

    .editor {
      position: relative;
      -webkit-flex: 1;
    }
  }

  .error-messages {
    list-style-type: none;
    margin: 0;
    padding: 5px 1em;
    color: white;
  }
}


Updated flatly theme

Updated flatly theme

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/billpull/DoLoCo.git/'


Adding line item / cart thumbnail css

Adding line item / cart thumbnail css

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/Four51/demo_buyer.git/'


hide clubs section in nav when weblit basics is active (#974).

@sidebarTransitionTime: 0.5s;

html.no-js .sidebar {
  .sidebar-header .glyphicon-menu-hamburger {
    display: none;
  }

  .collapsible-content {
    /* The links in the sidebar are crucial to navigating the site.
     * If JS is disabled, we want the links visible at all costs. */
    opacity: 1 !important;
    max-height: none !important;
  }
}

.page {
  &.events {
    .sidebarColorizer(@darkBlueSidebarColor);
  }
  &.event-resources {
    .sidebarColorizer(@darkBlueSidebarColor);
  }
  &.teach-like-mozilla {
    .sidebarColorizer(@tealSidebarColor);
  }
  &.clubs {
    .sidebarColorizer(@orangeSidebarColor);
  }
  &.clubs-toolkit {
    .sidebarColorizer(@orangeSidebarColor);
  }
  &.teaching-materials {
    .sidebarColorizer(@pinkSidebarColor);
  }
  &.web-lit-basics {
    .sidebarColorizer(@pinkSidebarColor);
  }
  &.web-literacy {
    .sidebarColorizer(@tealSidebarColor);
  }

  &.teach-like-mozilla .teach,
  &.web-literacy .teach,
  &.clubs  .clubs,
  &.clubs-toolkit .clubs,
  &.event-resources .events,
  &.events .events {
    .sidebar-subitems {
      display: block;
    }
  }
}

.sidebar {
  background-color: @sidebarColor;
  transition: background-color @sidebarTransitionTime;
  color: white;
  font-size: 1.4rem;
  padding: 0 0 1.5rem 0;
  a {
    color: inherit;
  }

  .collapsible-content {
    transition: all 0.5s ease;
    opacity: 1;
    max-height: 1400px;
  }

  @media screen and (max-width: @screen-md) {
    .collapsible-content.collapsed {
      opacity: 0;
      max-height: 0;
    }
  }
}

.sidebar-header {
  position: relative;
  font-size: 2rem;
  color: #595a5e; // TODO: should this actually be @bodyTextColor ?
  padding: 2rem 1.5rem;
  overflow: hidden;
  @media screen and (min-width: @screen-md-min) {
    background-color: rgba(255, 255, 255, 0.3);
  }
  a {
    &:hover, &:focus {
      text-decoration: none;
    }
  }
  .moz-logo {
    width: 100%;
    max-width: 13rem;
  }
  .glyphicon-menu-hamburger {
    position: absolute;
    right: 1rem;
    top: 2.5rem;
    color: @white;
    border: none;
    background: transparent;
    padding: 0;
  }
  .glyphicon-menu-hamburger:focus {
    color: darken(@white, 10%);
  }
}

.sidebar-login {
  padding: 1rem (@grid-gutter-width / 2) 3rem;
  .login-text {
    img {
      width: 2.8rem;
      margin-right: .5rem;
    }
    &:after {
      content: "|";
      padding: 0 .8rem;
    }
  }
}

.sidebar-menu {
  padding-bottom: 0;
  margin-bottom: 0;
  .teach img {
    width: 5rem;
    margin: 0.4rem 1.3rem 0 0.6rem;
  }
  .clubs img {
    width: 5rem;
    margin: 0 1.5rem 0 0.5rem;
  }

  a {
    position: relative;
    display: block;
    padding: (@grid-gutter-width / 2) 0;
    @media screen and (min-width: @screen-lg-min) {
      padding: (@grid-gutter-width / 2);
    }
    &:hover, &:focus {
      text-decoration: none;
      background-color: darken(@sidebarColor, 5%);
      transition: background-color @sidebarTransitionTime;
    }
  }
  strong {
    display: inline;
    font-weight: 700;
    text-transform: uppercase;
    @media (min-width: @screen-md-min) {
      display: block;
    }
  }
  .help-text {
    font-size: 1.2rem;
    font-weight: 400;
    width: 22rem;
  }
  .glyphicon {
    position: absolute;
    right: 1rem;
    font-size: 1.5rem;
    top: calc(41.5%);
    color: lighten(@sidebarColor, 15%);
    transition: color @sidebarTransitionTime;
    visibility: hidden;
    @media screen and (min-width: @screen-lg-min) {
      right: 1.5rem;
    }
    @media screen and (min-width: @screen-md-min) {
      visibility: visible;
    }
  }
  img {
    float: none;
    width: 5.4rem;
    opacity: 0.6;
    margin: 0 1.5rem 0 0;
    @media (min-width: @screen-md-min) {
      float: left;
    }
  }
}

.sidebar-subitems {
  border-left: 0.1rem solid rgba(255, 255, 255, 0.4);
  display: none;
  list-style: none;
  margin-bottom: 1rem;
  margin-left: 3rem;
  padding: 0;
  position: relative;
  top: 0;

  @media screen and (min-width: @screen-lg-min) {
    margin-left: 4.5rem;
  }
  li {
    margin-bottom: 1.5rem;
    position: relative;
    &::before {
      border-bottom: 0.1rem solid rgba(255, 255, 255, 0.4);
      bottom: 0;
      content: '';
      display: block;
      height: 0.1rem;
      position: absolute;
      width: 4rem;
    }
  }
  a {
    display: block;
    margin: 0 0 0 4rem;
    padding: 0.5rem 1rem;
    position: relative;
    top: 1.4rem;
    font-weight: 600;
  }
}

@sidebarTransitionTime: 0.5s;

html.no-js .sidebar {
  .sidebar-header .glyphicon-menu-hamburger {
    display: none;
  }

  .collapsible-content {
    /* The links in the sidebar are crucial to navigating the site.
     * If JS is disabled, we want the links visible at all costs. */
    opacity: 1 !important;
    max-height: none !important;
  }
}

.page {
  &.events {
    .sidebarColorizer(@darkBlueSidebarColor);
  }
  &.event-resources {
    .sidebarColorizer(@darkBlueSidebarColor);
  }
  &.teach-like-mozilla {
    .sidebarColorizer(@tealSidebarColor);
  }
  &.clubs {
    .sidebarColorizer(@orangeSidebarColor);
  }
  &.clubs-toolkit {
    .sidebarColorizer(@orangeSidebarColor);
  }
  &.teaching-materials {
    .sidebarColorizer(@pinkSidebarColor);
  }
  &.web-lit-basics {
    .sidebarColorizer(@pinkSidebarColor);
  }
  &.web-literacy {
    .sidebarColorizer(@tealSidebarColor);
  }

  &.teach-like-mozilla .teach,
  &.web-literacy .teach,
  &.clubs  .clubs,
  &.clubs-toolkit .clubs,
  &.web-lit-basics .clubs,
  &.event-resources .events,
  &.events .events {
    .sidebar-subitems {
      display: block;
    }
  }
}

.sidebar {
  background-color: @sidebarColor;
  transition: background-color @sidebarTransitionTime;
  color: white;
  font-size: 1.4rem;
  padding: 0 0 1.5rem 0;
  a {
    color: inherit;
  }

  .collapsible-content {
    transition: all 0.5s ease;
    opacity: 1;
    max-height: 1400px;
  }

  @media screen and (max-width: @screen-md) {
    .collapsible-content.collapsed {
      opacity: 0;
      max-height: 0;
    }
  }
}

.sidebar-header {
  position: relative;
  font-size: 2rem;
  color: #595a5e; // TODO: should this actually be @bodyTextColor ?
  padding: 2rem 1.5rem;
  overflow: hidden;
  @media screen and (min-width: @screen-md-min) {
    background-color: rgba(255, 255, 255, 0.3);
  }
  a {
    &:hover, &:focus {
      text-decoration: none;
    }
  }
  .moz-logo {
    width: 100%;
    max-width: 13rem;
  }
  .glyphicon-menu-hamburger {
    position: absolute;
    right: 1rem;
    top: 2.5rem;
    color: @white;
    border: none;
    background: transparent;
    padding: 0;
  }
  .glyphicon-menu-hamburger:focus {
    color: darken(@white, 10%);
  }
}

.sidebar-login {
  padding: 1rem (@grid-gutter-width / 2) 3rem;
  .login-text {
    img {
      width: 2.8rem;
      margin-right: .5rem;
    }
    &:after {
      content: "|";
      padding: 0 .8rem;
    }
  }
}

.sidebar-menu {
  padding-bottom: 0;
  margin-bottom: 0;
  .teach img {
    width: 5rem;
    margin: 0.4rem 1.3rem 0 0.6rem;
  }
  .clubs img {
    width: 5rem;
    margin: 0 1.5rem 0 0.5rem;
  }

  a {
    position: relative;
    display: block;
    padding: (@grid-gutter-width / 2) 0;
    @media screen and (min-width: @screen-lg-min) {
      padding: (@grid-gutter-width / 2);
    }
    &:hover, &:focus {
      text-decoration: none;
      background-color: darken(@sidebarColor, 5%);
      transition: background-color @sidebarTransitionTime;
    }
  }
  strong {
    display: inline;
    font-weight: 700;
    text-transform: uppercase;
    @media (min-width: @screen-md-min) {
      display: block;
    }
  }
  .help-text {
    font-size: 1.2rem;
    font-weight: 400;
    width: 22rem;
  }
  .glyphicon {
    position: absolute;
    right: 1rem;
    font-size: 1.5rem;
    top: calc(41.5%);
    color: lighten(@sidebarColor, 15%);
    transition: color @sidebarTransitionTime;
    visibility: hidden;
    @media screen and (min-width: @screen-lg-min) {
      right: 1.5rem;
    }
    @media screen and (min-width: @screen-md-min) {
      visibility: visible;
    }
  }
  img {
    float: none;
    width: 5.4rem;
    opacity: 0.6;
    margin: 0 1.5rem 0 0;
    @media (min-width: @screen-md-min) {
      float: left;
    }
  }
}

.sidebar-subitems {
  border-left: 0.1rem solid rgba(255, 255, 255, 0.4);
  display: none;
  list-style: none;
  margin-bottom: 1rem;
  margin-left: 3rem;
  padding: 0;
  position: relative;
  top: 0;

  @media screen and (min-width: @screen-lg-min) {
    margin-left: 4.5rem;
  }
  li {
    margin-bottom: 1.5rem;
    position: relative;
    &::before {
      border-bottom: 0.1rem solid rgba(255, 255, 255, 0.4);
      bottom: 0;
      content: '';
      display: block;
      height: 0.1rem;
      position: absolute;
      width: 4rem;
    }
  }
  a {
    display: block;
    margin: 0 0 0 4rem;
    padding: 0.5rem 1rem;
    position: relative;
    top: 1.4rem;
    font-weight: 600;
  }
}


Accidentally removed the text shadow

Accidentally removed the text shadow

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/Xyloo/osu-web.git/'


左树结构 选中色

左树结构 选中色

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/yyssc/ssc30-admin.git/'


Code chnages for CSS.

Code chnages for CSS.

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/BrightMahi/aacBuyerNew.git/'