diff --git a/web/app/components/comment/_level/comment_level.scss b/web/app/components/comment/_level/comment_level.scss index 2e9d6e69..8ba7a197 100644 --- a/web/app/components/comment/_level/comment_level.scss +++ b/web/app/components/comment/_level/comment_level.scss @@ -7,10 +7,8 @@ $step: 24px; &.comment_replying { .comment__input { - margin-left: -$i * $step; - - @media (min-width: 768px) { - margin-left: 0; + @media (hover: none) and (max-width: 768px) { + margin-left: -$i * $step; } } } diff --git a/web/app/components/comment/_replying/comment_replying.scss b/web/app/components/comment/_replying/comment_replying.scss index e5844853..1235a983 100644 --- a/web/app/components/comment/_replying/comment_replying.scss +++ b/web/app/components/comment/_replying/comment_replying.scss @@ -1,38 +1,32 @@ .comment_replying { - border: 8px solid #eee; - padding-bottom: 0; - - @media (min-width: 768px) { - border: 0; - padding-top: 0; - } - - .comment__body { - padding: 8px 8px 0; - - @media (min-width: 768px) { - padding: 0; - } - } - .comment__input { - border-left-width: 0; - border-right-width: 0; - border-bottom-width: 0; - border-top-width: 8px; - - @media (min-width: 768px) { - border: 12px solid #eee; - } + border: 12px solid #eee; } .comment__score { - top: 12px; - right: 8px; + top: 4px; + right: 0; + } - @media (min-width: 768px) { - top: 4px; - right: 0; + // it isn't mobile first, but it's fine here + @media (hover: none) and (max-width: 768px) { + border: 8px solid #eee; + padding-bottom: 0; + + .comment__body { + padding: 8px 8px 0; + } + + .comment__input { + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + border-top-width: 8px; + } + + .comment__score { + top: 12px; + right: 8px; } } }