rhodecode/public/css/tables.less

// tables.less
// For use in RhodeCode application tables;
// see style guide documentation for guidelines.

// TABLES
table.rctable.table-bordered {
    border: 1px solid #eaeaea;
    border-radius: 2px;
    border-collapse: inherit;
    border-bottom: 0;

    th {
        background: @grey7;
        border-bottom: 0;
    }

    td {
        border-color: #eaeaea;
    }

    td.td-status {
        padding: 0 0 0 10px;
    }
}

.rctable,
table.rctable,
table.dataTable {
    clear:both;
    width: 100%;
    margin: 0 auto @padding;
    padding: 0;
    vertical-align: baseline;
    line-height:1.5em;
    border: none;
    outline: none;
    border-collapse: collapse;
    border-spacing: 0;
    color: @grey2;

    b {
        font-weight: normal;
    }

    em {
        font-weight: bold;
        font-style: normal;
    }

    .td-user {
      .rc-user {
        white-space: nowrap;
      }
      .user-perm-duplicate {
          color: @grey4;
          a {
            color: @grey4;
          }
      }
    }

    .td-email {
      white-space: nowrap;
    }

    th,
    td {
        height: auto;
        max-width: 20%;
        padding: .65em 0 .65em 1em;
        vertical-align: middle;
        border-bottom: @border-thickness solid @grey5;
        white-space: normal;

        &.td-radio,
        &.td-checkbox {
            padding-right: 0;
            text-align: center;

            input {
                margin: 0 1em;
            }
        }

        &.truncate-wrap {
            white-space: nowrap !important;
        }

        pre {
            margin: 0;
        }

        .show_more {
            height: inherit;
        }
    }

    .expired td {
        background-color: @grey7;
    }
    .inactive td {
        background-color: @grey6;
    }
    th {
        text-align: left;
        font-weight: @text-semibold-weight;
        font-family: @text-semibold;
    }

    .hl {
        td {
            background-color: lighten(@alert4,25%);
        }
    }

// Special Data Cell Types
// See style guide for desciptions and examples.

    td {

        &.user {
            padding-left: 1em;
        }

        &.td-rss {
            width: 20px;
            min-width: 0;
            margin: 0;
        }

        &.quick_repo_menu {
            width: 15px;
            text-align: center;

            &:hover {
                background-color: @grey5;
            }
        }

        &.td-icon {
            min-width: 20px;
            width: 20px;
        }

        &.td-hash {
            min-width: 80px;
            width: 200px;

            .obsolete {
                text-decoration: line-through;
                color: lighten(@grey2,25%);
            }
        }

        &.td-sha {
            white-space: nowrap;
        }

        &.td-graphbox {
            width: 100px;
            max-width: 100px;
            min-width: 100px;
        }

        &.td-time {
            width: 160px;
            white-space: nowrap;
        }

        &.annotate{
            padding-right: 0;

            div.annotatediv{
                margin: 0 0.7em;
            }
        }

        &.tags-col {
            padding-right: 0;
        }

        &.td-description {
            min-width: 350px;

            &.truncate, .truncate-wrap {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 350px;
            }
        }

        &.td-grid-name {
            white-space: nowrap;
            min-width: 300px;
        }

        &.td-componentname {
            white-space: nowrap;
        }

        &.td-name {

        }

        &.td-journalaction {
            min-width: 300px;

            .journal_action_params {
                // waiting for feedback
            }
        }

        &.td-active {
            padding-left: .65em;
        }

        &.td-issue-tracker-name {
            width: 180px;
            input {
                width: 180px;
            }

        }

        &.td-issue-tracker-regex {
            white-space: nowrap;

            min-width: 300px;
            input {
                min-width: 300px;
            }

        }

        &.td-url {
            white-space: nowrap;
        }

        &.td-comments {
            min-width: 3em;
        }

        &.td-buttons {
            padding: .3em 0;
        }
        &.td-align-top {
            vertical-align: text-top
        }
        &.td-action {
            // this is for the remove/delete/edit buttons
            padding-right: 0;
            min-width: 95px;
            text-transform: capitalize;

            i {
                display: none;
            }
        }

        // TODO: lisa: this needs to be cleaned up with the buttons
        .grid_edit,
        .grid_delete {
            display: inline-block;
            margin: 0 @padding/3 0 0;
            font-family: @text-light;

            i {
                display: none;
            }
        }

        .grid_edit + .grid_delete {
            border-left: @border-thickness solid @grey5;
            padding-left: @padding/2;
        }

        &.td-compare {

            input {
                margin-right: 1em;
            }

            .compare-radio-button {
                margin: 0 1em 0 0;
            }


        }

        &.td-tags {
            padding: .5em 1em .5em 0;
            width: 140px;

            .tag {
                margin: 1px;
                float: left;
            }
        }

        .icon-svn, .icon-hg, .icon-git {
            font-size: 1.4em;
        }

        &.collapse_commit,
        &.expand_commit {
            padding-right: 0;
            padding-left: 1em;
            cursor: pointer;
            width: 20px;
        }
    }

    .perm_admin_row {
        color: @grey4;
        background-color: @grey6;
    }

    .noborder {
        border: none;

        td {
            border: none;
        }
    }
}

.rctable.audit-log {
    td {
                vertical-align: top;
    }
}


// TRUNCATING
// TODO: lisaq: should this possibly be moved out of tables.less?
// for truncated text
// used inside of table cells and in code block headers
.truncate-wrap {
    white-space: nowrap !important;

    //truncated text
    .truncate {
        max-width: 450px;
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;

        &.autoexpand {
            width: 120px;
            margin-right: 200px;
        }
    }
    &:hover .truncate.autoexpand {
        overflow: visible;
    }

    .tags-truncate {
        width: 150px;
        height: 22px;
        overflow: hidden;

        .tag {
            display: inline-block;
        }

        &.truncate {
            height: 22px;
            max-height:2em;
            width: 140px;
        }
    }
}

.apikeys_wrap {
    margin-bottom: @padding;

    table.rctable td:first-child {
        width: 120px;
    }
}



// SPECIAL CASES

// Repository Followers
table.rctable.followers_data {
    width: 75%;
    margin: 0;
}

// Repository List
// Group Members List
table.rctable.group_members,
table#repo_list_table {
    min-width: 600px;
}

#no_grid_data {
    text-align: center;
}

#grid_data_loading {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    padding: 80px 20px;
}

// Keyboard mappings
table.keyboard-mappings {
    th {
        text-align: left;
        font-weight: @text-semibold-weight;
        font-family: @text-semibold;
    }
}

// Branches, Tags, and Bookmarks
#obj_list_table.dataTable {
    td.td-time {
        padding-right: 1em;
    }
}

// User Admin
.rctable.useremails,
.rctable.account_emails {
    .tag,
    .btn {
        float: right;
    }
    .btn { //to line up with tags
        margin-right: 1.65em;
    }
}

// User List
#user_list_table {

    td.td-user {
        min-width: 100px;
    }
}


// Settings (no border)
table.rctable.dl-settings {
    td {
        border: none;
        vertical-align: baseline;
    }
}


// Statistics
table.trending_language_tbl {
    width: 100%;
    line-height: 1em;

    td div {
        overflow: visible;
    }
}

.trending_language_tbl, .trending_language_tbl td {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

.trending_language_tbl, .trending_language_tbl tr {
    border-spacing: 0 3px;
}

.trending_language {
    position: relative;
    overflow: hidden;
    color: @text-color;
    width: 400px;

    .lang-bar {
        z-index: 1;
        overflow: hidden;
        background-color: @rcblue;
        color: #FFF;
        text-decoration: none;
    }

}

// Changesets
#changesets.rctable {

    // td must be fixed height for graph
    td {
        height: 32px;
        padding: 0 1em 0 0;
        vertical-align: middle;
        white-space: nowrap;

        &.td-description {
            white-space: normal;
        }

        &.expand_commit {
            padding-right: 0;
            cursor: pointer;
            width: 20px;
        }
    }
}

// Compare
table.compare_view_commits {
    margin-top: @space;

    td.td-time {
        padding-left: .5em;
    }

    // special case to not show hover actions on hidden indicator
    tr.compare_select_hidden:hover {
        cursor: inherit;

        td {
            background-color: inherit;
        }
    }

    tr:hover {
        cursor: pointer;

        td {
            background-color: lighten(@alert4,25%);
        }
    }


}

.file_history {
    td.td-actions {
        text-align: right;
    }
}


// Gist List
#gist_list_table {
    td {
        vertical-align: middle;

        div{
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }

        &.td-expire {
            width: 200px;
        }
        &.td-gist-type {
            width: 100px;
        }
    }
}