/*
 * Plugin Name: Flowt for WordPress
 * Plugin URI: http://www.github.com/magicink/flowt
 * Author: Brandon Tom
 * Author URI: http://www.brandontom.com
 */
 
/* Color Palette */
$holywater: rgb(205,218,236);
$richardo: rgb(194,212,236);
$eggplant: rgb(95,95,95);
$dryblood: rgb(48,33,30);
$lightsilver: rgb(242,242,242);
$khakis: rgb(234,234,234);

$pop-color: $holywater;
$shadow-color: $eggplant;
$average-color: $lightsilver;
$highlight-color: $richardo;
$contrast-color: $khakis;
$font-color: $dryblood;

/* The Importer */
.presentation-importer {
  form {
    display: inline-block;
  }
}
.importer-feedback {
  .ft-section {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
  }
  
  .ft-section {
    border: none;
    margin: 0;
    padding: 1rem 0;
    width: 100%;
    
    &:hover, &:focus {
      border: none;
    }
  }
  
  .ft-page {
    display: inline-block;
    margin-bottom: 1rem;
    margin-right: 1rem;
    max-height: 15rem;
    max-width: 40%;
    min-height: 15rem;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.5s ease 0s;
    vertical-align: top;
    
    .import-options {
      background-color: $average-color;
      border-radius: 0.25rem;
      display: inline-block;
      padding: 0.5rem;
      
      &:before {
        content: 'Import: ';
      }
    }
    
    ul, ol {
      padding: 0;
      
      list {
      }
    }
    
    h1,
    h2 {
      font-weight: 300 !important;
    }
    
    img {
      height: auto;
      max-width: 100%;
    }
    
    table {
      margin: 1rem auto;
      max-width:100%;
      width: 100%;
    }
    th {
      font-weight: bold;
    }
  }
}

/* Outliner */

.flowtime {
  transition: all 0.5s ease;
}
 
.page-title-field,
.section-title-field {
  background-color: rgba($highlight-color, 0.75);
  border: 0 none;
  color: $font-color;
  display: block;
  font-size: large;
  font-weight: thin;
  margin-bottom: 1rem;
  text-align: center;
  transition: background-color 0.5s ease;
  width: 100%;
  
  &:hover {
    background-color: $pop-color;
  }
}

.importer-controls,
.flowt-outliner-controls {
  background-color: rgba($highlight-color, 0.5);
  border-bottom: thin dotted $shadow-color;
  margin-bottom: 0;
  padding: 1rem;
  text-align:center;
}
 
.flowt-outliner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.flowt-outline {
  background-color: $contrast-color;
  overflow-x: scroll;
  padding: 2rem;
}

.ft-section {
  background-color: $average-color;
  border: rgba($shadow-color, 0.5) thin solid;
  border-radius: 0.25rem;
  display: inline-block;
  margin-right: 0.5rem;
  padding: 1rem;
  text-align: center;
  transition: all 1s ease;
  vertical-align: top;
  
  &:hover, &:focus {
    background-color: rgba($highlight-color, 0.35);
    border: rgba($shadow-color, 0.75) thin solid;
  }
}

.ft-page {
  background-color: rgba($highlight-color, 0.55);
  border-radius: 0.25rem;
  margin: 0.5rem auto;
  padding: 0.5rem;
  transition: all 0.5s ease;
  width: 80%;
  
  &:hover, &:focus {
    background-color: rgba($highlight-color,0.95);
  }
}

.flowtime {
  white-space:nowrap;
}

@media only screen and (max-width: 480px) {
  .flowt-outline {
    
  }
  
  .flowtime {
    text-align: center;
    white-space: normal;
  }
  
  .ft-section {
    display: block;
    margin-bottom: 1rem;
    margin-right: none;
    padding: 0.5rem;
    width: 100% !important;
  }
}