@okjavis/nodebb-theme-javis 1.5.0 → 1.6.0

package/scss/_sidebar.scss

@@ -75,7 +75,7 @@
     font-size: $jv-font-size-sm;
     font-weight: 500;
     border-radius: $jv-radius-sm;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     i {
       width: 18px;
@@ -93,6 +93,12 @@
       color: $jv-primary;
       font-weight: 600;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   // Sidebar section headers
@@ -118,10 +124,16 @@
       color: $jv-text-main;
       font-size: $jv-font-size-sm;
       border-radius: $jv-radius-sm;
-      transition: background-color 0.15s ease;
+      transition: background-color $jv-transition-fast; // Modern transition
 
       &:hover {
-        background: rgba(0, 0, 0, 0.03);
+        background: $jv-hover-bg; // Consistent hover state
+      }
+
+      // Focus state for accessibility
+      &:focus-within {
+        outline: none;
+        background: $jv-hover-bg;
       }
 
       .category-icon {
@@ -144,7 +156,6 @@
 div[data-widget-area] {
   display: flex;
   flex-direction: column;
-  gap: $jv-space-6;
 }
 
 // Individual widget card
@@ -153,10 +164,16 @@ div[data-widget-area] {
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-lg;
   padding: $jv-space-8;
-  transition: box-shadow 0.15s ease;
+  transition: $jv-transition-shadow; // Modern transition
 
   &:hover {
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 }
 
@@ -192,11 +209,17 @@ div[data-widget-area="right"] h8 {
     flex-direction: column;
     gap: 2px;
     cursor: pointer;
-    transition: border-color 0.15s ease, background 0.15s ease;
+    transition: border-color $jv-transition-fast, background-color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      border-color: rgba(0,0,0,0.12);
-      background: rgba(0,0,0,0.03);
+      border-color: $jv-border-strong; // Consistent border
+      background: $jv-hover-bg; // Consistent hover state
+    }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
     }
 
     small {
@@ -224,11 +247,17 @@ div[data-widget-area="right"] h8 {
     display: flex;
     flex-direction: column;
     gap: $jv-space-4;
-    transition: box-shadow 0.15s ease, border 0.15s ease;
+    transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      border-color: rgba(0,0,0,0.08);
-      box-shadow: $jv-shadow-soft;
+      border-color: $jv-border-strong; // Consistent border
+      box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+    }
+
+    // Focus state for accessibility
+    &:focus-within {
+      outline: none;
+      box-shadow: $jv-shadow-md, $jv-focus-ring;
     }
 
     // Meta info
@@ -304,12 +333,18 @@ div[data-widget-area="right"] h8 {
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid $jv-surface;
-    transition: transform 0.15s ease;
+    transition: transform $jv-transition-fast; // Modern transition
 
     &:hover {
       transform: scale(1.1);
       z-index: 10;
     }
+
+    // Focus state for accessibility
+    &:focus {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   .avatar-stack {
@@ -337,20 +372,26 @@ div[data-widget-area="right"] h8 {
     gap: $jv-space-4;
     padding: $jv-space-4 0;
     border-bottom: 1px solid $jv-border-subtle;
-    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
       margin: 0 (-$jv-space-4);
       padding-left: $jv-space-4;
       padding-right: $jv-space-4;
       border-radius: $jv-radius-sm;
     }
 
+    // Focus state for accessibility
+    &:focus-within {
+      outline: none;
+      background: $jv-hover-bg;
+    }
+
     .category-icon {
       width: 24px;
       height: 24px;
@@ -565,8 +606,8 @@ div[data-widget-area="right"] h8 {
     width: 280px;
     z-index: 1050;
     transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+    transition: transform $jv-transition-slow; // Modern transition
+    box-shadow: $jv-shadow-lg; // shadcn drawer shadow
 
     &.open {
       transform: translateX(0);
@@ -583,7 +624,7 @@ div[data-widget-area="right"] h8 {
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
+    transition: opacity $jv-transition-slow, visibility $jv-transition-slow; // Modern transitions
 
     &.show {
       opacity: 1;
@@ -595,11 +636,35 @@ div[data-widget-area="right"] h8 {
 // ===========================================================
 // RIGHT SIDEBAR WIDGET AREA (Reddit-style)
 // ===========================================================
-div[data-widget-area="sidebar"],
-.col-lg-3[data-widget-area="sidebar"] {
+div[data-widget-area="right"],
+.col-lg-3.col-sm-12 {
   display: flex;
   flex-direction: column;
-  gap: $jv-space-6;
+
+  // Sticky positioning - stays visible when scrolling
+  position: sticky;
+  top: 80px; // Adjust based on your header height
+  align-self: flex-start;
+  max-height: calc(100vh - 100px); // Account for header + padding
+  overflow-y: auto; // Allow scrolling if content is too tall
+
+  // Smooth scrollbar styling (webkit browsers)
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
 
   // Widget card container
   > div {
@@ -609,207 +674,155 @@ div[data-widget-area="sidebar"],
     overflow: hidden;
   }
 
-  // Widget header/title
+  // Widget header/title - clean and simple
   h5, h6, .widget-title {
-    font-size: 12px !important;
+    font-size: 11px !important;
     font-weight: 700 !important;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: $jv-text-soft;
-    padding: $jv-space-6 $jv-space-6 $jv-space-4;
-    margin: 0 !important;
+    padding: $jv-space-4 $jv-space-4;
+    margin: 0 0 $jv-space-4 0 !important;
     border-bottom: 1px solid $jv-border-subtle;
-    background: rgba(0, 0, 0, 0.015);
+  }
+
+  // Add spacing between widgets
+  > div + div {
+    margin-top: $jv-space-4;
   }
 }
 
 // ===========================================================
-// POPULAR TAGS WIDGET (Sidebar)
+// POPULAR TAGS WIDGET (Sidebar) - Reddit-style vertical list
 // ===========================================================
-div[data-widget-area="sidebar"] {
-  .popular-tags,
-  [class*="tag"] {
-    padding: $jv-space-4;
+div[data-widget-area="right"] {
+  .popular-tags {
+    width: 100% !important;
+  }
 
-    // Tag items grid
-    .tag-list,
-    > div {
-      display: flex;
-      flex-direction: column;
-      gap: $jv-space-2;
+  .tag-list {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+
+    // Override Bootstrap grid classes to force vertical layout
+    display: flex !important;
+    flex-direction: column !important;
+
+    // Remove any grid/row styling
+    &.row {
+      --bs-gutter-x: 0 !important;
+      --bs-gutter-y: 0 !important;
+      margin: 0 !important;
+    }
+
+    // Force each tag to be full width (override col classes)
+    > * {
+      width: 100% !important;
+      max-width: 100% !important;
+      flex: 0 0 100% !important;
+      padding: 0 !important;
+    }
+
+    .btn-ghost,
+    a.btn-ghost {
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      background: transparent !important;
+      border: none !important;
+      border-radius: 0 !important;
+      padding: $jv-space-3 $jv-space-4 !important;
+      transition: background-color $jv-transition-fast !important;
+      text-align: left !important;
+      width: 100% !important;
+      margin: 0 !important;
 
-      > div,
-      > a {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: $jv-space-4 $jv-space-4;
-        background: transparent;
-        border: none;
-        border-radius: $jv-radius-sm;
-        color: $jv-text-main;
-        font-size: 14px;
-        font-weight: 500;
-        text-decoration: none;
-        transition: background-color 0.15s ease;
-        cursor: pointer;
+      &:hover {
+        background: $jv-hover-bg !important;
+      }
 
-        &:hover {
-          background: rgba(0, 81, 255, 0.06);
-          color: $jv-primary;
-        }
+      .tag-item {
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        color: $jv-text-main !important;
+        margin-bottom: $jv-space-1 !important;
+      }
 
-        // Topic count
-        small,
-        .count,
-        span:last-child {
-          font-size: 12px;
-          color: $jv-text-soft;
-          font-weight: 400;
-        }
+      .tag-topic-count {
+        font-size: 12px !important;
+        font-weight: 400 !important;
+        color: $jv-text-soft !important;
       }
     }
   }
+
 }
 
 // ===========================================================
-// RECENT/TRENDING POSTS WIDGET (Sidebar)
+// RECENT/TRENDING POSTS WIDGET (Sidebar) - Widget Essentials Specific
 // ===========================================================
-div[data-widget-area="sidebar"] {
+div[data-widget-area="right"] {
+  // Recent posts container with scrolling
   #recent_posts,
-  .recent-posts,
-  ul {
-    list-style: none;
+  ul[id*="recent"] {
+    max-height: 400px;
+    overflow-y: auto;
     padding: 0;
     margin: 0;
 
-    li {
-      padding: $jv-space-4 $jv-space-6;
-      border-bottom: 1px solid $jv-border-subtle;
-      transition: background-color 0.15s ease;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.02);
-      }
-
-      // Post header with avatar
-      .d-flex {
-        display: flex;
-        align-items: center;
-        gap: $jv-space-2;
-        margin-bottom: $jv-space-2;
-
-        // Avatar
-        .avatar,
-        img[class*="avatar"] {
-          width: 20px !important;
-          height: 20px !important;
-          border-radius: 50%;
-          flex-shrink: 0;
-        }
+    // Smooth scrollbar
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
 
-        // Username
-        a:first-of-type {
-          font-size: 12px;
-          font-weight: 600;
-          color: $jv-text-main;
-          text-decoration: none;
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
 
-          &:hover {
-            color: $jv-primary;
-          }
-        }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 2px;
 
-        // Timeago
-        .timeago {
-          font-size: 11px;
-          color: $jv-text-soft;
-        }
+      &:hover {
+        background: rgba(0, 0, 0, 0.25);
       }
+    }
+  }
 
-      // Post title/content
-      > a,
-      .post-content a,
-      p {
-        display: block;
-        font-size: 13px;
-        font-weight: 500;
-        color: $jv-text-main;
-        text-decoration: none;
-        line-height: 1.4;
-        margin-bottom: $jv-space-2;
-
-        // Line clamp
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-
-        &:hover {
-          color: $jv-primary;
-        }
-      }
+  // Style the actual widget-posts items
+  .widget-posts {
+    padding: $jv-space-3 $jv-space-4 !important;
+    transition: background-color $jv-transition-fast !important;
+    border-bottom: 1px solid $jv-border-subtle !important;
 
-      // Content preview text
-      .post-content,
-      .content,
-      .text-xs {
-        font-size: 12px;
-        color: $jv-text-muted;
-        line-height: 1.45;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
+    &:last-child {
+      border-bottom: none !important;
+    }
 
-      // Read more link
-      a.stretched-link,
-      .read-more {
-        font-size: 12px;
-        font-weight: 600;
-        color: $jv-primary;
-        text-decoration: none;
-        margin-top: $jv-space-2;
-        display: inline-block;
+    &:hover {
+      background: $jv-hover-bg !important;
+    }
 
-        &:hover {
-          text-decoration: underline;
-        }
-      }
+    .post-author a {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      color: $jv-text-main !important;
     }
-  }
-}
 
-// ===========================================================
-// WIDGET HEADER ICONS
-// ===========================================================
-div[data-widget-area="sidebar"] {
-  h5, h6, .widget-title {
-    display: flex;
-    align-items: center;
-    gap: $jv-space-2;
+    .line-clamp-6 {
+      font-size: 13px !important;
+      font-weight: 400 !important;
+      color: $jv-text-main !important;
+      line-height: 1.5 !important;
+    }
 
-    i {
-      font-size: 14px;
-      color: $jv-text-soft;
+    .post-preview-footer a {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      color: $jv-primary !important;
+      text-decoration: none !important;
     }
   }
 }
 
-// ===========================================================
-// EMPTY STATE
-// ===========================================================
-div[data-widget-area="sidebar"] {
-  .empty,
-  .no-content {
-    padding: $jv-space-8;
-    text-align: center;
-    color: $jv-text-soft;
-    font-size: $jv-font-size-sm;
-  }
-}

package/scss/_variables.scss

@@ -10,8 +10,8 @@ $jv-primary-soft: rgba(0, 81, 255, 0.12);
 // Neutrals
 $jv-bg: #f5f6f8;              // app background
 $jv-surface: #ffffff;         // cards, panels
-$jv-border-subtle: rgba(0,0,0,0.06);
-$jv-border-strong: rgba(0,0,0,0.12);
+$jv-border-subtle: rgba(0,0,0,0.1);  // More visible than Material (was 0.06) - shadcn style
+$jv-border-strong: rgba(0,0,0,0.15); // Stronger borders (was 0.12)
 
 // Text
 $jv-text-main: #111111;
@@ -25,19 +25,39 @@ $jv-radius-md: 12px;
 $jv-radius-lg: 16px;
 $jv-radius-pill: 999px;
 
-// Shadows
-$jv-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
-$jv-shadow-card: 0 4px 10px rgba(0,0,0,0.05);
+// shadcn-Style Shadow System (Compact, Grounded, Notion/Linear-like)
+// Subtle shadows that let borders do the heavy lifting
+$jv-shadow-none: none;
+$jv-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Barely visible
+$jv-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); // Card resting - SUBTLE
+$jv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); // Card hover
+$jv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); // Modals/Dropdowns
+$jv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); // Popovers
+
+// Legacy compatibility - map old names to new system
+$jv-shadow-soft: $jv-shadow-sm;
+$jv-shadow-card: $jv-shadow-sm;
+$jv-elevation-0: $jv-shadow-none;
+$jv-elevation-1: $jv-shadow-sm;
+$jv-elevation-2: $jv-shadow-sm;
+$jv-elevation-4: $jv-shadow-md;
+$jv-elevation-6: $jv-shadow-md;
+$jv-elevation-8: $jv-shadow-md;
+
+// Button shadows (keep branded)
 $jv-shadow-button: 0 4px 12px rgba(0, 81, 255, 0.25);
 $jv-shadow-button-hover: 0 6px 16px rgba(0, 81, 255, 0.35);
 
-// Spacing (8pt-ish scale)
-$jv-space-2: 4px;
-$jv-space-4: 8px;
-$jv-space-6: 12px;
-$jv-space-8: 16px;
-$jv-space-10: 20px;
-$jv-space-12: 24px;
+// Spacing (8dp baseline grid - shadcn/Tailwind compatible)
+$jv-space-1: 4px;   // 4dp
+$jv-space-2: 8px;   // 8dp (1 unit)
+$jv-space-3: 12px;  // 12dp (1.5 units)
+$jv-space-4: 16px;  // 16dp (2 units)
+$jv-space-5: 20px;  // 20dp (2.5 units)
+$jv-space-6: 24px;  // 24dp (3 units)
+$jv-space-8: 32px;  // 32dp (4 units)
+$jv-space-10: 40px; // 40dp (5 units)
+$jv-space-12: 48px; // 48dp (6 units)
 
 // Typography
 $jv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
@@ -52,3 +72,18 @@ $jv-font-size-xxl: 32px;
 $jv-line-height-base: 1.52;
 $jv-line-height-tight: 1.4;
 $jv-line-height-relaxed: 1.6;
+
+// Modern Polish - Transitions & Interactions (2025 standard)
+$jv-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-shadow: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+// Focus States (Accessibility + Modern Look)
+$jv-focus-ring: 0 0 0 3px rgba(0, 81, 255, 0.12);
+$jv-focus-ring-offset: 0 0 0 2px $jv-surface, 0 0 0 4px $jv-primary;
+
+// Interactive States
+$jv-hover-bg: rgba(0, 0, 0, 0.04);
+$jv-active-bg: rgba(0, 0, 0, 0.08);
+$jv-selected-bg: rgba(0, 81, 255, 0.08);