discourse/app/assets/stylesheets/desktop/topic-list.scss

368 lines
6.6 KiB
SCSS

// --------------------------------------------------
// Topic lists
// --------------------------------------------------
// List controls
// --------------------------------------------------
.list-controls {
.nav {
float: left;
margin-bottom: 18px;
}
.btn {
float: right;
margin-left: 8px;
margin-bottom: 10px;
font-size: 1.143em;
font-weight: normal;
}
.search .btn {
float: none;
}
a.badge-category {
padding: 3px 12px;
font-size: 1.143em;
}
}
// Base list
// --------------------------------------------------
.topic-list {
margin: 0 0 10px;
.fa-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
.fa-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
a.title {color: $primary;}
.fa-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
th,
td {
padding: 12px 5px;
&:first-of-type {
padding-left: 10px;
}
&:last-of-type {
padding-right: 10px;
}
}
th {
button i.fa {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
}
> tbody > tr {
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
}
}
button.bulk-select {
padding: 0;
background: transparent;
&:hover {
color: dark-light-diff($primary, $secondary, 90%, -60%);
}
}
.star {
width: 20px;
padding-right: 0;
.fa-star {
position: relative;
}
+ .main-link {
padding-left: 5px;
}
}
.badge-notification {
position: relative;
top: -2px;
&.new-topic {
top: -1px;
padding-left: 5px;
}
}
.posters {
// we know there are up to 5 avatars of fixed size
// will be overridden by media width queries on narrow displays to 1 avatar's width
width: 145px;
min-width: 145px;
}
.posters {
> a {
float: left;
margin-right: 4px;
&:last-of-type {
margin-right: 0;
}
}
}
.posters a:first-child .avatar.latest:not(.single) {
box-shadow: 0 0 3px 1px desaturate(scale-color($tertiary, $lightness: 65%), 35%);
border: 2px solid desaturate(scale-color($tertiary, $lightness: 50%), 40%);
position: relative;
top: -2px;
left: -2px;
}
.sortable {
cursor: pointer;
&:hover {
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
}
@include unselectable;
}
.likes {
width: 65px;
}
.views {
width: 65px;
}
.posts {
width: 65px;
}
.post-actions {
clear: both;
width: auto;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
text-align: left;
font-size: 12px;
margin-top: 5px;
.fa {
margin-right: 2px;
}
a {
font-size: 11px;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
margin-right: 3px;
line-height: 20px;
}
}
.activity {
width: 60px;
&:lang(zh_CN) {
width: 80px;
}
span {
cursor: pointer;
}
}
.age {
width: 60px;
}
.with-year {
white-space: nowrap;
}
}
.topic-list tbody tr.has-excerpt .star {
vertical-align: top;
margin-top: 3px;
}
.topic-list.categories {
a.title {
color: $tertiary;
font-size: 0.929em;
}
th.posts {
position: relative;
}
th.stats {
width: 90px;
}
td.latest {
vertical-align: top;
padding: 0 8px 8px;
}
.last-user-info {
font-size: 0.857em;
}
.has-description {
td.category {
padding-top: 15px;
}
}
.category{
h3 {
display: inline-block;
font-size: 1.286em;
i {
margin-right: 5px;
}
a[href] {
color: $primary;
}
}
.subcategories {
margin-top: 10px;
}
.category-description {
margin-top: 10px;
}
.clear-badge {
color: $primary;
}
}
.featured-topic {
margin: 10px 0 0;
/* topic status glyphs */
i {
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important;
font-size: 0.929em;
}
a.last-posted-at, a.last-posted-at:visited {
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
font-size: 0.88em;
}
.badge {
font-size: 0.714em;
top: -1px;
}
}
}
.topic-list-bottom {
margin: 20px 0;
}
// Misc. stuff
// --------------------------------------------------
#list-area .top-lists h2 {
cursor: pointer;
margin: 5px 0 10px;
}
#list-area {
h2 {
margin: 20px 0 10px;
}
.show-more.has-topics {
top: 0;
.alert {
padding: 12px 35px 12px 14px;
}
}
}
.category-dropdown-menu {
max-height: 350px;
min-width: 131px;
}
#bulk-select {
position: fixed;
right: 20px;
top: 130px;
padding: 5px;
background-color: $secondary;
z-index: 99999;
}
button.dismiss-read {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
.category-notification-menu, .tags-admin-menu {
.dropdown-menu {
right: 0;
top: 30px;
bottom: auto;
left: auto;
}
}
.category-heading {
clear: both;
p {
line-height: 1.5em;
font-size: 1.5em;
}
}
.category-navigation {
clear: both;
}
.category-logo {
max-height: 150px;
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
/* Tablet (portrait) ----------- */
@media all
and (max-width : 850px) {
// slightly smaller font, tighten spacing on nav pills
.nav-pills {
> li > a {
font-size: 1em;
padding: 5px 10px;
}
}
// new topic just a "+" no text
button#create-topic {
span {
display: none;
}
i {
margin-right: 0;
}
}
.topic-list {
// tighter table header spacing
th:first-of-type {
padding: 12px 5px;
}
// smaller table cell font and cell spacing
th, td {
padding: 12px 2px;
font-size: 0.929em;
}
.main-link {
font-size: 1.071em;
}
.category {
min-width: 0;
padding: 0;
}
// suppress views column
th.views {
display: none;
}
td.views {
display: none;
}
// show only the first poster
.posters {
min-width: 0;
width: 50px;
a:not(.latest) {
display: none;
}
a.latest {
padding: 0 8px;
}
}
}
}