.comment{ margin-left:30px; position:relative; &.opened{ } &.queued{ .comment-notification{ @extend .grid-block; display:block; position:absolute; top:0; right:-120px; width:70px; } .comment-content{ height:1px; padding:0; overflow:hidden; } } } .comment-content{ position:relative; @extend .grid-block; @include border-radius(0 3px 3px 3px); font-size:14px; } .comment-notification{ display:none; } .comment-meta{ margin-bottom:5px; .comment-username, .comment-time, .comment-permalink{ display:inline-block; margin-right:4px; } color:$light-text; .comment-permalink{ position:relative; @include hide-text; width:20px; color:$light-text; margin:0; &:before{ position:absolute; display:block; top:1px; left:0; text-indent:0; } &:hover:before{ color:$red; } } } .comment-actions{ position:absolute; left:-30px; top:0px; a{ @include border-radius(0 0 0 3px); position:relative; display:block; height:30px; width:30px; // background:$light-blue; background:white; @include box-shadow(0 1px 1px black(0.15)); overflow:hidden; @include hide-text; // border-right:1px solid $lightest-grey; &.upvote{ @include border-radius(3px 0 0 0); margin-bottom:1px; } i{ font-size:12px; display:block; position:absolute; height:30px; width:30px; line-height:30px; text-align:center; text-indent:0; // color:$light-blue2; color:$red; } &:hover{ background:$highlight-color; i{ color:white; } } } } .comment-new{ @extend .grid-block; @extend .cf; .comment-field{ margin-bottom:$grid-margin; } .comment-submit{ @extend .cf; } .comment-page &{ margin-left:30px; position: relative; background: #ffffff; &:after { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 8px; left: 20px; margin-left: -8px; } } } .comments{ .comment:nth-child(3){ } }