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

432 lines
7.4 KiB
SCSS

// Topic list navigation & controls
.list-controls {
a.badge-category {
padding: 3px 12px;
font-size: var(--font-up-1);
}
.combo-box .combo-box-header {
background: var(--secondary);
color: var(--primary);
border: 1px solid var(--primary-medium);
font-size: var(--font-0);
transition: none;
height: 100%;
&: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: flex;
flex-wrap: wrap;
gap: var(--nav-space) 0; // used if the breadcrumb dropdowns wrap
list-style: none;
padding: 0;
margin: 0 0 var(--nav-space) 0;
> li {
// only target the top-level li, not dropdowns
display: flex;
margin-right: 0.5em;
margin-bottom: 0;
}
}
#navigation-bar {
display: flex;
flex-wrap: wrap;
margin: 0;
margin-bottom: var(--nav-space);
margin-right: auto;
}
.navigation-controls {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: var(--nav-space);
gap: var(--nav-space) 0; // used if the buttons wrap
> * {
white-space: nowrap;
&:not(:last-child) {
margin-right: 0.5em;
}
}
.select-kit-header {
height: 100%;
}
@include breakpoint(mobile-large) {
.edit-category {
.d-button-label {
display: none;
}
.d-icon {
margin: 0;
}
}
}
}
.category-heading {
max-width: 100%;
p {
margin-top: 0;
line-height: var(--line-height-large);
font-size: var(--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);
max-width: 100%;
height: auto;
img {
width: calc(var(--max-height) * var(--aspect-ratio));
max-width: 100%;
height: inherit;
max-height: var(--max-height);
}
}
}
.topic-list.shared-drafts {
margin-bottom: 1.5em;
}
// Topic list body
.topic-list-item.visited .topic-list-data,
.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: var(--font-down-2);
word-break: break-word;
}
}
.topic-list-main-link {
font-size: var(--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);
}
}
.sticky-header .topic-list-header {
@include sticky;
top: var(--header-offset, 60px);
background: var(--secondary);
z-index: 2;
}
.topic-list {
width: 100%;
border-collapse: collapse;
> .topic-list-body > .topic-list-item {
&.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;
.topic-list-data {
border-top: 1px solid var(--danger-medium);
line-height: 0em;
padding: 0;
text-align: center;
}
.topic-list-data 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: var(--font-down-1);
}
}
.topic-list-data {
line-height: var(--line-height-large);
text-align: left;
vertical-align: middle;
}
.btn-flat .d-icon {
color: currentColor;
}
td {
color: var(--primary-medium);
font-size: var(--font-0);
}
.main-link {
@extend .topic-list-main-link;
.raw-topic-link > * {
pointer-events: none;
}
&.focused {
box-shadow: inset 3px 0 0 var(--tertiary);
}
/* we have a custom focus indicator so we can remove the native one */
.title:focus {
outline: none;
}
.title:focus-visible {
outline: none;
}
}
.unread-indicator {
&.read {
display: none;
}
.d-icon {
vertical-align: middle;
font-size: var(--font-down-5);
}
}
.link-bottom-line {
font-size: var(--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.box {
margin-right: 0.25em;
}
}
.topic-featured-link {
padding-left: 5px;
}
.topic-excerpt {
display: block;
font-size: var(--font-down-1);
margin-top: 0.33em;
color: var(--primary-high);
word-wrap: break-word;
line-height: var(--line-height-large);
padding-right: 20px;
}
.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;
.topic-list-item {
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: var(--font-0);
cursor: default;
}
.show-more {
width: 100%;
z-index: z("base");
position: absolute;
top: 0;
.alert {
margin: 0;
padding: 1.1em 2em 1.1em 0.65em;
}
}
}
.topic-list {
.alert {
margin-bottom: 0;
font-size: var(--font-0);
}
.spinner {
margin-top: 40px;
}
}
.d-icon-thumbtack.unpinned {
@include fa-rotate(180deg, 1);
}
.top-title-buttons {
display: flex;
margin: 0.5em 0;
flex-wrap: wrap;
font-size: var(--font-0-rem);
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.unread-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: var(--line-height-medium);
}