@okjavis/nodebb-theme-javis 1.5.0 → 1.5.1

package/scss/_feed.scss

@@ -70,20 +70,26 @@
 }
 
 // ===========================================================
-// POST CARD – Main Styling
+// POST CARD – Main Styling (shadcn + Modern Polish)
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-md !important; // 12px - more compact than 16px
-  margin-bottom: $jv-space-4 !important; // 8px - compact like Reddit
-  box-shadow: none !important;
+  border-radius: $jv-radius-sm !important; // 8px - shadcn standard
+  margin-bottom: $jv-space-2 !important; // 8dp grid
+  box-shadow: $jv-shadow-sm !important; // shadcn subtle shadow
   overflow: hidden;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern smooth transitions
 
   &:hover {
-    border-color: $jv-border-strong !important;
-    box-shadow: $jv-shadow-soft !important;
+    box-shadow: $jv-shadow-md !important; // shadcn hover shadow
+    border-color: $jv-border-strong !important; // Subtle border darkening
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring !important;
   }
 
   // Deleted state
@@ -106,10 +112,11 @@
 
     .overflow-hidden {
       border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
-      max-height: 350px !important;
+      max-height: 280px !important; // Reduced from 350px - more balanced ratio
 
       img {
         width: 100%;
+        height: 280px; // Fixed height for consistency
         object-fit: cover;
       }
     }
@@ -131,11 +138,11 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   > .d-flex.gap-2.p-3 {
-    padding: $jv-space-6 !important; // 12px - compact but comfortable
-    gap: $jv-space-4 !important;
+    padding: $jv-space-4 $jv-space-3 !important; // 16dp vertical, 12dp horizontal - Material grid
+    gap: $jv-space-3 !important; // 12dp spacing
 
     @media (max-width: 768px) {
-      padding: $jv-space-4 !important; // 8px on mobile
+      padding: $jv-space-3 $jv-space-2 !important; // 12dp vertical, 8dp horizontal on mobile
     }
   }
 
@@ -143,8 +150,8 @@
   .d-none.d-lg-block {
     .avatar,
     img[class*="avatar"] {
-      width: 40px !important; // Smaller, cleaner
-      height: 40px !important;
+      width: 48px !important; // 48dp - Material standard avatar size
+      height: 48px !important;
       border-radius: 50% !important;
       object-fit: cover;
       border: 2px solid rgba(0, 0, 0, 0.05);
@@ -153,7 +160,7 @@
 
   // Post body
   .post-body {
-    gap: $jv-space-2 !important; // Tighter gap - 4px
+    gap: $jv-space-2 !important; // 8dp - Material grid
   }
 }
 
@@ -162,12 +169,12 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .topic-title {
-    font-size: 18px !important; // Keeping subtle
-    font-weight: 600 !important;
-    line-height: 1.3 !important; // Tighter for clean look
+    font-size: 20px !important; // Larger for prominence (Reddit/LinkedIn style)
+    font-weight: 700 !important; // Bolder for better hierarchy
+    line-height: 1.4 !important; // Better readability
     color: $jv-text-main !important;
-    margin-bottom: $jv-space-2; // 4px
-    letter-spacing: -0.01em; // Slight tightening for modern feel
+    margin-bottom: $jv-space-3; // 6px - more breathing room
+    letter-spacing: -0.02em; // Tighter for modern feel
 
     &:hover {
       color: $jv-primary !important;
@@ -180,14 +187,15 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .post-info {
-    font-size: 13px !important;
+    font-size: 14px !important; // Slightly larger for readability
     color: $jv-text-soft; // Lighter for hierarchy
-    gap: $jv-space-2 !important;
+    gap: $jv-space-3 !important; // More spacing between elements
 
     .post-author {
       a {
-        color: $jv-text-muted; // Less prominent
-        font-weight: 500; // Lighter weight
+        color: $jv-text-soft; // More subtle - not competing with title
+        font-weight: 400; // Normal weight
+        font-size: 14px;
 
         &:hover {
           color: $jv-primary;
@@ -205,6 +213,12 @@
 
     .timeago {
       color: $jv-text-soft !important;
+      font-size: 13px;
+
+      &::before {
+        content: "• ";
+        margin-right: 4px;
+      }
     }
   }
 }
@@ -214,13 +228,14 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .content[component="post/content"] {
-    font-size: 14px !important;
+    font-size: 15px !important; // Slightly larger for better readability
     line-height: 1.6 !important;
     color: $jv-text-muted;
+    margin-top: $jv-space-3; // Better spacing from meta
 
     // Truncation styles (from plugin)
     &.truncate-post-content {
-      max-height: 150px;
+      max-height: 120px; // Reduced from 150px for cleaner cards
       overflow: hidden;
       position: relative;
 
@@ -230,7 +245,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        height: 40px;
+        height: 50px; // Taller gradient
         background: linear-gradient(transparent, $jv-surface);
         pointer-events: none;
       }
@@ -300,40 +315,55 @@
 .feed li[component="post"].posts-list-item {
   .d-flex.justify-content-between:last-child {
     margin: 0 (-$jv-space-2);
-    padding-top: $jv-space-2; // Small padding above - 4px
-    border-top: 1px solid rgba(0, 0, 0, 0.04); // Subtle separator
+    padding-top: $jv-space-4; // More padding - 8px
+    border-top: 1px solid rgba(0, 0, 0, 0.06); // Slightly more visible separator
 
     .btn-link {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 10px !important; // Tighter padding
-      font-size: 13px !important;
-      font-weight: 500 !important; // Lighter weight
+      gap: $jv-space-2; // 8dp consistent spacing
+      padding: $jv-space-2 $jv-space-3 !important; // 8dp vertical, 12dp horizontal
+      font-size: 14px !important;
+      font-weight: 600 !important;
       color: $jv-text-muted !important;
       background: transparent;
       border: none;
-      border-radius: $jv-radius-sm;
+      border-radius: $jv-radius-sm; // 8px shadcn standard
       text-decoration: none !important;
-      transition: background-color 0.15s ease, color 0.15s ease;
+      transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions, NO transform
 
       &:hover {
-        background: rgba(0, 0, 0, 0.03); // Subtler hover
+        background: $jv-hover-bg; // Consistent hover state
         color: $jv-text-main !important;
       }
 
+      // Focus state for accessibility
+      &:focus-visible {
+        outline: none;
+        box-shadow: $jv-focus-ring;
+      }
+
       i {
-        font-size: 16px;
+        font-size: 18px; // Larger icons
+      }
+
+      // Make numbers bold and prominent
+      span {
+        font-weight: 700;
       }
 
       // Comments button
       &[href*="post"]:first-child {
         i {
-          color: $jv-text-soft;
+          color: $jv-text-muted;
         }
 
-        &:hover i {
-          color: $jv-primary;
+        &:hover {
+          background: rgba(0, 81, 255, 0.08);
+
+          i {
+            color: $jv-primary;
+          }
         }
       }
 
@@ -341,6 +371,7 @@
       &[data-action="bookmark"] {
         &[data-bookmarked="true"] {
           color: $jv-primary !important;
+          background: $jv-selected-bg !important; // Consistent selected state
 
           i {
             color: $jv-primary !important;
@@ -348,7 +379,11 @@
         }
 
         &:hover {
-          background: rgba(0, 81, 255, 0.06);
+          background: $jv-selected-bg;
+
+          i {
+            color: $jv-primary;
+          }
         }
       }
 
@@ -356,6 +391,7 @@
       &[data-action="upvote"] {
         &[data-upvoted="true"] {
           color: #ef4444 !important;
+          background: rgba(239, 68, 68, 0.08) !important;
 
           i {
             color: #ef4444 !important;
@@ -363,7 +399,7 @@
         }
 
         &:hover {
-          background: rgba(239, 68, 68, 0.06);
+          background: rgba(239, 68, 68, 0.08);
 
           i {
             color: #ef4444;
@@ -371,10 +407,13 @@
         }
       }
 
-      // Reply button
+      // Reply button (Primary CTA)
       &[data-action="reply"] {
+        color: $jv-primary !important;
+        font-weight: 700 !important;
+
         &:hover {
-          background: rgba(0, 81, 255, 0.06);
+          background: $jv-selected-bg;
 
           i {
             color: $jv-primary;

package/scss/_forms.scss

@@ -17,7 +17,7 @@ textarea,
   color: $jv-text-main;
   line-height: $jv-line-height-tight;
   box-shadow: none;
-  transition: all 0.15s ease;
+  transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast; // Modern transitions
 
   &::placeholder {
     color: $jv-text-muted;
@@ -26,7 +26,7 @@ textarea,
   &:focus {
     outline: none;
     border-color: $jv-primary;
-    box-shadow: 0 0 0 3px $jv-primary-soft;
+    box-shadow: $jv-focus-ring; // Consistent focus ring
   }
 }
 
@@ -68,22 +68,18 @@ textarea {
   font-weight: 400;
   text-align: left;
   color: $jv-text-muted;
-  box-shadow: $jv-shadow-soft;
-  transition: all 0.15s ease;
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: border-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
   &:hover,
   &:focus {
     background: $jv-surface;
     border-color: $jv-primary;
     color: $jv-primary;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
     outline: none;
   }
 
-  &:active {
-    transform: scale(0.99);
-  }
-
   // Override Bootstrap button states
   &.btn,
   &.btn:focus,
@@ -91,7 +87,7 @@ textarea {
   &.btn:active {
     background: $jv-surface;
     border-radius: $jv-radius-pill;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
     border-color: $jv-border-subtle;
     outline: none;
   }
@@ -109,11 +105,11 @@ textarea {
 .dropdown-menu {
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-md;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: $jv-shadow-lg; // shadcn large shadow for dropdowns
   padding: $jv-space-2 0;
   min-width: 180px;
   background: $jv-surface;
-  animation: dropdownFade 0.15s ease;
+  animation: dropdownFade $jv-transition-fast;
 
   @keyframes dropdownFade {
     from {
@@ -130,7 +126,7 @@ textarea {
     padding: $jv-space-4 $jv-space-8;
     font-size: $jv-font-size-sm;
     color: $jv-text-main;
-    transition: background-color 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
     display: flex;
     align-items: center;
     gap: $jv-space-4;
@@ -150,7 +146,7 @@ textarea {
     }
 
     &:active {
-      background: rgba(0, 81, 255, 0.1);
+      background: $jv-active-bg; // Consistent active state
     }
 
     &.active {
@@ -158,6 +154,13 @@ textarea {
       color: $jv-primary;
       font-weight: 500;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      background: rgba(0, 81, 255, 0.06);
+      color: $jv-primary;
+    }
   }
 
   .dropdown-divider {
@@ -291,7 +294,7 @@ textarea {
 .modal-content {
   border: none;
   border-radius: $jv-radius-lg;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  box-shadow: $jv-shadow-xl; // shadcn extra large shadow for modals
 }
 
 .modal-header {
@@ -305,11 +308,17 @@ textarea {
 
   .btn-close {
     opacity: 0.5;
-    transition: opacity 0.15s ease;
+    transition: opacity $jv-transition-fast; // Modern transition
 
     &:hover {
       opacity: 1;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }
 
@@ -331,7 +340,7 @@ textarea {
   height: 18px;
   margin-top: 0;
   border: 2px solid $jv-border-strong;
-  transition: all 0.15s ease;
+  transition: background-color $jv-transition-fast, border-color $jv-transition-fast; // Modern transitions
 
   &:checked {
     background-color: $jv-primary;
@@ -339,7 +348,8 @@ textarea {
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px $jv-primary-soft;
+    outline: none;
+    box-shadow: $jv-focus-ring; // Consistent focus ring
     border-color: $jv-primary;
   }
 }
@@ -374,14 +384,14 @@ textarea {
   border: none;
   border-bottom: 1px solid $jv-border-subtle;
   padding: $jv-space-6 $jv-space-8;
-  transition: background-color 0.15s ease;
+  transition: background-color $jv-transition-fast; // Modern transition
 
   &:last-child {
     border-bottom: none;
   }
 
   &:hover {
-    background: rgba(0, 0, 0, 0.02);
+    background: $jv-hover-bg; // Consistent hover state
   }
 
   &.active {
@@ -389,6 +399,12 @@ textarea {
     border-color: transparent;
     color: $jv-primary;
   }
+
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    background: $jv-hover-bg;
+  }
 }
 
 // ===========================================================
@@ -408,8 +424,12 @@ textarea {
     vertical-align: middle;
   }
 
-  &.table-hover tbody tr:hover {
-    background: rgba(0, 0, 0, 0.02);
+  &.table-hover tbody tr {
+    transition: background-color $jv-transition-fast; // Modern transition
+
+    &:hover {
+      background: $jv-hover-bg; // Consistent hover state
+    }
   }
 }
 
@@ -426,12 +446,18 @@ textarea {
     font-size: $jv-font-size-sm;
     color: $jv-text-main;
     background: transparent;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      background: rgba(0, 0, 0, 0.05);
+      background: $jv-hover-bg; // Consistent hover state
       color: $jv-primary;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   .page-item.active .page-link {
@@ -460,7 +486,7 @@ textarea {
     font-size: $jv-font-size-sm;
     font-weight: 500;
     color: $jv-text-muted;
-    transition: all 0.15s ease;
+    transition: color $jv-transition-fast, border-bottom-color $jv-transition-fast; // Modern transitions
 
     &:hover {
       color: $jv-text-main;
@@ -472,6 +498,12 @@ textarea {
       border-bottom-color: $jv-primary;
       background: transparent;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }
 
@@ -487,10 +519,10 @@ textarea {
     font-size: $jv-font-size-sm;
     font-weight: 500;
     color: $jv-text-muted;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background: $jv-hover-bg; // Consistent hover state
       color: $jv-text-main;
     }
 
@@ -498,5 +530,11 @@ textarea {
       background: $jv-primary;
       color: #fff;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }