SOURCE CODE: Uize.Widgets.Bar.HorzWithStatusText.Css (view docs)

<%@ required ('Uize.Widgets.CssUtil'); %>
<%
  var _cssUtil = Uize.Widgets.CssUtil;
%>
.`` {
  position: relative;
}

.`track`, .`trackFull`, .`trackEmpty`, .`trackLighting`, .`statusText` {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.`trackFull` {
  background: #0a0;
}

.`trackEmpty` {
  background: #222;
}

.`trackLighting` {
  background: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%,rgba(220,235,255,0.15) 42%,rgba(117,117,117,0.15) 50%,rgba(14,14,14,0.3) 100%);
}

.`statusText` {
  border-width: 1px;
  border-style: solid;
  border-color: #eee #666 #666 #eee;
  color: #eee;
  <%= _cssUtil.pseudoStroke ('rgba(0,0,0,.4)') %>
  text-align: center;
}

/*** different sizes ***/
<%
  var _sizes = Uize.Widgets.CssUtil.sizes;
%>
  .`tiny` {
    height: <%= _sizes.tiny.outer %>px;
  }
  .`tiny` .`statusText` {
    font-size: <%= _sizes.tiny.font %>px;
    line-height: 20px;
  }

  .`small` {
    height: <%= _sizes.small.outer %>px;
  }
  .`small` .`statusText` {
    font-size: <%= _sizes.small.font %>px;
    line-height: 24px;
  }

  .`medium` {
    height: <%= _sizes.medium.outer %>px;
  }
  .`medium` .`statusText` {
    font-size: <%= _sizes.medium.font %>px;
    line-height: 34px;
    letter-spacing: 1px;
  }

  .`large` {
    height: <%= _sizes.large.outer %>px;
  }
  .`large` .`statusText` {
    font-size: <%= _sizes.large.font %>px;
    line-height: 46px;
    letter-spacing: 2px;
  }