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

370 lines
6.5 KiB
SCSS
Raw Normal View History

2013-09-05 15:37:07 -04:00
// --------------------------------------------------
// Topic lists
// --------------------------------------------------
// List controls
// --------------------------------------------------
.list-controls {
2013-09-05 15:37:07 -04:00
.nav {
float: left;
margin-bottom: 18px;
2013-09-05 15:37:07 -04:00
}
2013-09-05 15:37:07 -04:00
.btn {
float: right;
margin-left: 8px;
margin-bottom: 10px;
font-size: 1.143em;
2013-10-28 12:25:52 -04:00
font-weight: normal;
2013-09-05 15:37:07 -04:00
}
2013-10-28 17:37:31 -04:00
2015-04-02 01:02:07 -04:00
.search .btn {
float: none;
}
a.badge-category, .dropdown-header {
padding: 3px 12px;
font-size: 1.143em;
2013-10-28 17:37:31 -04:00
}
2013-09-05 15:37:07 -04:00
}
// Base list
// --------------------------------------------------
.topic-list-icons {
.d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
.d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
2014-06-20 04:26:59 -04:00
a.title {color: $primary;}
.d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
}
.topic-list {
@extend .topic-list-icons;
margin: 0 0 10px;
2013-09-05 15:37:07 -04:00
th,
td {
padding: 12px 5px;
2013-09-05 15:37:07 -04:00
&:first-of-type {
padding-left: 10px;
}
&:last-of-type {
padding-right: 10px;
}
}
th {
button .d-icon {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
2013-09-05 15:37:07 -04:00
}
2014-07-28 10:33:23 -04:00
> tbody > tr {
2014-08-22 10:45:51 -04:00
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
2014-08-22 10:45:51 -04:00
}
2014-07-28 10:33:23 -04:00
}
button.bulk-select {
padding: 0;
font-size: 1.05em;
margin-right: 0.3em;
}
2013-09-05 15:37:07 -04:00
.star {
width: 20px;
padding-right: 0;
.d-icon-star {
2013-09-05 15:37:07 -04:00
position: relative;
}
+ .main-link {
padding-left: 5px;
2013-09-05 15:37:07 -04:00
}
}
.badge-notification {
position: relative;
top: -2px;
2014-09-03 21:07:15 -04:00
&.new-topic {
2015-02-04 14:29:52 -05:00
top: -1px;
2014-09-03 21:07:15 -04:00
padding-left: 5px;
}
2013-09-05 15:37:07 -04:00
}
2014-09-03 21:07:15 -04:00
2013-09-05 15:37:07 -04:00
.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 {
2013-09-05 15:37:07 -04:00
> 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;
}
2013-11-11 19:35:57 -05:00
.sortable {
cursor: pointer;
&:hover {
2017-06-11 22:20:14 -04:00
background-color: $primary-low;
2013-11-11 19:35:57 -05:00
}
@include unselectable;
}
2013-09-05 15:37:07 -04:00
.likes {
2013-11-14 15:50:36 -05:00
width: 65px;
}
.views {
width: 65px;
}
.posts {
width: 65px;
2013-09-05 15:37:07 -04:00
}
.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;
}
}
2013-09-05 15:37:07 -04:00
.activity {
width: 60px;
&:lang(zh_CN) {
width: 80px;
}
span {
cursor: pointer;
}
2013-09-05 15:37:07 -04:00
}
.age {
width: 60px;
}
.with-year {
white-space: nowrap;
}
2013-09-05 15:37:07 -04:00
}
.topic-list tbody tr.has-excerpt .star {
vertical-align: top;
margin-top: 3px;
2013-10-15 20:31:54 -04:00
}
.topic-list.categories {
a.title {
color: $tertiary;
font-size: 0.929em;
}
2014-06-20 04:26:59 -04:00
th.posts {
2013-10-21 00:24:37 -04:00
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;
}
}
2013-10-31 18:02:24 -04:00
.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%));
2015-02-07 18:46:04 -05:00
font-size: 0.88em;
}
.badge {
font-size: 0.714em;
top: -1px;
}
}
}
.topic-list-bottom {
2013-09-05 15:37:07 -04:00
margin: 20px 0;
}
// Misc. stuff
// --------------------------------------------------
2015-07-01 16:26:21 -04:00
#list-area .top-lists h2 {
cursor: pointer;
margin: 5px 0 10px;
}
#list-area {
2013-12-23 18:50:36 -05:00
h2 {
margin: 20px 0 10px;
}
.show-more.has-topics {
top: 0;
.alert {
padding: 12px 35px 12px 14px;
}
}
2013-10-25 15:44:28 -04:00
}
.category-dropdown-menu {
2013-12-02 21:09:16 -05:00
max-height: 350px;
2015-03-04 22:15:21 -05:00
min-width: 131px;
2013-09-05 15:37:07 -04:00
}
2013-10-25 15:44:28 -04:00
2014-01-29 13:35:24 -05:00
#bulk-select {
position: fixed;
right: 20px;
top: 130px;
2014-01-29 13:35:24 -05:00
padding: 5px;
background-color: $secondary;
z-index: 99999;
2014-01-29 13:35:24 -05:00
}
button.dismiss-read {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
2016-06-06 14:18:15 -04:00
.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;
}
}
}
}