//
// @file
//
// CSS declarations for all parts of a WordPress site in which the All-in-One
// Calendar plugin is active. Mostly the bare minimum required for proper
// styling of widgets.
//

// ======================
// = Variables & mixins =
// ======================
// Based on Bootstrap. Modify variables.less for custom colors, font-sizes, etc.
@import "variables.less";
@import "mixins.less";
@import "mixins-custom.less";

// ================
// = Custom fonts =
// ================
@import "font-awesome.less";

// ========================
// = Bootstrap components =
// ========================
// We prefix these with .thenly so that non-calendar parts of site remain
// unaffected by Bootstrap.
.thenly {
  // CSS Reset
  @import "reset.less";

  // Page structure & base CSS.
  @import "scaffolding.less";
  @import "type.less";

  // Components.
  @import "dropdowns.less";
  @import "buttons.less";
  @import "button-groups.less";

  // Utility classes.
  @import "utilities.less";

  // =========================
  // = Bootstrap adjustments =
  // =========================

  // Copied from scaffolding body reset; needed to apply to .thenly, not body.
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;

  // Tweaks to info-styled buttons.
  .btn-info,
  .btn-info:hover,
  .btn-info:active,
  .btn-info.active,
  .btn-info.active:hover {
    color: @textColor;
    text-shadow: 0 1px 1px rgba(255,255,255,.75);
  }

  // Align mini toolbar buttons properly.
  .btn-toolbar .btn.btn-mini {
    top: 5px;
  }

  // Reset some elements that are aggressively styled by poorly written themes.
  ul.dropdown-menu li {
    list-style-type: none !important;
  }
  small {
    margin: 0 !important;
  }
  tr {
    background: none !important;
  }
}

// Tooltip styling needs to be outside of .thenly since tooltips are created
// dynamically in the document root (which is not within the .thenly container).
@import "tooltip.less";

// ==============================
// = AI1EC General declarations =
// ==============================

// General AJAX.
.ai1ec-loading {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/ajax-loader.gif) no-repeat center center;
  display: none;
}

// Label styling.
.ai1ec-label {
  padding: 0 0.2em;
  font-size: 9pt;
  font-weight: bold;
  color: @labelColor !important;
}

// ==============
// = Categories =
// ==============
.ai1ec-category {
  cursor: pointer;
  font-size: 0.9em;
  border: 1px solid @categoryBorder;
  text-shadow: 0 1px 0 @textEmboss;
  padding: 2pt 3pt !important;
  margin: 0.2em !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 1pt;
  white-space: nowrap;
  color: mix(@textColor, @categoryBackground, 60%) !important;
  background: @categoryBackground;
  border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  &:hover {
    color: @textColor !important;
    background: @categoryBackgroundHover;
  }
  &.ai1ec-selected {
    background: @categoryActiveBackground;
    border-color: @categoryActiveBorder;
    color: mix(@textColor, @categoryActiveBackground, 60%) !important;
    &:hover {
      background: @categoryActiveBackgroundHover;
      color: @textColor !important;
    }
  }
}

// Category colors.
.ai1ec-category-color {
  .border-radius(0.2em);
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 2px rgba(0,0,0,0.5)");
  display: inline-block;
  height: 0.9em;
  margin: 0 1px;
  width: 0.9em;
}

// ========
// = Tags =
// ========
.ai1ec-tag {
  color: @linkColor !important;
  line-height: 1.3em;
  cursor: pointer;
  white-space: nowrap;
  margin: 0.1em 0.2em;
  padding: 0.1em 0.2em;
  .border-radius(0.3em);
  display: inline-block;
  &:hover {
    color: @linkColorHover !important;
    text-decoration: none;
  }
  &.ai1ec-selected {
    background: @tagActiveBackground;
  }
}

// =====================
// = Subscribe buttons =
// =====================
.ai1ec-subscribe-google img {
  background: none !important;
  border: none !important;
  float: left;
  height: 32px !important;
  margin: -8px 0.5em -10px 0 !important;
  padding: 0 !important;
  width: 30px !important;
}

// ======================
// = Agenda widget view =
// ======================
.ai1ec-agenda-widget-view {
  font-size: 0.8em !important;
  overflow: hidden;
  div {
    margin: 0;
  }
  .ai1ec-no-results {
    font-style: italic;
    font-size: 1.4em !important;
  }
  > ol {
    margin: 0 !important;
    padding: 0 !important;
  }
  li {
    list-style: none !important;
    border: none !important;
  }
  .ai1ec-date-events {
    overflow: hidden;
    margin: 0 0.5em 0 0 !important;
    padding: 0 !important;
  }
  .ai1ec-date {
    border-top: 1px solid darken(@agendaDateBackground, 5%) !important;
    #gradient > .vertical-three-colors-replace(@agendaDateBackground, @agendaDateBackground, 1em, fade(@agendaDateBackground, 0%));
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important;
  }
  .ai1ec-date.ai1ec-today {
    border-top: 1px solid darken(@agendaTodayBackground, 5%) !important;
    #gradient > .vertical-three-colors-replace(@agendaTodayBackground, @agendaTodayBackground, 1em, fade(@agendaTodayBackground, 0%));
  }
  h3.ai1ec-date-title {
    border: 2px solid @agendaDateTitleBorder;
    .border-radius(0 0 0.5em 0.5em);
    .box-shadow(0 2px 2px rgba(0,0,0,0.08));
    color: mix(@textColor, @agendaDateTitleBackground, 85%);
    float: left;
    font-size: 1em;
    font-weight: normal;
    #gradient > .vertical-three-colors(@agendaDateTitleBackground, @agendaDateTitleBackground, 1em, darken(@agendaDateTitleBackground, 12%));
    line-height: 1.1em;
    margin: 0 0.5em 0.5em !important;
    padding: 0 !important;
    text-align: center;
    text-shadow: 0 1px 0 @textEmboss;
    width: 3.5em;
  }
  .ai1ec-month {
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background: @agendaDateTitleBorder;
    font-size: 0.9em !important;
    padding: 0.1em 0 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: @agendaDateTitleMonthText;
  }
  .ai1ec-day {
    font-size: 1.7em !important;
    padding: 0.3em 0 0.2em !important;
  }
  .ai1ec-weekday {
    font-size: 0.9em !important;
    line-height: 1.5em;
  }
  .ai1ec-year {
    color: @agendaDateTitleMonthText;
    background: @agendaDateTitleBorder;
    font-size: 0.8em !important;
    letter-spacing: 0.15em;
    padding: 0 0.1em;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  }

  // Agenda widget view events.
  .ai1ec-event {
    clear: right;
    font-size: 1.2em;
    line-height: 1.3em;
    margin: 0.5em 0 !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    a {
      color: @eventDefaultColor;
      display: block;
      background: @eventBackground;
      border: 1px solid @eventBorder;
      .border-radius(0.4em);
      padding: 0.2em 0.4em !important;
      text-decoration: none !important;
      &:hover {
        border-color: @eventBorderHover;
        color: @eventDefaultColorHover;
        text-decoration: none !important;
      }
    }
    .ai1ec-event-time {
      font-weight: bold;
    }
    .ai1ec-event-title {
      font-weight: normal;
    }
    &.ai1ec-allday a {
      background: @eventDefaultColor;
      border: 1px solid transparent;
      color: @eventStubAllDayText;
      &:hover {
        background: @eventDefaultColorHover;
      }
      .ai1ec-event-time {
        color: @eventStubAllDayText;
      }
    }
    .ai1ec-category-colors {
      font-size: 0.9em;
      .ai1ec-category-color {
        margin: 0 0 -0.1em;
        padding: 1px;
      }
    }
  }
  // Widget view buttons.
  .ai1ec-subscribe-google img {
    width: 19px !important;
    height: 20px !important;
    margin: -5px 0.5em -5px 0 !important;
  }
}
