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

387 lines
6.5 KiB
SCSS
Raw Normal View History

2013-09-06 03:37:07 +08:00
// --------------------------------------------------
// Topic lists
// --------------------------------------------------
// List controls
// --------------------------------------------------
.list-controls {
2013-09-06 03:37:07 +08:00
.nav {
float: left;
margin-bottom: 18px;
2013-09-06 03:37:07 +08:00
}
2013-09-06 03:37:07 +08:00
.btn {
float: right;
margin-left: 8px;
margin-bottom: 10px;
font-size: 1.143em;
2013-10-29 00:25:52 +08:00
font-weight: normal;
2013-09-06 03:37:07 +08:00
}
2013-10-29 05:37:31 +08:00
a.badge-category {
padding: 3px 12px;
font-size: 1.143em;
2013-10-29 05:37:31 +08:00
}
2013-09-06 03:37:07 +08:00
}
// Base list
// --------------------------------------------------
.topic-list {
2014-01-14 08:02:14 +08:00
margin: 0 0 10px;
.fa-thumb-tack { color: scale-color($primary, $lightness: 50%); }
.fa-thumb-tack.unpinned { color: scale-color($primary, $lightness: 50%); }
2014-06-20 16:26:59 +08:00
a.title {color: $primary;}
a.title:visited:not(.badge-notification), .fa-bookmark { color: scale-color($primary, $lightness: 50%); }
2013-09-06 03:37:07 +08:00
th,
td {
padding: 12px 5px;
2013-09-06 03:37:07 +08:00
&:first-of-type {
padding-left: 10px;
}
&:last-of-type {
padding-right: 10px;
}
}
th {
2014-05-12 13:02:05 +08:00
button i.fa {color: scale-color($primary, $lightness: 50%);}
2013-09-06 03:37:07 +08:00
}
2014-07-28 22:33:23 +08:00
> tbody > tr {
&:nth-child(odd) {
2014-07-28 22:33:23 +08:00
background-color: darken($secondary, 3%);
}
&:nth-child(even) {
2014-07-28 22:33:23 +08:00
background-color: $secondary;
}
2014-08-22 22:45:51 +08:00
&.highlighted {
background-color: dark-light-diff($tertiary, $secondary, 90%, -41%);
2014-08-22 22:45:51 +08:00
}
2014-07-28 22:33:23 +08:00
}
button.bulk-select {
padding: 0;
background: transparent;
&:hover {
color: scale-color-diff();
}
}
2013-09-06 03:37:07 +08:00
.star {
width: 20px;
padding-right: 0;
2013-12-10 05:27:49 +08:00
.fa-star {
2013-09-06 03:37:07 +08:00
position: relative;
}
+ .main-link {
padding-left: 5px;
2013-09-06 03:37:07 +08:00
}
}
.badge-notification {
position: relative;
top: -2px;
2014-09-04 09:07:15 +08:00
&.new-topic {
2015-02-05 03:29:52 +08:00
top: -1px;
2014-09-04 09:07:15 +08:00
padding-left: 5px;
}
2013-09-06 03:37:07 +08:00
}
2014-09-04 09:07:15 +08:00
2013-09-06 03:37:07 +08: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-06 03:37:07 +08:00
> a {
float: left;
margin-right: 4px;
&:last-of-type {
margin-right: 0;
}
}
}
.avatar {
&.latest:not(.single) {
box-shadow: 0 0 6px 1px desaturate(scale-color($tertiary, $lightness: 30%), 35%);
2013-09-06 03:37:07 +08:00
}
}
2013-11-12 08:35:57 +08:00
.sortable {
cursor: pointer;
&:hover {
2014-08-06 21:31:13 +08:00
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
2013-11-12 08:35:57 +08:00
}
@include unselectable;
}
2013-09-06 03:37:07 +08:00
.likes {
2013-11-15 04:50:36 +08:00
width: 65px;
}
.views {
width: 65px;
}
.posts {
width: 65px;
2013-09-06 03:37:07 +08:00
}
.post-actions {
clear: both;
width: auto;
color: scale-color($primary, $lightness: 50%);
text-align: left;
font-size: 12px;
margin-top: 5px;
.fa {
margin-right: 2px;
}
a {
font-size: 11px;
color: scale-color($primary, $lightness: 50%);
margin-right: 3px;
line-height: 20px;
}
}
2013-09-06 03:37:07 +08:00
.activity {
width: 60px;
&:lang(zh_CN) {
width: 80px;
}
span {
cursor: pointer;
}
2013-09-06 03:37:07 +08:00
}
.age {
width: 60px;
}
.with-year {
white-space: nowrap;
}
2013-09-06 03:37:07 +08:00
}
.topic-list tbody tr.has-excerpt .star {
vertical-align: top;
margin-top: 3px;
2013-10-16 08:31:54 +08:00
}
.topic-list.categories {
a.title {
color: $tertiary;
font-size: 0.929em;
}
2014-06-20 16:26:59 +08:00
a.title:visited:not(.badge-notification) {color: scale-color($tertiary, $lightness: 35%);}
th.posts {
2013-10-21 12:24:37 +08:00
position: relative;
}
2014-07-28 22:33:23 +08:00
> tbody > tr {
&:nth-child(odd) {
background-color: darken($secondary, 3%);
}
&:nth-child(even) {
background-color: $secondary;
}
}
th.stats {
width: 90px;
}
td.latest {
vertical-align: top;
padding: 8px;
2015-02-08 07:46:04 +08:00
padding-top: 0;
}
.last-user-info {
font-size: 0.857em;
}
.has-description {
td.category {
padding-top: 15px;
}
}
.category{
width: 45%;
2013-11-01 06:02:24 +08:00
h3 {
display: inline-block;
font-size: 1.286em;
i {
margin-right: 5px;
}
a[href] {
color: $primary;
}
}
2013-11-01 06:02:24 +08: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: scale-color($primary, $lightness: 50%) !important;
font-size: 0.929em;
}
a.last-posted-at, a.last-posted-at:visited {
color: scale-color($primary, $lightness: 50%);
2015-02-08 07:46:04 +08:00
font-size: 0.88em;
}
.badge {
font-size: 0.714em;
top: -1px;
}
}
}
.topic-list-bottom {
2013-09-06 03:37:07 +08:00
margin: 20px 0;
}
// Misc. stuff
// --------------------------------------------------
#list-area .top-lists h2 { margin: 5px 0 10px; }
#list-area {
2013-12-24 07:50:36 +08:00
h2 {
margin: 20px 0 10px;
}
2013-10-26 03:44:28 +08:00
}
.category-dropdown-menu {
2013-12-03 10:09:16 +08:00
max-height: 350px;
2015-03-05 11:15:21 +08:00
min-width: 129px;
2013-09-06 03:37:07 +08:00
}
2013-10-26 03:44:28 +08:00
2014-01-30 02:35:24 +08:00
#bulk-select {
position: fixed;
right: 20px;
padding: 5px;
background-color: $secondary;
2014-01-30 02:35:24 +08:00
}
button.dismiss-read {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
.category-notification-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-logo {
max-height: 150px;
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
/* Tablet (portrait) ----------- */
@media all
and (max-width : 850px) {
// add some left padding to topics otherwise everything is 100% flush
// with left edge in portrait tablet, which looks awful
#topic-title {
padding-left: 10px;
}
.container.posts {
padding-left: 10px;
}
.nav-pills {
> li > a {
font-size: 1em;
padding: 5px 10px ;
}
}
.list-controls {
padding: 0 5px;
.btn {
font-size: 1em
}
.category-dropdown-menu {
min-width: 139px;
}
a.badge-category {
font-size: 1em;
}
}
.topic-list {
.categories td.category {
padding-left: 10px;
}
th:first-of-type {
padding: 12px 5px;
}
th {
.btn .fa {
margin-right: 2px;
}
}
th, td {
padding: 12px 2px;
font-size: 0.929em;
}
.star {
padding: 12px 5px;
width: auto;
}
.main-link {
font-size: 1.071em;
padding: 12px 8px 12px 0px;
}
.likes {
width: auto;
}
.category {
min-width: 0;
padding: 0;
}
.topic-excerpt {
padding-right: 20px;
}
th.posters {
text-align: center;
}
.posters {
min-width: 0;
width: 50px;
a:not(.latest) {
display: none;
}
a.latest {
padding: 0 8px;
}
}
}
}