github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-07 07:14:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Giving post admin menu variable width in case of long translations

Browse Source
This commit is contained in:
Kris
2018-06-18 13:01:40 -04:00
parent 3fc82bf200
commit ceb9226518
3 changed files with 56 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/stylesheets/common/base/topic.scss
View File

@ -25,7 +25,6 @@
animation-name: button-jump-up; animation-name: button-jump-up;
width: 145px; width: 145px;
text-align: center; text-align: center;
.btn { .btn {
margin: 0; margin: 0;
} }
@ -36,13 +35,11 @@
position: relative; position: relative;
right: 38px; right: 38px;
top: 35px; top: 35px;
.widget-button { .widget-button {
height: 35px; height: 35px;
border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%); border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%);
} }
} }
.topic-admin-popup-menu.right-side { .topic-admin-popup-menu.right-side {
position: relative; position: relative;
right: 50px; right: 50px;
@ -52,6 +49,7 @@
#topic-progress-wrapper.docked { #topic-progress-wrapper.docked {
.topic-admin-popup-menu.right-side { .topic-admin-popup-menu.right-side {
right: 50px; right: 50px;
bottom: -150px; // Prevents menu from being too high when a topic is very short
} }
} }
@ -60,11 +58,9 @@
flex-wrap: wrap; flex-wrap: wrap;
width: 90%; width: 90%;
align-items: flex-end; align-items: flex-end;
.btn-small { .btn-small {
margin: 0 6px 0 0; margin: 0 6px 0 0;
} }
a.topic-featured-link { a.topic-featured-link {
display: inline-block; display: inline-block;
} }
@ -83,29 +79,23 @@ a.badge-category {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 90%; width: 90%;
.btn-small { .btn-small {
margin: 0 6px 0 0; margin: 0 6px 0 0;
} }
a.topic-featured-link { a.topic-featured-link {
display: inline-block; display: inline-block;
} }
} }
h1 { h1 {
margin: 0 0 4px 0; margin: 0 0 4px 0;
width: 90%; width: 90%;
} }
a.badge-category { a.badge-category {
margin-top: 5px; margin-top: 5px;
} }
a.edit-topic i { a.edit-topic i {
font-size: 0.8em; font-size: 0.8em;
} }
.edit-topic-title { .edit-topic-title {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -206,7 +196,6 @@ a.badge-category {
.post-links-container { .post-links-container {
@include unselectable; @include unselectable;
clear: both; clear: both;
.post-links { .post-links {
margin-top: 1em; margin-top: 1em;
padding-top: 1em; padding-top: 1em;
@ -215,11 +204,9 @@ a.badge-category {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
.expand-links { .expand-links {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
.track-link { .track-link {
display: flex; display: flex;
align-items: center; align-items: center;
@ -229,11 +216,9 @@ a.badge-category {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
ul { ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
li { li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
a[href] { a[href] {
@ -249,7 +234,6 @@ a.badge-category {
} }
} }
} }
a.reply-new { a.reply-new {
i { i {
background: $secondary; background: $secondary;
@ -270,7 +254,6 @@ a.topic-featured-link {
text-transform: lowercase; text-transform: lowercase;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
font-size: 0.875rem; font-size: 0.875rem;
&::before { &::before {
position: relative; position: relative;
top: 0.1em; top: 0.1em;

140
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -21,18 +21,15 @@ h1 .topic-statuses .topic-status i {
.topic-body { .topic-body {
padding: 0; padding: 0;
&:first-of-type { &:first-of-type {
border-top: none; border-top: none;
} }
.reply-to-tab { .reply-to-tab {
z-index: z("base") + 1; z-index: z("base") + 1;
float: right; float: right;
margin: -2px 25px 0 0; margin: -2px 25px 0 0;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
.actions .fade-out { .actions .fade-out {
.discourse-no-touch & { .discourse-no-touch & {
opacity: 0.7; opacity: 0.7;
@ -42,7 +39,6 @@ h1 .topic-statuses .topic-status i {
opacity: 1; opacity: 1;
} }
} }
&:hover .actions .fade-out, &:hover .actions .fade-out,
.selected .actions .fade-out { .selected .actions .fade-out {
opacity: 1; opacity: 1;
@ -55,18 +51,14 @@ section.post-menu-area {
nav.post-controls { nav.post-controls {
padding: 0; padding: 0;
.like-button { .like-button {
display: inline-flex; display: inline-flex;
.like-count { .like-count {
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
} }
.widget-button { .widget-button {
background: none; background: none;
} }
&:hover { &:hover {
background: $primary-low; background: $primary-low;
.like-count { .like-count {
@ -79,21 +71,17 @@ nav.post-controls {
background: none; background: none;
} }
} }
&:active { &:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
.widget-button { .widget-button {
box-shadow: none; box-shadow: none;
} }
} }
.like { .like {
&:focus { &:focus {
background: none; background: none;
} }
} }
.like-count { .like-count {
font-size: $font-up-1; font-size: $font-up-1;
margin-left: 0; margin-left: 0;
@ -108,38 +96,31 @@ nav.post-controls {
margin-right: -12px; margin-right: -12px;
} }
} }
.toggle-like { .toggle-like {
padding: 8px 8px; padding: 8px 8px;
margin-left: 2px; margin-left: 2px;
} }
} }
.highlight-action { .highlight-action {
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
} }
a, a,
button { button {
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
.d-icon { .d-icon {
opacity: 1; opacity: 1;
} }
margin-right: 2px; margin-right: 2px;
display: inline-block; display: inline-block;
} }
a.toggle-likes { a.toggle-likes {
padding: 8px 0; padding: 8px 0;
margin-right: -3px; margin-right: -3px;
} }
span.badge-posts { span.badge-posts {
margin-right: 5px; margin-right: 5px;
transition: all linear 0.15s; transition: all linear 0.15s;
} }
.actions { .actions {
text-align: right; text-align: right;
float: right; float: right;
@ -149,7 +130,6 @@ nav.post-controls {
overflow: hidden; overflow: hidden;
} }
} }
.show-replies { .show-replies {
margin-left: -10px; margin-left: -10px;
font-size: inherit; font-size: inherit;
@ -167,17 +147,14 @@ nav.post-controls {
font-size: $font-down-1; font-size: $font-down-1;
} }
} }
button.create { button.create {
margin-right: 0; margin-right: 0;
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);
margin-left: 10px; margin-left: 10px;
} }
.create i { .create i {
margin-right: 5px; margin-right: 5px;
} }
button { button {
font-size: $font-up-1; font-size: $font-up-1;
padding: 8px 10px; padding: 8px 10px;
@ -185,36 +162,30 @@ nav.post-controls {
background: transparent; background: transparent;
border: none; border: none;
margin-left: 3px; margin-left: 3px;
&.d-hover, &.d-hover,
&:focus { &:focus {
background: $primary-low; background: $primary-low;
color: $primary; color: $primary;
} }
&:active { &:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
} }
&.hidden { &.hidden {
display: none; display: none;
} }
&.admin { &.admin {
position: relative; position: relative;
} }
&.delete.d-hover, &.delete.d-hover,
&.delete:focus { &.delete:focus {
background: $danger; background: $danger;
color: $secondary; color: $secondary;
} }
&.like.d-hover, &.like.d-hover,
&.like:focus { &.like:focus {
color: $love; color: $love;
background: $love-low; background: $love-low;
} }
&.has-like { &.has-like {
color: $love; color: $love;
} }
@ -224,7 +195,6 @@ nav.post-controls {
&.has-like[disabled]:active { &.has-like[disabled]:active {
box-shadow: none; box-shadow: none;
} }
&.bookmark { &.bookmark {
padding: 8px 11px; padding: 8px 11px;
&.bookmarked { &.bookmarked {
@ -232,10 +202,13 @@ nav.post-controls {
} }
} }
} }
.post-admin-menu { .post-admin-menu {
display: inline-flex;
flex-direction: column;
box-sizing: border-box;
background-color: $secondary; background-color: $secondary;
width: 205px; width: auto;
max-width: 320px;
padding: 10px; padding: 10px;
border: 1px solid $primary-low; border: 1px solid $primary-low;
position: absolute; position: absolute;
@ -243,25 +216,20 @@ nav.post-controls {
bottom: -2px; bottom: -2px;
right: 15px; right: 15px;
z-index: z("dropdown"); z-index: z("dropdown");
h3 { h3 {
margin-top: 0; margin-top: 0;
color: $primary; color: $primary;
font-size: $font-0; font-size: $font-0;
} }
ul { ul {
list-style: none; list-style: none;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
li { li {
width: 176px;
margin-bottom: 5px; margin-bottom: 5px;
.d-icon { .d-icon {
width: 14px; width: 14px;
margin-right: 14px; margin-right: 10px;
} }
} }
} }
@ -274,7 +242,6 @@ nav.post-controls {
margin: 10px 0; margin: 10px 0;
} }
border: 1px solid $primary-low; border: 1px solid $primary-low;
.topic-body { .topic-body {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 70px); // [100% - .topic-avatar width] width: calc(100% - 70px); // [100% - .topic-avatar width]
@ -282,19 +249,15 @@ nav.post-controls {
// which expect "normal" post width, but expansions are narrower // which expect "normal" post width, but expansions are narrower
overflow: hidden; overflow: hidden;
padding: 15px 25px 0 15px; padding: 15px 25px 0 15px;
} } // this is covered by .topic-body .regular on a normal post
// this is covered by .topic-body .regular on a normal post
// but no such class structure exists for an embedded, expanded post // but no such class structure exists for an embedded, expanded post
.cooked { .cooked {
margin-top: 15px; margin-top: 15px;
} }
.topic-avatar { .topic-avatar {
padding-left: 25px; padding-left: 25px;
padding-top: 15px; padding-top: 15px;
} }
.collapse-down, .collapse-down,
.collapse-up { .collapse-up {
position: absolute; position: absolute;
@ -307,9 +270,7 @@ nav.post-controls {
background: $primary-low; background: $primary-low;
color: $primary; color: $primary;
} }
} } // bottom means "reply expansion" below a post
// bottom means "reply expansion" below a post
&.bottom { &.bottom {
border-top: none; border-top: none;
margin-bottom: 20px; margin-bottom: 20px;
@ -329,9 +290,7 @@ nav.post-controls {
border-top: 1px solid $primary-low; border-top: 1px solid $primary-low;
} }
} }
} } // top means "in reply to expansion" above a post
// top means "in reply to expansion" above a post
&.top { &.top {
border-bottom: none; border-bottom: none;
.collapse-down { .collapse-down {
@ -350,7 +309,6 @@ nav.post-controls {
&.top.topic-body { &.top.topic-body {
padding: 0; padding: 0;
} }
.post-date { .post-date {
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
} }
@ -361,7 +319,6 @@ nav.post-controls {
.reply:first-of-type .row { .reply:first-of-type .row {
border-top: none; border-top: none;
} }
.topic-meta-data { .topic-meta-data {
position: relative; position: relative;
} }
@ -390,7 +347,6 @@ nav.post-controls {
.topic-map { .topic-map {
margin: 20px 0; margin: 20px 0;
.map { .map {
.secondary { .secondary {
text-align: center; text-align: center;
@ -428,7 +384,6 @@ nav.post-controls {
padding: 7px 10px 15px 10px; padding: 7px 10px 15px 10px;
color: $primary; color: $primary;
} }
.participants { .participants {
// PMs // // PMs //
.user { .user {
@ -444,7 +399,6 @@ nav.post-controls {
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
} }
} }
.buttons { .buttons {
float: right; float: right;
.btn { .btn {
@ -458,7 +412,6 @@ nav.post-controls {
color: $primary; color: $primary;
background: $primary-low; background: $primary-low;
} }
&.collapsed { &.collapsed {
padding-bottom: 1px; padding-bottom: 1px;
} }
@ -469,7 +422,6 @@ nav.post-controls {
} }
} }
} }
.link-summary .btn { .link-summary .btn {
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
background: blend-primary-secondary(5%); background: blend-primary-secondary(5%);
@ -498,7 +450,6 @@ nav.post-controls {
color: $tertiary; color: $tertiary;
} }
} }
.bookmark.bookmarked .d-icon-bookmark { .bookmark.bookmarked .d-icon-bookmark {
color: $tertiary; color: $tertiary;
} }
@ -513,9 +464,7 @@ nav.post-controls {
padding: 20px 0 15px 0; padding: 20px 0 15px 0;
table { table {
margin-top: 10px; margin-top: 10px;
} } // this forces category to take less space in suggested topics
// this forces category to take less space in suggested topics
// as the poster list is not present at all there. // as the poster list is not present at all there.
th.category { th.category {
width: 150px; width: 150px;
@ -571,14 +520,12 @@ video {
.extra-info-wrapper { .extra-info-wrapper {
overflow: hidden; overflow: hidden;
.badge-wrapper, .badge-wrapper,
i, i,
.topic-link { .topic-link {
-webkit-animation: fadein 0.7s; -webkit-animation: fadein 0.7s;
animation: fadein 0.7s; animation: fadein 0.7s;
} }
.topic-statuses { .topic-statuses {
i { i {
color: $header_primary; color: $header_primary;
@ -593,7 +540,6 @@ video {
color: $header_primary; color: $header_primary;
} }
} }
.topic-link { .topic-link {
color: $header_primary; color: $header_primary;
display: block; display: block;
@ -601,13 +547,13 @@ video {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.topic-header-extra { .topic-header-extra {
margin: 0 0 0 5px; margin: 0 0 0 5px;
} }
} }
/* default docked header CSS for all topics, including those without categories */ /* default docked header CSS for all topics, including those without categories */
.extra-info { .extra-info {
h1 { h1 {
margin: 5px 0 0 0; margin: 5px 0 0 0;
@ -615,13 +561,13 @@ video {
line-height: $line-height-large; line-height: $line-height-large;
width: 100%; width: 100%;
} }
.topic-statuses { .topic-statuses {
margin-top: -2px; margin-top: -2px;
} }
} }
/* override docked header CSS for topics with categories */ /* override docked header CSS for topics with categories */
.extra-info.two-rows { .extra-info.two-rows {
h1 { h1 {
line-height: $line-height-medium; line-height: $line-height-medium;
@ -630,7 +576,7 @@ video {
} }
} }
.open > .dropdown-menu { .open>.dropdown-menu {
display: block; display: block;
} }
@ -645,12 +591,7 @@ video {
.deleted { .deleted {
.topic-body { .topic-body {
background-color: dark-light-diff( background-color: dark-light-diff( rgba($danger, 0.7), $secondary, 50%, -60%);
rgba($danger, 0.7),
$secondary,
50%,
-60%
);
} }
} }
@ -675,6 +616,7 @@ video {
} }
/* solo quotes */ /* solo quotes */
blockquote { blockquote {
/* leave browser defaults for top and bottom here */ /* leave browser defaults for top and bottom here */
margin-left: 0; margin-left: 0;
@ -683,13 +625,13 @@ blockquote {
} }
/* quotes with attribution */ /* quotes with attribution */
.quote { .quote {
& > blockquote { &>blockquote {
.onebox-result { .onebox-result {
background-color: blend-primary-secondary(5%); background-color: blend-primary-secondary(5%);
} }
} }
aside { aside {
.quote, .quote,
.title, .title,
@ -699,9 +641,8 @@ blockquote {
background: blend-primary-secondary(5%); background: blend-primary-secondary(5%);
border-left: 5px solid $primary-low; border-left: 5px solid $primary-low;
} }
aside.quote>blockquote,
aside.quote > blockquote, aside.quote>.title {
aside.quote > .title {
border-left: 0; border-left: 0;
} }
} }
@ -711,7 +652,6 @@ blockquote {
$topic-body-width: 690px; $topic-body-width: 690px;
$topic-body-width-padding: 11px; $topic-body-width-padding: 11px;
$topic-avatar-width: 45px; $topic-avatar-width: 45px;
.topic-body { .topic-body {
width: $topic-body-width; width: $topic-body-width;
float: left; float: left;
@ -730,18 +670,17 @@ $topic-avatar-width: 45px;
} }
.gap { .gap {
width: calc( width: calc( #{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding});
#{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}
);
} }
/* hide the reply border above the time gap notices */ /* hide the reply border above the time gap notices */
.time-gap + .topic-post .topic-body,
.time-gap + .topic-post .topic-avatar { .time-gap+.topic-post .topic-body,
.time-gap+.topic-post .topic-avatar {
border-top: none; border-top: none;
} }
.time-gap + .topic-post .embedded-posts.top { .time-gap+.topic-post .embedded-posts.top {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
} }
@ -753,6 +692,7 @@ $topic-avatar-width: 45px;
.dropdown { .dropdown {
position: relative; position: relative;
} }
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
@ -764,6 +704,7 @@ $topic-avatar-width: 45px;
content: ""; content: "";
margin-left: 5px; margin-left: 5px;
} }
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
bottom: 115%; bottom: 115%;
@ -789,6 +730,7 @@ $topic-avatar-width: 45px;
color: $primary; color: $primary;
} }
} }
.dropdown-menu a { .dropdown-menu a {
display: block; display: block;
padding: 9px; padding: 9px;
@ -797,21 +739,21 @@ $topic-avatar-width: 45px;
line-height: $line-height-medium; line-height: $line-height-medium;
color: $primary; color: $primary;
transition: all linear 0.15s; transition: all linear 0.15s;
&>div {
& > div {
margin-left: 26px; margin-left: 26px;
} }
} }
.dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu li>a:hover,
.dropdown-menu .active > a:hover { .dropdown-menu .active>a,
.dropdown-menu .active>a:hover {
color: $primary; color: $primary;
text-decoration: none; text-decoration: none;
background-color: $highlight-medium; background-color: $highlight-medium;
} }
.dropdown-menu .disabled > a, .dropdown-menu .disabled>a,
.dropdown-menu .disabled > a:hover { .dropdown-menu .disabled>a:hover {
text-decoration: none; text-decoration: none;
color: $primary; color: $primary;
background-color: $tertiary-low; background-color: $tertiary-low;
@ -824,7 +766,7 @@ $topic-avatar-width: 45px;
font-size: $font-up-2; font-size: $font-up-2;
} }
.open > .dropdown-menu { .open>.dropdown-menu {
display: block; display: block;
clear: both; clear: both;
} }
@ -838,20 +780,17 @@ $topic-avatar-width: 45px;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
right: 10px; right: 10px;
@include large-width { @include large-width {
right: auto; right: auto;
margin-left: 330px; margin-left: 330px;
left: 50%; left: 50%;
} }
button { button {
width: 180px; width: 180px;
margin: 4px auto; margin: 4px auto;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
} }
&.hidden { &.hidden {
display: none; display: none;
} }
@ -879,7 +818,6 @@ $topic-avatar-width: 45px;
font-weight: normal; font-weight: normal;
margin-bottom: 10px; margin-bottom: 10px;
background: $tertiary-medium; background: $tertiary-medium;
&[href] { &[href] {
color: $secondary; color: $secondary;
} }
@ -917,14 +855,12 @@ $topic-avatar-width: 45px;
} }
article.boxed { article.boxed {
position: relative; position: relative;
.select-posts { .select-posts {
position: absolute; position: absolute;
right: 0; right: 0;
z-index: z("base") + 1; z-index: z("base") + 1;
top: 3em; top: 3em;
height: 100px; height: 100px;
button { button {
margin-left: 8px; margin-left: 8px;
background-color: dark-light-choose($primary-low-mid, $secondary-high); background-color: dark-light-choose($primary-low-mid, $secondary-high);
@ -967,7 +903,6 @@ a.attachment:before {
clear: both; clear: both;
height: 0; height: 0;
} }
.post-info { .post-info {
display: inline-block; display: inline-block;
float: right; float: right;
@ -1015,22 +950,17 @@ span.highlighted {
.gutter { .gutter {
display: none; display: none;
} }
.topic-avatar { .topic-avatar {
width: 45px; width: 45px;
} }
.topic-post .reply-to-tab { .topic-post .reply-to-tab {
right: 15%; right: 15%;
} }
.topic-body { .topic-body {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px] width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
padding-left: 2%; padding-left: 2%;
} }
.embedded-posts { .embedded-posts {
// top means "in reply to expansion" above a post // top means "in reply to expansion" above a post
&.top { &.top {

57
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -1,5 +1,6 @@
/* hide the reply border above the time gap notices */ /* hide the reply border above the time gap notices */
.time-gap + .topic-post article {
.time-gap+.topic-post article {
border-top: none; border-top: none;
} }
@ -29,11 +30,9 @@ span.badge-posts {
.topic-post { .topic-post {
nav.post-controls { nav.post-controls {
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
.actions { .actions {
display: flex; display: flex;
} }
.like-button { .like-button {
display: flex; display: flex;
flex: 0 1 auto; flex: 0 1 auto;
@ -44,7 +43,6 @@ span.badge-posts {
&.like-count { &.like-count {
padding: 8px 4px 8px 8px; padding: 8px 4px 8px 8px;
line-height: 1.2; line-height: 1.2;
&.regular-likes { &.regular-likes {
margin-right: 0; margin-right: 0;
} }
@ -63,11 +61,10 @@ span.badge-posts {
line-height: $line-height-medium; line-height: $line-height-medium;
} }
} }
button.like-count + button.toggle-like { button.like-count+button.toggle-like {
padding: 8px 9px 8px 4px; padding: 8px 9px 8px 4px;
} }
} }
.d-icon { .d-icon {
opacity: 1; opacity: 1;
} }
@ -102,34 +99,36 @@ span.badge-posts {
} }
.post-admin-menu { .post-admin-menu {
display: inline-flex;
flex-direction: column;
box-sizing: border-box;
background-color: $secondary; background-color: $secondary;
width: 205px; width: auto;
max-width: 320px;
padding: 10px; padding: 10px;
border: 1px solid $primary-low; border: 1px solid $primary-low;
position: absolute; position: absolute;
text-align: left; text-align: left;
bottom: 0; bottom: -50px;
left: 135px; left: 135px;
@media screen and (max-width: 374px) {
left: 50px;
}
z-index: z("dropdown"); z-index: z("dropdown");
h3 { h3 {
margin-top: 0; margin-top: 0;
color: $primary; color: $primary;
font-size: $font-0; font-size: $font-0;
} }
ul { ul {
list-style: none; list-style: none;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
li { li {
width: 176px;
margin-bottom: 5px; margin-bottom: 5px;
.d-icon { .d-icon {
width: 14px; width: 14px;
margin-right: 14px; margin-right: 10px;
} }
} }
} }
@ -168,22 +167,18 @@ a.reply-to-tab {
.topic-map { .topic-map {
margin: 10px 0; margin: 10px 0;
h4 { h4 {
line-height: $line-height-medium; line-height: $line-height-medium;
} }
.user { .user {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.map-collapsed { .map-collapsed {
.secondary { .secondary {
display: none; display: none;
} }
} }
.map { .map {
li { li {
float: left; float: left;
@ -200,15 +195,13 @@ a.reply-to-tab {
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);
font-size: $font-up-1; font-size: $font-up-1;
} }
.avatar+a {
.avatar + a {
float: left; float: left;
} }
} }
li.avatars { li.avatars {
display: none; display: none;
} }
.links, .links,
.information, .information,
.avatars { .avatars {
@ -216,13 +209,11 @@ a.reply-to-tab {
color: $primary; color: $primary;
overflow: auto; overflow: auto;
} }
.information { .information {
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
} }
.participants { .participants {
// PMs // // PMs //
.user { .user {
@ -230,7 +221,6 @@ a.reply-to-tab {
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
} }
.buttons { .buttons {
.btn { .btn {
border: 0; border: 0;
@ -245,7 +235,6 @@ a.reply-to-tab {
} }
} }
} }
.link-summary .btn { .link-summary .btn {
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
background: blend-primary-secondary(5%); background: blend-primary-secondary(5%);
@ -259,7 +248,6 @@ a.reply-to-tab {
.d-icon-bookmark.bookmarked { .d-icon-bookmark.bookmarked {
color: $tertiary; color: $tertiary;
} }
.combobox { .combobox {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
@ -269,7 +257,8 @@ a.reply-to-tab {
} }
#topic-footer-buttons p { #topic-footer-buttons p {
clear: both; /* this is to force the drop-down notification state description para below the button */ clear: both;
/* this is to force the drop-down notification state description para below the button */
margin: 0; margin: 0;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
@ -290,7 +279,6 @@ a.reply-to-tab {
td.likes { td.likes {
display: none; display: none;
} }
a.badge-category, a.badge-category,
a.badge-category-parent { a.badge-category-parent {
font-size: $font-down-1; font-size: $font-down-1;
@ -341,7 +329,7 @@ iframe {
display: none; display: none;
} }
.open > .dropdown-menu { .open>.dropdown-menu {
display: block; display: block;
} }
@ -415,12 +403,7 @@ button.select-post {
.deleted { .deleted {
.topic-body { .topic-body {
background-color: dark-light-diff( background-color: dark-light-diff( rgba($danger, 0.7), $secondary, 50%, -60%);
rgba($danger, 0.7),
$secondary,
50%,
-60%
);
} }
} }
@ -458,7 +441,8 @@ span.highlighted {
.topic-avatar { .topic-avatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
z-index: z("base") + 1; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */ z-index: z("base") + 1;
/* must render on top of topic-body + topic-meta-data, otherwise not tappable */
} }
.topic-meta-data { .topic-meta-data {
@ -466,7 +450,6 @@ span.highlighted {
font-size: $font-down-1; font-size: $font-down-1;
.names { .names {
line-height: $line-height-medium; line-height: $line-height-medium;
.poster-icon { .poster-icon {
float: right; float: right;
} }