nightrider-tip.less

@import "lesshat.less";
// generated by csshat, requires lesshat

@gradientBottom: #292d36;
@gradientTop: #585c67;
@borderColor: #26292e;
@borderRadius: 4px;


.tip-inner {
  color: #fff;
  padding: 8px 10px 7px 10px;
  text-align: center;
  opacity: .9; // layer alpha
  border: 0px solid @borderColor; // stroke
  .border-radius(@borderRadius); // border radius
  background-color: #f1f5f5; // layer fill content
  .box-shadow(~"0 2px 2px rgba(0,0,0,.2), inset 0 37px 1px rgba(255,255,255,.02)"); // drop shadow, inner shadow and inner glow
  .background-image(linear-gradient(bottom, @gradientBottom 0%, @gradientTop 100%)); // gradient overlay
  z-index: 9;
}

.tip {
  font-size: 11px;
  text-shadow: 0 -1px 1px rgba(5,5,5,.56); /* drop shadow */
}

.tip-arrow {
  position: absolute;
  opacity: .9; // layer alpha
  z-index: 10;
  width: 0;
  height: 0;
  line-height: 0;
  border: 5px dashed @borderColor;
}

.tip-arrow-south { border-bottom-color: rgba(0,0,0,.75) }
.tip-arrow-north { border-top-color: rgba(0,0,0,.75) }
.tip-arrow-west { border-left-color: rgba(0,0,0,.75) }
.tip-arrow-east { border-right-color: rgba(0,0,0,.75) }

.tip-south .tip-arrow {
  border-color: @gradientTop;
  top: 0px;
  left: 50%;
  z-index: 10;
  margin-left: -5px;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent
}

.tip-north .tip-arrow {
  border-color: @gradientBottom;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent
}


.tip-west, .tip-north-west, .tip-south-west {
  .tip-arrow {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-left-style: solid;
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
}

.tip-east, .tip-north-east, .tip-south-east {
  .tip-arrow {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-right-style: solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
}

.tip-north-west, .tip-north-east {
  .tip-arrow {
    border-color: @gradientTop;
    border-top-color: transparent;
    border-bottom-color: transparent;
    top: 25%;
  }
}

.tip-south-west, .tip-south-east {
  .tip-arrow {
    border-color: @gradientBottom;
    border-top-color: transparent;
    border-bottom-color: transparent;
    top: 75%;
  }
}