@import '../../style/common_mixin.css';

.title-config {
  .letter-wrap{
    width: 3rem;
    flex: 0 0 3rem;
  }
  .str-wrap{
    margin-left: 1rem;flex: 1 1;
  }
  .type-row{
    margin: 0;padding-top: 1rem;
  }
}

// BerlinSansFB
@font-face {
  font-family: 'BRLNSDB';
  src: url("../../../assets/default/font/BerlinSansFB/BRLNSDB_1.TTF") ;
}

@font-face {
  font-family: 'BRLNSB';
  src: url("../../../assets/default/font/BerlinSansFB/BRLNSB_1.TTF") ;
}

@font-face {
  font-family: 'BRLNSR';
  src: url("../../../assets/default/font/BerlinSansFB/BRLNSR_1.TTF") ;
}

// CenturyGothic
@font-face {
  font-family: 'GOTHIC';
  src: url("../../../assets/default/font/CenturyGothic/GOTHIC_1.TTF") ;
}

@font-face {
  font-family: 'GOTHICB';
  src: url("../../../assets/default/font/CenturyGothic/GOTHICB_1.TTF") ;
}

@font-face {
  font-family: 'GOTHICBI';
  src: url("../../../assets/default/font/CenturyGothic/GOTHICBI_1.TTF") ;
}

@font-face {
  font-family: 'GOTHICI';
  src: url("../../../assets/default/font/CenturyGothic/GOTHICI_1.TTF") ;
}

// MMTextBook
@font-face {
  font-family: 'MMTextBook';
  src: url("../../../assets/default/font/MMTextBook/MMTextBook.otf") ;
}

@font-face {
  font-family: 'MMTextBook-Bold';
  src: url("../../../assets/default/font/MMTextBook/MMTextBook-Bold.otf") ;
}

@font-face {
  font-family: 'MMTextBook-BoldItalic';
  src: url("../../../assets/default/font/MMTextBook/MMTextBook-BoldItalic.otf") ;
}

@font-face {
  font-family: 'MMTextBook-Italic';
  src: url("../../../assets/default/font/MMTextBook/MMTextBook-Italic.otf") ;
}

@mixin tool-btn {
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  outline: none;
  border-radius: 6px;
  color: #555;
}

.d-flex{
  display: flex;
}

.position-relative {
  position: relative;
}

.flex-fill {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  justify-content: center;
  display: flex;
}

.i-dropdown-menu{
  width: 15px;
  font-size: 10px;
  border-left: 1px solid #ddd;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  flex: 0
}
.p-title-box .p-title {
    font-size: 20px;
  }
.p-title-box input {
    width: 300px;
    margin-left: 10px;
  }

.p-content {
  border: 1px solid #ddd;
  box-shadow: 0 0 8px #eee;
  margin-top: 10px;
}

.p-divider {
  border-left: 1px solid #ccc;
  margin: 5px 8px;
  height: 85%;
}

.p-tool-box {
  background-color: #efefef;
  padding: 2px;
  height: 37px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;



}
// save
.i-tool-save {
  //@include tool-btn();
  color: white;
}
.i-tool-save:disabled {
  color: #555;
}

// font-size
.i-tool-font-size {
  //@include tool-btn();
  width: 37px;

}
.i-tool-font-size:hover {
  color: black;
  border-color: #bbb;
}

// font-color
.i-tool-font-color, .i-tool-font-btn {
  border: 1px solid #ddd;
  //padding: 3px 7px;
  border-radius: 6px;
  width: 45px;
  height: 31px;
  background-color: white;
  color: #555;
  ::ng-deep > span {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 3px 7px;
  }
  .i-left {
    .fa-font,.fa-bold,.fa-italic,.fa-strikethrough, .fa-underline {
      font-size: 10px;
      position: absolute;
      color: #555;
      left: 8px;
      top: 7px;
    }
    .i-color {
      width: 68%;
      height: 5px;
      background-color: black;
      position: absolute;
      top: 21px;
      left: 5px;
    }
  }
  .i-dropdown-menu {
    width: 15px;
    font-size: 10px;
    border-left: 1px solid #ddd;
    display: flex;
    align-items: center;
    .anticon-down {
      transform: scale(0.6);
    }
  }
}
.i-tool-font-btn{
  width: 31px;
}
.fa-icon{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
// bg-color
.i-tool-bg-color {
  @include tool-btn();
  padding: 0 9px;
  ::ng-deep > span {
    display: flex;
    align-items: center;
  }

  .i-color {
    display: block;
    width: 16px;
    height: 16px;
    background-color: white;
    margin-left: 10px;
  }
}


// horizontal-center
.i-tool-horizontal-center {
  @include tool-btn();
  width: 37px;
}
.p-box {
  width: 1280px;
  height: 720px;
  left: 0;
  top: 0;
  transform-origin: top left;
  overflow: hidden;
}



.p-animation-index-box {
  .i-animation-index {
    position: absolute;
    font-size: 34px;
    font-family: Arial;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkorange;
    color: white;
  }
}

.p-edit {
  background-color: white;
  border: 1px solid black;
  padding: 2px 15px;
}

.p-selected {
  border: 1px solid darkorange;
  box-shadow: 0 0 8px #ddd;
}

.p-tool-item-disable {
  color: rgba(0, 0, 0, .25) !important;
  background-color: transparent !important;
  pointer-events: none;
}

// -----------
.p-color-pane {
  width: 80px;
  .p-color-item {
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin: 4px;
    border: 1px solid #bbb;
  }
  .p-color-item-active {
    border: 1px solid white;
    transform: scale(1.1);
  }
}

.p-user-guide {
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-animation-box {
  width: 400px;
  background-color: #efefef;
  border-left: 1px solid #ddd;
  padding: 10px;
  text-align: center;

  .p-animation-label {
    z-index: 1;
    position: relative;
  }

  ::ng-deep .ant-radio-button-wrapper {
    padding: 0 10px;
  }

  .i-toolbox {
    & > div {
      font-size: 20px;
      cursor: pointer;
      color: #555;
      padding: 0 3px;
      margin: 0 5px;
    }
    & > div:hover {
      color: #1585ff;
      transform: scale(1.1);
    }
  }

  .p-animation-list {
    background-color: white;
    border-radius: 10px;
    height: calc(100% - 86px);
    overflow-y: auto;
    .p-animation-item {
      padding: 0 20px;
      background-color: aliceblue;
      margin-top: 6px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      text-align: left;
      display: flex;
    }
    .i-active {
      background-color: antiquewhite;
    }
  }
}

