mirror of
https://github.com/discourse/discourse.git
synced 2026-08-05 19:53:47 +08:00
63aee728a6Previously, since Horizon high-context topic card rendered its own copy of the title markup, it omitted the `topic-list-after-title` plugin outlet, so discourse-calendar event dates appeared in simple cards but were missing from high-context cards. This change adds the `topic-list-after-title` outlet to the card title. This also means other uses of this outlet will show up in Horizon, but that seems fine by me.
654 lines
14 KiB
SCSS
Vendored
654 lines
14 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
:root {
|
|
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
|
|
--topic-list-item-background-color: var(--d-content-background);
|
|
--topic-list-item-background-color--visited: var(--d-content-background);
|
|
--topic-card-shadow: rgb(var(--tertiary-rgb), 0.1);
|
|
}
|
|
|
|
.badge-category__wrapper {
|
|
--badge-category-bg: light-dark(
|
|
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
|
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
|
);
|
|
--badge-category-text: light-dark(
|
|
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
|
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
|
);
|
|
}
|
|
|
|
.topic-list.--d-topic-cards .topic-list-header .topic-list-data {
|
|
max-width: unset;
|
|
}
|
|
|
|
.topic-list .topic-list-item-separator {
|
|
display: none;
|
|
}
|
|
|
|
.topic-list > .topic-list-body > .topic-list-item.last-visit {
|
|
border-bottom: 1px solid var(--primary-300);
|
|
|
|
&:hover {
|
|
border-color: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
.topic-list,
|
|
.category-boxes .subcategories {
|
|
.badge-category__wrapper {
|
|
border-radius: var(--d-border-radius);
|
|
padding: 3px 6px;
|
|
background-color: var(--badge-category-bg);
|
|
|
|
@include viewport.until(md) {
|
|
padding: 2px 6px;
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
.badge-category__name {
|
|
color: var(--badge-category-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
// undo all the above for the few instances that arent styled like traditional badges
|
|
.category-text-title {
|
|
.badge-category__wrapper {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
|
|
.badge-category__name {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-list.--d-topic-cards .topic-list-body {
|
|
border: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
|
|
@include viewport.until(lg) {
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.topic-list.--d-topic-cards .topic-list-body .topic-list-item {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topic-list.--d-topic-cards
|
|
.topic-list-body
|
|
.topic-list-item:not(.--high-context) {
|
|
position: relative;
|
|
text-overflow: ellipsis;
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--primary-300);
|
|
display: grid;
|
|
grid-template-columns: min-content min-content min-content auto min-content;
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category activity activity .";
|
|
gap: var(--space-3);
|
|
border-radius: var(--d-border-radius);
|
|
|
|
&.--has-replies {
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category likes-replies activity .";
|
|
}
|
|
|
|
&:not(.--has-replies) {
|
|
.topic-likes-replies-data {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
max-width: 100vw;
|
|
box-sizing: border-box;
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category activity activity . ";
|
|
border: none;
|
|
border-bottom: 1px solid var(--primary-200);
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
padding: var(--space-4) var(--space-3);
|
|
|
|
&.--has-replies {
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category likes-replies activity . ";
|
|
}
|
|
}
|
|
|
|
&.bulk-selecting {
|
|
grid-template-columns: min-content min-content min-content min-content auto min-content;
|
|
grid-template-areas:
|
|
"bulk-select creator title title title status"
|
|
"bulk-select category category activity activity .";
|
|
|
|
&.--has-replies {
|
|
grid-template-areas:
|
|
"bulk-select creator title title title status"
|
|
"bulk-select category category activity likes-replies .";
|
|
|
|
@include viewport.until(sm) {
|
|
grid-template-areas:
|
|
"bulk-select creator title title title status"
|
|
"bulk-select . category likes-replies activity . ";
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
grid-template-columns: min-content min-content min-content min-content auto min-content;
|
|
grid-template-areas:
|
|
"bulk-select creator title title title status"
|
|
"bulk-select . category activity activity . ";
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.discourse-no-touch & {
|
|
box-shadow: 1px 1px 12px 2px var(--topic-card-shadow);
|
|
background: var(--d-content-background);
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
border: 1px solid var(--accent-color);
|
|
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
|
}
|
|
|
|
&.excerpt-expanded {
|
|
@include viewport.until(sm) {
|
|
.topic-excerpt,
|
|
.link-bottom-line {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category activity activity . "
|
|
". excerpt excerpt excerpt excerpt";
|
|
|
|
&.has-replies {
|
|
grid-template-areas:
|
|
"creator title title title status"
|
|
". category likes-replies activity ."
|
|
". excerpt excerpt excerpt excerpt";
|
|
}
|
|
|
|
.bulk-select-enabled & {
|
|
grid-template-areas:
|
|
"bulk-select creator title title title status"
|
|
"bulk-select category category activity likes-replies likes-replies "
|
|
" bulk-select excerpt excerpt excerpt excerpt excerpt";
|
|
}
|
|
}
|
|
}
|
|
|
|
.link-top-line {
|
|
grid-area: title;
|
|
font-weight: 500;
|
|
line-height: calc(var(--space-3) * 2); // avatar sizing
|
|
|
|
@include viewport.until(sm) {
|
|
line-height: normal;
|
|
}
|
|
|
|
.title {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// display contents
|
|
td.main-link,
|
|
td.posters,
|
|
td.posts,
|
|
td.views,
|
|
td.activity,
|
|
td.topic-category-status-data {
|
|
display: contents;
|
|
}
|
|
|
|
td.num.posts a {
|
|
padding: 0;
|
|
}
|
|
|
|
// display:nones
|
|
td.main-link a.topic-status,
|
|
.link-bottom-line,
|
|
.badge-notification.new-topic::before {
|
|
display: none;
|
|
}
|
|
|
|
.topic-category-data {
|
|
grid-area: category;
|
|
display: flex;
|
|
}
|
|
|
|
.badge-category__wrapper {
|
|
border-radius: var(--d-border-radius);
|
|
|
|
@include viewport.until(sm) {
|
|
border-radius: var(--d-border-radius-small);
|
|
max-width: 125px;
|
|
}
|
|
padding: 0.25em 0.5rem;
|
|
background-color: var(--badge-category-bg);
|
|
|
|
@include viewport.until(md) {
|
|
padding: 0.25em 0.5rem;
|
|
}
|
|
|
|
.badge-category {
|
|
align-items: center;
|
|
}
|
|
|
|
.badge-category__name {
|
|
font-size: var(--font-down-1);
|
|
color: var(--badge-category-text);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.d-icon {
|
|
width: var(--font-down-1);
|
|
height: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
// OP avatar
|
|
.topic-creator-data {
|
|
grid-area: creator;
|
|
|
|
.avatar {
|
|
height: calc(var(--space-3) * 2);
|
|
width: calc(var(--space-3) * 2);
|
|
border-radius: var(--d-border-radius);
|
|
|
|
@include viewport.until(sm) {
|
|
border-radius: var(--d-border-radius-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dot-separator {
|
|
width: 0.25em;
|
|
height: 0.25em;
|
|
background-color: var(--primary-500);
|
|
border-radius: 100%;
|
|
margin-inline: 0.25em;
|
|
}
|
|
|
|
// topic activity, icon, text
|
|
.topic-activity-data {
|
|
@include ellipsis;
|
|
grid-area: activity;
|
|
}
|
|
|
|
.topic-activity {
|
|
display: flex;
|
|
font-size: var(--font-down-1);
|
|
height: 100%;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.topic-activity__type {
|
|
border-radius: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.topic-activity__username {
|
|
@include ellipsis;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
// timestamp
|
|
td.activity .post-activity {
|
|
grid-area: activity;
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-500);
|
|
margin-left: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
// status
|
|
.topic-status-data {
|
|
display: none;
|
|
}
|
|
|
|
&.--has-status-card .topic-status-data {
|
|
display: block;
|
|
grid-area: status;
|
|
}
|
|
|
|
.topic-status-card {
|
|
height: min-content;
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.25em;
|
|
align-items: center;
|
|
padding: 0.2em 0.5rem;
|
|
font-size: var(--font-down-2);
|
|
|
|
@include viewport.from(lg) {
|
|
font-size: var(--font-down-3);
|
|
}
|
|
font-weight: 600;
|
|
border-radius: var(--d-border-radius);
|
|
border: 1px solid var(--status-color);
|
|
color: var(--status-color);
|
|
|
|
@include viewport.until(sm) {
|
|
border-radius: var(--d-border-radius-small);
|
|
padding: 0.35em;
|
|
}
|
|
|
|
&.--pinned {
|
|
--status-color: var(--primary-500);
|
|
}
|
|
|
|
&.--hot {
|
|
--status-color: var(--danger);
|
|
}
|
|
|
|
@include viewport.from(lg) {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 0;
|
|
transform: translateY(-45%);
|
|
background-color: var(--d-content-background);
|
|
}
|
|
|
|
svg {
|
|
color: var(--status-color);
|
|
|
|
@include viewport.from(lg) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
&__name {
|
|
margin: 0;
|
|
|
|
@include viewport.until(sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-list-data {
|
|
padding: 0;
|
|
}
|
|
|
|
// metadata - excerpt
|
|
.topic-excerpt {
|
|
grid-area: excerpt;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: var(--font-down-2);
|
|
width: 100%;
|
|
|
|
.excerpt__contents {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.emoji {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
// default category position hidden
|
|
.badge-category__wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
td.main-link .discourse-tags {
|
|
display: none;
|
|
}
|
|
|
|
// metadata - likes and replies
|
|
td.posts .badge-posts {
|
|
grid-area: replies;
|
|
align-self: center;
|
|
font-weight: normal;
|
|
}
|
|
|
|
td.topic-likes-replies-data {
|
|
grid-area: likes-replies;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--space-3);
|
|
height: min-content;
|
|
align-self: center;
|
|
|
|
.topic-likes {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.topic-likes-replies-data .topic-replies {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
color: var(--primary-500);
|
|
font-size: var(--font-down-1-rem);
|
|
|
|
svg {
|
|
color: var(--primary-600);
|
|
}
|
|
|
|
.number {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.bulk-select {
|
|
grid-area: bulk-select;
|
|
padding: 0;
|
|
margin: 0;
|
|
align-self: center;
|
|
justify-self: center;
|
|
|
|
@include viewport.until(sm) {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
label {
|
|
margin: 0;
|
|
}
|
|
|
|
&th {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Assigned List
|
|
&.assigned-list-item {
|
|
.topic-status-data {
|
|
display: none;
|
|
}
|
|
grid-template-areas:
|
|
"creator title title title dropdown"
|
|
". category activity activity .";
|
|
|
|
&.--has-replies {
|
|
grid-template-areas:
|
|
"creator title title title dropdown"
|
|
"category category likes-replies activity .";
|
|
}
|
|
|
|
.assign-topic-buttons {
|
|
display: contents;
|
|
|
|
.assign-actions-dropdown {
|
|
grid-area: dropdown;
|
|
justify-content: flex-end;
|
|
height: 1em;
|
|
|
|
.select-kit-header {
|
|
padding-top: 0;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
background: transparent;
|
|
}
|
|
|
|
.select-kit-header-wrapper {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bookmarks
|
|
&.bookmark-list-item {
|
|
grid-template-areas:
|
|
"creator title title title dropdown"
|
|
"category category activity . . ";
|
|
|
|
@include viewport.until(sm) {
|
|
grid-template-areas:
|
|
"title title title title dropdown"
|
|
"category category activity activity . ";
|
|
|
|
.avatar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.has-metadata {
|
|
grid-template-areas:
|
|
"creator title title title dropdown"
|
|
"category category activity metadata . ";
|
|
|
|
@include viewport.until(sm) {
|
|
grid-template-areas:
|
|
"metadata metadata metadata metadata dropdown"
|
|
"title title title title ."
|
|
"category category activity activity . ";
|
|
}
|
|
}
|
|
|
|
td.author-avatar {
|
|
grid-area: creator;
|
|
}
|
|
|
|
td.main-link .link-bottom-line {
|
|
display: contents;
|
|
|
|
.badge-category__wrapper {
|
|
grid-area: category;
|
|
display: flex;
|
|
align-items: center;
|
|
width: min-content;
|
|
justify-self: flex-end;
|
|
}
|
|
}
|
|
|
|
td.main-link .link-top-line {
|
|
display: contents;
|
|
|
|
.bookmark-metadata {
|
|
grid-area: metadata;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bookmark-metadata-item {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.bookmark-status-with-link {
|
|
grid-area: title;
|
|
}
|
|
}
|
|
|
|
.post-excerpt {
|
|
grid-area: excerpt;
|
|
margin: 0;
|
|
}
|
|
|
|
.topic-list-data:last-of-type {
|
|
display: contents;
|
|
|
|
.bookmark-actions-dropdown {
|
|
grid-area: dropdown;
|
|
align-self: flex-start;
|
|
height: 1em;
|
|
|
|
.select-kit-header {
|
|
padding-top: 0;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
background: transparent;
|
|
}
|
|
|
|
.select-kit-header-wrapper {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-metadata.topic-list-data.updated-at {
|
|
grid-area: activity;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
|
|
td.activity .post-activity {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// for both types of context cards
|
|
.topic-list.--d-topic-cards {
|
|
.event-date {
|
|
margin-left: var(--space-2);
|
|
font-size: var(--font-down-3);
|
|
white-space: nowrap;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.event-date-container {
|
|
display: inline-flex;
|
|
position: relative;
|
|
top: -0.15rem;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
|
|
// bulk-select overrule for j/k nav
|
|
.topic-list tr.selected td:first-of-type,
|
|
.topic-list-item.selected td:first-of-type {
|
|
box-shadow: none;
|
|
}
|
