/*
 * Penguin Daytime Theme
 *
 * @author: Dorian Pula (dorian.pula@amber-penguin-software.ca)
 * @company: Amber Penguin Software
 * @note: A soothing light grey and blue CSS theme.
 * @version: 0.5.0
 * @license: AGPL v3
 */
@import (less) "penguin-common-theme.less";

/*** Colours. ***/
@daytime-body-background-colour: #d0d0d0;
@daytime-element-background-colour: #ffffff;

@daytime-header-title-colour: #2b2a2b;
@daytime-header-background-colour: #777777;
@daytime-subheader-title-colour: #5b5b5b;

@daytime-link-highlight-colour: #46a0ff;
@daytime-link-highlight-colour-text: #ffffff;
@daytime-link-text-colour: #0075b4;

@daytime-footer-text-colour: #787878;

/**
  Build out themes based on these ideas:
  - http://stackoverflow.com/questions/15366576/less-condition-based-on-css-class-to-set-a-less-variable
  - http://stackoverflow.com/questions/15275829/less-css-change-variable-value-for-theme-colors-depending-on-body-class/
  15279979#15279979
**/
@daytime-theme-name: .daytime;

/*** General containers ***/
body@{daytime-theme-name} .sea-header {
  background-color: @daytime-header-background-colour;
}

body@{daytime-theme-name} .ice-floe,
body@{daytime-theme-name} .ice-menu {
  background-color: @daytime-element-background-colour;
}

body@{daytime-theme-name} .navigation-bar {
  background-color: @daytime-element-background-colour;
}s

/*** General elements ***/
body@{daytime-theme-name} {
  background-color: @daytime-body-background-colour;
}

/*** Footer ***/
body@{daytime-theme-name} footer {
  color: @daytime-footer-text-colour;
}

/*** Article elements. ***/
body@{daytime-theme-name} h1 {
  color: @daytime-header-title-colour;
}

body@{daytime-theme-name} h2 {
  color: @daytime-subheader-title-colour;
}

/*** Navigation ***/
body@{daytime-theme-name} a,
body@{daytime-theme-name} .hoverable {
  color: @daytime-link-text-colour;
  .small_bordered;
}

body@{daytime-theme-name} a:hover,
body@{daytime-theme-name} .hoverable:hover {
  background-color: @daytime-link-highlight-colour;
  color: @daytime-link-highlight-colour-text;
  .small_bordered;
}

// Hacks to resolve colour scheme issues in Bootstrap.
body@{daytime-theme-name} .nav-pills > .active > a,
body@{daytime-theme-name} .nav-pills > .active > a:hover,
body@{daytime-theme-name} .nav-pills > .active > a:focus {
  background-color: @daytime-link-highlight-colour;
  color: @daytime-link-highlight-colour-text;
}

body@{daytime-theme-name} .nav > li > a:hover,
body@{daytime-theme-name} .nav > li > a:focus {
  text-decoration: none;
  background-color: @daytime-link-highlight-colour;
  color: @daytime-link-highlight-colour-text;
}
