travis-web/assets/styles/dashboard/dashboard.scss

html, body {
  font-family : 'Source Sans Pro', Helvetica, sans-serif;
  font-size   : 16px;
  line-height : 1.2em;
  color       : #838b8c;
  margin      : 0;
  padding     : 0;
}

a {
  text-decoration : none;
}

.application,
.dashboard {
  height: 100%;
}


.no-padding {
  padding : 0;
}

#top {
  position: static;
  height      : 55px;
  font-size   : 15px;
  color       : #e9e9e9;
  line-height : 28px;
  background  : #404650;
  overflow: hidden;
}

#logo {
  float        : left;
  width        : 123px;
  height       : 55px;
  margin-right : 14px;
  text-indent  : -9999px;
  background   : #dc4136 url('/images/dashboard/travis-logo.svg') no-repeat 20px 18px;
}

.status-graph {
  background  : url('/images/dashboard/health-stats.svg') no-repeat;
  background  : contain;
  margin-top  : 17px; 
  height      : 18px;
  width       : 78px;
  text-indent : -9999px;
}

#top #nav {
  margin-top : 9px;
}

#top #nav li {
  margin-right : 15px;
}

#top ul, li {
  list-style-type : none;
  display         : inline-block;
  padding         : 0;
  line-height     : 14px;
  margin-top      : 6px;
}

#top a {
  color : #ffffff;
}

#top a:hover { 
  color : #ADC7D0;
}

#top p {
  display : inline-block;
}

#user {
  text-align : right;
  cursor     : pointer;
}

#user p {
  display : none;
}

#top img {
  float  : right;
  margin : 5px 10px 0 10px;
  width  : 30px;
  height : 30px;
  border-radius         : 100px;
  -webkit-border-radius : 100px;
  -moz-border-radius    : 100px;
}

#user ul {
  text-align : left;
  display    : inline;
  margin     : 0;
  padding    : 15px 0 17px 0;
  list-style : none;
  z-index    : 1000; 
}

#user ul li ul {
  padding    : 0;
  position   : absolute;
  top        : 45px;
  right      : 0;
  width      : 150px;
  display    : none;
  opacity    : 0;
  visibility : hidden;
}

#user ul li ul li {
  background  : #404650;
  color       : #ffffff; 
  display     : block;
  line-height : 18px; 
  padding     : 8px 18px;
  margin      : 0;
}

#user ul li ul li:last-child {
  border-bottom-left-radius  : 4px;
  border-bottom-right-radius : 4px;
}

#user ul li ul li:hover {
  background : #5e869a;
  color      : #ffffff;
}

#user ul li:hover ul {
  display    : block;
  opacity    : 1;
  visibility : visible;
}

.current-org-avatar {
  display     : inline-block;
  height      : 20px;
  width       : 20px;
  vertical-align: top;
  margin : -5px 5px 0 0;  
}

#filters-search {
  background    : #ffffff;
  font-size     : 14px;
  padding       : 5px 0 5px 0;
  max-height    : 44px; 
}

#filters {
  float : left;
}

#filters ul {
  text-align : left;
  display    : inline;
  margin     : 0;
  padding    : 0;
  list-style : none;
  z-index    : 1000; 
}

#filters ul li {
  background   : #fff;
  position     : relative;
  display      : inline-block;
  padding      : 10px 0 10px 0;
  margin-right : -4px;
  margin-top   : 0;
  cursor       : pointer;
  border-radius         : 0px;
  -webkit-border-radius : 0px;
  -moz-border-radius    : 0px;
}

#filters li.filters-start:hover {
  background-color : #fff;
}

#filters ul li ul {
  padding    : 0;
  position   : absolute;
  top        : 35px;
  left       : 0;
  width      : 200px;
  display    : none;
  opacity    : 0;
  visibility : hidden;
  box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4);
  -webkit-box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4);
  -moz-box-shadow    : 2px 1px 4px 0px rgba(148,145,138,0.4);
}

#filters ul li ul li { 
  display      : block;
  line-height  : 23px;
  padding-left : 20px; 
}

#filters ul li ul li:first-child {
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
}

#filters ul li ul li:last-child {
  border-bottom-left-radius  : 4px;
  border-bottom-right-radius : 4px;
}

#filters ul li ul li div {
  display          : inline-block;
  width            : 20px;
  height           : 20px;
  margin-right     : 5px;
  text-indent      : -9999px; 
  border-radius         : 100px;
  -webkit-border-radius : 100px;
  -moz-border-radius    : 100px;  
}

.org-travisci {
  background      : url('/images/dashboard/orgs-travisci.png') no-repeat;
  background-size : contain;
}

.org-saltinejustine {
  background      : url('/images/dashboard/orgs-saltinejustine.png') no-repeat;
  background-size : contain;
}

.org-openkarma {
  background      : url('/images/dashboard/orgs-openkarma.png') no-repeat;
  background-size : contain;
}

.org-eurucamp {
  background      : url('/images/dashboard/orgs-eurucamp.png') no-repeat;
  background-size : contain;
}

#filters ul li ul li:hover {
  background : #5e869a;
  color      : #ffffff;
}

#filters ul li:hover ul {
  display    : block;
  opacity    : 1;
  visibility : visible;
}

#views {
  float : left;
}

#views ul {
  text-align : left;
  display    : inline;
  margin     : 0;
  padding    : 0;
  list-style : none;
  z-index    : 1000; 
}

#views ul li {
  background   : #fff;
  position     : relative;
  display      : inline-block;
  padding      : 10px 0 10px 0;
  margin-right : -4px;
  margin-top   : 0;
  cursor       : pointer;
  border-radius         : 0px;
  -webkit-border-radius : 0px;
  -moz-border-radius    : 0px;
}

#views li.views-start:hover {
  background-color : #fff;
}

#views ul li ul {
  padding    : 0;
  position   : absolute;
  top        : 35px;
  left       : 0;
  width      : 200px;
  display    : none;
  opacity    : 0;
  visibility : hidden;
  box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4);
}

#views ul li ul li { 
  display      : block;
  line-height  : 23px;
  padding-left : 20px; 
}

#views ul li ul li:first-child {
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
}

#views ul li ul li:last-child {
  border-bottom-left-radius  : 4px;
  border-bottom-right-radius : 4px;
}

#views ul li ul li:hover {
  background : #5e869a;
  color      : #ffffff;
}

#views ul li:hover ul {
  display    : block;
  opacity    : 1;
  visibility : visible;
}

.currently-selected {
  font-weight : 600;
}

.arrow-down {
  width        : 0; 
  height       : 0; 
  display      : inline-block;
  padding-top  : 2px; 
  margin-left  : 5px;
  border-left  : 5px solid transparent;
  border-right : 5px solid transparent;
  border-top   : 5px solid #9d9fa1;
}

#search {
  float : right;
}

#search ul {
  text-align   : left;
  margin       : 0;
  padding-left : 0;
  list-style   : none;
}

#search ul li {
  position     : relative;
  display      : inline-block;
  padding      : 9px 0 8px 0;
  margin-top   : 0;
  width        : 158px;
  line-height  : 17px;
}

.search-icon {
  background      : url('/images/dashboard/search-icon.svg') no-repeat;
  background-size : contain;
  display         : inline-block;
  float           : right;
  height          : 16px;
  width           : 16px; 
  text-indent     : -9999px;
}

.tiles {
  background  : #f4f3ea; 
  padding     : 30px 0 10px 0;
}

.tile {
  background    : #fff;
  min-height    : 125px;
  color         : #9d9fa1;
  font-size     : 14px;
  margin-bottom : 20px;
  padding       : 0 10px 0 0;
  border-radius         : 4px;
  -webkit-border-radius : 4px;
  -moz-border-radius    : 4px;
}

.build-bar {
  position        : absolute;
  background: {
    repeat: no-repeat;
    position: 7px 10px;
    size: 20px 20px;
  }
  min-height      : 125px;
  width           : 33px;
  border-radius   : 4px 0 0 4px;
}
// .repo a:hover,
// .build-status a:hover {
//   text-decoration: underline;
// }

.passed {
  .build-bar {
    background: {
      color: #3ba85d;
      image: url('/images/dashboard/status-passed.svg');
    }
  }
  .org,
  .repo a,
  .build-status a {
    color: #3ba85d;
  }
  .repo a:focus,
  .build-status a:focus {
    outline: 1px dotted #3ba85d;
  }
}

.failed {
  .build-bar {
    background: {
      color: #d04729;
      image: url('/images/dashboard/status-failed.svg');
    }
  }
  .org,
  .repo a,
  .build-status a {
    color: #d04729;
  }
  .repo a:focus,
  .build-status a:focus {
    outline: 1px dotted #d04729;
  }
}

.started {
  .build-bar {
    background: {
      color: #D2CA24;
      image: url('/images/dashboard/status-pending.svg');
    }
  }
  .org,
  .repo a,
  .build-status a {
    color: #848032;
  }
  .repo a:focus,
  .build-status a:focus {
    outline: 1px dotted #848032;
  }
}

.errored {
  .build-bar {
    background: {
      color: #999999;
      image: url('/images/dashboard/status-errored.svg');
    }
  }
  .org,
  .repo a,
  .build-status a {
    color: #999999;
  }
  .repo a:focus,
  .build-status a:focus {
    outline: 1px dotted #999999;
  }
}

.tile .build-information {
  padding-left : 45px;
  padding-top  : 8px;
}

.tile .org {
  margin : 0;
}

.tile .repo {
  font-size     : 20px;
  display       : inline-block;
  margin        : 0;
  max-width     : 250px;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.duration, .finished {
  margin-top : 8px;
  background-repeat: no-repeat;
  background-position: 0 1px;
}

.duration {
  background-image: url('/images/dashboard/time.svg');
  background-size : 11px 11px;
  text-indent     : 15px;
  line-height     : 13px; 
}

.finished {
  background-image: url('/images/dashboard/cal.svg');
  background-size : 11px 11px; 
  text-indent     : 15px;
  line-height     : 14px; 
}

.build-status {
  position: absolute;
  bottom: 25px;
  margin-bottom: 0;
}

.tile .star-feature {
  position        : absolute;
  top             : 0;
  right           : 0;
  background      : url('/images/dashboard/star-on.svg') no-repeat 7px 10px;
  background-size : 20px 20px;
}

.if_private {
  display         : inline-block;
  background      : url('/images/dashboard/private-icon.svg') no-repeat 0 0;
  background-size : contain;
  height          : 12px; 
  width           : 9px;
  margin-left     : 5px;
  text-indent     : -9999px;  
}

footer {
  padding          : 20px 0;
  background-color : #e0e0e0;
  min-height       : 334px;
  font-size        : 12px;
  line-height      : 22px;
  margin-top      : -334px; /* sticky footer */
}

.wrapper {
  padding-bottom: 334px;
  min-height: 100%;
  height: auto;
  background-color: #f4f3ea;
}
@media (min-width: 640px) {
  .wrapper {
    padding-bottom: 204px;
  }
  footer {
    margin-top: -204px;
    min-height: 204px;
  }
}

footer h3 {
  font-size   : 15px;
  margin  : 0 0 10px 0;
  padding-top : 6px;
  font-weight : 400;
  color       : #8f9ba2;
  border-top  : solid 4px #ccd0d5;    
}

footer .row p {
  display : inline-block; 
  margin  : 0;
}

footer .row ul,
footer .row li {
  display         : block; 
  color           : #404650;
  line-height     : 22px;
  padding         : 0;
  margin-top      : 0;
  list-style-type : none;
}

footer a {
  text-decoration : none;
  display         : inline-block; 
  color           : #404650;
}

footer a:hover,
footer a:active {
  text-decoration : underline;
}

a  {
  text-decoration : none;
  display         : block; 
  color           : #404650;
}

.status-circle {
  background   : #3ba85d;
  display      : inline-block;
  height       : 11px;
  width        : 11px;
  text-indent  : -9999px;
  margin-right : 5px;
  border-radius         : 100px;
  -webkit-border-radius : 100px;
  -moz-border-radius    : 100px;
  vertical-align: middle;
}


@media only screen and (min-width: 64.063em) {
  #top img {
    margin : 5px 0 0 10px;
  }
}

@media only screen and (min-width: 640px) {
  #top #status li {
    display : inline-block;
  }

  #user p {
    display : inline-block;
  }

  #search {
    float : right;
  }
}