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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

413 lines
6.7 KiB
SCSS
Raw Normal View History

2021-01-06 16:15:28 -05:00
// Topic list navigation & controls
2021-01-06 16:15:28 -05:00
.list-controls {
.btn {
&:not(:first-child) {
margin-left: 0.5em;
}
}
.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;
}
2021-01-06 16:15:28 -05:00
}
}
.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;
2021-01-06 16:15:28 -05:00
float: left;
margin-right: 0.5em;
margin-bottom: 0;
}
2021-01-06 16:15:28 -05:00
}
#navigation-bar {
display: flex;
flex-wrap: wrap;
margin: 0;
margin-bottom: var(--nav-space);
2021-01-06 16:15:28 -05:00
margin-right: auto;
}
.navigation-controls {
display: flex;
align-items: stretch;
margin-bottom: var(--nav-space);
> * {
white-space: nowrap;
}
@include breakpoint(mobile-large) {
.edit-category {
.d-button-label {
display: none;
}
.d-icon {
margin: 0;
}
}
}
2021-01-06 16:15:28 -05:00
}
.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;
}
2021-01-06 16:15:28 -05:00
}
.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%;
2021-01-06 16:15:28 -05:00
height: auto;
img {
width: 100%;
height: inherit;
max-width: initial;
max-height: initial;
}
}
}
2021-01-06 16:15:28 -05:00
.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;
word-break: break-word;
}
}
.topic-list-main-link {
2018-01-12 17:27:38 -05:00
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 {
2016-08-30 22:32:39 -04:00
border-bottom: none;
}
.topic-list-separator {
text-align: center;
}
}
.topic-list-item-separator {
border: none;
td {
border-bottom: 1px solid var(--danger-medium);
2016-08-30 22:32:39 -04:00
line-height: 0.1em;
padding: 0;
2016-08-30 22:32:39 -04:00
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;
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
}
}
th,
td {
2018-01-12 17:27:38 -05:00
line-height: $line-height-large;
text-align: left;
vertical-align: middle;
}
th {
button .d-icon {
color: var(--primary-medium);
}
}
td {
color: var(--primary-medium);
2018-01-12 17:27:38 -05:00
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 {
2018-12-07 20:01:38 -05:00
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;
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
margin-top: 0.33em;
color: var(--primary-high);
2014-06-24 04:01:37 -04:00
word-wrap: break-word;
2018-01-12 17:27:38 -05:00
line-height: $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;
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);
2018-01-12 17:27:38 -05:00
font-size: $font-0;
cursor: default;
}
}
.topic-list {
.alert {
margin-bottom: 0;
2018-01-12 17:27:38 -05:00
font-size: $font-0;
}
.spinner {
margin-top: 40px;
}
}
Upgrade to FontAwesome 5 (take two) (#6673) * Add missing icons to set * Revert FA5 revert This reverts commit 42572ff * use new SVG syntax in locales * Noscript page changes (remove login button, center "powered by" footer text) * Cast wider net for SVG icons in settings - include any _icon setting for SVG registry (offers better support for plugin settings) - let themes store multiple pipe-delimited icons in a setting - also replaces broken onebox image icon with SVG reference in cooked post processor * interpolate icons in locales * Fix composer whisper icon alignment * Add support for stacked icons * SECURITY: enforce hostname to match discourse hostname This ensures that the hostname rails uses for various helpers always matches the Discourse hostname * load SVG sprite with pre-initializers * FIX: enable caching on SVG sprites * PERF: use JSONP for SVG sprites so they are served from CDN This avoids needing to deal with CORS for loading of the SVG Note, added the svg- prefix to the filename so we can quickly tell in dev tools what the file is * Add missing SVG sprite JSONP script to CSP * Upgrade to FA 5.5.0 * Add support for all FA4.7 icons - adds complete frontend and backend for renamed FA4.7 icons - improves performance of SvgSprite.bundle and SvgSprite.all_icons * Fix group avatar flair preview - adds an endpoint at /svg-sprites/search/:keyword - adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset * Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
.d-icon-thumbtack.unpinned {
@include fa-rotate(180deg, 1);
2014-04-10 04:34:50 -04:00
}
.top-title-buttons {
display: flex;
margin: 0.5em 0;
2020-05-05 17:18:36 -04:00
flex-wrap: wrap;
font-size: var(--font-0-rem);
button {
margin-right: 0.5em;
}
}
2014-08-30 01:54:07 -04:00
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;
2019-01-17 15:46:55 -05:00
align-self: center;
line-height: $line-height-medium;
}