freeCodeCamp/public/css/themes/modern.less

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300);

// Colors
// -------------------------

@gray-lighter: #f5f5f5;
@gray-light: #e0e0e0;
@gray: #737373;
@gray-dark: #404040;
@gray-darker: #121212;

@brand-primary: #2ac5ee;
@brand-success: #0f9d58;
@brand-warning: #f4b400;
@brand-danger: #cb4437;
@brand-info: #5bc0dd;

::selection {
  background: @brand-primary;
}

// Typography
// -------------------------

@font-size-base: 13px;
@font-family-base: 'Montserrat', sans-serif;
@headings-font-family: 'Montserrat', sans-serif;
@headings-font-weight: 700;
@text-color: @gray-darker;
@link-color: @brand-primary;
@link-hover-color: @gray-darker;

a {
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    text-decoration: none;
  }
}

p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

// Buttons
// -------------------------

@btn-default-bg: @gray-lighter;
@btn-default-color: @gray-darker;
@btn-primary-border: darken(@brand-primary, 8%);
@btn-success-border: darken(@brand-success, 8%);
@btn-warning-border: darken(@brand-warning, 8%);
@btn-danger-border: darken(@brand-danger, 8%);
@btn-info-border: darken(@brand-info, 8%);

.btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  transition: all .4s cubic-bezier(.24,.45,.46,.92);

  &:hover {
    color: #fff;
    background-color: @gray-darker;
  }
}

.btn-social {
  padding: 10px 50px;

  :first-child {
    width: 38px;
    line-height: 38px;
  }
}

.btn-link {

  &:hover {
    text-decoration: none;
    background-color: transparent;
    color: @gray-darker;
  }
}


// Forms
// -------------------------

@input-border-radius: 2px;
@input-border-focus: #999;
@input-border: #f0f0f0;
@input-color: #444;
@input-color-placeholder: #999;
@input-height-base: 48px;

// Form states and alerts
// -------------------------

@state-success-text: #569845;
@state-success-bg: #dbf5d3;
@state-success-border: #aed3a5;

@state-info-text: #3a87ad;
@state-info-bg: #d9edf7;
@state-info-border: #98cce7;

@state-warning-text: #bf9853;
@state-warning-bg: #fdf8e2;
@state-warning-border: #f2daab;

@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: #e0b1b8;

// Alerts
// -------------------------

.alert {
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

// Navbar
// -------------------------

@navbar-height: 50px;
@navbar-default-bg: rgba(255,255,255,0.95);
@navbar-default-link-color: @gray-darker;
@navbar-default-link-active-color: @brand-primary;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-hover-color: @brand-primary;
@navbar-default-link-hover-bg: transparent;
@navbar-default-brand-color: @gray-darker;
@navbar-default-brand-hover-color: @brand-primary;

.navbar-default {
  border: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.15);

  .navbar-brand {
    font-weight: 300;
  }

  .navbar-nav {
    > li > a {
      transition: color .4s cubic-bezier(.24,.45,.46,.92);
    }
  }
}