diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 7f0639fe786..15b4c78ea20 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -701,28 +701,31 @@ blockquote > *:last-child { } .gutter { - float: left; - margin-top: 15px; - padding-left: 11px; - width: 341px; + margin-top: 13px; + width: 100%; + box-sizing: border-box; + z-index: 1; ul {margin: 0;} li {margin-bottom: 10px;} i {font-size: 12px;} + .reply-new, .track-link { + padding-left: 27px; + display: block; + overflow: hidden; + } + .post-links { list-style-type: none; - padding-left: 19px; position: relative; - margin-left: 5px; line-height: 18px; word-wrap: break-word; a i { - position: absolute; - left: 0; - margin-right: 15px; - margin-bottom: 20px; - margin-top: 2px; + position: relative; + margin-right: 7px; + margin-top: -2px; + margin-left: -17px; } a.track-link {color: scale-color($primary, $lightness: 50%);} a.toggle-more { @@ -741,6 +744,7 @@ $topic-avatar-width: 45px; width: $topic-body-width; float: left; position: relative; + z-index: 2; border-top: 1px solid scale-color-diff(); padding: 12px $topic-body-width-padding 15px $topic-body-width-padding; &.highlighted { @@ -752,6 +756,8 @@ $topic-avatar-width: 45px; padding-top: 16px; width: $topic-avatar-width; float: left; + position: relative; + z-index: 2; .wiki { margin-top: 14px; @@ -981,7 +987,7 @@ a.attachment:before { .private_message .gutter:before, .deleted-topic .gutter:before, .read_restricted .gutter:before { display: block; position: absolute; - left: 10px; + left: 767px; color: scale-color-diff(); font: 90px/1 FontAwesome; content: "\f05c"; @@ -1049,9 +1055,6 @@ and (max-width : 1140px) { width: 720px; } } - .gutter { - width: 200px; - } .post-cloak .reply-to-tab { right: 320px; } @@ -1065,9 +1068,6 @@ and (max-width : 975px) { width: 650px; } } - .gutter { - width: 150px; - } .post-cloak .reply-to-tab { right: 300px; } @@ -1075,9 +1075,6 @@ and (max-width : 975px) { @media only screen and (max-width : 940px) { - .gutter { - width: 100px; - } .post-cloak .reply-to-tab { right: 250px; } diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 94791392638..a4c12f40ca5 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -69,17 +69,17 @@ .private_message #topic-title .private-message-glyph { display: inline; } a.reply-new { - position: absolute; - margin-top: -2px; + margin-top: 3px; color: scale-color($primary, $lightness: 50%); i { - margin-right: 5px; + margin-right: 3px; background: $secondary; border: 1px solid scale-color-diff(); padding: 1.5px 3px; border-radius: 20px; transition: linear 0.15s; -webkit-transition: linear 0.15s; + margin-left: -20px; } } @@ -294,7 +294,7 @@ kbd @media only screen and (max-width : 940px) { - + #topic-progress, #topic-progress-expanded { left: 295px; }