apostrophe/public/css/user.less

Apostrophe is a user-friendly content management system. You'll need more than this core module. See apostrophenow.org to get started.

/*
 * Edit button shown on placeholder that reopens the widget
 */
.apos-widget-buttons {
  display: block;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  // margin-top: -10px;
  // margin-left: -10px;
  // margin-left: 20px;
  // margin-top: 20px;
  // cursor: pointer;
}

.apos-widget-button {
  z-index: 2;
  background-color: @apos-base;
  color: white;
  padding: 4px;
  // margin-top: 4px;
  // margin-right: 4px;
  font-size: 12px;
  font-style: italic;
  font-weight: normal;
  float: left;

  cursor: pointer;


  &.apos-float-widget-right,
  &.apos-float-widget-left
  {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    margin-top: -14px;
    left: 0px;

  }

  &.apos-float-widget-right
  {
    right: 0;
    left: auto;
  }

}

.ui-resizable-handle
{
  &.ui-resizable-e,
  &.ui-resizable-s
  {
    width: 0px;
    height: 0px;
  }

  &.ui-resizable-se
  {
    // position: relative;
    font-size: 12px;
    background: @apos-base;
    width: auto;
    text-align: center;
    padding: 7px;
    height: 18px;
    z-index: 9999;
    right: 0px;
    bottom: 7px;
    text-indent: 0;
    height: auto;

    &:before
    {
      content: '\f0b2';
      font-family: 'apos-icons';
      display: inline-block;
      text-decoration: inherit;
      margin-right: 0.2em;
      text-align: center;
      color: #fff;
    }
  }
}

.apos-area-form-footer
{
  clear: both;
  .clearfix;
  min-width: 153px;

  .apos-control
  {
    float:right;
    &:first-child
    {
      margin-right:0px;
    }
  }
}


/* apos buttons for areas */
.apos-area,
.apos-singleton
{
  position: relative;
}

.apos-area-controls
{
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 898;
}

.apos-toolbar
{
  // float: right;
  // position: absolute;
  // width: 9999px;
  // max-width: 200%;
  display: block;
  // margin-top: -26px;
  height: 100%;
  background-color: @apos-base;
}

.apos-toolbar .apos-menu-label
{
  float: left;
}

.apos-toolbar .apos-menu-select
{
  margin: 0 10px;
  float: left;
  -moz-appearance: none;
   appearance: none;
   text-indent: 0.01px;
   text-overflow: '';
}

.apos-toolbar .apos-bold-button
{
  font-weight: bold;
}

.apos-toolbar .apos-italic-button
{
  font-style: italic;
}

.apos-toolbar a:visited
{
  color: #333;
}

.apos-toolbar a.apos-code
{
  vertical-align: top;
  font-size: 16px;
  margin-top: -2px;
  font-weight: bold;
}

.apos-toolbar
{
  i
  {
    font-size:1.1em;
    font-weight: normal;
    letter-spacing: 1px;
    display: inline-block;
  }
  .apos-button
  {
    font-size:0.85em !important;
    font-weight: normal !important;
    letter-spacing: 1px !important;
    line-height: 1em !important;
    text-decoration: none !important;
  }
  .apos-button,
  .apos-menu-style select
  {
    padding: 7px !important;
  }
  .apos-menu-style
  {
    padding: 0px;

  }

  select
  {
    // font-family: 'montserratregular' !important;
    // Chrome PC doesn't like webfonts in select menus
    font-size: 0.9em !important;
    letter-spacing: 1px;
  }
  /* This hides the label for heading/type style */
  .apos-menu-style .apos-menu-label{ display: none; }


}

.apos-editor
{
  min-height: 400px;
}

.apos-editor .apos-editable
{
  .clearfix;
  min-height: 400px;
  max-height: 400px;
  overflow: scroll;
  background-color: #FFF;
  border: 1px solid rgb(221, 221, 221);
  padding: 10px;
  line-height: 1.5em;
  &:focus{outline:none;}
  // Make sure the first image is visible in the slideshow's in-editor preview
  .apos-slideshow-image
  {
    opacity: 1.0;
  }
  a
  {
    text-decoration: underline !important;
    color: blue;
  }
  table th
  {
    margin: 4px;
    a {
      text-decoration: none !important;
      font-size: 150%;
    }
  }
  table td
  {

    padding: 2px;
    margin: 2px;
  }
  table tr
  {
    border-top: 1px solid #eee;
  }

  table .apos-table-button a
  {
    display: block;
    color: white;
    background-color: @apos-base;
    // border-radius: 6px;
    // border: 1px solid #def;
    width: 1em;
    text-align: center;
    margin: 6px;
    font-weight: bold;
    font-size:19px;
    &:hover
    {
      cursor: pointer;
      color: #FFF;
      background-color: darken(@apos-base, 20%);
    }
  }
  .apos-portrait,
  .apos-square,
  .apos-landscape
  {
    .apos-slideshow-items{height: auto;}
  }
  // Without these rules, you cannot un-bold or un-italic anything
  // inside the content editor in Chrome! So don't remove or override 'em!
  strong, b
  {
    font-weight: bold !important;
  }
  em, i
  {
    font-style: italic !important;
  }
}

/* Don't know why bootstrap puts a 4 pixel margin here and hoses
  inline radio boxes, but it's not what I want */
.apos-widget-editor input[type="radio"]
{
  margin-top: 0px;
}

.apos-widget-editor .apos-requires-preview
{
  display: none;
}

.apos-widget-editor .apos-embed
{
  width: 85%;
  // height: 20px;
  padding: 10px;
  margin: 20px 0;
  // width: 100%;
}

.apos-widget-editor .apos-limit-indicator
{
  display: inline-block;
  color: #FFF;
  padding: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: @apos-base;
  margin-top: 10px;
  font-size: 11px;
  font-family: 'Lucida Grande';

}

.apos-widget-editor .apos-preview-button
{
  margin-left: -3px;
  width: 14%;
  color: #FFF;
  padding: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: @apos-base;
  &:hover
  {
    background: darken(@apos-base, 10%);
    cursor: pointer;
  }
}

.apos-widget-preview-container
{
  margin: auto;
  margin-top: 10px;
  width: 100%;
  // border: 1px solid #ccc;
  // height: 210px;
  overflow: scroll;
  padding: 25px;
  background-color: @apos-grey60;
}

.apos-widget-preview-container .apos-widget
{
  font-size: 50%;
}

.apos-widget-preview-container .apos-one-third
{
  width: 136px;
}

.apos-widget-preview-container .apos-one-half
{
  width: 204px;
}

.apos-widget-preview-container .apos-two-thirds
{
  width: 272px;
}

.apos-widget-preview-container .apos-full
{
  width: 408px;
}

.apos-lorem
{
  text-align: left;
  font-size: 80%;
}

.apos-editor .apos-pull-quote
{
  border: 1px dashed #ccc;
}

.apos-spinner
{
  margin-top: -1px;
  margin-left: 10px;
  display: none;
}

.apos-file-iframe {
  display: block;
  border: none;
  width: 350px;
  height: 100px;
  padding-top: 10px;
}

// Hiding these for now to see how we manage without them:
.apos-insert-before-widget,
.apos-insert-after-widget
{
  display: none;
  visibility: hidden;
}

/* TODO fix unprefixed name */
.previewing
{
  .apos-area,
  .apos-singleton
  {
    .apos-control,
    .apos-ui-container
    {
      opacity: 0;
    }
  }

  .apos-area:hover,
  .apos-singleton:hover
  {
    .apos-control,
    .apos-ui-container
    {
      opacity: 1;
    }
  }
}


// Apostrophe Slideshow Modal
.apos-file-styled-container
{
  position: relative;
  width: 170px;
  height: 170px;
  display: inline-block;
  margin-left: 5px;

  &.apos-library-drag-enabled .apos-file-styled
  {
    border: 5px dashed #fff;
    background-color: darken(@apos-base, 10%);
    color: darken(@apos-base, 10%);
    cursor: pointer;
    opacity: 0.7;
  }
}

.apos-tag-list
{
  font-family: cabin !important;
  margin-top: 10px;

 li
 {
  margin-right: 8px;
 }
 .apos-tag-remove
 {
   color: white;
 }
}
.apos-slideshow-user-options
{
  padding: 10px;
  background-color: #eee;
  .apos-fieldset
  {
    float: left;
    width: 30%;
    margin-right: 2%;
  }
}
.apos-orientation-select-container
{
  display: none;
  padding: 10px;
  background-color: #eee;
  text-align: center;

  .apos-instructions{background-color: transparent;}
  .apos-button
  {
    display: inline-block;
    margin: 10px 5px;
    background-color: #ddd;
    padding: 10px;
    -webkit-border-radius: 6px;
            border-radius: 6px;
    position: relative;
    .transition();
    &.active
    {
      background-color: @apos-grey10;
      &:after
      {
        border-color: #ECECEC;
      }
    }
    &:after
    {
      content:" ";
      border-color: #333;
      display: block;
      -webkit-border-radius: 4px;
              border-radius: 4px;
      border: 4px solid @apos-grey30;
    }
    &.apos-landscape:after
    {
      width: 25px;
      height: 14px;
    }
    &.apos-portrait:after
    {
      width: 14px;
      height: 25px;
    }
    &.apos-square:after
    {
      width: 20px;
      height: 20px;
    }
  }
}
.apos-select-orientation .apos-orientation-select-container {display: block;}
.apos-progress-container
{
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.apos-video-editor
{
  .apos-progress-container
  {
    bottom: 40%;
    z-index: 10;
    left: 50%;
    margin-left: -32px;
  }

  .apos-widget-preview-container
  {
    min-height: 370px;
    display: block !important;
    position: relative;
    z-index: 1;
    // .icon-video;
    &:after
    {
      content: '🎬';
      font-family: 'apos-icons';
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: 0.2em;
      text-align: center;
      color: #fff;
      top: 50%;
      left: 50%;
      position: absolute;
      font-size:90px;
      margin-left: -45px;
      margin-top: -45px;

    }
  }
  .apos-video
  {
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
}

.apos-widget-preview-container
{
  // padding: ;
}

.apos-media-file-in,
.apos-slideshow-file-in
{
  .apos-media-file-in-message,
  .apos-slideshow-file-in-message

  {
    display: block;
  }
}
.apos-media-file-in-message,
.apos-slideshow-file-in-message
{
  display:none;
  opacity: 0.2;
  z-index: 20;
  color: #FFF;
  text-align: center;
  background-color: @apos-base;
  .transition();
  height: 100%;
  width: 100%;
  top: 0;
  font-size: 2.5em;
  right: 0;
  position: absolute;

  // border: 7px dashed darken(@apos-base, 20%);
  span
  {
    position: absolute;
    height: 56px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 40%;
    display: block;
    line-height: 1.1em;
    margin: auto;
  }
}

.apos-upload-disabled
{
  .apos-file-styled{opacity: 0.5 !important;}
  .apos-file-styled:hover,
  .apos-file-styled-container .apos-file-input:hover
  {
    cursor: auto;
  }
  .apos-file-styled
  {
    &:after
    {
      content: "Oops! This slideshow is full.";
      width: 75%;
      text-align: center;
      color: #B8B8B8;
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
      margin: auto;
      font-weight: 700;
    }
  }
  .apos-media-file-in-message,
  .apos-slideshow-file-in-message
  {
    background-color: fade(@apos-grey10, 95%);
    border: 7px dashed black;
    span
    {
      height: 100px;
      width: 40%;
    }
  }
  .apos-file-styled-container
  {
    .apos-file-styled
    {
      background-color: @apos-grey70;
    }
  }
  .apos-file-styled { opacity: 0.8; }
}

.apos-limit-reached
{
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.apos-slideshow-drag-container
{
  padding: 17px 10px 30px 10px;
  position: relative;
  .clearfix;
  // border: 2px dashed darken(@apos-base, 20%);
  // background-color: @apos-grey60;
  background: lighten(@apos-grey60, 20%);
  border-radius: 8px;
  border: 3px dashed #F5D1CE;
  margin-top: 20px;

  // &.apos-upload-disabled:hover {background-color: red;}

  &:hover
  {
    .apos-file-styled { opacity: 0.8; }
  }

  .apos-file-input
  {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 170px;
    width: 170px;
    // filter:alpha(opacity: 0);
    opacity: 0;
    &:hover
    {
      cursor: pointer;
      background-color: darken(@apos-base, 10%);
    }
  }
  .apos-file-styled
  {
    color: @apos-base;
    background-color: @apos-base;
    opacity: 0.5;
    height: 170px;
    width: 170px;
    position: relative;
    display: inline-block;
    &:hover
    {
      background-color: darken(@apos-base, 10%);
      color: darken(@apos-base, 10%);
      cursor: pointer;
      opacity: 0.7;

    }

    &:before
    {
      color: #FFF;
      visibility: visible;
      width: 100%;
      font-size: 2em;
      text-align: center;
      margin: 0;
      top: 43%;
      position: absolute;
      left: 0;
    }
  }
  &.apos-upload-disabled
  {
    // background-color: fade(red, 20%);
    .apos-slideshow-file-in-message
    {
      // background-color: red;
      &:hover{cursor: wait; }
    }
  }

}


.apos-slideshow-editor
{
  max-width: 450px;
  // padding: 15px;
  .apos-ui-modal-body
  {
    padding: 25px !important;
  }
}
.apos-slideshow-editor .apos-slideshow-editor-item
{
  list-style: none;
  float: left;
  display: block;
  width: 170px;
  // height: 170px;
  margin: 0 8px 15px;
  background-color: #eee;
  cursor: move;
  &.apos-template
  {
    display: none;
  }

  &.apos-slideshow-reveal-extra-fields
  {
    background:#eee;
    .apos-slideshow-extra-fields { display: block; width: 250px; }
  }

// .disable-extra-field-title {}
// .disable-extra-field-credit
// .disable-extra-field-linkTitle
// .disable-extra-field-description
// .disable-extra-field-link
  // &.apos-slideshow-reveal-crop
  // {
  //   background:#eee;
  //   .apos-slideshow-crop{display: block;}
  // }

  .apos-slideshow-editor-item-box
  {
    position: relative;
    overflow: hidden;
    width: 170px;
    height: 170px;
    background-size: contain;
    background-position: center;
    background-color: @apos-grey40;;
    background-repeat: no-repeat;

    &.apos-not-image:before
    {
      font-family: 'apos-icons';
      content: '\f0c5';
      position: absolute;
      top: 25%;
      left: 38%;
      font-size: 3em;
    }
    &.apos-not-image
    {
      &:after
      {
        position: absolute;
        top: 40%;
        left: 38%;
        font-size: 1em;
      }

      span
      {
        position: absolute;
        top: 56%;
        width: 100%;
        text-align: center;
      }
      .apos-crop{display: none;}
    }
    .apos-slideshow-controls
    {
      position: absolute;
      top: -1px;
      right: 0;
    }

  }
  .apos-slideshow-editor-image { opacity: 0; }

  .apos-slideshow-control
  {
    // position: absolute;
    float: right;
    background-color: @apos-base;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: white;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.4em;
    &:hover
    {
      background-color: darken(@apos-base, 10%);
      text-decoration: none;

      &:before { background-color: darken(@apos-base, 10%) }
    }

    &:before
    {
      font-family: 'apos-icons';
      background: @apos-base;
      font-size:1em;
      padding: 5px;
      font-size: 0.9em;
    }
  }
  .apos-remove
  {
    // right: 0;
    // top: 0;
  }
  .apos-edit,
  .apos-crop,
  .apos-remove,
  .apos-info
  {
    // display: none;
    // right: 24px;
    // top: 0;
    visibility: visible;
    font-size: 1em;
    padding: 4px 2px;
    &:before
    {

    }

    i:before
    {
      transform: scale(0.7);
    }
  }
    // .apos-remove:before {content: '\2715'; }
    // .apos-edit:before { content:'\1f527'; }
    // .apos-crop:before { content:'\e746'; }

  .apos-slideshow-editor-item-extension
  {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 40px;
    color: #aaa;
  }
  .apos-slideshow-editor-item-name
  {
    display: block;
    margin: 60px 4px 4px 4px;
    color: #444;
    word-wrap: break-word;
  }
}

.apos-slideshow-editor-item--highlighted
{
  background-color: #ddd;
}
.apos-slideshow-editor-item--info
{
  display: none;

  width: auto;
  height: auto;
  margin: 0 8px 15px;

  background-color: darken(@apos-grey-light, 3%);

  div[info-exit]
  {
    position: absolute;
    right: 0;
    padding: 8px 13px;
    margin: 11px 29px 0 0;

    background-color: @apos-grey10;
    color: white;
    border-radius: 3px;
    font-size: 10px;
  }
  div[info-exit]:hover
  {
    cursor: pointer;
  }

  .apos-show-pane-field
  {
    display: inline-block;
    width: 100%;
    padding: 15px;

    .apos-label
    {
      display: inline-block;
      float: left;
      width: 25%;
      line-height: 1.9em;
      text-transform: uppercase;

      font-family: 'montserratbold';
      font-size: 10px;
      color: @apos-grey20;
      text-align: left;
    }

    .apos-value
    {
      width: 75%;
      display: inline-block;
      font-family: cabin;
      color:@apos-grey20;
      text-align: left;
      font-size: 13px;
    }
  }
}
.apos-show-pane-field:nth-child(odd)
{
  background-color: @apos-grey55;
}

.apos-files-item
{
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  margin: 10px 0 10px 0;
  padding: 20px 10px;
  text-align: left;
  list-style: none !important;
  .apos-files-extension
  {
    position: relative;
    left: -21px !important;
    display: inline-block;
    top: 2px;
    left: 2px;
    font-size: 40px;
    color: #aaa;
    font-family: cabin !important;
    text-transform: uppercase;
    background-color: red;
    font-size: 10px !important;
    padding: 3px 5px;
    color: #FFF !important;
  }
  .icon-docs
  {

    &:before
    {
      font-size:3.5em;
      color: #333;
      visibility: visible;
    }
  }
  .apos-files-name
  {

    text-align: left;
    font-size: 150%;

    &:hover{ background-color: transparent;}
  }
}

.apos-slideshow-editor .apos-media-chooser, .apos-video-editor .apos-media-chooser, .apos-embed-editor .apos-media-chooser
{
  background-color: lighten(@apos-grey,90%);
  padding: 20px;
  position: relative;
  .apos-media-chooser-title{font-family:'montserratbold'; font-size: 11px;}

  .apos-media-chooser-add
    {
      padding: 5px 11px;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -16px;
      margin-top: -16px;
      opacity: 0;
      .transition();
      color: #FFF;
      font-weight: bold;
      background-color: @apos-base;
    }
    .apos-media-chooser-item:hover
    {
      cursor: pointer;
      .apos-media-chooser-add
      {
        opacity: 0.9;
      }
    }
    .apos-upload-disabled .apos-media-chooser-item:hover
    {
      cursor: auto;
      .apos-media-chooser-add
      {
        opacity: 0;
      }
    }
  .apos-library-pager,
  .apos-chooser-pager
  {
    position: absolute;
    top: 38%;
    padding: 15px 13px;
    background-color: darken(@apos-grey,90%);
    .transition();
    display: block;
    &:hover{background-color: darken(@apos-grey,70%);}
    &:after
    {
      top: 9px;
      position: absolute;
      content: ' ';
      width: 0px;
      height: 0px;
      border-style: solid;
    }

    &.inactive
    {
      background-color: lighten(@apos-grey,60%);
    }
  }
  .apos-next
  {
    right: 0;
    &:after
    {
      left: 11px;
      border-width: 6px 0 6px 9px;
      border-color: transparent transparent transparent #fff;
    }
  }
  .apos-previous
  {
    left: 0;
    &:after
    {
      left: 9px;
      border-width: 6px 8px 6px 0;
      border-color: transparent #fff transparent transparent;
    }
  }
  // .apos-previous, .apos-next
  // {
  //   font-size: 32px;
  // }
  // .apos-previous
  // {
  //   float: left;
  //   padding-right: 10px;
  // }
  // .apos-next
  // {
  //   float: right;
  //   padding-left: 10px;
  // }
  .apos-media-chooser-items
  {
    // Don't float me, it breaks jquery ui sortable connectWith and then we can't
    // drag from the library properly
    padding: 30px 15px 15px 23px;

  }
  .apos-media-chooser-item
  {
    float: left;
    width: 85px;
    height: 85px;
    margin-right:15px;
    margin-bottom: 15px;
    overflow: hidden;
    cursor: move !important;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    &:nth-child(7n+8){margin-right: 0;}
    .apos-media-chooser-item-box
    {
    }
    .apos-media-chooser-item-box img {
      opacity: 0;
    }
    // Plain old list of filenames
    &.apos-not-image {
      font-size: 12px;
      height: auto;
      direction: rtl;
      white-space: nowrap;
      cursor: pointer;
      width: 170px;
      padding: 2px;
      text-align: right;
      overflow: hidden;
      margin-left: 4px;
      margin-right: 4px;
      margin-bottom: 4px;
      background-color: white;
      border: 1px solid #def;
      .apos-media-chooser-item-box img {
        display: none;
      }
    }
  }
  .apos-media-chooser-search
  {
    // clear: left;
    position: absolute;
    top: 0;
    right: 43px;
    padding: 14px 0 5px 20px;
    // margin-top: 10px;

    .apos-library-search-label
    {
      clear: right;
      display: inline-block;
      padding: 8px 7px 7px;
      background-color: lighten(@apos-grey,30%);
      color: #FFF;

    }
    .apos-library-search
    {
      background-color: lighten(@apos-grey,60%);
      padding: 6px;
      margin-left: -2px;
    }
    .apos-search-submit
    {
      background-color: darken(@apos-grey,60%);
      color: #FFF;
      padding: 6px 10px;
    }
    .apos-remove-search
    {
      float: none;
      padding: 6px 7px;
    }
  }
}

.apos-embed-editor .iframe
{
  label {
    display: inline-block;
    width: 200px;
    margin-right: 20px;
  }
  margin-bottom: 20px;
}

.apos-editor .apos-files-item a {color: #000 !important;}

.apos-slideshow-editor .apos-slideshow-extra-fields-controls
{
  float: left;
    *{float:left;}
    input{margin-right:5px;}
}

.apos-slideshow-editor .apos-slideshow-extra-fields
{
  display: none;
  padding: 20px 10px 10px 10px;
  -webkit-box-shadow:  1px 1px 15px 1px rgba(0, 0, 0, 0.3);
  box-shadow:  1px 1px 15px 1px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  position: absolute;
  background:#eee;
  z-index: 100;
  &:before
  {
    position: absolute;
    width: 170px;
    height: 20px;
    content: " ";
    background:#eee;
    top: -20px;
    left: 0px;
  }
}
.apos-extra-fields-enabled .apos-edit
{
  display: block !important;
}

// Slideshow Cropping
// This is commented out because we're using a real apos-modal. If you would like a different
// style for this modal think about adding an additional class that tweaks apos-modal rather than
// reinventing modals. -Tom
//
// .apos-slideshow-crop
// {
//   position: absolute;
//   bottom:-57px;
//   display: inline-block;
//   z-index: 11;
//   padding: 20px 10px 10px 10px;
//   -webkit-box-shadow:  1px 1px 15px 1px rgba(0, 0, 0, 0.3);
//   box-shadow:  1px 1px 15px 1px rgba(0, 0, 0, 0.3);
//   background: #eee;
//   display: none;

// }

// End Apostrophe Slideshow Modals

.apos-progress
{
  display: none;
  font-size: 125%;
  border-radius: 6px;
  color: gray;
}

.apos-autocropping
{
  display: none;
  background-color: @apos-base;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  top: 7px;
  position: relative;
  right: -4px;
  font-size: 9px;
  letter-spacing: 1px;


}

.apos-manage-table
{
  * {.apos-cabin;}
  width: 100%;
  border-bottom: 1px solid @apos-grey70;

  td, th
  {
    border-right: 1px solid @apos-grey70;
    text-align: left;
    font-size:11px;
    letter-spacing: 1px;
    vertical-align:middle;
    &:last-child
    {
      border-right: none;
      padding-left: 10px;
    }
  }
  [data-sort]
  {
    cursor: pointer;
  }
  th
  {
    .apos-montserrat-bold;
    color: @apos-grey10;
    padding: 8px 0 8px 20px;
    text-transform: uppercase;
    font-size:10px;
    background-color: white;
    border-bottom: 1px solid @apos-grey70;
  }
  tr
  {
    background-color: #eee;

    &:nth-child(odd)
    {
      background-color: white;
    }

    &:hover
    {
      background-color: @apos-grey70;
    }
  }
  td span
  {
    padding: 15px 0 20px 15px;
    display: inline-block;
    color: @apos-grey20;
  }
  a
  {
    color: @apos-grey10;
    font-size: 12px;
  }

  // Events Tabls
  .apos-manage-events-date{width: 15%;}
  .apos-manage-events-title{width: 55%;}
  .apos-manage-events-author{width: 15%;}
  .apos-manage-events-status{width: 15%;}
}

.apos-tag-editor .apos-add-tag {
  padding: 10px 0 10px 0;
  input {
    display: inline-block;
    margin-right: 20px;
  }
}

/* Fixup for jquery ui so it doesn't fall behind the modal */
ul.ui-autocomplete {
    z-index: 999 !important;
}

.apos-message
{
  padding: 10px;
  margin: 30px 0;
  background-color: @apos-base;
  color: #fff;
  font-family: 'cabin';
  font-size: 15px;
  // text-transform: uppercase;
}

/* Apostrophe Progress spinner */
@outColor:transparent; @inColor:@apos-base;
  .apos-progress
  {
    // .apos-progress-container
    // {
      position:absolute;
      bottom: 0;
      width:65px;
      height:65px;
      -moz-transform:scale(0.6);
      -webkit-transform:scale(0.6);
      -ms-transform:scale(0.6);
      -o-transform:scale(0.6);
      transform:scale(0.6);
    // }

    .apos-progress-circle{
    position:absolute;
    background-color:transparent;
    height:12px;
    width:12px;
    -moz-border-radius:6px;
    -moz-animation-name:apos_progress_fade;
    -moz-animation-duration:0.88s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:6px;
    -webkit-animation-name:apos_progress_fade;
    -webkit-animation-duration:0.88s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:6px;
    -ms-animation-name:apos_progress_fade;
    -ms-animation-duration:0.88s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:6px;
    -o-animation-name:apos_progress_fade;
    -o-animation-duration:0.88s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:6px;
    animation-name:apos_progress_fade;
    animation-duration:0.88s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    }

    #apos-progress-01{
    left:0;
    top:27px;
    -moz-animation-delay:0.33s;
    -webkit-animation-delay:0.33s;
    -ms-animation-delay:0.33s;
    -o-animation-delay:0.33s;
    animation-delay:0.33s;
    }

    #apos-progress-02{
    left:8px;
    top:8px;
    -moz-animation-delay:0.44s;
    -webkit-animation-delay:0.44s;
    -ms-animation-delay:0.44s;
    -o-animation-delay:0.44s;
    animation-delay:0.44s;
    }

    #apos-progress-03{
    left:27px;
    top:0;
    -moz-animation-delay:0.55s;
    -webkit-animation-delay:0.55s;
    -ms-animation-delay:0.55s;
    -o-animation-delay:0.55s;
    animation-delay:0.55s;
    }

    #apos-progress-04{
    right:8px;
    top:8px;
    -moz-animation-delay:0.66s;
    -webkit-animation-delay:0.66s;
    -ms-animation-delay:0.66s;
    -o-animation-delay:0.66s;
    animation-delay:0.66s;
    }

    #apos-progress-05{
    right:0;
    top:27px;
    -moz-animation-delay:0.77s;
    -webkit-animation-delay:0.77s;
    -ms-animation-delay:0.77s;
    -o-animation-delay:0.77s;
    animation-delay:0.77s;
    }

    #apos-progress-06{
    right:8px;
    bottom:8px;
    -moz-animation-delay:0.88s;
    -webkit-animation-delay:0.88s;
    -ms-animation-delay:0.88s;
    -o-animation-delay:0.88s;
    animation-delay:0.88s;
    }

    #apos-progress-07{
    left:27px;
    bottom:0;
    -moz-animation-delay:0.99s;
    -webkit-animation-delay:0.99s;
    -ms-animation-delay:0.99s;
    -o-animation-delay:0.99s;
    animation-delay:0.99s;
    }

    #apos-progress-08{
    left:8px;
    bottom:8px;
    -moz-animation-delay:1.1s;
    -webkit-animation-delay:1.1s;
    -ms-animation-delay:1.1s;
    -o-animation-delay:1.1s;
    animation-delay:1.1s;
    }

    @-moz-keyframes apos_progress_fade{
    0%{
    background-color:@inColor}

    100%{
    background-color:@outColor}

    }

    @-webkit-keyframes apos_progress_fade{
    0%{
    background-color:@inColor}

    100%{
    background-color:@outColor}

    }

    @-ms-keyframes apos_progress_fade{
    0%{
    background-color:@inColor}

    100%{
    background-color:@outColor}

    }

    @-o-keyframes apos_progress_fade{
    0%{
    background-color:@inColor}

    100%{
    background-color:@outColor}

    }

    @keyframes apos_progress_fade{
    0%{
    background-color:@inColor}

    100%{
    background-color:@outColor}

    }
  }

/* Page settings */

.apos-view-permissions, .apos-edit-permissions
{
  padding-left: 20px;
  //display: none;
}

body .ui-tooltip
{
  padding: 10px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  font-family: 'cabin';
  // background-color: white !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 2px;
          border-radius: 2px;
  border: none;
  // position: relative;
  // opacity:0;
  // .transition(@property:opacity);
  &:after
  {
    content: " ";
    position: absolute;
    top: -5px;

    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 11px 7.5px;
    border-color: transparent transparent #000 transparent;
  }
}

.apos-modal-inner
{
  background-color: @apos-grey60;
}
/* File Annotator */

.apos-file-annotator.apos-ui-modal .apos-ui-modal-body
{
  .apos-fieldset-editor{padding: 0;}
  .apos-annotate-file
  {
    padding: 20px;

    border-bottom: 1px solid @apos-grey70;
    padding-bottom: 15px;
    margin-bottom: 15px;
    .clearfix;

    .apos-fieldset
    {
      margin-bottom: 10px;
    }
    label
    {
      // background-color: @apos-grey50;
      // color: @apos-grey10;
    }

    .apos-fieldset-description textarea
    {
      width: 100%;
      min-height: 78px;
      padding: 10px;
    }
  }
  .apos-annotator-preview,
  .apos-annotator-column
  {
    float: left;
    // width: 31%;
    margin-right: 3%;

  }
  .apos-annotator-preview
  {
    height: 175px;
    overflow: hidden;
    width: 24%;
    img
    {
      height: 120%;
      margin-top: -10%;
    }
  }
  .apos-annotator-column
  {
    width: 35%;
    &:last-child
    {
      margin-right: 0;
    }
  }
}

/* End File Annotator */

// .apos-button-back
// {
//   padding: 15px;
//   background-color: darken(@apos-base,10%);
//   margin: 0 15px 0 -15px;
//   &:before{padding-right: 5px;}
//   &:hover{background-color: darken(@apos-base,20%);}
// }

.apos-close-modal
{
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px;
  background-color: darken(@apos-base,10%);
  &:hover{background-color: darken(@apos-base,20%);}
}

.apos-generic-button
{
  background-color: @apos-grey60;
  padding: 12px 15px;
  display: inline-block;
  color: @apos-grey10;
  .apos-montserrat;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size:9px;
  &.active
  {
    background-color: lighten(@apos-grey60, 15%);
  }
  &:hover
  {
    background-color: lighten(@apos-grey60, 15%);
    cursor:pointer;
  }
}

.apos-view-grid{}

//* clean select styles */
.apos-select-wrapper
{
  display: inline-block;
  max-width: 385px;
  width: 100%;
  position: relative;
  margin-right: 20px;
  select
  {
    //With Lister, we don't need to show the selects.
    visibility: hidden;
    position: absolute !important;

     //background: #fff;
     margin: 0 0 0 10px;
     font-family: Helvetica, sans-serif;
     font-size: 10px;
     color: @apos-grey10;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-weight: bold;
     border: 0px solid transparent;
     border-radius: 0px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     text-indent: 0.01px;
     text-overflow: '';
     padding: 14px 40px 16px 10px;
     height: 30px;
     vertical-align: middle;
     &:hover{cursor: pointer;}
     &:focus
     {
      -moz-outline: none;
      outline:none;
     }
  }
  form
  {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  option
  {
    margin: 10px 0px 0px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0px solid transparent;
  }

  // The lister "selected" option
  .lister-selected-top, .selectize-control
  {
    font-family: 'cabin';
    display: inline-block;
    background: #fff;
    line-height: 14px;
    color: @apos-grey10;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 8px 80px 10px 11px;
    border: 1px solid @apos-grey60;
    text-transform: none;
    letter-spacing: 1px;
    color: #333;
    padding-left: 11px;
    display: inline-block;
    width: 100%;
    max-width: 385px;
    padding: 14px 8px 16px 14px;
    border: none;
    border: 1px solid #ddd;
    font-size: 14px;
  }
  // The lister options
  .apos-lister, .selectize-dropdown
  {
    font-family: 'cabin';
    position:absolute;
    display: none;
    z-index: 100;
    background-color: rgb(255, 255, 255);
    -webkit-border-radius: 2px;
            border-radius: 2px;
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
            box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    border: 1px solid @apos-grey50;
    width: 100%;
    max-height: 288px;
    overflow-y: scroll;

    li, .selectize-dropdown-content > div
    {
      display: block;
      text-transform: none;
      color: @apos-grey10;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'cabin';
      font-size: 12px;
      padding: 12px 10px;
      cursor: default;
      &:hover
      {
        background: @apos-base;
        color: white;
      }

    }

    &.lister-open
    {
      display: block;
    }
  }

  .apos-select-arrow
  {
    // display: inline-block;
    // cursor: pointer;
    // background-color: rgba(255,255,255,0.25);
    // border-radius: 2px;
    // -webkit-border-radius: 2px;
    // border: 1px solid #e4e4e4;
    // // -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.15);
    // box-shadow: 1px 1px 5px rgba(0,0,0,0.15);
    // z-index: 2;
    // padding: 8px;
    // // border-left: 1px solid yellow;
    // border: 0 1px 0 0 yellow, 5px solid blue;
    // position: absolute;
    // right: 0;
    // top: 0;
    // margin: 0;
    // padding: 13px;

    // &:before
    // {
    //   width: 0px;
    //   z-index: 3;
    //   pointer-events: none;
    //   position: absolute;
    //   text-align: center;
    //   margin-left: -3px;
    //   margin-top: -2px;
    //   content: "";
    //   height: 0px;
    //   border-style: solid;
    //   border-width: 4px 3px 0 3px;
    //   border-color: #ffffff transparent transparent transparent;
    // }

  }
}
/* Selective Styles */
.apos-fieldset-selective
{

  // Without this clear there are very weird bugs with sortable: true.
  // If you change this, please test thoroughly with sortable, making sure
  // the cursor, the item, and the drop position for the item stay lined up when
  // the list has at least eight items. You'll need to use a project that has
  // an array join in it to get a good test case with sortable. -Tom
  .apos-fieldset-selective-item
  {

    &.ui-sortable-placeholder
    {
      visibility: visible !important;
      opacity: 0.2;
      // background: green !important;
    }
  }
  .apos-fieldset-selective-item-inner
  {
    padding: 20px;
    width: 100%;
  }
  .apos-fieldset-selective-item-inner-bg
  {
    position:relative;
  }
  .apos-selective-label
  {
    text-align: left !important;
    padding-left: 20px !important;
  }
  .apos-remove
  {
    position: absolute;
    left: 13px;
    top: 50%;
    margin-top: -6px;
    color: white;
    z-index: 1;
    font-size: 12px;
  }



}

// Selectize Styles --------------------------------------------  //

.apos-fieldset-selectize > .apos-select-wrapper
{
  background: #fff;
  .selectize-control
  {
    // z-index: 1;

    background: transparent;
    padding: 0;

    .selectize-input
    {
      max-height: 50px;
      padding: 12px 60px 16px 12px;

      .item, input
      {
        position: relative;
        display: inline-block;

        height: 22px;
        top: 2px;
        left: 0;
        line-height: 22px;

        vertical-align: bottom;
      }
      .item
      {
        margin-right: 3px;
      }
      input[tabindex]
      {
        display: inline-block;
        border: none;
        box-shadow: none;

        padding: inherit;
        font-size: inherit;
        //height: 18px;
        padding: 0;
        top: 2px;
      }

      // Dropdown Button replacement
      &:before
      {
        content: ' ';
        position: absolute;
        top: 10px;
        right: 10px;
        display: block;
        width: 36px;
        height: 31px;
        background-color: @apos-base;
        border-radius: 3px;
      }
      &:after
      {
        content: ' ';
        position: absolute;
        top: 50%;
        right: 23px;
        display: block;
        width: 0;
        height: 0;
        margin-top: -1px;
        border-color: #fff transparent transparent transparent;
        border-style: solid;
        border-width: 5px 5px 0 5px;
      }
    }
    &:after
    {
      content: ' ';
      position: absolute;
      top: 0;
      right: 57px;
      height: 50px;
      width: 1px;
      background-color: @apos-grey60;
    }
    &:hover
    {
      cursor: pointer;
      .selectize-input:before
      {
        background-color: darken(@apos-base, 5%);
      }
    }

    .selectize-dropdown
    {
      left: 0 !important;
      top: 50px !important;
      width: 100% !important;

      // active selected element for autocomplete + text search
      .option.active
      {
        color: white;
        background-color: @apos-base;
      }
    }
  }

  // Multiple Select Items
  .selectize-control.multi > .selectize-input > .item
  {
    padding: 4px 6px;
    color: #fff;
    border-radius: 3px;
    line-height: inherit;

    background-color: @apos-grey10;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@apos-grey10), to(@apos-grey30));
    background: -webkit-linear-gradient(top, @apos-grey10, @apos-grey30);
    background: -moz-linear-gradient(top, @apos-grey10, @apos-grey30);
    background: -ms-linear-gradient(top, @apos-grey10, @apos-grey30);
  }
}



/* Search Input */
.apos-search-field
{
  input
  {
    font-family: 'cabin';
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0;
    padding: 14px 8px 11px 14px;
  }
}
.apos-search-field:before
{
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -8px;
}
/* End Search Input */

/* Modal Toggle */
.apos-page-settings-toggle
{
  color: @apos-grey10;
  .apos-montserrat;
  text-transform: uppercase;
  // font-size:0.65em;
  letter-spacing: 1px;
  padding: 10px 0 20px 0;
  a
  {
    color: @apos-grey10;
    background-color: @apos-grey60;
    padding: 12px;
  }
  &:before
  {
    content: " + ";
    // position: absolute;
    background-color: @apos-grey50;
    // right: 0;
    // top: 0px;
    padding: 11px 8px 7px 14px;
    top: 4px;
    position: relative;
    color: #fff;
    font-size:1.4em;
    pointer-events: none;
    // margin-top: -3px;
  }
  &.apos-active:before
  {
    content: " - ";
  }
  .apos-page-settings-toggle-content
  {
    padding: 30px 30px 20px 30px;
    background-color: @apos-grey70;
    margin-top: 10px
  }
}



/* Begin Tag Editor */

// Simple inline buttons for now, guys, feel free to use better buttons here. -Tom

.apos-tag-editor
{
  .apos-tags
  {
    padding-top: 10px;
  }
  .apos-tag
  {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    .apos-tag-text
    {
      display: inline-block;
      width: 400px;
      // float: left;
    }
  }
  // Tom's simple buttons
  // a:not(.apos-control)
  // {
  //   display: inline-block;
  //   padding: 4px;
  //   background-color: white;
  //   margin-right: 10px;
  // }
  .apos-tag-rename-form
  {
    input
    {
      // width: 100%;
      max-width: 385px;
      padding: 14px 8px 16px 8px;
      border: none;
    }
  }
}

/* End Tag Editor */

.apos-button-back
{
  padding: 28px 22px;
  float: left;
  margin-right: 20px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  .apos-montserrat-bold;
  background-color: @apos-base;
  color: white;
  display: inline-block;
  // background-color: darken(@apos-grey70,10%);
  // margin: 0 15px 0 -25px;
  &:before{padding-right: 5px;}
  &:hover{background-color: darken(@apos-grey70,20%);}
}

.apos-modal-bar-filters
{
  padding: 30px 0;
  label
  {
    padding-left: 0 !important;
  }
  .apos-fieldset.apos-fieldset-inset
  {
    background-color: transparent;
  }
}