/* hide the reply border above the time gap notices */ .time-gap + .topic-post article { border-top: none; } .time-gap { .topic-avatar { display: none; } } .topic-post article { border-top: 1px solid var(--primary-low); padding: 15px 0 8px 0; } span.badge-posts { margin-right: 5px; } .show-replies { display: none; } .topic-post { nav.post-controls { color: var(--primary-low-mid-or-secondary-high); &.expanded { // on small devices with many buttons this can overflow overflow-x: scroll; } .actions { display: flex; justify-content: flex-end; // Handles the like and flag buttons in the post menu. .double-button { display: flex; flex: 0 1 auto; align-items: center; button { &.like, &.read-indicator, &.create-flag { flex: 1 1 auto; } &.button-count { padding: 8px 4px 8px 8px; + .toggle-like, + .create-flag { padding: 8px 8px 8px 4px; } &.my-likes, &.regular-likes { display: flex; max-width: unset; padding: 8px; .d-icon { padding-left: 8px; } } } } } .d-icon { opacity: 1; } button { border: none; font-size: $font-up-1; padding: 10px 8px; background: transparent; flex: 1 1 auto; max-width: 45px; &.hidden { display: none; } &.admin { position: relative; } &.expand-post { margin: 10px 0 10px 0; } &.reply { .d-icon { color: var(--primary-high); } } &.has-like { .d-icon { color: var(--love); } } &.bookmarked { .d-icon { color: var(--tertiary); } } } } &.replies-button-visible { display: flex; align-items: center; .show-replies { display: flex; font-size: $font-up-1; padding: 10px 8px; + .reply { margin-left: 0; } .d-icon { padding-left: 8px; font-size: $font-down-1; } } .actions { flex-grow: 2; } } } } .post-admin-menu { bottom: -50px; left: 135px; @media screen and (max-width: 374px) { left: 50px; } } .embedded-posts { .topic-meta-data h5 a { margin-left: 10px; } } .post-actions { /* overriding display: here was causing hidden element to take up space */ } .post-action { float: right; margin-right: 10px; clear: right; } .post-action .relative-date { margin-left: 5px; } a.reply-to-tab { z-index: z("base") + 1; color: var(--primary-med-or-secondary-med); margin-right: 0.5em; } .topic-post .boxed .contents { clear: both; } .topic-map { margin: 10px 0; h4 { line-height: $line-height-medium; } .user { float: left; margin-right: 10px; } .map-collapsed { .secondary { display: none; } } .map { li { float: left; padding: 7px 8px; &:last-of-type { border-right: 0; } } .number { line-height: $line-height-medium; } .number, .d-icon { color: var(--primary-high-or-secondary-low); font-size: $font-up-1; } .avatar + a { float: left; } } li.avatars { display: none; } .links, .information, .avatars { padding: 10px; color: var(--primary); overflow: auto; } .information { p { margin: 0 0 10px 0; } } .buttons { .btn { border: 0; padding: 0 15px; color: var(--primary-med-or-secondary-high); background: var(--blend-primary-secondary-5); border-left: 1px solid var(--primary-low); .fa { margin: 0; font-size: $font-up-2; line-height: 52px; } } } .link-summary .btn { color: var(--primary-med-or-secondary-high); background: var(--blend-primary-secondary-5); width: 100%; } } #topic-footer-buttons { .d-icon-bookmark.bookmarked, .d-icon-discourse-bookmark-clock.bookmarked { color: var(--tertiary); } .topic-footer-main-buttons { display: flex; align-items: stretch; } .topic-footer-mobile-dropdown { margin-right: 0.5em; display: flex; } .select-kit-header { height: 100%; } .topic-notifications-button, .pinned-button { display: flex; align-items: center; .reason { align-items: flex-start; .select-kit { max-width: 40%; } } @include breakpoint(mobile-medium) { display: inline-block; .reason { display: block; margin: 0.5em 0 0 0; } } } } .suggested-topics { clear: left; padding: 20px 0 15px 0; th.views, td.views, td.activity, th.activity, th.likes, td.likes { display: none; } a.badge-category, a.badge-category-parent { font-size: $font-down-1; vertical-align: top; } } span.post-count { background: var(--primary); color: var(--secondary); opacity: 0.8; } #topic-title { z-index: z("base") + 1; margin: 0; padding: 0 0 1em; } .quote-button.visible { z-index: z("tooltip"); } iframe { max-width: 100%; } .btn-group { margin-top: 25px; position: relative; } .dropdown-toggle { float: left; position: relative; } .selected-posts { padding: 0.1em 0.7em; } // hide the full set of selection buttons on mobile .select-posts button { display: none; } // unhide the simple "select just this post" button button.select-post { display: inline-block; } .deleted { .topic-body { background-color: var(--danger-low-mid); } } .deleted-user-avatar { font-size: $font-up-5; } span.btn-text { display: none; } blockquote { clear: both; /* leave browser defaults for top and bottom here */ margin-left: 0; margin-right: 0; } pre.copy-codeblocks code { padding-right: 2.75em; } .gap { padding: 0.25em 0; } .posts-wrapper { position: relative; } span.highlighted { background-color: var(--highlight-low); } .topic-avatar { float: left; margin-right: 10px; z-index: z("base") + 1; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */ } .topic-meta-data { margin-left: 50px; font-size: $font-down-1; .names { line-height: $line-height-medium; display: flex; flex-wrap: wrap; .full-name { font-weight: bold; } .first { order: 1; } .poster-icon { order: 2; } .second { order: 3; flex-basis: 100%; } .user-title { order: 4; flex-basis: 100%; } span { margin-right: 4px; } } } .username.new-user a { color: var(--primary-low-mid); } .user-title { color: var(--primary-medium); overflow: hidden; margin-right: 50px; } .read-state { display: none; } .post-notice { margin-bottom: 1em; &.old { border-top: none; padding-top: 0; } } .posts-filtered-notice { padding-right: 10em; flex-wrap: wrap; justify-content: flex-start; padding-bottom: unquote("max(0.75em, env(safe-area-inset-bottom))"); margin: 1em -9px; z-index: 101; .filtered-replies-show-all { position: absolute; right: 2em; } .filtered-replies-viewing { text-align: left; width: 100%; } .filtered-avatar { margin-left: 0; img.avatar { width: 20px; height: 20px; } } }