1 files changed, 74 insertions, 0 deletions
diff --git a/public/css/widget/comment-popup.less b/public/css/widget/comment-popup.less
new file mode 100644
index 0000000..4012697
--- /dev/null
+++ b/public/css/widget/comment-popup.less
@@ -0,0 +1,74 @@
+.comment-popup {
+  font-size: 1em / .857em; // // default font size / footer font size = 12px
+  height: 6em;
+  border-radius: 0.25em;
+  border: 1px solid;
+  border-color: @gray-light;
+  background-color: @body-bg-color;
+}
+
+.comment-wrapper {
+  position: relative;
+
+  .comment-popup {
+    position: absolute;
+    top: 2.5em;
+    left: -1.6em;
+    z-index: 1;
+    display: none;
+    width: 50em;
+  }
+
+  .comment-popup:before {
+    content: '';
+    position: absolute;
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    left: 1.5em;
+    top: ~"calc(-0.75em - 1px)";
+    border-left: 1px solid @gray-light;
+    border-top: 1px solid @gray-light;
+    background-color: @body-bg-color;
+    z-index: -1;
+    transform: rotate(45deg);
+  }
+}
+
+ul.item-list li:last-child .comment-wrapper {
+  .comment-popup {
+    top: -7em;
+  }
+
+  .comment-popup:before {
+    bottom: ~"calc(-0.75em - 1px)";
+    top: unset;
+    transform: rotate(225deg);
+  }
+}
+
+.comment-wrapper:hover .comment-popup {
+  display: block
+}
+
+#layout {
+  &.twocols {
+    .comment-popup {
+      width: 35em;
+    }
+
+    &.poor-layout,
+    &.compact-layout {
+      .comment-popup {
+        width: 25em;
+      }
+    }
+  }
+
+  &.poor-layout,
+  &.minimal-layout {
+    .comment-popup {
+      width: 25em;
+    }
+  }
+}