docs/meteor/client/stylesheets/theme.import.less

//
// Base
// --------------------------------------------------

html, body {
  height: 100%;
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  background-color: @brand-primary;
  font-size: @font-size-base;
  height: @window-height;
  .no-select();
}

html, body, div, span, object,
form, input, h1, h2, button, label, a, img {
  .no-select();
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 300;
  small {
    margin-left: 0.6em;
  }
}

small, .text-muted {
  color: @text-color-light;
}

a {
  color: @brand-action;
  &:hover {
    color: darken(@brand-action, 10%);
    text-decoration: none;
  }
  &.active {
    color: darken(@brand-action, 10%);
  }
}


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

.btn-styles(@btn-color: #555) {
  border-radius: @border-radius-base;
  background-color: @btn-color;
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
  border-width: 1px;
  transition: background-color 0.2s, color 0.2s, width 0.2s, border-width 0.2s, border-color 0.2s;
}

.btn {
  font-weight: 300;
  outline: none;
  &,
  &:active,
  &.active {
    &:focus {
      outline: none;
    }
  }
  &:hover,
  &:focus {
    outline: none;
  }
  &:active,
  &.active {
    outline: none;
    .box-shadow(~"inset 0 0 0 rgba(0,0,0,.075)");
  }
}

button {
  &.btn {
    font-weight: 300;
  }
}

.btn-default {
  .btn-styles(@btn-default-bg);
  border-color: @btn-default-border;
  border-width: 1px;
  &:hover,
  &:focus  {
    background-color: @btn-default-bg;
    border-color: darken(@btn-default-border, 40%);
    color: darken(@btn-default-color, 40%);
  }
  &:active,
  &.active {
    background-color: @btn-default-bg;
    border-color: darken(@btn-default-border, 40%);
    color: darken(@btn-default-color, 40%);
  }
}

.btn-action {
  .btn-styles(@btn-action-bg);
  color: @btn-action-color;
  border-color: @btn-action-border;
  &:hover,
  &:focus  {
    border-color: darken(@btn-action-border, 10%);
    color: darken(@btn-action-color, 10%);
  }
  &:active {
    border-color: darken(@btn-action-border, 10%);
    color: darken(@btn-action-color, 10%);
  }
  &.active {
    background-color: @btn-action-color;
    color: white;
  }
}

.btn-positive {
  .btn-styles(@btn-positive-bg);
  color: @btn-positive-color;
  border-color: @btn-positive-border;
  &:hover,
  &:focus  {
    border-color: darken(@btn-positive-border, 10%);
    color: darken(@btn-positive-color, 10%);
  }
  &:active,
  &.active {
    border-color: darken(@btn-positive-border, 10%);
    color: darken(@btn-positive-color, 10%);
  }
}

.btn-negative {
  .btn-styles(@btn-negative-bg);
  color: @btn-negative-color;
  border-color: @btn-negative-border;
  &:hover,
  &:focus  {
    border-color: darken(@btn-negative-border, 10%);
    color: darken(@btn-negative-color, 10%);
  }
  &:active,
  &.active {
    border-color: darken(@btn-negative-border, 10%);
    color: darken(@btn-negative-color, 10%);
  }
}

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

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: @brand-action;
  outline: none;
  .box-shadow(~"inset 0 0 1px rgba(0,0,0,.075), 0 0 0 @{brand-action}");
}

.has-error {
  .form-control:focus {
    .box-shadow(~"inset 0 0 1px rgba(0,0,0,.075), 0 0 0 @{brand-negative}");
  }
}

.has-success {
  .form-control:focus {
    .box-shadow(~"inset 0 0 1px rgba(0,0,0,.075), 0 0 0 @{brand-positive}");
  }
}

.help-block {
  font-size: 12px;
}

//
// Modal
// --------------------------------------------------

.modal-header {
  padding: 8px;
  border-top-left-radius: @border-radius-base;
  border-top-right-radius:@border-radius-base;
  border-bottom: 1px solid @text-color-lightest;
  color: @text-color-light;
  text-align: center;
  h5 {
    font-size: 13px;
    font-weight: 300;
  }
  .close {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 18px;
    color: @text-color-lighter;
    opacity: 1;
    &:focus {
      outline: 0;
    }
  }
}

.modal-body {
  background-color: white;
}

.modal-footer {
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
  border-top: 1px solid @text-color-lightest;
}

//
// Misc
// --------------------------------------------------

::selection {
  color: white;
  background-color: @selection-color;
}

::-moz-selection {
  color: white;
  background-color: @selection-color;
}