.topic-map.--op { // topic map under OP border-top: 1px solid var(--primary-low); border-bottom: none; } .topic-map.--bottom { // topic map at bottom of topic grid-area: posts; grid-row: 2; max-width: calc( var(--topic-avatar-width) + var(--topic-body-width) + (var(--topic-body-width-padding) * 2) ); } body:not(.archetype-private_message) { .topic-map { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; &:has(.topic-map__additional-contents *) { column-gap: 0.75em; } } } .topic-map { // both topic maps --chart-line-color: var(--tertiary); --chart-point-color: var(--tertiary-medium); --chart-prediction-color: var(--primary-low-mid); border-bottom: 1px solid var(--primary-low); box-sizing: border-box; max-width: calc( var(--topic-avatar-width) + var(--topic-body-width) + (var(--topic-body-width-padding) * 2) ); @include breakpoint(mobile-large) { font-size: var(--font-down-1); } @media screen and (max-width: 500px) { padding-left: 0; } padding-left: calc( var(--topic-body-width-padding) + var(--topic-avatar-width) ); .--users-summary { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; height: 2em; align-self: center; flex: 1 2 0; gap: 0.25em; min-width: 2em; width: 0; .avatar { width: 2em; height: 2em; margin-right: 0; } .avatar-flair, .post-count { display: none; } } &__stats { display: flex; flex-wrap: wrap; margin: 0; list-style: none; } a { overflow-wrap: anywhere; } .fk-d-menu__content { .fk-d-menu__inner-content, .d-modal__container { box-sizing: border-box; max-height: 80dvh; min-width: 20em; width: 100%; overflow: auto; align-items: start; overscroll-behavior: contain; padding: 1.5em; width: 100%; flex-direction: column; .desktop-view & { @include breakpoint(mobile-large) { min-width: unset; max-width: 90dvw; } } } .loading-container { width: 100%; } h3 { font-weight: bold; font-size: var(--font-up-1); margin-top: -0.35em; margin-bottom: 0.5em; width: 100%; } } &__contents { padding-block: 0.5em; flex-grow: 1; .number { font-size: var(--font-up-1); line-height: 1.2; } .topic-map__stats { gap: 0.75em; &.--single-stat { button { flex-direction: row; gap: 0.25em; span { font-size: var(--font-0); color: var(--primary-700) !important; min-width: unset; overflow: visible; } } } .fk-d-menu__trigger { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; background: transparent; min-width: 0; .number { color: var(--tertiary); } .topic-map__stat-label { display: block; min-width: 0; font-size: var(--font-down-1); color: var(--primary-medium); width: 100%; @include ellipsis; } } } } .controls { display: flex; align-items: center; .btn { margin-right: 0.5em; &:last-child { margin: 0; } } } .participants { // PMs display: flex; flex-wrap: wrap; align-items: center; & + .controls { margin-top: 0.5em; } &.hide-names .user { .username, .group-name { display: none; } } .user { @include ellipsis; border: 1px solid var(--primary-low); border-radius: 0.25em; padding: 0; margin: 0.125em 0.25em 0.125em 0; display: flex; align-items: center; height: 26px; .user-link, .group-link { @include ellipsis; color: var(--primary-high); &:hover { color: var(--primary); } } .avatar, .d-icon-users { margin-left: 0.25em; margin-right: 0.25em; } .username, .group-name { margin-right: 0.25em; } &:last-child { margin-right: 0; } .remove-invited { display: flex; flex: 1 0 0px; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 0 var(--border-radius) var(--border-radius) 0; padding-top: 0; padding-bottom: 0; height: calc(100% + 0.25em); margin-right: -4px; } } } .add-remove-participant-btn { .d-icon { margin-left: 0.25em; } } &__buttons { margin-left: auto; display: flex; align-items: center; gap: 0.75em; } .view-explainer { color: var(--primary-700); font-size: var(--font-down-1); margin-top: 1em; } .estimated-read-time { display: flex; flex-direction: column-reverse; align-items: end; line-height: 1.2; color: var(--primary-high); white-space: nowrap; span:first-child { font-size: var(--font-down-1); color: var(--primary-medium); } @media screen and (max-width: 475px) { display: none; } } } .mobile-view { .d-modal[class*="topic-map__"] { .d-modal__body { padding: 1em 1em 2em 1em; h3 { width: 100%; font-weight: bold; font-size: var(--font-up-2); } } } .topic-owner .onscreen-post { padding-bottom: 0; } } // DMenu popups .topic-map__likes-content { .fk-d-menu__inner-content, .d-modal__body { ul { margin: 0; padding: 0; list-style-type: none; li > a { display: grid; grid-template-areas: "user likes" "post post"; grid-template-columns: auto 1fr; border-top: 1px solid var(--primary-low); padding: 1em 0; gap: 0.25em; .discourse-no-touch & { &:hover { background: var(--primary-very-low); box-shadow: -1em 0px 0px 0px var(--primary-very-low), 1em 0px 0px 0px var(--primary-very-low); } } } .like-section__user { grid-area: user; color: var(--primary-high); justify-content: start; display: flex; align-items: start; font-weight: bold; gap: 0.5em; img { position: relative; top: 0.2em; } } .like-section__likes { grid-area: likes; display: flex; align-items: start; gap: 0.25em; color: var(--primary-medium); justify-content: end; font-size: var(--font-0); .d-icon { font-size: var(--font-down-1); color: var(--love); position: relative; top: 0.28em; } } p { grid-area: post; overflow-wrap: anywhere; color: var(--primary-high); text-align: left; margin: 0; padding-left: 2em; } } } } .topic-map__users-content { .fk-d-menu__inner-content, .d-modal__body { .topic-map__users-list { display: flex; flex-wrap: wrap; gap: 0.5em; } .poster { display: block; position: relative; img { width: 2.25em; height: 2.25em; } } .post-count, .avatar-flair { position: absolute; border-radius: 1em; display: flex; align-items: center; justify-content: center; } .post-count { top: -0.15em; right: -0.25em; padding: 0.15em 0.4em 0.2em; font-size: var(--font-down-2); line-height: var(--line-height-small); } .avatar-flair { right: -0.25em; bottom: -0.15em; font-size: var(--font-down-3); width: 1.5em; height: 1.5em; background-size: contain; } } } .topic-map__links-content { .fk-d-menu__inner-content, .d-modal__body { .topic-links { width: 100%; tbody { border: none; } tr { border-top: 1px solid var(--primary-low); border-bottom: none; td:nth-of-type(2) { padding-left: 0.5em; } } } a { display: inline-block; line-height: var(--line-height-medium); } td { vertical-align: top; padding: 0.5em 0; } span.domain { font-size: var(--font-down-2); color: var(--primary-medium); } .link-summary .btn { width: 100%; .d-icon { color: var(--primary-high); } .discourse-no-touch & { &:hover { background: var(--primary-low); } } } } } .topic-map__views-content { .fk-d-menu__inner-content, .d-modal__body { .topic-views { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; padding: 0.5em 1em 0; &__wrapper { display: flex; width: 100%; align-items: space-between; } &__count { font-size: var(--font-up-4); color: var(--primary-high); } &__date { font-size: var(--font-down-1); color: var(--primary-medium); } } &:has(.topic-views) { min-width: unset; h3 { text-align: center; } } } }