crowdAI/crowdai

/* Tables */

table {
    display: table;
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
  font-weight: normal;
  overflow-x: auto;
  // Responsive tables
  @media screen and (max-width: 800px) {
        display: block;
    }
    a {
        color: $color-accent-dark;
    }
    thead {
        color: $color-grey-54;
        a {
            color: $color-grey-54;
            &:hover {

            }
        }
        th {
            padding: 16px 0;
        }
    }
    th {
        font-weight: 400;
    }
    tr {
        border-bottom: 1px solid #e6e6e6;
    }
    td {
        padding: 16px 0;
        vertical-align: middle;
    }
    .action {
        text-align: right;
        .btn {
            margin: -4px 0;
        }
    }
}


/* Table - Leaderboard */

table.leaderboard {
    margin-top: 35px;
    @media screen and (max-width: 800px) {
        margin-top: 31px;
    }
    @media screen and (max-width: 640px) {
        margin-top: 27px;
    }
    td {
        padding-right: 4px;
    }
    td:last-of-type {
        padding-right: 0;
    }
    .change {
        width: 24px;
    }
    .participant {
        img {
            @media screen and (max-width: 640px) {
                display: none;
            }
        }
    }
    .video {
        width: 120px;
        @media screen and (max-width: 560px) {
            display: none;
        }
    }
    .entries {
        @media screen and (max-width: 800px) {
            display: none;
        }
    }
    .post-challenge {
        @media screen and (max-width: 640px) {
            display: none;
        }
    }
    .last-submission {
        text-align: right;
        @media screen and (max-width: 1024px) {
            display: none;
        }
    }
    // Add to first position & user's own submission(s)
    tr.highlight {
        font-weight: 700;
        .badge {
            font-weight: 500;
        }
    }
}

/* Table - Submissions */

table.submissions {
    margin-top: 16px;
    border-top: 1px solid #e6e6e6;
    @media screen and (max-width: 800px) {
        margin-top: 31px;
    }
    @media screen and (max-width: 640px) {
        margin-top: 27px;
    }
    th,
    td {
        padding-right: 12px;
        vertical-align: top;
    }
    th:last-of-type,
    td:last-of-type {
        padding-right: 0;
    }
    th.id,
    td.id {
        font-weight: 500;
    }
    td.participant {
        a {
            &:hover {
                border-bottom: 1px solid $color-accent-dark;
            }
        }
    }
    th.status {
        min-width: 96px;
    }
    td.description {
        min-width: 220px;
    }
    th.submission,
    td.submission {
        text-align: right;
    }

}

/* Load more bar */

td.load-more {
    padding: 0;
    border-top: none;
}