mirror of
https://github.com/discourse/discourse.git
synced 2025-03-07 05:15:26 +08:00
6261339da9
Note: All of this functionality is hidden behind a hidden, default false, site setting called `enable_bookmarks_with_reminders`. Also, any feedback on Ember code would be greatly appreciated! This is part 1 of the bookmark improvements. The next PR will address the backend logic to send reminder notifications for bookmarked posts to users. This PR adds the following functionality: * We are adding a new `bookmarks` table and `Bookmark` model to make the bookmarks a first-class citizen and to allow attaching reminders to them. * Posts now have a new button in their actions menu that has the icon of an actual book * Clicking the button opens the new bookmark modal. * Both name and the reminder type are optional. * If you close the modal without doing anything, the bookmark is saved with no reminder. * If you click the Cancel button, no bookmark is saved at all. * All of the reminder type tiles are dynamic and the times they show will be based on your user timezone set in your profile (this should already be set for you). * If for some reason a user does not have their timezone set they will not be able to set a reminder, but they will still be able to create a bookmark. * A bookmark can be deleted by clicking on the book icon again which will be red if the post is bookmarked. This PR does NOT do anything to migrate or change existing bookmarks in the form of `PostActions`, the two features live side-by-side here. Also this does nothing to the topic bookmarking.
865 lines
16 KiB
SCSS
865 lines
16 KiB
SCSS
.wrap {
|
|
max-width: $large-width;
|
|
}
|
|
|
|
.full-width {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.topic-body {
|
|
// 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: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
.actions .fade-out {
|
|
.discourse-no-touch & {
|
|
opacity: 0.7;
|
|
transition: background 0.25s, opacity 0.7s ease-in-out;
|
|
}
|
|
.discourse-touch & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&:hover .actions .fade-out,
|
|
.selected .actions .fade-out {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
section.post-menu-area {
|
|
position: relative;
|
|
padding-left: 11px;
|
|
}
|
|
|
|
.post-links-container {
|
|
margin-left: 11px;
|
|
}
|
|
|
|
nav.post-controls {
|
|
padding: 0;
|
|
|
|
// Some buttons can be doubled up, like likes or flags
|
|
.double-button {
|
|
display: inline-flex;
|
|
color: $primary-low-mid;
|
|
margin-right: 0.15em;
|
|
&:hover {
|
|
button {
|
|
background: $primary-low;
|
|
color: $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: $primary-low-mid;
|
|
padding-left: 0.45em;
|
|
}
|
|
}
|
|
&.like {
|
|
// Like button with 0 likes
|
|
&.d-hover {
|
|
background: $love-low;
|
|
.d-icon {
|
|
color: $love;
|
|
}
|
|
}
|
|
}
|
|
&.has-like {
|
|
// Like button after I've liked
|
|
.d-icon {
|
|
color: $love;
|
|
}
|
|
&.d-hover {
|
|
background: $primary-low;
|
|
.d-icon {
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
}
|
|
&[disabled] {
|
|
// Disabled like button
|
|
cursor: not-allowed;
|
|
}
|
|
&.button-count {
|
|
// Like count button
|
|
&:not(.my-likes) {
|
|
padding-right: 0;
|
|
}
|
|
&.d-hover {
|
|
color: $primary;
|
|
}
|
|
+ .toggle-like {
|
|
// Like button when like count is present
|
|
padding-left: 0.45em;
|
|
&.d-hover {
|
|
background: $primary-low;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a,
|
|
button {
|
|
color: dark-light-choose($primary-low-mid, $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;
|
|
}
|
|
.actions {
|
|
text-align: right;
|
|
float: right;
|
|
display: inline-block;
|
|
.more-actions {
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.show-replies {
|
|
margin-left: -10px;
|
|
font-size: inherit;
|
|
span.badge-posts {
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
}
|
|
&:hover {
|
|
background: $primary-low;
|
|
span.badge-posts {
|
|
color: $primary;
|
|
}
|
|
}
|
|
.d-icon {
|
|
margin-left: 5px;
|
|
font-size: $font-down-1;
|
|
}
|
|
}
|
|
button.create {
|
|
margin-right: 0;
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
margin-left: 10px;
|
|
.d-icon {
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
}
|
|
}
|
|
.create .d-icon {
|
|
margin-right: 5px;
|
|
}
|
|
button {
|
|
font-size: $font-up-1;
|
|
padding: 8px 10px;
|
|
vertical-align: top;
|
|
background: transparent;
|
|
border: none;
|
|
margin-left: 3px;
|
|
&.d-hover,
|
|
&:focus {
|
|
background: $primary-low;
|
|
color: $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: $danger;
|
|
color: $secondary;
|
|
.d-icon {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
&.bookmark {
|
|
padding: 8px 11px;
|
|
&.bookmarked .d-icon {
|
|
color: $tertiary;
|
|
}
|
|
&.with-reminder.bookmarked .d-icon {
|
|
color: $danger;
|
|
}
|
|
}
|
|
}
|
|
.post-admin-menu {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background-color: $secondary;
|
|
width: auto;
|
|
max-width: 320px;
|
|
padding: 10px;
|
|
border: 1px solid $primary-low;
|
|
position: absolute;
|
|
text-align: left;
|
|
bottom: -2px;
|
|
right: 15px;
|
|
z-index: z("dropdown");
|
|
h3 {
|
|
margin-top: 0;
|
|
color: $primary;
|
|
font-size: $font-0;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
li {
|
|
margin-bottom: 5px;
|
|
.d-icon {
|
|
width: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.embedded-posts {
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 10px 0;
|
|
}
|
|
border: 1px solid $primary-low;
|
|
.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;
|
|
}
|
|
.topic-avatar {
|
|
padding-left: 25px;
|
|
padding-top: 15px;
|
|
}
|
|
.collapse-down,
|
|
.collapse-up {
|
|
position: absolute;
|
|
color: $primary-medium;
|
|
background: $secondary;
|
|
border: 1px solid $primary-low;
|
|
padding: 6px 9px 8px;
|
|
z-index: 99; // Needs to be higher than topic-avatar
|
|
.d-icon {
|
|
color: currentColor;
|
|
}
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
background: $primary-low;
|
|
color: $primary-high;
|
|
.d-icon {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
}
|
|
} // bottom means "reply expansion" below a post
|
|
&.bottom {
|
|
border-top: none;
|
|
margin-bottom: 20px;
|
|
margin-left: 11px;
|
|
&.hidden {
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&.bottom {
|
|
.collapse-up {
|
|
transform: translate(-50%, -164%);
|
|
}
|
|
.row {
|
|
padding-bottom: 0.5em;
|
|
.topic-avatar,
|
|
.topic-body {
|
|
border-top: 1px solid $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 $primary-low;
|
|
}
|
|
}
|
|
}
|
|
&.top.topic-body {
|
|
padding: 0;
|
|
}
|
|
.post-date {
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
}
|
|
.d-icon-arrow-up,
|
|
.d-icon-arrow-down {
|
|
margin-left: 5px;
|
|
}
|
|
.reply:first-of-type .row {
|
|
border-top: none;
|
|
}
|
|
.topic-meta-data {
|
|
position: relative;
|
|
}
|
|
.topic-meta-data h5 {
|
|
position: absolute;
|
|
z-index: z("base");
|
|
font-size: $font-down-1;
|
|
a {
|
|
font-weight: bold;
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
}
|
|
.arrow {
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
}
|
|
}
|
|
|
|
.post-action {
|
|
.relative-date {
|
|
margin-left: 5px;
|
|
}
|
|
.avatar {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.topic-map {
|
|
margin: 20px 0 20px 11px;
|
|
.map {
|
|
.secondary {
|
|
text-align: center;
|
|
}
|
|
li {
|
|
float: left;
|
|
padding: 7px 10px;
|
|
&:last-of-type {
|
|
border-right: 0;
|
|
}
|
|
&:nth-child(3) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.number {
|
|
color: $primary-high;
|
|
}
|
|
.number,
|
|
.d-icon {
|
|
font-size: $font-up-2;
|
|
line-height: $line-height-medium;
|
|
}
|
|
button .d-icon,
|
|
button:hover .d-icon {
|
|
color: $primary-high;
|
|
}
|
|
.avatar a {
|
|
float: left;
|
|
}
|
|
.topic-map-post {
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
.avatars,
|
|
.links,
|
|
.information {
|
|
padding: 7px 10px 7px 10px;
|
|
color: $primary;
|
|
}
|
|
.buttons {
|
|
float: right;
|
|
.btn {
|
|
border: 0;
|
|
padding: 0 23px;
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
background: blend-primary-secondary(5%);
|
|
border-left: 1px solid $primary-low;
|
|
border-top: 1px solid transparent;
|
|
&:hover {
|
|
color: $primary;
|
|
background: $primary-low;
|
|
}
|
|
&.collapsed {
|
|
padding-bottom: 1px;
|
|
}
|
|
.fa {
|
|
margin: 0;
|
|
font-size: $font-up-2;
|
|
line-height: 52px;
|
|
}
|
|
}
|
|
}
|
|
.link-summary .btn {
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
background: blend-primary-secondary(5%);
|
|
width: 100%;
|
|
&:hover {
|
|
color: $primary;
|
|
background: dark-light-diff($primary, $secondary, 90%, -80%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin topic-footer-button {
|
|
margin-bottom: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#topic-footer-buttons {
|
|
padding: 10px 10px 0 0;
|
|
float: left;
|
|
.btn {
|
|
@include topic-footer-button;
|
|
.d-icon-bookmark.bookmarked {
|
|
color: $tertiary;
|
|
}
|
|
}
|
|
.bookmark.bookmarked .d-icon-bookmark {
|
|
color: $tertiary;
|
|
}
|
|
.feature-on-profile.featured-on-profile .d-icon-id-card {
|
|
color: $tertiary;
|
|
}
|
|
}
|
|
|
|
#topic-footer-button {
|
|
width: 757px;
|
|
}
|
|
|
|
.suggested-topics {
|
|
clear: left;
|
|
padding: 20px 0 15px 0;
|
|
table {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.suggested-topics .topic-statuses .topic-status {
|
|
padding: 0;
|
|
.d-icon {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
span.post-count {
|
|
background: $primary;
|
|
color: $secondary;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
button.expand-post {
|
|
margin-top: 10px;
|
|
margin-left: $topic-body-width-padding;
|
|
}
|
|
|
|
.quote-button.visible {
|
|
display: block;
|
|
}
|
|
|
|
iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
video {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.video {
|
|
// Height determined by aspect-ratio
|
|
max-height: 500px;
|
|
> video {
|
|
max-height: unset;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.open > .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.btn-group {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
.deleted {
|
|
.topic-body {
|
|
background-color: dark-light-diff(
|
|
rgba($danger, 0.7),
|
|
$secondary,
|
|
50%,
|
|
-60%
|
|
);
|
|
}
|
|
}
|
|
|
|
.post-select {
|
|
float: right;
|
|
margin-right: 20px;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.deleted-user-avatar {
|
|
font-size: $font-up-6;
|
|
}
|
|
|
|
.info-line {
|
|
margin: 10px 0;
|
|
color: $primary;
|
|
}
|
|
|
|
/* solo quotes */
|
|
|
|
blockquote {
|
|
/* leave browser defaults for top and bottom here */
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* quotes with attribution */
|
|
|
|
.quote {
|
|
& > blockquote {
|
|
.onebox-result {
|
|
background-color: $primary-very-low;
|
|
}
|
|
}
|
|
aside {
|
|
.quote,
|
|
.title,
|
|
blockquote,
|
|
.onebox,
|
|
.onebox-result {
|
|
background: $primary-very-low;
|
|
border-left: 5px solid $primary-low;
|
|
}
|
|
aside.quote > blockquote,
|
|
aside.quote > .title {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// variables are used to calculate the width of .gap
|
|
.topic-body {
|
|
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2));
|
|
float: left;
|
|
position: relative;
|
|
border-top: 1px solid $primary-low;
|
|
padding: 12px 0 0 0;
|
|
.topic-meta-data,
|
|
.cooked {
|
|
padding: 0 $topic-body-width-padding 0.25em $topic-body-width-padding;
|
|
}
|
|
a.expand-hidden {
|
|
padding-left: $topic-body-width-padding;
|
|
}
|
|
}
|
|
|
|
.topic-avatar {
|
|
border-top: 1px solid $primary-low;
|
|
padding-top: 15px;
|
|
width: $topic-avatar-width;
|
|
float: left;
|
|
z-index: z("base") + 1;
|
|
}
|
|
|
|
.gap {
|
|
width: calc(
|
|
#{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}
|
|
);
|
|
}
|
|
|
|
/* hide the reply border above the time gap notices */
|
|
|
|
.time-gap + .topic-post .topic-body,
|
|
.time-gap + .topic-post .topic-avatar {
|
|
border-top: none;
|
|
}
|
|
|
|
.time-gap + .topic-post .embedded-posts.top {
|
|
border-bottom: 1px solid $primary-low;
|
|
}
|
|
|
|
.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 $primary;
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent;
|
|
content: "";
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
bottom: 115%;
|
|
left: 0;
|
|
z-index: z("dropdown");
|
|
display: none;
|
|
float: left;
|
|
width: 550px;
|
|
margin: 1px 0 0;
|
|
list-style: none;
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-low;
|
|
box-shadow: shadow("dropdown");
|
|
background-clip: padding-box;
|
|
span {
|
|
font-size: $font-down-1;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
span.title {
|
|
font-weight: bold;
|
|
display: block;
|
|
font-size: $font-0;
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu a {
|
|
display: block;
|
|
padding: 9px;
|
|
clear: both;
|
|
font-weight: normal;
|
|
line-height: $line-height-medium;
|
|
color: $primary;
|
|
transition: all linear 0.15s;
|
|
& > div {
|
|
margin-left: 26px;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu li > a:hover,
|
|
.dropdown-menu .active > a,
|
|
.dropdown-menu .active > a:hover {
|
|
color: $primary;
|
|
text-decoration: none;
|
|
background-color: $highlight-medium;
|
|
}
|
|
|
|
.dropdown-menu .disabled > a,
|
|
.dropdown-menu .disabled > a:hover {
|
|
text-decoration: none;
|
|
color: $primary;
|
|
background-color: $tertiary-low;
|
|
cursor: default;
|
|
}
|
|
|
|
.dropdown-menu .icon {
|
|
margin-top: 3px;
|
|
float: left;
|
|
font-size: $font-up-2;
|
|
}
|
|
|
|
.open > .dropdown-menu {
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.selected-posts {
|
|
width: 200px;
|
|
position: fixed;
|
|
z-index: z("dropdown");
|
|
box-shadow: shadow("card");
|
|
padding: 0.714em;
|
|
margin-bottom: 5px;
|
|
right: 10px;
|
|
@include breakpoint(extra-large, min-width) {
|
|
right: auto;
|
|
margin-left: 330px;
|
|
left: 50%;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
margin: 4px auto;
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
.controls {
|
|
margin-top: 10px;
|
|
}
|
|
p {
|
|
font-size: $font-down-1;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
p.cancel {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
h3 {
|
|
font-size: $font-up-4;
|
|
color: $primary;
|
|
margin-bottom: 5px;
|
|
.d-icon {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.attachment:before {
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
// 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;
|
|
}
|
|
|
|
.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: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
|
|
a.wiki {
|
|
color: $wiki;
|
|
}
|
|
}
|
|
}
|
|
|
|
.who-liked,
|
|
.who-read {
|
|
margin-top: 20px;
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
span.highlighted {
|
|
background-color: $tertiary-low;
|
|
}
|
|
|
|
.first.new-user:not(.staff) a {
|
|
color: $primary-low-mid;
|
|
}
|
|
|
|
.read-state {
|
|
position: absolute;
|
|
// We use absolute positioning here because we want it to display in the padding
|
|
align-self: center;
|
|
color: $tertiary-medium;
|
|
right: 0;
|
|
font-size: 0.571em;
|
|
}
|
|
|
|
.read-state.read {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 1s, opacity ease-out 1s;
|
|
}
|
|
|
|
.signup-cta {
|
|
width: $topic-body-width;
|
|
}
|
|
|
|
/* Tablet (portrait) ----------- */
|
|
|
|
@media all and (max-width: 775px) {
|
|
.topic-avatar {
|
|
width: 45px;
|
|
}
|
|
.topic-post .reply-to-tab {
|
|
right: 15%;
|
|
}
|
|
.topic-body {
|
|
box-sizing: border-box;
|
|
width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
|
|
}
|
|
.embedded-posts {
|
|
// top means "in reply to expansion" above a post
|
|
&.top {
|
|
width: calc(100% - 56px); // [100% - margin-left]
|
|
}
|
|
}
|
|
}
|