/**
 * @author Sebastian Schlicht (User:sebschlicht), Rene Pickhardt (User:renepick)
 * @website https://www.mediawiki.org/wiki/Extension:MOOC
 */
// IMPORTS
@import "elements.less";

// COLORS
@cText: #000;
@cContentBg: #FFF;
@cSectionBg: #CCC;
@cNavigationBarBg: #FFF;

// sections
@cSectionBorder: #E0E0E0;
@cSectionHeader: #000;
@cSectionHeaderBgAlternative: #F5F5F5;
@cSectionHeaderBgBottom: #FFF;
@cSectionHeaderBgTop: #EAEAEA;

// DIMENSIONS
@hCollapsedSection: 200px; // warning: when altering this value, update ext.mooc.js:hCollapsedSection as well
@hCollapsedSectionOverlay: 50px; // height of the 'Read more' overlay
@sItemNavigationIcon: 24px; // (maximum) size (width|height) of an item navigation icon

#mooc {
  // make images responsive
  img {
    max-width: 100%;
    height: auto;
  }
}

#mooc-sections {
  padding-bottom: 39px;
  .section {
    position: relative;
    padding: 0;
    border: 1px solid @cSectionBorder;
    border-top: none;
    overflow: hidden;

    .header {
      padding: 5px 20px;
      color: @cSectionHeader;
      border-bottom: 1px solid @cSectionBorder;
      .gradient(@cSectionHeaderBgAlternative, @cSectionHeaderBgTop, @cSectionHeaderBgBottom);
      .box-shadow(0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1));
      z-index: 1;

      // section icon
      .icon {
        max-width: 32px;
        max-height: 32px;
      }

      // ACTION BUTTONS
      .actions {
        float: right;
        .btn {
          padding: 3px 6px;
          opacity: 1;
          .transition(.3s, ease-out 0s, opacity);
          // button icon
          img {
            max-width: 32px;
            max-height: 32px;
          }
        }
      }
      .actions.hidden-actions {
        .btn {
          opacity: 0;
          .transition(.3s, ease-in 0s, opacity);
        }
        .modal-box {
          .btn {
            opacity: 1;
          }
        }
      }

      // MODAL BOX CONTENT
      .modal-box {
        textarea {
          width: 100%;
          max-width: 100%;
        }
      }

      .icon {
        float: left;
        margin-right: 7px;
        padding-top: 4px;
      }
      h2 {
        display: inline-block;
        margin-top: 5px;

        .mw-editsection {
          // TODO hide
        }
      }
    }
    .header.enabled {
      position: absolute;
      top: 0;
      width: 100%;
    }
    .header.fixed {
      position: fixed;
      border-top: none;
      .box-shadow(-2px 3px 0 -2px rgba(0, 0, 0, .15));
    }
    .content {
      position: relative;
      margin: 0;
      padding: 20px;
      .transition(.3s, ease-out 0s, max-height);
      .box-shadow(0 0 0 1px rgba(0, 0, 0, .2));
      overflow: hidden;
    }
    // 'Read more' button and overlay
    .expander {
      position: absolute;
      height: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
      .gradient(#FFF, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
      .transition(.3s, ease-in);

      text-align: center;
      padding-top: 10px;
      font-size: 150%;
      color: grey;
      text-transform: uppercase;
      .user-select();
    }
    .expander.active {
      display: block;
      height: @hCollapsedSectionOverlay;
      opacity: 1;
      .transition(.3s, ease-out);
    }
    // modal box wrapper
    .modal-wrapper {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 40px;
      cursor: default;
      z-index: 1000;

      .modal-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #050404;
        opacity: .87;
      }
      .modal-box {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 25px 20px;
        margin: 0;
        background-color: #FFF;
        overflow: auto;
        .rounded(10px);
      }
    }
  }
  .section:first-child .header {
    padding-top: 6px; // 1px for negative margin-top
  }
  // TODO non-JS users can not see the full content by doing this
  .section.default-collapsed {
    .content {
      max-height: @hCollapsedSection; // just to avoid visual noise until JS loaded
    }
  }
  .section.collapsable,
  .section.expandable {
    .header {
      cursor: pointer;
    }
  }
  .section.collapsed {
    .content {
      .transition(.3s, ease-in, max-height);
    }
  }
}

// item navigation
#mooc {
  #itemnav {
    float: left;
    width: 100%;
    padding: 1px 20px;
    background: @cNavigationBarBg;
    border: 1px solid @cSectionBorder;
    border-bottom: none;
    z-index: 2;
    a {
      display: inline-block;
      padding: 2px 5px;
      margin-right: 8px;
      .rounded(5px);
    }
    a:hover {
      .text {
        text-decoration: underline;
      }
    }
    .active {
      background-color: @cSectionBorder;
    }
    .icon {
      display: inline-block;
      max-width: @sItemNavigationIcon;
      max-height: @sItemNavigationIcon;
      margin-right: 2px;
    }
    .text {
      display: inline-block;
      vertical-align: top;
      padding: 3px 0 0;
    }
  }
  #itemnav.fixed {
    position: fixed;
    border-top: none;
    padding-top: 2px; // avoid height change
  }
}

#mooc-navigation-bar {
  position: absolute;
  right: -15px;

  #mooc-navigation {
    #mooc-sections .section;
    border-top: 1px solid @cSectionBorder;

    .header {
      position: relative;
      top: 0;
      width: 100%;
      cursor: default;
      z-index: 1;
      border-top: none;
    }
    .fixed.header {
      position: fixed;
    }
    .content {
      position: relative;
      overflow: hidden;
      background: @cNavigationBarBg;
    }
    ul {
      list-style: none;
      margin: 0;
      ul {
        padding-left: 1em;
        border-left: 5px solid #DDD;
      }
    }
    a {
      display: block;
    }
  }
  #mooc-navigation.fixed {
    position: fixed;
    border-top: none;
  }
  #mooc-navigation.trailing {
    position: fixed;
  }
}

.btn-toggle-mw-nav {
  position: fixed;
  top: 50%;
  left: 2px;
  width: 20px;
  height: auto;
  z-index: 1000;
}

#mooc {
  a.disabled {
    cursor: default;
    pointer-events: none;
    opacity: .7;
  }
  #mooc-content {
    padding: 0;
  }
}

// #### CONTENT
#mooc .section .content {
  // empty section box
  .edit-link {
    cursor: pointer;
  }
}

/* Units (lesson.units, overview.lessons) */
#mooc #units,
#mooc #lessons {
  .unit {
    padding: 10px;
    margin: 0 0 20px 0;
    border: 1px solid @cSectionBorder;
    .left {
      padding: 0;
    }
    // video thumbnail
    .video-thumbnail {
      display: block;
      border: 1px solid @cSectionBorder;
      max-width: 100%;
      width: 300px;
      height: 170px;
      text-align: center;
      .mediaContainer, video {
        max-width: 100%;
      }
    }
    // no video available
    .no-video {
      display: table;
      span {
        display: table-cell;
        vertical-align: middle;
        color: @cText;
      }
    }
    a.video-thumbnail:hover,
    a.video-thumbnail:focus {
      color: @cText;
      text-decoration: none;
    }
    .links {
      a {
        display: inline-block;
        width: 32px;
        margin-right: 10px;
        opacity: 0.4;
        img {
          max-width: 100%;
        }
        .transition(.3s, ease-in 0s, opacity);
      }
    }
    .title {
      font-size: 1.2em;
      font-weight: bold;
    }
    .learning-goals {
      ol {
        padding-left: 1.2em;
        margin: 0;
      }
    }
  }
  .unit:hover {
    .links {
      a {
        opacity: 1;
        .transition(.3s, ease-out 0s, opacity);
      }
      a.disabled {
        opacity: 0.4;
      }
    }
  }
}

/* Overview section: Lessons */
#mooc #lessons {
  .lesson {
    > .title {
      font-size: 1.5em;
      font-weight: bold;
    }
  }
}

/* MODAL BOX FORMS */
#mooc .modal-box form {
  ol.value {
    li {
      padding: 10px 0 0 5px;
      margin: 0 0 10px;
    }
    input {
      margin: -8px 0 0;
      //background: #EEE;
      //border: none;
    }
  }
  > input {
    margin-top: 20px;
  }
}

// fix CSS z-index BUG of MW
#bodyContent {
  background-color: @cContentBg;
  z-index: 1000;
}

// adapt font-size set by Bootstrap
body {
  font-size: 100%;
}