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

265 lines
4.9 KiB
SCSS

@keyframes button-jump-up {
0% {
bottom: 0;
}
50% {
bottom: 45px;
}
65% {
bottom: 40px;
}
77% {
bottom: 43px;
}
100% {
bottom: 40px;
}
}
.progress-back-container {
position: fixed;
bottom: 40px;
z-index: z("dropdown");
margin-right: 0;
animation-duration: 0.5s;
animation-name: button-jump-up;
width: 145px;
text-align: center;
.btn {
margin: 0;
}
}
#topic-progress-wrapper {
.topic-admin-menu-button-container {
position: relative;
right: 38px;
top: 35px;
.widget-button {
height: 35px;
border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%);
}
}
.topic-admin-popup-menu.right-side {
position: relative;
right: 50px;
}
}
#topic-progress-wrapper.docked {
.topic-admin-popup-menu.right-side {
right: 50px;
bottom: -150px; // Prevents menu from being too high when a topic is very short
}
}
.title-wrapper {
display: flex;
flex-wrap: wrap;
width: 90%;
align-items: flex-end;
.btn-small {
margin: 0 6px 0 0;
}
a.topic-featured-link {
display: inline-block;
}
}
h1 {
margin: 0 0 4px 0;
}
a.badge-category {
margin-top: 5px;
}
#topic-title {
.title-wrapper {
display: flex;
flex-wrap: wrap;
width: 90%;
.btn-small {
margin: 0 6px 0 0;
}
a.topic-featured-link {
display: inline-block;
}
}
h1 {
margin: 0 0 4px 0;
width: 90%;
}
a.badge-category {
margin-top: 5px;
}
a.edit-topic i {
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;
}
.private-message-glyph {
margin: 5px 5px 0 0;
}
.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;
}
}
}
}
.private-message-glyph {
color: dark-light-choose($primary-low-mid, $secondary-high);
margin-right: 5px;
}
.archetype-private_message #topic-title .edit-topic-title .tag-chooser {
margin-left: 19px;
}
.private_message {
#topic-title {
.edit-topic-title {
#edit-title {
width: calc(100% - 50px);
}
}
}
}
.topic-title-outlet {
clear: both;
}
.extra-info-wrapper {
.badge-wrapper {
float: left;
}
}
.has-pending-posts {
padding: 0.5em;
background-color: $highlight-medium;
a[href] {
float: right;
}
margin-top: 1em;
max-width: 757px;
}
// 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;
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 {
display: flex;
align-items: center;
}
.post-links-container {
@include unselectable;
clear: both;
.post-links {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid $primary-low;
li:last-of-type {
margin-bottom: 1em;
}
}
.expand-links {
color: dark-light-choose($primary-medium, $secondary-medium);
}
.track-link {
display: flex;
align-items: center;
span:not(.badge) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
ul {
margin: 0;
list-style: none;
li {
margin-bottom: 0.5em;
a[href] {
color: dark-light-choose($primary-medium, $secondary-medium);
}
.clicks {
margin-left: 0.5em;
flex: 0 0 auto;
}
i {
font-size: $font-down-2;
margin: 0 0.5em 0 0;
}
}
}
a.reply-new {
i {
background: $secondary;
border-radius: 20px;
transition: all linear 0.15s;
}
&:hover {
color: $tertiary;
i {
background: $tertiary-low;
}
}
}
}
a.topic-featured-link {
display: inline-block;
text-transform: lowercase;
color: dark-light-choose($primary-medium, $secondary-medium);
font-size: 0.875rem;
&::before {
position: relative;
top: 0.1em;
padding-right: 3px;
font-family: FontAwesome;
content: "\f08e";
}
}