@import "../../css/theme.less";
@import '../../css/zoom.less';
@import '../../css/variables.less';

.calendar-card-wrap {
  background: @primary-color;
  background: var(--primary);

  // background-image: url("../../images/schedule/blueSkin/rili_bottombg_newSkin-blue.jpg");
  .schedule-card {
    position: absolute;
    width   : 100%;
    height  : 100%;
  }

  .schedule-calendar-header {
    position       : relative;
    height         : 134px;
    background     : url("../../images/schedule/rili_topbg_590.png") no-repeat center;
    background-size: cover;
    color          : #fff;
    font-size      : 16px;
    padding        : 21px 18px;
    position       : relative;

    .userInfo-proverbs {
      font-family   : KaiTi;
      font-size     : 14px;
      letter-spacing: 2px;
    }

    .header-bottom {
      overflow  : hidden;
      margin-top: 20px;

      .userInfo-userFace {
        float        : left;
        width        : 72px;
        height       : 72px;
        border-radius: 40px;
        overflow     : hidden;
        border       : 2px solid #fff;
        margin-right : 20px;

        img {
          width : 100%;
          height: 100%;
        }
      }

      .userInfo-userType {
        font-size: 15px;
      }
    }

    .schedule-calendar-view {
      position : absolute;
      bottom   : 10px;
      right    : 38%;
      font-size: 14px;
      cursor   : pointer;
    }

    .schedule-calendar-content {
      float    : left;
      font-size: 14px;

      .schedule-calendar-date {
        height     : 37px;
        line-height: 18px;
        margin-top : 6px;

        span {
          font-size: 42px;
        }

        .custom-driver {
          width     : 2px;
          height    : 82%;
          background: #fff;
          display   : inline-block;
          margin    : 0 10px;
        }

        ul {
          // margin-left: 10px;
          display: inline-block;

          li {
            list-style: none;
          }

          li:nth-child(2) {
            margin-top: 3px;
          }
        }
      }

      .schedule-calendar-lunar {
        height     : 14px;
        line-height: 14px;
      }
    }

    .schedule-calendar-weather {
      float       : right;
      margin-right: -5px;
      display     : none;
    }
  }

  .schedule-calendar-header .date-head {
    font-size: 30px;

    i {
      cursor: pointer;
    }
  }

  .schedule-calendar-header .date-today {
    line-height: 38px;
  }

  .schedule-calendar-header .date-today em {
    font-size  : 36px;
    font-weight: normal;
    color      : #f2aa18;
    margin-left: 22px;
  }

  .schedule-calendar-header .weather-wrap {
    position: absolute;
    height  : 42px;
    width   : 190px;
    right   : 18px;
    bottom  : 50px;
  }

  .default-view {
    height: 100%;

    &.mbot {
      .df-container {
        position: absolute;
        width   : 100%;
        overflow: hidden;
        height  : calc(~"100% - 20px");

        .empty-data-wrap {
          height: 200px;
        }
      }

      &:after {
        position: absolute;
        display : none;
        content : "";
        bottom  : 20px;
        width   : calc(~"100% - 40px");
        margin  : 0 20px;
        height  : 40px;
      }

      .bot-view-more {
        display: block;
      }
    }

    .bot-view-more {
      display    : none;
      width      : 100%;
      position   : absolute;
      bottom     : 0;
      height     : 64px;
      line-height: 64px;
      z-index    : 9;
      text-align : center;
      color      : #ffffff;
      opacity    : 0.8;

      i {
        margin-left: 16px;
      }
    }
  }

  .more-view-wrap {
    position: absolute;
    overflow: hidden;

    background: var(--primary);
    linear-maskbackground: -webkit-linear-gradient(var(--primary),
        var(--primary),
        var(--three));
    /* Safari 5.1 - 6.0 */
    linear-maskbackground: -webkit-linear-gradient(var(--primary),
        var(--primary),
        var(--third));
    /* Safari 5.1 - 6.0 */
    background: @primary-color;
    background: -o-linear-gradient(var(--primary),
        var(--primary),
        var(--three));
    /* Opera 11.1 - 12.0 */
    background: -o-linear-gradient(var(--primary),
        var(--primary),
        var(--third));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(var(--primary),
        var(--primary),
        var(--three));
    /* Firefox 3.6 - 15 */
    background: -moz-linear-gradient(var(--primary),
        var(--primary),
        var(--third));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(var(--primary), var(--primary), var(--three));
    /* 标准的语法 */
    background: linear-gradient(var(--primary), var(--primary), var(--third));
    /* 标准的语法 */
    width     : 100%;
    height    : 100%;

    .top-head {
      height     : 56px;
      line-height: 56px;
      color      : #ffffff;
      background : url("../../images/schedule/rili_topbg_590.png") no-repeat center;
      padding    : 0 20px;
    }

    .date-head {
      font-size: 20px;
    }

    .type-tab-wrap {
      background   : @primary-color;
      background   : var(--primary);
      border-radius: 4px;
      border       : 1px solid @primary-color;
      border       : 1px solid var(--four);
      border       : 1px solid var(--fourth);
      margin       : 20px 20px 10px;
      height       : 32px;
      line-height  : 32px;
      overflow     : hidden;
      display      : flex;

      li {
        flex       : 1;
        display    : table-cell;
        cursor     : pointer;
        color      : #fff;
        height     : 32px;
        line-height: 32px;
        text-align : center;
        padding    : 0 20px;
        border-left: 1px solid @primary-color;
        border-left: 1px solid var(--four);
        border-left: 1px solid var(--fourth);

        &:first-child {
          border-left: none;
        }

        &.active {
          background: @primary-color;
          background: var(--three);
          background: var(--third);
        }
      }
    }

    .m-sche-list {
      margin        : 0 20px 10px;
      padding-bottom: 40px;

      &>li {
        transition   : ease 200ms;
        margin-bottom: 10px;
        cursor       : pointer;

        &:last-of-type {
          margin-bottom: 0;
        }

        .cont {
          background: #7f8683;
          color     : #ffffff;
          padding   : 12px 20px;

          &:hover {
            background: @primary-color;
            background: var(--primary);
          }

          .sche-tpye-tag {
            margin-right: 6px;
          }

          .tle {
            height           : 24px;
            overflow         : hidden;
            -ms-text-overflow: ellipsis;
            text-overflow    : ellipsis;
            white-space      : nowrap;
            color            : #fff;
            font-size        : 14px;

            &:hover {
              text-decoration: underline;
            }

            .sche-tpye-tag {
              display      : inline-block;
              border-radius: 16px;
              padding      : 0 4px;
              margin       : 0 6px;
              line-height  : 16px;
              height       : 16px;
              font-size    : 12px;
              color        : #fff;
              background   : #fd7167;

              &:first-child {
                margin-left: 0;
              }

              &:last-child {
                margin-right: 0;
              }

              &[data-type="会议"] {
                background: #fd7167;
              }

              &[data-type="活动"] {
                background: #66cc66;
              }

              &[data-type="其他"] {
                background: #0069ba;
              }
            }

            .item-tag {
              display       : inline-block;
              margin-right  : 16px;
              border-radius : 16px;
              height        : 16px;
              line-height   : 16px;
              vertical-align: middle;
            }
          }

          p {
            font-size: 12px;
            color    : #c3d0da;
          }

          .place {
            height           : 18px;
            overflow         : hidden;
            -ms-text-overflow: ellipsis;
            text-overflow    : ellipsis;
            white-space      : nowrap;
          }

          label {
            color: #fff;
          }
        }

        .bot-operate-wrap {
          height       : 36px;
          line-height  : 36px;
          display      : flex;
          align-items  : center;
          align-content: center;
          background   : @primary-color;
          background   : var(--primary);

          .op-item {
            cursor           : pointer;
            flex             : 1;
            height           : 34px;
            text-align       : center;
            -ms-text-overflow: ellipsis;
            text-overflow    : ellipsis;
            overflow         : hidden;
            white-space      : nowrap;
            padding          : 0 20px;

            &.disable {
              opacity: 0.3;
              cursor : no-drop;
            }

            i {
              margin-right: 6px;
            }

            &:hover {
              background: rgba(0, 0, 0, 0.3);
            }

            .ant-select-selection {
              background: none;
              border    : none;
            }

            .prefixIcon {
              i {
                color         : #c9c9c9;
                vertical-align: baseline;
                margin-right  : 6px;
              }
            }

            .anticon-arrow-down {
              color: @primary-color;
              color: var(--four);
              color: var(--fourth);
            }
          }
        }
      }
    }

    .ignore-setting {
      cursor     : pointer;
      height     : 40px;
      line-height: 40px;
      text-align : center;
      color      : #fff;
    }

    .more-bot-wrap {
      position   : absolute;
      width      : 100%;
      bottom     : 0;
      left       : 0;
      z-index    : 9;
      height     : 50px;
      line-height: 50px;
      color      : #ffffff;
      text-align : center;
      border-top : 1px solid #ebebeb;

      &:hover {
        background: @primary-color;
        background: var(--primary);
      }
    }
  }

  .linear-mask {
    position: relative;

    &:after {
      content : "";
      position: absolute;
      bottom  : 0;
      left    : 0;
      width   : 100%;
      height  : 40px;
      linear-maskbackground: -webkit-linear-gradient(rgba(0, 95, 40, 0),
          var(--primary));
      /* Safari 5.1 - 6.0 */
      background: @primary-color;
      background: -o-linear-gradient(rgba(0, 95, 40, 0),
          var(--primary));
      /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(rgba(0, 95, 40, 0),
          var(--primary));
      /* Firefox 3.6 - 15 */
      background: linear-gradient(rgba(0, 95, 40, 0),
          var(--primary));
      /* 标准的语法 */
    }
  }

  .schedule-row-style {
    height: auto;
  }

  .schedule-card>.ant-card-body {
    padding: 0px;
  }

  .schedule-card a {
    color  : #ffffff;
    //color: #000;
  }

  .schedule-card li {
    color  : rgba(255, 255, 255, 1);
    //color: #000;
  }

  .calendar-sche-list {

    //margin:20px;
    .float-r {
      float          : right;
      display        : flex;
      justify-content: center;



      .schedule-calendar-detail {
        // position : absolute;
        // bottom   : 10px;
        // right    : 20px;
        font-size   : 14px;
        cursor      : pointer;
        margin-right: 20px;
      }
    }

    .shade {
      height: 40px;
    }

    .allEmptyButton {
      width    : 30%;
      margin   : 0 auto;
      min-width: 90px;
    }

    .allEmpty {
      text-align   : center;
      cursor       : pointer;
      margin-bottom: 30px;
      background   : rgba(255, 255, 255, 1);
      border-radius: 4px;
      padding      : 5px;

      &:hover {
        font-weight: bold;
      }

      i {
        margin-right: 5px;
      }
    }

    h3 {
      margin      : 10px 20px 12px;
      color       : rgba(255, 255, 255, 0.7);
      //text-align: center;
      font-size   : 14px;

      i {
        margin-right: 8px;
        font-size   : 12px;
      }

      .cal-head-left {
        display    : inline-block;
        height     : 20px;
        line-height: 20px;

        &>span {
          vertical-align: middle;
        }
      }

      /*span{
                height: 20px;
                line-height: 20px;
            }*/
      .schedule-dot {
        width           : 3px;
        height          : 3px;
        border-radius   : 50%;
        background-color: #fff;
        margin          : 0 5px;
        display         : inline-block;
        vertical-align  : middle;
      }

      .my-schedule-title {
        vertical-align: middle;
      }

      .schedule-number {
        color         : #f6cd5b;
        font-size     : 18px;
        vertical-align: middle;
      }
    }

    .sche-row-style {
      position        : relative;
      color           : #ffffff;
      height          : 66px;
      /* border       :1px solid #348B62;
            background:#348B62;*/
      border-color    : rgba(255, 255, 255, 0.05);
      background      : rgba(255, 255, 255, 0.2);
      border-radius   : 2px;
      margin-bottom   : 10px;
      overflow        : hidden;

      &:hover {
        .row-left {
          ul {
            .row-time {
              display: none;
            }

            .row-ignore {
              display: inline-block;
            }
          }
        }
      }

      .row-left {
        width       : 65px;
        float       : left;
        display     : table;
        text-align  : center;
        height      : 100%;
        border-right: 1px solid rgba(255, 255, 255, 0.25);

        ul {
          display       : table-cell;
          vertical-align: middle;

          .row-ignore {
            display: none;
          }

          li {
            list-style: none;
          }

          li:nth-child(1) {
            color      : #f1d95a;
            font-size  : 20px;
            line-height: 16px;
            height     : 16px;
          }

          li:nth-child(2) {
            margin-top : 9px;
            font-size  : 12px;
            line-height: 9px;
            height     : 9px;
          }
        }

        .ignore {
          cursor: pointer;

          li:nth-child(1) {
            color      : @primary-color;
            color      : var(--two);
            color      : var(--secord);
            font-size  : 20px;
            line-height: 16px;
            height     : 16px;
          }
        }
      }

      .row-cont {
        height : 100%;
        display: table;
        width  : calc(~"100% - 65px");
        float  : left;

        .row-middle {
          vertical-align: middle;
          display       : table-cell;
          padding       : 0 18px;

          .title-line2 {
            -ms-text-overflow : ellipsis;
            text-overflow     : ellipsis;
            display           : -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow          : hidden;
            max-height        : 42px;
          }

          .feedbackTag {
            position              : absolute;
            padding               : 0 6px;
            right                 : -1px;
            bottom                : 0;
            background-color      : #fd7167;
            border-top-left-radius: 14px;

            &:before {
              content     : "";
              display     : inline-block;
              width       : 0;
              height      : 0;
              border-width: 6px 3px 4px 5px;
              border-style: solid;
              border-color: transparent #fd7167 #fd7167 transparent;
              position    : absolute;
              left        : -8px;
              bottom      : 0;
            }

            &:hover {
              background-color: #f48d86;

              &:before {
                border-color: transparent #f48d86 #f48d86 transparent;
              }
            }

            i {
              font-size: 12px;
            }
          }

          &:hover {
            cursor         : pointer;
            text-decoration: underline;
          }
        }

        .ant-divider-vertical {
          margin          : 0 3px;
          background-color: rgba(255, 255, 255, 0.3);
        }

        .tle {
          margin-bottom: 4px;
        }
      }

      .row-access {
        position  : absolute;
        top       : 50%;
        right     : 20px;
        margin-top: -6px;
      }

      &:hover {
        /* background:#348B62;*/
      }
    }

    .tle {
      color            : #ffffff;
      font-size        : 14px;
      height           : 20px;
      overflow         : hidden;
      -ms-text-overflow: ellipsis;
      text-overflow    : ellipsis;
      white-space      : nowrap;
    }

    label {
      color       : #ffffff;
      font-size   : 12px;
      margin-right: 4px;
    }

    .desc {
      color    : #c3d0da;
      font-size: 12px;
    }

    .scroll-wrap {
      padding: 0 20px;
    }
  }

  .box-mid {
    display: table;

    &>.mid {
      display       : table-cell;
      vertical-align: middle;
    }

    &>.center {
      display   : table-cell;
      text-align: center;
    }
  }

  .sche-row-style h4 {
    color            : #fff;
    height           : 20px;
    overflow         : hidden;
    -ms-text-overflow: ellipsis;
    text-overflow    : ellipsis;
    white-space      : nowrap;
  }

  .timeline-style {
    // height: 344px;
    height    : calc(~"100% - 254px");
    overflow-y: auto;
    position  : relative;

    .ignore-setting {
      text-align   : center;
      margin-bottom: 10px;

      .igonre-cont {
        cursor          : pointer;
        height          : 40px;
        line-height     : 40px;
        color           : #fff;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius   : 12px;
        padding         : 5px 18px;

        span {
          vertical-align: middle;
        }
      }

      .dot {
        display         : inline-block;
        width           : 3px;
        height          : 3px;
        background-color: #fff;
        border-radius   : 50%;
        margin          : 0 5px;
      }
    }
  }

  .schedule-card .line {
    height    : 1px;
    background: rgba(235, 235, 235, 0.29);
    margin    : 20px 20px 0;
  }
}

.ant-badge-dot {
  background: #fd6767;
}

.ant-spin-dot i {
  background-color: #228b22;
}

.schedulePlusButton {
  li {
    list-style-type: none;
    padding        : 0 8px;

    &:hover {
      background-color: @primary-color;
      background-color: var(--two);
      background-color: var(--secord);
      cursor          : pointer;
    }
  }
}

/*************** 蓝色主题 start***************/
.@{theme-blue-selector} {

  // loading
  .ant-spin-dot i {
    background-color: @theme-blue-1;
  }

  // 日历
  .calendar-card-wrap {

    // background-image: url("../../images/schedule/rili_bottombg380-blue.jpg");
    // background-image: url("../../images/schedule/blueSkin/rili_bottombg_newSkin-blue.jpg");
    .schedule-calendar-header {
      // background-image: url("../../images/schedule/rili_topbg_590-blue.jpg");
      background-image: url("../../images/schedule/blueSkin/rili_topbg_newSkin-blue.png");
    }

    .more-view-wrap {
      .top-head {
        // background-image: url("../../images/schedule/rili_topbg_590-blue.jpg");
        background-image: url("../../images/schedule/blueSkin/rili_topbg_newSkin-blue.png");
      }
    }

    .cardInfo {
      color: #fff;
    }

    .calendar-sche-list {
      .sche-row-style {
        border-color: rgba(255, 255, 255, 0.05);
        background  : rgba(255, 255, 255, 0.2);

        .row-left {
          ul {
            li:nth-child(1) {
              color: @theme-yellow-color;
            }
          }
        }
      }

      h3 {
        .schedule-number {
          color: @theme-yellow-color;
        }
      }
    }

    .default-view.mbot:after {
      // background: linear-gradient(rgba(0, 115, 48, 0), #003c18);
      background: transparent;
    }
  }

  @media (min-width: 1601px) {
    .calendar-card-wrap {
      // background-image: url("../../images/schedule/rili_bottombg480-blue.jpg");
      // background-image: url("../../images/schedule/blueSkin/rili_bottombg_newSkin-blue.jpg");
    }
  }

  @media (min-width: 1921px) {
    .calendar-card-wrap {
      // background-image: url("../../images/schedule/rili_bottombg590-blue.jpg");
      // background-image: url("../../images/schedule/blueSkin/rili_bottombg_newSkin-blue.jpg");
    }
  }

  .calendar-card-wrap {
    .calendar-sche-list {
      .sche-row-style {
        &:hover {
          box-shadow: 0 0 10px @primary-color;
          box-shadow: 0 0 10px var(--four);
          box-shadow: 0 0 10px var(--fourth);
          border    : 1px solid @theme-blue-5;
        }
      }
    }
  }

  .schedulePlusButton li:hover {
    background-color: @theme-blue-3;
  }
}

.@{theme-red-selector} {

  // loading
  .ant-spin-dot i {
    background-color: @theme-red-1;
  }

  // 日历
  .calendar-card-wrap {
    background-image: url("../../images/schedule/rili_bottombg380-red.jpg");

    .schedule-calendar-header {
      background-image: url("../../images/schedule/rili_topbg_590-red.jpg");
    }

    .more-view-wrap {
      .top-head {
        background-image: url("../../images/schedule/rili_topbg_590-red.jpg");
      }
    }

    .cardInfo {
      color: #fff;
    }

    .calendar-sche-list {
      .sche-row-style {
        border-color: rgba(255, 255, 255, 0.05);
        background  : rgba(255, 255, 255, 0.2);

        .row-left {
          ul {
            li:nth-child(1) {
              color: @theme-yellow-color;
            }
          }
        }
      }

      h3 {
        .schedule-number {
          color: @theme-yellow-color;
        }
      }
    }

    .default-view.mbot:after {
      // background: linear-gradient(rgba(0, 115, 48, 0), #003c18);
      background: transparent;
    }
  }

  @media (min-width: 1601px) {
    .calendar-card-wrap {
      background-image: url("../../images/schedule/rili_bottombg480-red.jpg");
    }
  }

  @media (min-width: 1921px) {
    .calendar-card-wrap {
      background-image: url("../../images/schedule/rili_bottombg590-red.jpg");
    }
  }

  .calendar-card-wrap {
    .calendar-sche-list {
      .sche-row-style {
        &:hover {
          box-shadow: 0 0 10px rgba(255, 180, 0, 0.5);
          border    : 1px solid @theme-red-9; // rgba(0,88,37,0.1);
        }
      }
    }
  }

  .schedulePlusButton li:hover {
    background-color: @theme-red-3;
  }
}


:global(.@{theme-green-selector}) {
  .calendar-card-wrap {
    .calendar-sche-list {
      .sche-row-style {
        &:hover {
          box-shadow: 0 0 10px @primary-color;
          box-shadow: 0 0 10px var(--primary);
          border    : 1px solid rgba(0, 88, 37, 0.1); // rgba(0,88,37,0.1);
        }
      }
    }
  }
}

//---------------------日程卡片翻转动画开始-----------------------
.home-page {
  position: relative;
}

.cardAnimation {
  position  : absolute;
  z-index   : 2;
  margin-top: 103px;
  right     : 20px;
  color     : #fff;
  cursor    : pointer;

  &:hover {
    font-weight: bold;
  }
}

.calBox {
  position           : absolute;
  z-index            : 6;
  height             : 750px;
  animation-duration : 0.5s;
  animation-fill-mode: forwards;
}

.calendar-card-wrap {
  transform          : translate3d(0, 0, 0);
  animation-duration : 1s;
  animation-fill-mode: forwards;
}

@keyframes calPlay {
  0% {
    width  : 61%;
    opacity: 0;
  }

  30% {
    opacity: 0.3;
  }

  100% {
    // width: 100%;
    opacity: 1;
    width  : 1200px;
  }
}

@keyframes calClose {
  0% {
    // width: 100%;
    width  : 1200px;
    opacity: 1;
  }

  70% {
    // width: 100%;
    opacity: 0.3;
  }

  100% {
    width  : 40%;
    opacity: 0;
  }
}

@keyframes play {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(180deg);
  }
}

@keyframes close {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

//---------------------日程卡片翻转动画结束-----------------------

.schedule-calendar-publish {
  position        : absolute;
  right           : 10px;
  top             : 10px;
  height          : 24px;
  width           : 24px;
  background-color: @primary-color;
  background-color: var(--primary);
  border-radius   : 8px;

  img {
    width        : 16px;
    margin       : 4px;
    margin-bottom: 6px;
  }
}