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.

324 lines
6.1 KiB
SCSS
Raw Normal View History

@keyframes button-jump-up {
0% {
margin-bottom: -60px;
}
50% {
margin-bottom: 10px;
}
65% {
margin-bottom: 0px;
}
77% {
margin-bottom: 5px;
}
100% {
margin-bottom: 0px;
}
}
.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: -2em;
.btn {
margin: 0;
}
}
#topic-progress-wrapper {
display: flex;
.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
}
}
#topic-progress-wrapper.docked {
.topic-admin-popup-menu.right-side {
bottom: -150px; // Prevents menu from being too high when a topic is very short
}
}
.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.2em;
margin-right: 0.15em;
2020-07-28 08:45:29 +08:00
&:empty {
margin-right: 0;
}
.d-icon {
color: var(--primary-medium);
}
}
}
h1 {
margin: 0 0 4px 0;
}
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: 0 0 4px 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-low-mid-or-secondary-high);
}
.private-message-glyph-wrapper {
float: left;
.private-message-glyph {
margin: 0 5px 0 0;
display: inline-block;
}
}
.private_message {
#topic-title {
.edit-topic-title {
position: relative;
.private-message-glyph {
position: absolute;
left: 0.75em;
top: 6px;
}
#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;
}
}