.directory { margin-bottom: 100px; .user-info { margin-bottom: 0; } .period-chooser { float: left; } .filter-name { float: right; } .total-rows { color: blend-primary-secondary(50%); text-align: right; } .spinner { clear: both; } table { width: 100%; margin-bottom: 1em; td, th { padding: 0.5em; text-align: left; border-bottom: 1px solid $primary-low; @media screen and (max-width: $small-width) { padding: .5em .25em; } .number, .time-read { font-size: $font-up-3; color: $primary-medium; @media screen and (max-width: $small-width) { font-size: $font-down-2; } } .time-read { white-space: nowrap; } } th.sortable { cursor: pointer; white-space: nowrap; width: 13%; .d-icon-heart { color: $love; margin-right: 0.5em; } .d-icon-chevron-down, .d-icon-chevron-up { margin-left: 0.5em; } &:hover { background-color: $primary-low; } } } .me { background-color: dark-light-choose($highlight-low, $highlight-medium); .username a, .name, .title, .number, .time-read { color: $primary-medium; } } }