// 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; } } }