discourse/app/assets/stylesheets/desktop/topic-post.scss

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

768 lines
15 KiB
SCSS
Raw Normal View History

2015-07-20 03:47:53 -04:00
.wrap {
max-width: $large-width;
2013-02-05 14:16:51 -05:00
}
.full-width {
margin-left: 0;
2013-02-05 14:16:51 -05:00
}
.staff {
.topic-post:first-child {
nav.post-controls .post-admin-menu {
bottom: -125px;
}
}
}
.topic-body {
2018-11-30 19:49:26 -05:00
// this ensures consistent top margin on topic posts even if the first line of a post
// is a top-margin-less element like a list or image.
.regular {
margin-top: 15px;
}
padding: 0;
&:first-of-type {
border-top: none;
}
.reply-to-tab {
z-index: z("base") + 1;
color: var(--primary-med-or-secondary-med);
}
.actions .fade-out {
.discourse-no-touch & {
opacity: 0.7;
transition: background 0.25s, opacity 0.7s ease-in-out;
}
.discourse-touch & {
opacity: 1;
}
2013-02-05 14:16:51 -05:00
}
&:hover .actions .fade-out,
.selected .actions .fade-out {
opacity: 1;
2013-02-05 14:16:51 -05:00
}
}
section.post-menu-area {
position: relative;
2018-10-10 12:11:47 -04:00
padding-left: 11px;
}
2018-10-16 12:39:55 -04:00
.post-links-container {
margin-left: 11px;
}
nav.post-controls {
padding: 0;
.actions {
text-align: right;
float: right;
display: inline-block;
.more-actions {
display: none;
overflow: hidden;
}
// Some buttons can be doubled up, like likes or flags
.double-button {
display: inline-flex;
color: var(--primary-low-mid);
margin-right: 0.15em;
&:hover {
button {
background: var(--primary-low);
color: var(--primary-medium);
}
}
button {
// It looks really confusing when one half a double button has an inner shadow on click.
&:active {
box-shadow: none;
}
margin-left: 0;
margin-right: 0;
&.my-likes,
&.read-indicator,
&.regular-likes {
// Like count on posts
.d-icon {
color: var(--primary-low-mid);
padding-left: 0.45em;
}
}
&.like {
// Like button with 0 likes
&.d-hover {
background: var(--love-low);
.d-icon {
color: var(--love);
}
}
}
&.has-like {
// Like button after I've liked
.d-icon {
color: var(--love);
}
&.d-hover {
background: var(--primary-low);
.d-icon {
color: var(--primary-medium);
}
}
}
&[disabled] {
// Disabled like button
cursor: not-allowed;
}
&.button-count {
// Like count button
&:not(.my-likes) {
padding-right: 0;
}
&.d-hover {
color: var(--primary);
}
+ .toggle-like {
// Like button when like count is present
padding-left: 0.45em;
&.d-hover {
background: var(--primary-low);
}
}
}
}
}
a,
button {
color: var(--primary-low-mid-or-secondary-high);
.d-icon {
opacity: 1;
}
margin-right: 2px;
display: inline-block;
}
a.toggle-likes {
padding: 8px 0;
margin-right: -3px;
}
span.badge-posts {
margin-right: 5px;
transition: all linear 0.15s;
}
button.create {
margin-right: 0;
color: var(--primary-high-or-secondary-low);
margin-left: 10px;
.d-icon {
color: var(--primary-high-or-secondary-low);
}
}
.create .d-icon {
margin-right: 5px;
2014-05-13 08:53:11 -04:00
}
button {
font-size: $font-up-1;
padding: 8px 10px;
vertical-align: top;
background: transparent;
border: none;
margin-left: 3px;
&.d-hover,
&:focus {
background: var(--primary-low);
color: var(--primary);
}
&:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
&.hidden {
display: none;
}
&.admin {
position: relative;
}
&.delete.d-hover,
&.delete:hover,
&.delete:focus {
background: var(--danger);
color: var(--secondary);
.d-icon {
color: var(--secondary);
}
}
&.bookmark {
padding: 8px 11px;
&.bookmarked .d-icon {
color: var(--tertiary);
}
2014-05-13 08:53:11 -04:00
}
}
}
.show-replies {
font-size: $font-up-1;
margin-left: -10px;
font-size: inherit;
padding: 10px;
color: var(--primary-medium);
&:hover {
color: var(--primary);
background: var(--primary-low);
}
.d-icon {
margin-left: 5px;
font-size: $font-down-1;
}
}
2014-04-29 22:13:16 -04:00
}
pre.copy-codeblocks .copy-cmd:not(.copied) {
opacity: 0;
transition: 0.2s;
visibility: hidden;
}
pre.copy-codeblocks:hover .copy-cmd {
opacity: 1;
visibility: visible;
}
2014-04-29 22:13:16 -04:00
.embedded-posts {
h1,
h2,
h3 {
margin: 10px 0;
}
border: 1px solid var(--primary-low);
2014-07-10 11:40:31 -04:00
.topic-body {
box-sizing: border-box;
width: calc(100% - 70px); // [100% - .topic-avatar width]
// WARNING: overflow hide is required for quoted / embedded images
// which expect "normal" post width, but expansions are narrower
overflow: hidden;
} // this is covered by .topic-body .regular on a normal post
// but no such class structure exists for an embedded, expanded post
.cooked {
margin-top: 15px;
}
2014-07-10 11:40:31 -04:00
.topic-avatar {
padding-left: 25px;
padding-top: 15px;
2014-07-10 11:40:31 -04:00
}
.collapse-down,
.collapse-up {
2018-01-16 16:06:04 -05:00
position: absolute;
color: var(--primary-medium);
background: var(--secondary);
border: 1px solid var(--primary-low);
2018-01-16 16:06:04 -05:00
padding: 6px 9px 8px;
z-index: 99; // Needs to be higher than topic-avatar
.d-icon {
color: currentColor;
}
.discourse-no-touch & {
&:hover {
background: var(--primary-low);
color: var(--primary-high);
.d-icon {
color: currentColor;
}
}
2018-01-16 16:06:04 -05:00
}
} // bottom means "reply expansion" below a post
2014-04-29 22:13:16 -04:00
&.bottom {
border-top: none;
margin-bottom: 20px;
2018-10-16 12:39:55 -04:00
margin-left: 11px;
&.hidden {
display: block;
opacity: 0;
}
2013-02-05 14:16:51 -05:00
}
2014-07-10 11:40:31 -04:00
&.bottom {
.collapse-up {
2018-01-16 16:06:04 -05:00
transform: translate(-50%, -164%);
}
.row {
padding-bottom: 0.5em;
.topic-avatar,
.topic-body {
border-top: 1px solid var(--primary-low);
}
}
} // top means "in reply to expansion" above a post
&.top {
border-bottom: none;
.collapse-down {
transform: translate(-50%, 55%);
}
margin-left: 56px;
width: 699px;
.row {
border-bottom: none;
.topic-avatar,
.topic-body {
border-top: 1px solid var(--primary-low);
}
}
}
&.top.topic-body {
2016-01-26 20:03:18 -05:00
padding: 0;
}
.post-date {
color: var(--primary-med-or-secondary-high);
}
.d-icon-arrow-up,
.d-icon-arrow-down {
margin-left: 5px;
}
.reply:first-of-type .row {
border-top: none;
}
2014-04-29 22:13:16 -04:00
.topic-meta-data {
position: relative;
}
.topic-meta-data h5 {
position: absolute;
z-index: z("base");
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
2014-04-29 22:13:16 -04:00
a {
font-weight: bold;
color: var(--primary-low-mid-or-secondary-high);
2014-04-29 22:13:16 -04:00
}
}
.arrow {
color: var(--primary-med-or-secondary-high);
}
2014-04-29 22:13:16 -04:00
}
2013-02-05 14:16:51 -05:00
.post-action {
.relative-date {
margin-left: 5px;
2013-02-05 14:16:51 -05:00
}
.avatar {
margin-right: 2px;
}
}
2013-09-04 11:53:00 -04:00
.topic-map {
2018-10-16 12:39:55 -04:00
margin: 20px 0 20px 11px;
.map {
.secondary {
text-align: center;
}
2013-02-05 14:16:51 -05:00
li {
float: left;
2014-07-22 16:30:32 -04:00
padding: 7px 10px;
2013-02-05 14:16:51 -05:00
&:last-of-type {
border-right: 0;
}
&:nth-child(3) {
text-align: center;
}
2013-02-05 14:16:51 -05:00
}
.number {
color: var(--primary-high);
2013-02-05 14:16:51 -05:00
}
.number,
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-26 16:49:57 -05:00
.d-icon {
2018-01-12 17:27:38 -05:00
font-size: $font-up-2;
line-height: $line-height-medium;
2013-02-05 14:16:51 -05:00
}
button .d-icon,
button:hover .d-icon {
color: var(--primary-high);
}
.avatar a {
2013-02-05 14:16:51 -05:00
float: left;
}
2018-01-12 17:27:38 -05:00
.topic-map-post {
margin-top: 6px;
}
2013-02-05 14:16:51 -05:00
}
.avatars,
.links,
.information {
padding: 7px 10px 7px 10px;
color: var(--primary);
2013-02-05 14:16:51 -05:00
}
.buttons {
float: right;
.btn {
border: 0;
padding: 0 23px;
color: var(--primary-med-or-secondary-high);
background: var(--blend-primary-secondary-5);
border-left: 1px solid var(--primary-low);
2018-01-12 17:27:38 -05:00
border-top: 1px solid transparent;
2013-02-05 14:16:51 -05:00
&:hover {
color: var(--primary);
background: var(--primary-low);
2013-02-05 14:16:51 -05:00
}
&.collapsed {
padding-bottom: 1px;
2013-02-05 14:16:51 -05:00
}
2013-12-09 16:27:49 -05:00
.fa {
2013-02-05 14:16:51 -05:00
margin: 0;
2018-01-12 17:27:38 -05:00
font-size: $font-up-2;
2013-02-05 14:16:51 -05:00
line-height: 52px;
}
}
}
.link-summary .btn {
color: var(--primary-med-or-secondary-high);
background: var(--blend-primary-secondary-5);
width: 100%;
&:hover {
color: var(--primary);
background: var(--primary-low);
}
}
2013-02-05 14:16:51 -05:00
}
#topic-footer-buttons {
max-width: calc(690px + (11px * 2) + 45px);
.bookmark {
.d-icon-bookmark.bookmarked {
color: var(--tertiary);
}
}
.bookmark.bookmarked .d-icon-bookmark,
.bookmark.bookmarked .d-icon-discourse-bookmark-clock {
color: var(--tertiary);
}
.feature-on-profile.featured-on-profile .d-icon-id-card {
color: var(--tertiary);
}
2017-08-15 13:17:15 -04:00
}
.suggested-topics {
clear: left;
padding: 20px 0 15px 0;
table {
margin-top: 10px;
}
}
.suggested-topics .topic-statuses .topic-status {
padding: 0;
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-26 16:49:57 -05:00
.d-icon {
font-size: 1em;
}
}
span.post-count {
background: var(--primary);
color: var(--secondary);
opacity: 0.8;
}
2014-04-02 15:54:21 -04:00
button.expand-post {
margin-top: 10px;
margin-left: $topic-body-width-padding;
2014-04-02 15:54:21 -04:00
}
iframe {
max-width: 100%;
}
2014-12-08 15:39:36 -05:00
video {
max-height: 500px;
}
.video {
// Height determined by aspect-ratio
max-height: 500px;
> video {
max-height: unset;
}
}
2014-12-25 05:19:06 -05:00
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
2014-12-25 05:19:06 -05:00
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
2014-10-06 18:32:38 -04:00
.btn-group {
2013-02-05 14:16:51 -05:00
position: relative;
}
.dropdown-toggle {
float: left;
position: relative;
}
2014-05-06 23:53:04 -04:00
.deleted {
.topic-body {
background-color: var(--danger-low-mid);
}
}
.post-select {
float: right;
margin-right: 20px;
margin-top: -20px;
}
.deleted-user-avatar {
2018-01-12 17:27:38 -05:00
font-size: $font-up-6;
}
.info-line {
margin: 10px 0;
color: var(--primary);
}
2014-06-30 03:58:27 -04:00
/* solo quotes */
2014-06-30 03:58:27 -04:00
blockquote {
2014-06-30 06:03:54 -04:00
/* leave browser defaults for top and bottom here */
margin-left: 0;
margin-right: 0;
padding: 12px;
}
2014-06-30 03:58:27 -04:00
/* quotes with attribution */
2014-06-30 03:58:27 -04:00
.quote {
2018-06-18 14:10:48 -04:00
& > blockquote {
.onebox-result {
background-color: var(--primary-very-low);
}
}
aside {
.quote,
.title,
blockquote,
.onebox,
.onebox-result {
background: var(--primary-very-low);
border-left: 5px solid var(--primary-low);
}
2018-06-18 14:10:48 -04:00
aside.quote > blockquote,
aside.quote > .title {
border-left: 0;
}
}
}
// variables are used to calculate the width of .gap
.topic-body {
2018-10-08 11:55:54 -04:00
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2));
float: left;
position: relative;
border-top: 1px solid var(--primary-low);
padding: 12px 0 0 0;
.topic-meta-data,
.cooked {
padding: 0 $topic-body-width-padding 0.25em $topic-body-width-padding;
}
.group-request {
padding: 0.5em $topic-body-width-padding 0 $topic-body-width-padding;
}
2019-03-21 11:50:41 -04:00
a.expand-hidden {
padding-left: $topic-body-width-padding;
}
}
.topic-avatar {
border-top: 1px solid var(--primary-low);
padding-top: 15px;
width: $topic-avatar-width;
float: left;
z-index: z("base") + 1;
}
2015-06-29 04:14:54 -04:00
.gap {
2018-06-18 14:10:48 -04:00
width: calc(
#{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}
);
box-sizing: border-box;
2015-06-29 04:14:54 -04:00
}
/* hide the reply border above the time gap notices */
2018-06-18 14:10:48 -04:00
.time-gap + .topic-post .topic-body,
.time-gap + .topic-post .topic-avatar {
border-top: none;
}
2018-06-18 14:10:48 -04:00
.time-gap + .topic-post .embedded-posts.top {
border-bottom: 1px solid var(--primary-low);
2018-03-29 17:32:56 -04:00
}
2013-10-21 16:54:53 -04:00
.posts-wrapper {
position: relative;
-webkit-font-smoothing: subpixel-antialiased;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid var(--primary);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-left: 5px;
}
.selected-posts {
width: 200px;
position: fixed;
z-index: z("dropdown");
2018-07-20 16:37:43 -04:00
box-shadow: shadow("card");
padding: 0.714em;
margin-bottom: 5px;
right: 10px;
2018-07-12 16:38:51 -04:00
@include breakpoint(extra-large, min-width) {
right: auto;
margin-left: 330px;
left: 50%;
}
button {
2018-07-20 16:37:43 -04:00
width: 100%;
margin: 4px auto;
display: inline-block;
text-align: left;
}
&.hidden {
display: none;
}
.controls {
margin-top: 10px;
}
p {
2018-01-12 17:27:38 -05:00
font-size: $font-down-1;
margin: 0 0 10px 0;
}
p.cancel {
margin: 10px 0 0 0;
}
h3 {
2018-01-12 17:27:38 -05:00
font-size: $font-up-4;
color: var(--primary);
margin-bottom: 5px;
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-26 16:49:57 -05:00
.d-icon {
margin-right: 7px;
}
}
}
2013-10-23 03:52:15 -04:00
a.attachment:before {
display: inline-block;
margin-right: 4px;
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-26 16:49:57 -05:00
// ideally, the SVG used here should be in HTML and reference the SVG sprite
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$tertiary}"><path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>'
);
vertical-align: middle;
}
2013-10-30 09:11:05 -04:00
.topic-meta-data {
align-items: center;
.names {
display: flex;
align-items: center;
}
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.post-info {
a {
color: var(--primary-med-or-secondary-med);
}
a.wiki {
color: var(--wiki);
}
}
}
.who-liked,
.who-read {
2015-07-10 00:48:44 -04:00
margin-top: 20px;
margin-bottom: 0;
2015-07-10 00:48:44 -04:00
width: 100%;
text-align: right;
}
span.highlighted {
background-color: var(--tertiary-low);
2014-05-14 04:05:24 -04:00
}
.first.new-user:not(.staff) a {
color: var(--primary-low-mid);
2014-05-14 04:05:24 -04:00
}
.read-state {
2014-06-02 22:32:33 -04:00
position: absolute;
2018-09-05 13:19:36 -04:00
// We use absolute positioning here because we want it to display in the padding
align-self: center;
color: var(--tertiary-medium);
right: 0;
font-size: 0.571em;
}
.read-state.read {
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity ease-out 1s;
}
2015-09-01 19:49:45 -04:00
.signup-cta {
width: $topic-body-width;
}
/* Tablet (portrait) ----------- */
@media all and (max-width: 790px) {
2014-07-10 11:40:31 -04:00
.topic-avatar {
width: 45px;
2014-07-10 11:40:31 -04:00
}
.topic-post .reply-to-tab {
right: 15%;
}
2014-07-10 11:40:31 -04:00
.topic-body {
box-sizing: border-box;
width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
}
2014-07-10 11:40:31 -04:00
.embedded-posts {
// top means "in reply to expansion" above a post
&.top {
width: calc(100% - 56px); // [100% - margin-left]
2014-07-10 11:40:31 -04:00
}
}
}