We_Relese/App/Relese/Content/Css/portrait.css

@charset "UTF-8";
.nav-box {
  position: absolute;
  top: 5px;
  left: 300px;
  z-index: 1089; }
  .nav-box .nav .nav-item .nav-link {
    color: #007bff;
    border: 1px solid #007bff;
    border-left: none;
    border-radius: 0;
    cursor: pointer; }
    .nav-box .nav .nav-item .nav-link.active, .nav-box .nav .nav-item .nav-link:active, .nav-box .nav .nav-item .nav-link:focus {
      color: #fff;
      background: #007bff; }
  .nav-box .nav .nav-item:first-child .nav-link {
    border-left: 1px solid #007bff;
    border-radius: 20px 0 0 20px; }
  .nav-box .nav .nav-item:last-child .nav-link {
    border-radius: 0 20px 20px 0; }
  .nav-box .nav .nav-item:first-child:last-child .nav-link {
    border-radius: 20px;
    min-width: 80px;
    text-align: center; }

.portrait-box {
  margin: 10px auto; }
  .portrait-box .title-box {
    border: 1px solid #27303f;
    border-right-width: 3px;
    min-height: 50px;
    display: flex;
    border-radius: 5px;
    flex-wrap: nowrap;
    background: #27303f;
    color: #27303f; }
    .portrait-box .title-box.ra {
      border-radius: 5px 5px 0 0; }
    .portrait-box .title-box .left {
      color: #fff;
      width: 200px;
      padding: 0 30px;
      font-size: 22px;
      font-weight: 600; }
      .portrait-box .title-box .left:after {
        content: "";
        width: 0;
        height: 0;
        border-left: 16px solid;
        border-bottom: 24px solid;
        border-right: 16px solid !important;
        border-top: 24px solid !important;
        right: -16px;
        top: 0;
        position: absolute;
        z-index: 1; }
    .portrait-box .title-box .right {
      background: #fff;
      background-clip: padding-box;
      color: #333;
      width: calc(100% - 200px);
      padding-left: 40px; }
      .portrait-box .title-box .right:after {
        position: absolute;
        content: "";
        width: 1px;
        height: 0;
        border-right: 16px solid;
        border-top: 24px solid;
        border-left: 16px solid transparent !important;
        border-bottom: 24px solid transparent !important;
        border-color: #27303f;
        right: 0;
        top: 0;
        z-index: 1; }
    .portrait-box .title-box > div {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-color: inherit; }
    .portrait-box .title-box dl.line, .portrait-box .title-box dl.line dt, .portrait-box .title-box dl.line dd {
      display: block;
      float: left;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin: 0;
      cursor: none; }
    .portrait-box .title-box dl.line {
      width: 100%; }
      .portrait-box .title-box dl.line dt {
        font-weight: 600;
        width: 80px;
        text-align: right; }
      .portrait-box .title-box dl.line dd {
        width: calc(100% - 80px);
        text-align: left;
        padding-left: 5px; }
        .portrait-box .title-box dl.line dd .mid {
          padding-right: 5px; }
  .portrait-box .content-box {
    border: 3px solid #27303f;
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 5px;
    display: flex; }
    .portrait-box .content-box .inner-box {
      margin: 1px 0;
      display: flex;
      flex-direction: column; }
      .portrait-box .content-box .inner-box .inner-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 100%;
        color: #fff;
        background: #1976d2;
        font-size: 16px;
        font-weight: 600;
        border-radius: 4px 4px 0 0; }
      .portrait-box .content-box .inner-box .inner-content {
        display: flex;
        flex-direction: row;
        height: calc(100% - 40px);
        border: 2px solid #1976d2;
        padding: 5px;
        background: #fff;
        border-radius: 0 0 4px 4px; }
      .portrait-box .content-box .inner-box .remark-box .inner-title {
        height: 30px;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        background: #2d8aea; }
      .portrait-box .content-box .inner-box .remark-box .inner-content {
        height: calc(100% - 30px);
        border: 1px solid #1976d2; }
      .portrait-box .content-box .inner-box .tab-box {
        width: 100%;
        height: auto;
        min-height: 300px;
        display: flex;
        flex-direction: row; }
        .portrait-box .content-box .inner-box .tab-box .tab-header {
          height: 40px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center; }
          .portrait-box .content-box .inner-box .tab-box .tab-header .nav .nav-item .nav-link {
            width: auto;
            padding: 2px 20px;
            margin: 0 8px;
            color: #007bff;
            border: 1px solid #007bff;
            border-radius: 4px; }
            .portrait-box .content-box .inner-box .tab-box .tab-header .nav .nav-item .nav-link.active, .portrait-box .content-box .inner-box .tab-box .tab-header .nav .nav-item .nav-link:active, .portrait-box .content-box .inner-box .tab-box .tab-header .nav .nav-item .nav-link:focus {
              color: #fff;
              background: #007bff; }
          .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role {
            width: 100%;
            flex-direction: column; }
            .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item {
              width: 100%; }
              .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item .nav-link {
                width: 100%;
                text-align: center;
                padding: 2px 0px;
                margin: 0;
                color: #007bff;
                border: none;
                border-top: 1px solid #007bff;
                border-radius: 0; }
                .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item .nav-link.active, .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item .nav-link:active, .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item .nav-link:focus {
                  color: #fff;
                  background: #007bff; }
              .portrait-box .content-box .inner-box .tab-box .tab-header .nav.nav-role .nav-item:last-child .nav-link {
                border-bottom: 1px solid #007bff; }
        .portrait-box .content-box .inner-box .tab-box .tab-content {
          height: calc(100% - 40px);
          width: 100%;
          border: 1px solid #2d8aea;
          border-radius: 4px; }
          .portrait-box .content-box .inner-box .tab-box .tab-content .tab-pane {
            height: 100%; }
            .portrait-box .content-box .inner-box .tab-box .tab-content .tab-pane .body-content {
              height: 100%; }
          .portrait-box .content-box .inner-box .tab-box .tab-content .scene-box, .portrait-box .content-box .inner-box .tab-box .tab-content .cmd-box {
            cursor: pointer;
            margin: 7px 7px 0;
            padding: 5px 8px;
            border: 1px solid #2d8aea;
            font-size: 12px;
            border-radius: 3px;
            color: #3c3c3c;
            background: #f5f5f5; }
            .portrait-box .content-box .inner-box .tab-box .tab-content .scene-box .name, .portrait-box .content-box .inner-box .tab-box .tab-content .cmd-box .name {
              font-weight: 600;
              color: #FF4500; }
            .portrait-box .content-box .inner-box .tab-box .tab-content .scene-box .content, .portrait-box .content-box .inner-box .tab-box .tab-content .cmd-box .content {
              font-weight: 400;
              word-break: break-word;
              padding-left: 5px; }
          .portrait-box .content-box .inner-box .tab-box .tab-content .cmd-box.not-send {
            color: #aaa; }
          .portrait-box .content-box .inner-box .tab-box .tab-content .chart-box {
            width: 100%;
            height: 100%; }
      .portrait-box .content-box .inner-box .eval-box {
        background: #27303f; }
        .portrait-box .content-box .inner-box .eval-box .chart-box {
          min-height: 350px; }
    .portrait-box .content-box .span-textarea {
      height: 100%;
      width: 100%;
      display: flex;
      position: relative; }
      .portrait-box .content-box .span-textarea .span-remark {
        padding: 5px;
        background: inherit;
        font-weight: 600;
        font-family: 楷体;
        color: #333;
        border: none;
        overflow: auto;
        width: 100%; }
      .portrait-box .content-box .span-textarea button {
        display: none;
        width: auto;
        padding: 3px 10px;
        position: absolute;
        top: -5px;
        right: 30px; }
      .portrait-box .content-box .span-textarea textarea {
        display: none;
        height: 100%;
        width: 100%; }
    .portrait-box .content-box .eval-box {
      color: #fff; }
      .portrait-box .content-box .eval-box .span-textarea .span-remark {
        color: #eee; }
        .portrait-box .content-box .eval-box .span-textarea .span-remark.generate {
          color: #fff;
          background: rgba(255, 255, 255, 0.3);
          border: 2px solid #fff;
          border-radius: 5px; }
  .portrait-box .fdc {
    flex-direction: column !important; }