github.com/billybanfield/evergreen@v0.0.0-20170525200750-eeee692790f7/public/static/less/global_styles.less

// MMS Colors
@green0: #365221;
@green1: #507b32;
@green2: #6ba442;
@green3: #89b668;
@green4: #a6c88e;
@green5: #c4dbb3;

// default text color is @gray1
@gray0: #313030;
@gray1: #494747;
@gray2: #615f5f;
@gray3: #807f7f;
@gray4: #a09f9e;
@gray5: #bfbfbe;

// UI Grays
@gray6: #dee0e3;
@gray7: #ebebed;
@gray8: #f5f6f7;

// Other Colors (from MMS)
@red: #ed271c;
@lightRed: #ffeaea;
@purple: #800080;
@yellow: #ffb618;
@pw: #fff;
@cautionOrange: #ffbc91;
@errorBackground: #fdd0d1;
@pageBackground: #f5f6f7;

// Text Colors
@linkText: #006cbc;
@warningText: #ffb618;
@successText: #6ca439;
@errorText: #ed271c;
@mutedText: #9b9694;
@veryMutedText: #b6b3b2;
@subNavText: #6f6763;
// END MMS Colors


@errorRed: #d9534f;
@quietErrorRed: #e7908e;
@successGreen: #5cb85c;

// Standard colors for page sections
@section-bg: #f0f0f0;
@section-border: #d0d0d0;
@section-border-width: 1px;

// Styling for execution results
@success-text: #0ED400;
@failed-text: #F24738;
@system-failed-text: @purple;
@cancelled-text: #F10FF2;
@started-text: #F29200;
@not-started-text: #808080;

// Styling for exec results on icons
@success-icon: #29941D;
@failed-icon: darken(#F24738, 10%);
@cancelled-icon: #111;

@started-border: #C4A208;
@started: #FFD20A;

// Nav bar styling
@nav-bar-height: 30px;

@default-bg-color: @gray5;
@started-bg-color: @yellow;
@sys-failure-bg-color: @purple;

@default-text-color: #888;

// Link stylings
@link-opacity: .8;
.div-link {
    opacity: @link-opacity;
    cursor: pointer;
}
@vibrant-link-opacity: .5;
.div-vibrant-link {
    opacity: @vibrant-link-opacity;
    cursor: pointer;
}

/* Fonts! */
//Reg
@font-face {
    font-family: 'Akzidenz';
    src: url('/static/font/akzidgrostdreg.eot');
    src: url('/static/font/akzidgrostdreg.eot?#iefix') format('embedded-opentype'),
         url('/static/font/akzidgrostdreg.woff') format('woff'),
         url('/static/font/akzidgrostdreg.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
//Reg Italic
@font-face {
    font-family: 'Akzidenz';
    src: url('/static/font/akzidgrostdita.eot');
    src: url('/static/font/akzidgrostdita.eot?#iefix') format('embedded-opentype'),
         url('/static/font/akzidgrostdita.woff') format('woff'),
         url('/static/font/akzidgrostdita.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
}
//Bold
@font-face {
    font-family: 'Akzidenz';
    src: url('/static/font/akzidgrostdmed.eot');
    src: url('/static/font/akzidgrostdmed.eot?#iefix') format('embedded-opentype'),
         url('/static/font/akzidgrostdmed.woff') format('woff'),
         url('/static/font/akzidgrostdmed.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}
//Bold Italic
@font-face {
    font-family: 'Akzidenz';
    src: url('/static/font/akzidgrostdmedita.eot');
    src: url('/static/font/akzidgrostdmedita.eot?#iefix') format('embedded-opentype'),
         url('/static/font/akzidgrostdmedita.woff') format('woff'),
         url('/static/font/akzidgrostdmedita.ttf') format('truetype');
    font-style: italic;
    font-weight: bold;
}
//Light
@font-face {
  font-family: 'Akzidenz';
  src: url('/static/font/akzidgrostdlig.eot');
  src: url('/static/font/akzidgrostdlig.eot?#iefix') format('embedded-opentype'),
       url('/static/font/akzidgrostdlig.woff') format('woff'),
       url('/static/font/akzidgrostdlig.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
}
//Light Italic
@font-face {
    font-family: 'Akzidenz';
    src: url('/static/font/akzidgrostdligita.eot');
    src: url('/static/font/akzidgrostdligita.eot?#iefix') format('embedded-opentype'),
         url('/static/font/akzidgrostdligita.woff') format('woff'),
         url('/static/font/akzidgrostdligita.ttf') format('truetype');
    font-style: italic;
    font-weight: 200;
}
//Condensed weights and styles
@font-face {
  font-family: 'Akzidenz Cnd';
  src: url('/static/font/akzidgrostdligcnd.eot');
  src: url('/static/font/akzidgrostdligcnd.eot?#iefix') format('embedded-opentype'),
       url('/static/font/akzidgrostdligcnd.woff') format('woff'),
       url('/static/font/akzidgrostdligcnd.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
}

////////////////////////
// new global MCI styles
body {
  padding-top: 50px; // compensate for 50px tall fixed navbar
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
  font-weight: bold;
}

header {
  h1 {
    display: inline-block;
    font-size: 24px;
    margin-top: 15px;

    &.one-liner {
      display: inline-block;
      width: 85%;
    }
  }
  .status-label {
    font-size: 12px;
  }
  .form-inline.header-form {
    display: inline-block;
    margin-left: 10px;

    .form-control {
      margin-top: -10px;
      width: 150px;
    }
    .checkbox {
      margin-top: -10px;
      margin-left: 10px;
    }
  }

  .header-pagination {
    float: right;
    margin-top: 15px;
  }
}

.one-liner {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

ol.breadcrumb {
  background: none;
  border-radius: 0;
  margin: 15px 0 0 0;
  padding: 0;

  li {
    text-transform: none;
    font-size: 12px;
    font-weight: normal;
  }
}

.page-actions {
  margin-top: 15px;
}
.dropdown {
  .admin-disabled a {
    cursor: default;
    color: @gray5;

    &:hover {
      background: transparent;
      color: @gray5;
    }
  }
}

pre {
  background: @pw;
  border-radius: 0;
  border: 1px solid @gray8;
}

.mci-pod {
  padding: 15px;
  margin-bottom: 20px;
  background: @pw;
}

h3.section-heading {
  margin: 15px 0 10px;
}

.btn.btn-hash {
  text-transform: none;
  font-family: Menlo, Monaco, monospace;
}

.mono {
  font-family: monospace;
}
// END new global MCI styles
////////////////////////////

// To allow absolute placement of children within parents
.allow-absolute-children {
    position: relative;
}

.absolute-child {
    position: absolute;
}

.logs-display {
    font-family: "Fixed";
}

.rounded-corners {
    border-radius: 5px;
    -moz-border-radius: 5px;
}

.section-block {
    background-color: @section-bg;
    border: solid @section-border-width @section-border;
}

.tooltip {
    overflow: hidden;
}

// List styling
.no-decoration {
    margin-left: 0;
    list-style-type: none;
}

// progress bar stuff
.progress-bar-danger {
    background-color: @errorRed;
}
.progress-bar-success {
    background-color: @successGreen;
}
.progress-bar-system-failed {
    background-color: @purple;
}
.progress-bar-failed {
    background-color: @errorRed;
}
.progress-bar-silently-failed {
  background-color: @quietErrorRed;
}

// for wrapping a status label
.status-label {
  width: 100%;
  font-size: 18px;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}

// Execution result classes
.status-success {
    color: @success-text;
}

.status-failed {
    color: @failed-text;
}

.status-cancelled {
    color: @cancelled-text;
}

.status-started {
    color: @started-text;
}

.status-dispatched {
    color: @started-text;
}

.status-undispatched {
    color: @not-started-text;
}

.status-unstarted {
    color: @not-started-text;
}


//Execution result classes for icons (not text)
.icon-invisible{
	visibility:hidden;
}

.status-icon-success{
    color: @success-icon;
}

.status-icon-started{
	opacity:0.0;
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.4;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.2;}
}

.status-icon-dispatched{
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite;
}

.status-icon-failed{
    color: @failed-icon;
}

.status-icon-cancelled{
    color: @cancelled-icon;
}

.block-status-success {
    color: black;
    background-color: @success-text;
    border: 1px solid @success-text;
}

.block-status-inactive {
    color: black;
    background-color: @gray7;
    border: 1px solid @success-text;
}

.block-status-failed {
    color: black;
    background-color: @failed-text;
    border: 1px solid @failed-text;
}

.block-status-system-failed {
    color: black;
    background-color: @system-failed-text;
    border: 1px solid @system-failed-text;
}

.block-status-started {
    color: black;
    background-color: @started;
    border: 1px solid @started-border;
}

.block-status-dispatched {
    color: black;
    background-color: @started;
    border: 1px solid @started-border;
}

// for the new version - the others should be phased out
.success {
    background-color: @successGreen;
    color: white;
}
.failed {
    background-color: @errorRed;
    color: white;
}
.dispatched {
    background-color: @started-bg-color;
}
.undispatched {
    background-color: @default-bg-color;
}
.started {
    background-color: @started-bg-color;
}
.system-failed {
    background-color: @sys-failure-bg-color;
    color: white;
}
.unstarted {
    background-color: @default-bg-color;
}
.created {
    background-color: @default-bg-color;
}
.inactive {
    background-color: @gray7;
}

// only modifies the text color, not the background color
.success-text {
    color: #1e781e;
}
.failed-text {
    color: #ff3500;
}
.gitspec {
	color: #333;
	font-family: monospace;
	font-weight: bold;
}
.pointer {
  cursor: pointer;
}
.semi-muted {
  color: #666666;
}
.muted {
  color: #999999;
}

.result-slice {
    height: 23px;
    float: left;
    border-left: 1px solid rgba(255,255,255,0.75);

    &.success {
        background-color: @successGreen;
    }
    &.failed {
        background-color: @errorRed;
        color: white;
    }
    &.system-failed {
        background-color: @sys-failure-bg-color;
        color: white;
    }
    &.started {
        background-color: @started-bg-color;
    }
    &.undispatched {
        background-color: @gray5;
    }
    &.unscheduled {
        background-color: @gray7;
    }
}

.result-slice:first-of-type {
    border: none;
}

.history-row {
    padding-top: 10px;
    padding-bottom: 10px;

    &.active {
      background: fade(@yellow, 15%);
    }
    .progress {
      margin-bottom: 0;
    }
}

.history-row:first-of-type {
    margin-top: -10px;
}

.repo-div {
    border-bottom: 1px solid #ddd;
}

.repo-name {
    font-weight: bold;
    padding: 4px 10px;
}

// github commit widget
.commit-panel {
  margin: 0 0 25px;
}
.commit-message-large {
  font-size: 16px;
}
.commit-meta-data-wrapper {
  max-width: 80%;
  float: left;
}
.commit-message {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.commit-message-author {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  font-size: 13px;
}
.commit-message a {
  color: @linkText;
}
.commit-message a.highlight {
  color: @linkText;
}

img.gravatar-small {
  float: left;
  margin-right: 8px;
  border-radius: 18px;
  height: 36px;
  width: 36px;
}
img.gravatar-medium {
  float: left;
  margin-right: 10px;
  border-radius: 6px;
  height: 50px;
  width: 50px;
}


// needed on /patches, not sure where else
ul {
  padding-left: 0px !important;
}
ul.inline {
  list-style: none !important;
  margin-left: 0px !important;
}
ul.inline li {
  display: inline-block !important;
  line-height: 20px !important;
}

// new subclass .force-inline that preserves inline forms at smaller breakpoints
.form-inline.force-inline .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
.form-inline.force-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.form-inline.force-inline .input-group > .form-control {
  width: 100%;
}
.form-inline.force-inline .control-label {
  margin-bottom: 0;
  vertical-align: middle;
}
.form-inline.force-inline .radio,
.form-inline.force-inline .checkbox {
  display: inline-block;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.form-inline.force-inline .radio input[type="radio"],
.form-inline.force-inline .checkbox input[type="checkbox"] {
  float: none;
  margin-left: 0;
}
.form-inline.force-inline .has-feedback .form-control-feedback {
  top: 0;
}

#help-btn {
  font-size: 20px;
}

.alert{
    font-size:2em;
}
button.alert-close {
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	font-size: 1.2em;
	margin-right: 15px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
}

.warning-text {
  color: @warningText;
}

.error-text {
  color: @errorText;
}

// Prevent text selection
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

.mono {
  font-family: monospace;
}

.nowrap {
  white-space: nowrap;
}

/* for integrating text inline with labels but without background/all-caps */
.label.unlabel{
  text-transform:none;
}