/**
* 表格列表页
*/

/**
* 列表页选项
*/
.typecho-list .typecho-pager {
}

.typecho-list-operate {
  display: flex;
  margin: 1em 0;

  & + .typecho-list-operate {
    margin-top: 0;
  }

  input, button, select {
    vertical-align: bottom;
  }

  input[type="checkbox"] {
    vertical-align: text-top;
  }

  a:hover {
    text-decoration: none;
  }

  > *:nth-child(2) {
    flex: 1;
  }

  .operate, .search {
    display: flex;
    align-items: center;
  }

  .operate {
    label {
      display: flex;
    }

    > * {
      margin-right: 5px;
    }
  }

  > *:nth-child(2) {
    justify-content: flex-end;

    &.search > * {
      margin-left: 5px;
    }
  }

  @include screen(phone, max) {
    & {
      flex-flow: column;

      > *:nth-child(2) {
        margin-top: 10px;
        justify-content: flex-start;

        > *:first-child {
          margin-left: 0;
        }
      }
    }
  }
}

.operate-delete, .operate-button-delete {
  color: #B94A48;
}

.operate-edit {
  color: #007700;
}

.operate-reply {
  color: #545c30;
}

/**
* 列表表格
*/
/** 增加表格标题 by 70 */
.typecho-list-table-title {
  margin: 1em 0;
  color: #999;
  text-align: center;
}

.typecho-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFF;
  table-layout: fixed;
  border: 30px solid #FFF;

  &.deactivate {
    color: #999;
  }

  .right {
    text-align: right;
  }

  th {
    padding: 0 10px 10px;
    border-bottom: 1px solid #F0F0EC;
    text-align: left;
  }

  td {
    padding: 10px;
    border-top: 1px solid #F0F0EC;
    word-break: break-all;

    pre {
      overflow: auto;
    }

    &.none {
      color: #999;
      text-align: center;
    }
  }

  .status {
    margin-left: 5px;
    color: #999;
    font-size: .92857em;
    font-style: normal;
  }

  tbody tr {
    &:hover {
      background-color: #F6F6F3;
    }

    &:has(input[type="checkbox"]:checked) {
      background-color: #FFF9E8;
    }
  }

  tr td .hidden-by-mouse {
    opacity: 0;
  }

  tr:hover td .hidden-by-mouse {
    opacity: 1;
  }

  tr td:first-child input[type="checkbox"] {
    display: block;
  }

  @include screen(phone, max) {
    & {
      border-width: 10px;

      th {
        padding: 0 5px 5px;
      }

      td {
        padding: 5px;
      }
    }
  }
}
