@okjavis/nodebb-theme-javis 2.2.0 → 2.4.0

package/scss/_topic.scss

@@ -166,11 +166,9 @@ body.template-topic {
         }
       }
 
-      // Align the post header row with avatar
+      // Align the post header row with avatar (extends base .post-header)
       .post-header {
-        min-height: 36px; // Match avatar height
-        align-items: center !important;
-        margin-bottom: 0 !important;
+        min-height: 36px; // Match avatar height for alignment
       }
 
       .post-container {
@@ -191,9 +189,9 @@ body.template-topic {
   // ===========================================================
   .post-header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: $jv-space-2;
-    margin-bottom: $jv-space-3;
+    margin-bottom: 0 !important;
     font-size: $jv-font-size-xs;
 
     .avatar {
@@ -444,10 +442,32 @@ body.template-topic {
     }
   }
 
-  // Always visible post actions (override Harmony's hover behavior)
-  .topic .posts [component="post"] [component="post/actions"] {
+  // Post actions - show on hover (Reddit/HN style)
+  // Uses JS-managed .post-hovered class to prevent bubble to parent posts
+  .topic .posts [component="post"] {
+    [component="post/actions"] {
+      opacity: 0;
+      transition: opacity $jv-transition-fast;
+    }
+
+    // Show actions only on the directly hovered post (JS adds .post-hovered class)
+    > .post-container-parent.post-hovered [component="post/actions"] {
+      opacity: 1;
+    }
+
+    // Always show if user has interacted (voted, bookmarked)
+    [component="post/actions"] {
+      .upvoted,
+      .downvoted,
+      .bookmarked {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Keep vote count always visible when there are votes
+  .topic .posts [component="post/vote-count"]:not(:empty) {
     opacity: 1 !important;
-    visibility: visible !important;
   }
 
   // ===========================================================
@@ -578,9 +598,7 @@ body.template-topic {
       }
 
       [component="topic/reply/container"] {
-        display: flex;
-        flex-direction: column;
-        gap: $jv-space-2;
+        width: 100%;
 
         .btn-primary {
           flex: 1;
@@ -589,12 +607,28 @@ body.template-topic {
           padding: $jv-space-3 $jv-space-4;
         }
 
-        .dropdown-toggle { display: none; }
+        // Hide the "Reply as topic" dropdown toggle and menu
+        .dropdown-toggle,
+        .dropdown-menu {
+          display: none !important;
+        }
       }
 
-      // Consistent ghost button styling for all sidebar action buttons
+      // Sidebar action buttons - full-width, left-aligned (extends base .btn-ghost)
       .btn-ghost,
       .bottom-sheet > .btn,
+      .thread-tools > .dropdown-toggle {
+        text-align: left;
+        width: 100%;
+        justify-content: flex-start;
+
+        i {
+          width: 16px; // Fixed width for icon alignment
+        }
+      }
+
+      // Non-ghost buttons need base ghost styling too
+      .bottom-sheet > .btn,
       .thread-tools > .dropdown-toggle {
         background: transparent !important;
         border: 1px solid transparent !important;
@@ -603,15 +637,10 @@ body.template-topic {
         border-radius: $jv-radius-sm;
         font-size: $jv-font-size-sm;
         font-weight: 500;
-        text-align: left;
-        width: 100%;
-        justify-content: flex-start;
         transition: background-color $jv-transition-fast, color $jv-transition-fast;
-
-        i {
-          width: 16px;
-          color: $jv-primary;
-        }
+        display: inline-flex;
+        align-items: center;
+        gap: $jv-space-2;
 
         &:hover {
           background: $jv-hover-bg !important;
@@ -738,121 +767,143 @@ body.template-topic {
 
   // ===========================================================
   // PARENT POST CONTEXT (shown when viewing a reply)
+  // Compact inline style - visually distinct from main posts
   // ===========================================================
   [component="post/parent"] {
-    background: $jv-surface !important;
-    border: 1px solid $jv-border-subtle !important;
-    border-left: 3px solid $jv-primary !important;
-    border-radius: $jv-radius-sm !important;
-    padding: $jv-space-3 !important;
-    margin-bottom: $jv-space-3 !important;
-    transition: background-color $jv-transition-fast, border-color $jv-transition-fast;
+    background: transparent !important;
+    border: none !important;
+    border-left: 2px solid $jv-border-strong !important;
+    border-radius: 0 !important;
+    padding: $jv-space-1 0 $jv-space-1 $jv-space-3 !important;
+    margin-bottom: $jv-space-2 !important;
+    margin-left: $jv-space-1 !important;
+    transition: border-color $jv-transition-fast;
+    cursor: pointer;
+    display: flex !important;
+    align-items: center !important;
+    gap: $jv-space-2 !important;
+    flex-direction: row !important;
 
     &:hover {
-      background: $jv-hover-bg !important;
-      border-color: $jv-border-strong !important;
-      border-left-color: $jv-primary-hover !important;
-    }
-
-    // Header row with avatar and metadata
-    > .d-flex:first-child {
-      gap: $jv-space-2 !important;
-      margin-bottom: $jv-space-2;
+      border-left-color: $jv-primary !important;
 
-      // Small avatar
-      .avatar,
-      [component="user/picture"] {
-        width: 20px !important;
-        height: 20px !important;
-        border-radius: 50%;
-        flex-shrink: 0;
+      .fw-semibold {
+        color: $jv-primary !important;
       }
+    }
 
-      // Username and time
-      .text-nowrap,
-      .fw-bold {
-        font-size: $jv-font-size-xs !important;
-        font-weight: 600;
-        color: $jv-text-main;
-      }
+    // Avatar
+    .avatar,
+    [component="user/picture"] {
+      width: 16px !important;
+      height: 16px !important;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
 
-      .text-muted {
-        font-size: $jv-font-size-xs !important;
-        color: $jv-text-soft !important;
-      }
+    // Username
+    .fw-semibold {
+      font-size: $jv-font-size-xs !important;
+      font-weight: 600;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
     }
 
-    // Parent content preview
+    // Parent content preview - inline, truncated
     [component="post/parent/content"] {
-      font-size: $jv-font-size-sm !important;
-      color: $jv-text-muted !important;
-      line-height: $jv-line-height-base;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      font-size: $jv-font-size-xs !important;
+      color: $jv-text-soft !important;
+      line-height: 1.4;
+      white-space: nowrap;
       overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
 
       p {
         margin: 0;
+        display: inline;
       }
+
+      // Hide images in preview
+      img {
+        display: none;
+      }
+    }
+
+    // Hide the nested flex container structure, flatten it
+    > .d-flex {
+      display: contents !important;
     }
   }
 
   // ===========================================================
-  // REPLY COUNT BUTTON (Accordion trigger)
+  // POST HIGHLIGHT ANIMATION (when navigating to a post)
+  // ===========================================================
+  .post-highlight-flash {
+    animation: postHighlightFlash 1.5s ease-out;
+  }
+
+  @keyframes postHighlightFlash {
+    0% {
+      background-color: rgba($jv-primary, 0.15);
+      box-shadow: 0 0 0 4px rgba($jv-primary, 0.1);
+    }
+    100% {
+      background-color: $jv-surface;
+      box-shadow: none;
+    }
+  }
+
+  // ===========================================================
+  // REPLY COUNT BUTTON (Reddit/Discord style - no border, text link)
   // ===========================================================
   [component="post/reply-count"] {
-    display: inline-flex !important;
+    display: inline-flex;
     align-items: center;
     gap: $jv-space-2;
-    background: $jv-surface !important;
-    border: 1px solid $jv-border-subtle !important;
-    border-radius: $jv-radius-pill !important;
-    padding: $jv-space-1 $jv-space-3 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: $jv-radius-sm !important;
+    padding: $jv-space-1 $jv-space-2 !important;
     font-size: $jv-font-size-xs !important;
     color: $jv-text-muted !important;
     cursor: pointer;
     transition: all $jv-transition-fast;
+    text-decoration: none !important;
 
-    &:hover {
-      background: $jv-hover-bg !important;
-      border-color: $jv-border-strong !important;
-      color: $jv-text-main !important;
+    // Respect the hidden class when there are no replies
+    &.hidden {
+      display: none !important;
     }
 
-    // Avatar stack
-    [component="post/reply-count/avatars"] {
-      display: flex;
-      align-items: center;
-
-      span {
-        margin-left: -4px;
+    &:hover {
+      background: $jv-hover-bg !important;
+      color: $jv-primary !important;
 
-        &:first-child {
-          margin-left: 0;
-        }
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
       }
+    }
 
-      .avatar,
-      img {
-        width: 18px !important;
-        height: 18px !important;
-        border-radius: 50%;
-        border: 2px solid $jv-surface;
-      }
+    // Hide avatars - cleaner look like Reddit
+    [component="post/reply-count/avatars"] {
+      display: none !important;
     }
 
-    // Reply count text
+    // Reply count text - simple and clean
     .replies-count,
     [component="post/reply-count/text"] {
       font-weight: 600;
-      color: $jv-text-main;
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
     }
 
-    // Last reply time
+    // Hide last reply time - too verbose
     .replies-last {
-      color: $jv-text-soft;
-      font-size: $jv-font-size-xs;
+      display: none !important;
     }
 
     // Chevron icon
@@ -864,80 +915,86 @@ body.template-topic {
 
     // Expanded state
     &[aria-expanded="true"] {
+      color: $jv-primary !important;
+
       .fa-chevron-down {
         transform: rotate(180deg);
       }
+
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
+      }
     }
   }
 
   // ===========================================================
-  // NESTED REPLIES CONTAINER (Threaded style)
+  // NESTED REPLIES CONTAINER (Clean threaded style)
+  // Inspired by Reddit/GitHub - compact, minimal
   // ===========================================================
   [component="post/replies/container"] {
     margin-top: $jv-space-3 !important;
     margin-bottom: 0 !important;
-    margin-left: $jv-space-6;
+    margin-left: $jv-space-4;
     padding: 0 !important;
     background: transparent !important;
     border: none !important;
     border-radius: 0 !important;
     position: relative;
 
-    // Thread line
+    // Simple thread line
     &::before {
       content: "";
       position: absolute;
-      left: -$jv-space-4;
+      left: -$jv-space-2;
       top: 0;
-      bottom: $jv-space-4;
+      bottom: 0;
       width: 2px;
       background: $jv-border-subtle;
       border-radius: 1px;
+      transition: background $jv-transition-fast;
+    }
+
+    // Hover effect on thread line
+    &:hover::before {
+      background: $jv-border-strong;
     }
 
-    // Replies list
+    // Replies list - compact spacing
     [component="post/replies"],
     ul.list-unstyled {
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: $jv-space-3;
+      gap: $jv-space-2;
     }
 
-    // Individual reply posts
+    // Individual reply posts - clean, compact
     [component="post"] {
       margin: 0 !important;
       padding: 0 !important;
       background: transparent !important;
       position: relative;
 
-      // Thread connector dot
+      // No connector dots
       &::before {
-        content: "";
-        position: absolute;
-        left: -$jv-space-4 - 3px;
-        top: $jv-space-4;
-        width: 8px;
-        height: 8px;
-        background: $jv-surface;
-        border: 2px solid $jv-border-strong;
-        border-radius: 50%;
-        z-index: 1;
+        display: none !important;
       }
 
-      // Reply card
+      // Reply container - compact padding
       .post-container-parent {
-        background: $jv-surface !important;
-        border: 1px solid $jv-border-subtle !important;
+        background: transparent !important;
+        border: none !important;
         border-radius: $jv-radius-sm !important;
-        padding: $jv-space-3 !important;
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
         gap: $jv-space-2 !important;
-        transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast;
+        transition: background $jv-transition-fast;
 
         &:hover {
-          border-color: $jv-border-strong !important;
-          box-shadow: $jv-shadow-sm;
+          background: $jv-hover-bg !important;
         }
 
         // Smaller avatar for replies
@@ -945,8 +1002,8 @@ body.template-topic {
         > div:first-child {
           .avatar,
           [component="user/picture"] {
-            width: 28px !important;
-            height: 28px !important;
+            width: 20px !important;
+            height: 20px !important;
           }
         }
       }
@@ -958,16 +1015,20 @@ body.template-topic {
         border: none !important;
       }
 
-      // Reply header
+      // Reply header - inline, compact
       .post-header {
         font-size: $jv-font-size-xs !important;
         min-height: auto !important;
-        margin-bottom: $jv-space-1 !important;
+        margin-bottom: 0 !important;
+        display: flex;
+        align-items: center;
+        gap: $jv-space-2;
 
         .fw-bold,
         a[data-username] {
           font-size: $jv-font-size-xs !important;
           font-weight: 600;
+          color: $jv-text-main;
         }
 
         .text-muted {
@@ -980,22 +1041,22 @@ body.template-topic {
         }
       }
 
-      // Reply content
+      // Reply content - tighter
       [component="post/content"] {
         font-size: $jv-font-size-sm !important;
         line-height: $jv-line-height-base;
+        color: $jv-text-main;
+        margin-top: $jv-space-1;
       }
 
-      // Reply footer/actions
+      // Reply footer - override main post styles (no border, tighter spacing)
       [component="post/footer"],
       .post-footer {
-        margin-top: $jv-space-2 !important;
-        padding-top: $jv-space-2 !important;
-        padding-bottom: 0 !important;
-        border-top: 1px solid $jv-border-subtle !important;
-        border-bottom: none !important;
+        margin-top: $jv-space-1 !important;
+        border-top: none !important;
       }
 
+      // Smaller action buttons for compact reply layout (inherits opacity/hover behavior from main rule)
       [component="post/actions"] {
         gap: $jv-space-1 !important;
 
@@ -1005,15 +1066,10 @@ body.template-topic {
           font-size: $jv-font-size-xs !important;
 
           i {
-            font-size: 14px !important;
+            font-size: 12px !important;
           }
         }
       }
-
-      // Last reply - no bottom spacing on thread line
-      &:last-child::before {
-        display: block !important;
-      }
     }
   }
 }
@@ -1061,33 +1117,23 @@ body.template-topic {
 
     // Mobile adjustments for threaded replies
     [component="post/replies/container"] {
-      margin-left: $jv-space-4;
+      margin-left: $jv-space-3;
 
       &::before {
-        left: -$jv-space-3;
+        left: -$jv-space-2;
       }
 
-      [component="post"] {
-        &::before {
-          left: -$jv-space-3 - 3px;
-        }
+      [component="post"] .post-container-parent {
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
       }
     }
 
     // Mobile adjustments for parent context
     [component="post/parent"] {
-      padding: $jv-space-2 !important;
-
-      [component="post/parent/content"] {
-        -webkit-line-clamp: 1;
-      }
-    }
-
-    // Mobile reply count button
-    [component="post/reply-count"] {
-      .replies-last {
-        display: none !important;
-      }
+      padding: $jv-space-1 0 $jv-space-1 $jv-space-2 !important;
+      margin-left: 0 !important;
     }
   }
 }