discourse/app/assets/stylesheets/common/base/topic.scss

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

467 lines
9.3 KiB
SCSS
Raw Normal View History

$topic-progress-height: 42px;
@keyframes button-jump-up {
0% {
margin-bottom: -60px;
}
50% {
margin-bottom: 10px;
}
65% {
margin-bottom: 0px;
}
77% {
margin-bottom: 5px;
}
100% {
margin-bottom: 0px;
}
}
[class*="archetype-"] {
--below-topic-margin: 0.75em;
}
.container.posts {
display: grid;
grid-template-areas: "posts timeline";
grid-template-columns: auto auto;
margin-bottom: var(--below-topic-margin);
> .row {
grid-area: posts;
max-width: calc(
100vw - 20px
); // 20px is the left + right padding on .wrap in common/base/discourse.scss
}
.timeline-container {
margin-left: unset !important;
/* This is a temporary override to ease the transition
to the sticky position timeline for themes with custom timeline positioning.
Without this those themes would render topics unreadable. */
}
// timeline
@media screen and (min-width: 925px) {
// at 925px viewport width and above the timeline is visible (see topic-navigation.js)
.topic-navigation {
grid-area: timeline;
align-self: start;
@include sticky;
top: calc(var(--header-offset, 60px) + 2em);
margin-left: 1em;
z-index: z("timeline");
&.topic-progress-expanded {
z-index: z("fullscreen");
}
}
}
// progress bar
@media screen and (max-width: 924px) {
grid-template-areas: "posts";
grid-template-columns: auto;
.topic-navigation {
grid-area: posts;
grid-row: 2;
width: auto;
}
.timeline-container:not(.timeline-fullscreen) {
display: none; // hiding this because sometimes the JS switch lags and causes layout issues
}
.timeline-container .timeline-scroller-content {
position: relative;
}
}
}
.progress-back-container {
z-index: z("dropdown");
margin-right: 0;
animation-duration: 0.5s;
animation-name: button-jump-up;
width: 145px;
text-align: center;
margin-bottom: 0px;
position: absolute;
right: 0;
top: -120%; // above parent container + some extra space
.btn {
margin: 0;
}
}
#topic-progress-wrapper {
position: fixed;
bottom: 0px;
right: 10px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
z-index: z("timeline");
.topic-admin-menu-button-container {
display: flex;
> span {
display: flex;
}
}
.topic-admin-popup-menu.right-side {
position: absolute;
bottom: 0;
right: 0;
left: auto;
transition: bottom 0.5s;
transform: translateZ(
0
); // iOS11 Rendering bug https://meta.discourse.org/t/wrench-menu-not-disappearing-on-ios/94297
}
&.docked {
position: initial;
.topic-admin-popup-menu.right-side {
bottom: -150px; // Prevents menu from being too high when a topic is very short
}
}
body:not(.footer-nav-visible) & {
bottom: env(safe-area-inset-bottom);
}
&:not(.docked) {
@media screen and (min-width: $reply-area-max-width) {
// position to right side of composer
right: 50%;
margin-right: calc(#{$reply-area-max-width} / 2 * -1);
}
}
&.with-transitions {
transition: bottom 0.2s, margin-bottom 0.2s;
#topic-progress .bg {
transition: width 0.5s;
}
}
}
#topic-progress {
position: relative;
background-color: var(--secondary);
color: var(--tertiary);
border: 1px solid var(--tertiary-low);
width: 145px;
height: $topic-progress-height;
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
.nums {
position: relative;
top: 12px;
width: 100%;
text-align: center;
z-index: z("base");
}
h4 {
display: inline;
font-size: $font-up-2;
line-height: $line-height-small;
}
.d-icon {
position: absolute;
right: 8px;
bottom: 9px;
z-index: z("base");
}
.bg {
position: absolute;
top: 0;
bottom: 0;
width: var(--progress-bg-width, 0);
background-color: var(--tertiary-low);
}
}
.topic-status-info,
.topic-timer-info {
border-top: 1px solid var(--primary-low);
margin: 0;
max-width: 758px;
&:empty {
padding: 0;
}
span .d-icon {
font-size: $font-down-1;
}
.topic-timer-heading,
.slow-mode-heading {
display: flex;
align-items: center;
margin: 0;
padding: var(--below-topic-margin) 0;
}
.slow-mode-remove,
.topic-timer-modify {
display: flex;
margin-left: auto;
align-self: flex-start;
}
button {
font-size: $font-down-2;
background: transparent;
}
}
.title-wrapper {
display: flex;
flex-wrap: wrap;
button {
margin: 0 0.5em 0 0;
}
a.topic-featured-link {
display: inline-block;
}
.topic-statuses {
line-height: 1.2;
.d-icon {
color: var(--primary-medium);
}
}
.header-title .private-message-glyph-wrapper {
float: left;
margin-right: 0.25em;
}
}
a.badge-category {
margin-top: 5px;
}
2014-10-06 23:50:18 +08:00
#topic-title {
2015-01-15 04:36:38 +08:00
.title-wrapper {
display: flex;
flex-wrap: wrap;
width: 90%;
a.topic-featured-link {
display: inline-block;
}
2015-01-15 04:36:38 +08:00
}
h1 {
margin-bottom: 0;
width: 100%;
}
2014-10-06 23:50:18 +08:00
a.badge-category {
margin-top: 5px;
2015-01-15 04:36:38 +08:00
}
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-27 05:49:57 +08:00
a.edit-topic .d-icon {
font-size: 0.8em;
}
.edit-topic-title {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
max-width: 758px;
#edit-title {
flex: 1 1 auto;
}
.category-chooser,
.mini-tag-chooser {
flex: 1 1 49%;
margin: 0 0 9px 0;
@media all and (max-width: 500px) {
flex: 1 1 100%;
}
}
.mini-tag-chooser {
margin-left: 2%;
@media all and (max-width: 500px) {
margin-left: 0;
}
}
.select-kit .category-row {
max-width: unset;
}
}
2014-10-06 23:50:18 +08:00
}
.private-message-glyph {
color: var(--primary-medium);
height: 0.95em;
}
.private_message {
#topic-title {
.edit-topic-title {
position: relative;
.private-message-glyph {
position: absolute;
left: 0.75em;
top: 7px;
}
#edit-title {
width: calc(100% - 50px);
padding-left: 2.25em;
}
.mini-tag-chooser {
margin-left: 0;
@include breakpoint(mobile-large, min-width) {
.selected-name {
max-width: 500px;
}
}
}
}
}
}
.topic-title-outlet {
clear: both;
}
.has-pending-posts {
display: flex;
justify-content: space-between;
padding: 0.5em;
background-color: var(--highlight-medium);
margin-top: 1em;
max-width: 757px;
}
.suggested-topics-wrapper.related-messages-wrapper {
.suggested-topics:nth-of-type(n + 2) {
thead {
display: none;
2018-11-16 05:32:35 +08:00
}
}
}
// Target the .badge-category text, the bullet icon needs to maintain `display: block`
.suggested-topics h3 .badge-wrapper.bullet span.badge-category,
.suggested-topics h3 .badge-wrapper.box span,
.suggested-topics h3 .badge-wrapper.bar span {
display: inline;
}
.suggested-topics h3 .badge-wrapper.bullet span.badge-category {
// Override vertical-align: text-top from `badges.css.scss`
vertical-align: baseline;
2018-01-13 06:27:38 +08:00
line-height: $line-height-medium;
}
.suggested-topics h3 .badge-wrapper.bullet,
.suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
.suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
// Top of bullet aligns with top of line - adjust line height to vertically align bullet.
line-height: 0.8;
}
.suggested-topics .badge-wrapper.bullet span.badge-category,
.suggested-topics .badge-wrapper.bar span.badge-category {
max-width: 150px;
}
.suggested-topics .suggested-topics-title {
2018-03-16 00:51:19 +08:00
display: flex;
align-items: center;
2020-01-17 20:10:44 +08:00
}
.post-links-container {
@include unselectable;
clear: both;
.post-links {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--primary-low);
2018-02-10 01:43:15 +08:00
li:last-of-type {
margin-bottom: 1em;
}
}
.expand-links {
color: var(--primary-med-or-secondary-med);
}
.track-link {
2018-02-10 01:43:15 +08:00
display: flex;
align-items: center;
span:not(.badge) {
@include ellipsis;
2018-02-10 01:43:15 +08:00
}
}
ul {
margin: 0;
list-style: none;
li {
margin-bottom: 0.5em;
a[href] {
color: var(--primary-med-or-secondary-med);
}
.clicks {
margin-left: 0.5em;
flex: 0 0 auto;
}
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-27 05:49:57 +08:00
.d-icon {
2018-01-13 06:27:38 +08:00
font-size: $font-down-2;
2018-02-10 01:43:15 +08:00
margin: 0 0.5em 0 0;
}
}
}
a.reply-new {
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-27 05:49:57 +08:00
.d-icon {
background: var(--secondary);
border-radius: 20px;
transition: all linear 0.15s;
}
&:hover {
color: var(--tertiary);
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-27 05:49:57 +08:00
.d-icon {
background: var(--tertiary-low);
}
}
}
}
a.topic-featured-link {
display: inline-block;
text-transform: lowercase;
color: var(--primary-med-or-secondary-med);
font-size: 0.875rem;
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-27 05:49:57 +08:00
.d-icon {
margin-right: 3px;
}
}
.topic-area {
.pending-posts {
max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
2}
);
.reviewable-item {
.post-body {
max-height: unset;
}
}
}
}
.published-page-notice {
display: flex;
justify-content: space-between;
padding-bottom: 1em;
max-width: calc(
#{$topic-body-width} + #{$topic-avatar-width} + #{$topic-body-width-padding *
2}
);
align-items: center;
.is-public {
padding: 0.25em 0.5em;
font-size: $font-down-2;
background: var(--tertiary);
color: var(--secondary);
border-radius: 3px;
text-transform: lowercase;
}
}