Current File : /home/jeconsul/public_html/wp-content/plugins/presto-player/src/admin/analytics/scss/utility.scss

.presto-flow > * + * {
  margin-top: var(--presto-flow-space, 2em);
}
.presto-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

table.presto-table {
  width: 100%;
  border-collapse: collapse;

  td {
    h2,
    h3 {
      margin: 0 0 8px 0;
    }
  }

  &.is-clickable {
    td {
      cursor: pointer;
      transition: background-color 0.25s ease;
    }

    tr:hover td {
      background-color: #f3f3f3;
    }
  }

  th,
  td {
    text-align: left;
    padding: 0.65rem;
    border-top: 1px solid rgb(226, 228, 231);
  }

  tr:first-child td {
    border-top: none;
  }

  th {
    color: #757575;
    background-color: #f7f7f7;
    border: none;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  table.presto-table {
    display: block;

    /* Force table to not be like tables anymore */
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr {
      margin: 0 0 1rem 0;
    }

    tr:nth-child(odd) {
      background: #f3f3f3;
    }

    td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #fff;
      position: relative;
      padding: 10px;
      padding-left: 50%;
    }

    td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 10px;
      left: 10px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
    }

    td:before {
      content: attr(data-title);
      font-weight: bold;
    }
  }
}