@charset "UTF-8";

/*!
 * Admin screen style sheets
 *
 * @handle gianism-admin-panel
 * @deps ligature-symbols
 */


@import 'gianism_variables';
@import 'components';
@import 'lsf_variables';
@import 'profile';


@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}


@mixin transform($value){
  -webkit-transform: $value;
  transform: $value;
}


// Rotation animation
@include keyframes( rotation ){
  0% {
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}

.gianism-header{
  min-height: 0;
  padding: 30px;
  background: #F4B700 url(../img/header.png) center right no-repeat;
  background-size: contain;
  &-text{
    font-size: 32px;
    font-weight: bolder;
    color: #000;
    margin: 0 0 10px;
  }
  &-lead{
    font-size: 18px;
    color: #594324;
    margin: 0;
  }
}

// Admin screen
.gianism-wrap {
  position: relative;

  .gianism-inner{
    position: relative;
    clear: both;
  }
  .main-content{
    position: relative;
    padding-right: 320px;
    margin-top: 20px;
  }
  .sidebar {
    width: 300px;
    right: 10px;
    top: 0;
    position: absolute;
  }

  .clear{
    clear: both;
  }

  // Tab navigation
  .nav-tab {
    .lsf {
      font-size: 24px;
    }
  }

  // Components


  // New
  .gianism-new{
    display: inline-block;
    padding: 0.25em 0.5em;
    background-color: $notice-color;
    color: #fff;
    border-radius: 3px;
    margin-right: 0.5em;
  }

  // Main
  .main-content {
    h3 {
      clear: both;
      margin-top: 2em;
      padding-top: 1em;
      border-top: 5px double #ddd;
      font-size: 1.8em;
      .lsf {
        font-size: 1.8em;
      }
    }
    h4 {
      font-size: 1.4em;
      margin-top: 2em;
      margin-bottom: 1em;
      padding-bottom: 1em;
      border-bottom: 1px dotted #ddd;
    }
    pre{
      margin: 20px 0;
      overflow-x: scroll;
      padding: 20px;
      background: #ddd;
      color: #000;
    }
    img.gian {
      float: right;
      margin-left: 2em;
      margin-bottom: 1em;
    }
    q.copy {
      font-family: Gerogia, serif;
      font-style: italic;
      font-size: 1.8em;
      cite {
        font-size: 0.75em;
        text-align: left;
      }
    }
    .last-updated {
      font-size: 0.9em;
      color: #999;
      text-align: right;
      text-shadow: 1px 1px 2px #fff;
    }
    .gianism-example-table {
      border-collapse: collapse;
      width: 100%;
      th, td {
        padding: 5px 10px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        background: #fbfbfb;
      }
      tr:nth-child(even) {
        th, td {
          background: #f8f8f8;
        }
      }
      th {
        border-right: 1px solid #ddd;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
      }
      span.description {
        background: #06c;
        color: #fff;
        padding: 3px 5px;
        margin-top: 5px;
        border-radius: 3px;
      }
    }
    p.notice {
      background: #f2f7fc;
      padding: 0.5em 1em;
      border-radius: 3px;
      border: 1px solid #d2dee5;
    }
    p.danger {
      color: $notice-color;
      background: transparentize($notice-color, 0.8);
      padding: 0.5em 1em;
      border-radius: 3px;
      border: 1px solid $notice-color;
    }
    // Form parts
    #ga-connection{
      select + .dashicons-yes{
        display: none;
        margin-left: 1em;
        color: $success;
      }
      select.success + .dashicons-yes{
        display: inline-block;
      }
      .dashicons-update{
        display: none;
        color: #999;
      }
      .loading{
        .dashicons-update{
          display: inline-block;
          animation: rotation 2s linear;
        }
      }
    }
    // MySQL structure
    .mysql-table{
      width: 100%;
      table-layout: auto;
      border-collapse: collapse;
      caption{
        font-weight: 700;
        font-size: 1.2em;
        margin: 0.5em;
      }
      th, td{
        padding: 1em;
      }
      thead{
        th{
          background: #fff;
          border-bottom: 3px double #ddd;
        }
      }
      tbody{
        th, td{
          border-bottom: 1px solid #ddd;
          text-align: center;
        }
        tr:nth-child(even){
          th, td{
            background: #f9f9f9;
          }
        }
      }
    }
    p, span{
      &.success{
        color: $success;
      }
    }
    // CHeck form
    .gianism-admin-form{
      pre{
        max-height: 300px;
        overflow: auto;
        background: #666;
        color: #ddd;
      }
    }
    // Radio button
    .onoffswitch {
      position: relative; width: 90px;
      -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-label {
      display: block; overflow: hidden; cursor: pointer;
      border: 2px solid #CCC; border-radius: 20px;
    }
    .onoffswitch-inner {
      display: block; width: 200%; margin-left: -100%;
      -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
      -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
      &::before,
      &::after{
        display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: 700;
        box-sizing: border-box;
      }
      &::before{
        content: "ON";
        padding-left: 10px;
        background-color: #2EA2CC; color: #FFF;
      }
      &::after{
        content: "OFF";
        padding-right: 10px;
        background-color: #F7F7F7; color: #555;
        text-align: right;
      }
    }
    .onoffswitch-switch {
      display: block; width: 18px; margin: 6px;
      background: #FFF;
      border: 2px solid #CCC; border-radius: 20px;
      position: absolute; top: 0; bottom: 0; right: 56px;
      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
    }
    .onoffswitch-checkbox {
      display: none;
      &:checked + .onoffswitch-label{
        .onoffswitch-inner {
          margin-left: 0;
        }
        .onoffswitch-switch {
          right: 0;
        }
      }
    }


    // Code example
    code{
      word-break: break-all;
    }
  }

  // Error
  .gianism-load-error{
    margin: 20px 0;
    padding: 20px;
    color: red;
    background: #fff;
    box-shadow: 0 2px 3px rgba( 0, 0, 0, .2);
    border-left: 5px solid red;
  }

  // Sidebar
  .sidebar {


    #index {
      width: 278px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
      border-radius: 3px;
      h4{
        margin: 1em 0 0.5em;
        padding-top: 0.5em;
        border-top: 1px solid #ddd;
        &:first-child{
          border-top: none;
        }
      }
      &.floating {
        position: fixed;
        top: 38px;
      }
      &.pinned-bottom {
        bottom: 0;
        _position: static;
      }
      .forum-link,
      .github-link {
        position: relative;
        padding: 0.5em 0.5em 0.5em 40px;
        min-height: 40px;
        &::before {
          position: absolute;
          display: block;
          top: 50%;
          left: 0;
          margin-top: -20px;
          width: 40px;
          height: 40px;
          font-size: 40px;
          line-height: 1;
          font-family: LigatureSymbols;
          font-weight: 400;
          font-style: normal;
        }
      }
      .forum-link::before {
        content: $lsf-wink;
      }
      .github-link::before {
        content: $lsf-github;
      }
      .hametuha-link{
        margin-top: 10px;
        small{
          text-align: center;
          display: block;
          color: #888;
          margin-bottom: 5px;
        }

        a{
          display: block;
          border: 1px solid #ddd;
          &:hover{
            border: 1px solid #000;
          }
          img{
            max-width: 100%;
            width: auto;
            height: auto;
          }
        }
      }
    }

    .mc{
      &-embed{

      }
      &-field{

        &-2col{
          & > div{
            width: 50%;
            float: left;
          }
          .mc-field-group{
            margin-right: 5px;
            &.last-name{
              margin-right: 0;
              margin-left: 5px;
            }
          }
        }
        &-name-ja{
          & > div{
            float: right;
          }
          .mc-field-group{
            margin-right: 0;
            margin-left: 5px;
            &.last-name{
              margin-left: 0;
              margin-right: 5px;
            }
          }
        }


        &-group{
          margin: 5px 0;
          .asterisk{
            color: red;
          }
          label{
            display: block;
          }
          input[type="text"],
          input[type="email"]{
            box-sizing: border-box;
            width: 100%;
          }
        }
      }
    }

    label.inline{
      display: inline-block;
      margin-right: 1em;
      &:last-child{
        margin-right: 0;
      }
    }

    p.submit .button-primary{
      display: block;
      box-sizing: border-box;
      width: 100%;
    }

  }

}

// Edit form advanced
.gianism-post-container{
  // Edit form
  .form-row{
    margin: 2em 0;
    label{
      display: block;
    }
    label, caption{
      font-size: 1.8em;
      padding-bottom: 0.75em;
      text-align: left;
    }

    textarea{
      box-sizing: border-box;
      width: 100% !important;
      resize: vertical;
      height: 5em !important;
    }
  }

  // Time table
  .date-table{
    width: 100%;
    max-width: 400px;
    table-layout: auto;
    border-collapse: collapse;
    td, th{
      padding: 0.5em;
      text-align: center;
    }
    tfoot{
      td, th{
        text-align: right;
        border-top: 3px double #ddd;
      }
    }
    thead{
      th{
        border-bottom: 3px double #ddd;
      }
    }
    tbody{
      th, td{
        border-bottom: 1px solid #ddd;
      }
      tr:last-child{
        th, td{
          border-bottom: none;
        }
      }
    }
  }

}

.gianism-home{

  &-quote{
    position: relative;
    padding: 30px;
    margin: 20px 0;
    i{
      position: absolute;
      color: #ddd;
      z-index: 1;
      top: 30px;
      left: 10px;
      font-size: 120px;
    }
    p{
      position: relative;
      z-index: 2;
      font-size: 40px;
      font-weight: 400;
      font-family: serif;
      font-style: italic;
    }
    cite{
      display: block;
      color: #888;
      font-size: 16px;
      text-align: right;
    }
  }

  &-lead{
    font-weight: 400;
    line-height: 1.8;
    font-size: 20px;
    border-bottom: 1px dotted #ddd;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  &-table{
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 30px 0 10px;
    caption{
      font-size: 24px;
      text-align: left;
      font-weight: 700;
      margin-bottom: 10px;
    }
    th, td{
      padding: 10px;
      border-bottom: 1px solid #ddd;
      text-align: left;
    }
    thead th{
      border-bottom: 3px solid #ddd;
    }
    .type, .status{
      width: 5em;
      text-align: center;
    }
  }

}

// Post list
.column-end_date{
  width: 10%;
}

// Toggle area
.gianism-toggle {
  display: none;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  margin-top: 1em !important;

  &.toggle {
    display: block;
  }
}

// User list
.wp-list-table {
  th.column-gianism {
    width: 4em;
  }

  .lsf {
    font-size: 20px;
    margin: 0 10px 10px 0;
  }
}

// For RSD
@media screen and (max-width: 799px) {
  .gianism-wrap {
    .main-content {
      padding-right: 0;
      img.gian {
        display: none;
      }
    }
    .sidebar {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      width: auto;
      #index{
        width: auto;
      }
    }

  }
  .gianism-post-container {
    .date-table{
      th, td{
        padding: 0;
      }
    }
  }
}