discourse/app/assets/stylesheets/common/base/_topic-list.scss

428 lines
7.1 KiB
SCSS

// Topic list navigation & controls
.list-controls {
.btn {
&:not(:first-child) {
margin-left: 0.5em;
}
.d-button-label {
font-size: $font-up-1;
font-weight: normal;
}
}
.notifications-button {
margin-left: 0.5em;
}
a.badge-category {
padding: 3px 12px;
font-size: $font-up-1;
}
.combo-box .combo-box-header {
background: var(--secondary);
color: var(--primary);
border: 1px solid var(--primary-medium);
font-size: $font-0;
transition: none;
&:focus {
border-color: var(--tertiary);
}
}
.select-kit {
.select-kit-collection {
max-height: 40vh;
}
}
}
.navigation-container {
width: 100%;
--nav-space: 0.75em;
display: flex;
flex-wrap: wrap;
}
.category-breadcrumb {
display: block;
list-style: none;
padding: 0;
margin: 0;
> li {
// only target the top-level li, not dropdowns
display: flex;
float: left;
margin-right: 0.5em;
margin-bottom: 0;
}
}
#navigation-bar {
display: flex;
flex-wrap: wrap;
margin: 0 0 var(--nav-space);
margin-right: auto;
}
.navigation-controls {
display: flex;
align-items: stretch;
margin-bottom: var(--nav-space);
> * {
white-space: nowrap;
}
.select-kit button {
height: 100%; // ensures nested select-kit button matches height of button siblings
}
.btn {
// need to reduce vertical padding for consistent height
padding-top: 0.3em;
padding-bottom: 0.3em;
@include breakpoint(mobile-medium) {
font-size: var(--font-down-1);
}
}
@include breakpoint(mobile-large) {
.edit-category {
.d-button-label {
display: none;
}
.d-icon {
margin: 0;
}
}
}
}
.show-more {
width: 100%;
z-index: z("base");
&.has-topics {
position: absolute;
top: 7px;
}
}
.category-heading {
max-width: 100%;
p {
margin-top: 0;
line-height: $line-height-large;
font-size: $font-up-3;
}
}
.category-logo.aspect-image {
width: auto;
max-height: 150px;
}
@supports (--custom: property) {
.category-logo.aspect-image {
--max-height: 150px;
max-height: var(--max-height);
width: calc(var(--max-height) * var(--aspect-ratio));
max-width: 100%;
height: auto;
img {
width: 100%;
height: inherit;
max-width: initial;
max-height: initial;
}
}
}
.topic-list.shared-drafts {
margin-bottom: 1.5em;
}
// Topic list body
.topic-list-item.visited,
.latest-topic-list-item.visited,
.category-topic-link.visited {
a.title:not(.badge-notification) {
color: var(--primary-medium);
}
span.badge-category {
color: var(--primary-medium);
}
a.discourse-tag {
color: var(--primary-medium);
}
}
.topic-list-item {
.post-excerpt {
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: $font-down-2;
}
}
.topic-list-main-link {
font-size: $font-up-1;
a.title {
padding: 15px 0;
word-break: break-word;
color: var(--primary);
}
.anon & {
a.title:visited:not(.badge-notification) {
color: var(--primary-medium);
}
}
a.title.visited:not(.badge-notification) {
color: var(--primary-medium);
}
}
.topic-list {
width: 100%;
border-collapse: collapse;
> tbody > tr {
&.has-excerpt .star {
vertical-align: top;
margin-top: 2px;
}
&.last-visit {
border-bottom: none;
}
.topic-list-separator {
text-align: center;
}
}
.topic-list-item-separator {
border: none;
td {
border-bottom: 1px solid var(--danger-medium);
line-height: 0.1em;
padding: 0;
text-align: center;
}
td span {
position: relative; // Chrome needs this, otherwise the line is above the text
background-color: var(--secondary);
color: var(--danger-medium);
padding: 0 8px;
font-size: $font-down-1;
}
}
th,
td {
line-height: $line-height-large;
text-align: left;
vertical-align: middle;
}
th {
button .d-icon {
color: var(--primary-medium);
}
}
td {
color: var(--primary-medium);
font-size: $font-0;
}
.main-link {
@extend .topic-list-main-link;
.raw-topic-link > * {
pointer-events: none;
}
}
.unread-indicator {
&.read {
display: none;
}
.d-icon {
vertical-align: middle;
font-size: $font-down-5;
}
}
.link-bottom-line {
font-size: $font-down-1;
display: flex;
flex-wrap: wrap;
align-items: center;
.discourse-tags {
flex-wrap: wrap;
}
a.badge-wrapper.box,
a.discourse-tag.box {
padding-top: 0;
padding-bottom: 0;
}
.discourse-tag.simple:after,
.discourse-tag.box {
margin-right: 0.25em;
}
}
.topic-featured-link {
padding-left: 5px;
}
.topic-excerpt {
display: block;
font-size: $font-down-1;
margin-top: 0.33em;
color: var(--primary-high);
word-wrap: break-word;
line-height: $line-height-large;
padding-right: 20px;
}
.topic-statuses:empty {
display: none;
}
.num {
text-align: center;
a {
color: inherit;
}
.badge-posts {
font-weight: 700;
color: inherit;
padding: 15px 5px;
}
}
.num.posts {
a {
padding: 15px 5px;
}
}
.num.activity {
a {
padding: 15px 5px;
}
}
}
.heatmap-high,
.heatmap-high a,
.heatmap-high .d-icon,
.heatmap-high .d-button-label {
color: #fe7a15 !important;
}
.heatmap-med,
.heatmap-med a,
.heatmap-med .d-icon,
.heatmap-med .d-button-label {
color: #cf7721 !important;
}
.heatmap-low,
.heatmap-low a,
.heatmap-low .d-icon,
.heatmap-low .d-button-label {
color: #9b764f !important;
}
.topic-list .heatmap-high {
font-weight: bold;
}
.loading .topic-list {
border: 0;
box-shadow: none;
tr {
background-color: transparent;
}
}
#list-area {
margin-bottom: 100px;
.empty-topic-list {
padding: 10px;
}
.unseen {
background-color: transparent;
padding: 0;
border: 0;
color: var(--danger-medium);
font-size: $font-0;
cursor: default;
}
}
.topic-list {
.alert {
margin-bottom: 0;
font-size: $font-0;
}
.spinner {
margin-top: 40px;
}
}
.d-icon-thumbtack.unpinned {
@include fa-rotate(180deg, 1);
}
.top-title-buttons {
display: inline-flex;
margin: 0.25em 0;
flex-wrap: wrap;
button {
margin-right: 0.5em;
}
}
div.education {
color: var(--primary);
padding: 1em 2.5em 1em 1em;
margin-bottom: 2em;
border-top: 3px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
.badge-notification.new-posts {
vertical-align: text-bottom;
}
}
.list-cell {
padding: 12px 5px;
color: var(--primary-med-or-secondary-high);
}
.table-heading {
@extend .list-cell;
border-bottom: 3px solid var(--primary-low);
}
// This is not what we want:
//
// This is an overly-long topic title that would break just right
// *
//
// Instead, we want the line to break like this:
//
// This is an overly-long topic title that would break just
// right *
.topic-post-badges {
white-space: nowrap;
align-self: center;
line-height: $line-height-medium;
}