browser-extension-manager 1.0.13 → 1.1.0

package/dist/assets/themes/classy/css/layout/_navigation.scss

@@ -0,0 +1,576 @@
+// Classy Navigation Components
+// Modern floating navbar inspired by premium SaaS websites
+
+// ============================================
+// Floating Navbar Container
+// ============================================
+.navbar-wrapper {
+  position: fixed;
+  top: 1rem;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+  pointer-events: none;
+
+  .navbar {
+    pointer-events: auto;
+    // Match Bootstrap's container exactly (same as .container class)
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(--bs-gutter-x, 0.75rem);
+    padding-left: var(--bs-gutter-x, 0.75rem);
+
+    // XS screens (less than 576px) - maintain margin
+    @media (max-width: 575.98px) {
+      max-width: calc(100% - 2rem);
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (min-width: 576px) {
+      max-width: 540px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
+
+    @media (min-width: 992px) {
+      max-width: 960px;
+    }
+
+    @media (min-width: 1200px) {
+      max-width: 1140px;
+    }
+
+    @media (min-width: 1400px) {
+      max-width: 1320px;
+    }
+  }
+}
+
+// ============================================
+// Floating Navbar Styles
+// ============================================
+.navbar {
+  &.navbar-floating {
+    border-radius: 1rem;
+    padding: 0.75rem 1rem;
+    background: transparent !important;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+
+    // Container inside navbar
+    .container,
+    .container-fluid {
+      padding: 0;
+    }
+
+    // Always show glassy background on mobile
+    @media (max-width: 991.98px) {
+      @include glassy-effect;
+    }
+  }
+}
+
+// ============================================
+// Brand & Logo
+// ============================================
+.navbar-brand {
+  font-weight: 700;
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
+
+  // Logo with text
+  .brand-logo {
+    height: 32px;
+    width: auto;
+    margin-right: 0.5rem;
+  }
+}
+
+.card-body {
+  .nav-link {
+    color: var(--bs-body-color);
+    border-radius: 0.375rem;
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.25rem;
+    transition: all 0.2s ease-in-out;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &.active {
+      background-color: var(--bs-primary);
+      color: white;
+
+      .fa-icon {
+        color: white;
+      }
+    }
+  }
+}
+
+// ============================================
+// Navigation Links
+// ============================================
+.navbar-nav {
+  .nav-link {
+    font-weight: 500;
+    font-size: 0.95rem;
+    padding: 0.5rem 1rem;
+    margin: 0 0.125rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    position: relative;
+    color: var(--bs-body-color);
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &.active {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  // Dark mode nav links
+  [data-bs-theme="dark"] & {
+    .nav-link {
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      &.active {
+        background-color: rgba(255, 255, 255, 0.08);
+      }
+    }
+  }
+}
+
+// ============================================
+// Mobile Toggle Button
+// ============================================
+.navbar-toggler {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: $classy-radius-md;
+  transition: $classy-transition-fast;
+  background: rgba(255, 255, 255, 0.9);
+
+  &:hover {
+    background: rgba(255, 255, 255, 1);
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba($classy-primary, 0.25);
+  }
+
+  .navbar-toggler-icon {
+    width: 1.25em;
+    height: 1.25em;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+
+  // Dark mode styles for toggle button
+  [data-bs-theme="dark"] & {
+    background: rgba(33, 37, 41, 0.9);
+    border-color: rgba(255, 255, 255, 0.1);
+
+    &:hover {
+      background: rgba(33, 37, 41, 1);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .navbar-toggler-icon {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+  }
+}
+
+// ============================================
+// Sticky Navigation
+// ============================================
+.navbar-sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+  animation: slideDown 0.3s ease-out;
+
+  &.scrolled {
+    background: rgba(255, 255, 255, 0.95);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+// ============================================
+// Secondary Navigation
+// ============================================
+.subnav {
+  background: $classy-off-white;
+  border-bottom: 1px solid $classy-gray-lightest;
+  padding: 0.75rem 0;
+
+  .nav-link {
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: $classy-radius-md;
+
+    &:hover {
+      background: $classy-white;
+    }
+
+    &.active {
+      background: $classy-white;
+      box-shadow: $classy-shadow-sm;
+    }
+  }
+}
+
+// ============================================
+// Dropdown Menus
+// ============================================
+.dropdown-menu {
+  background: rgba(var(--bs-secondary-bg-rgb), 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: $classy-radius-xl;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+  padding: 0.5rem;
+  margin-top: 0.5rem;
+  min-width: 200px;
+
+  .dropdown-item {
+    padding: 0.625rem 1rem;
+    border-radius: $classy-radius-lg;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    color: var(--bs-body-color);
+    background: transparent;
+
+    &:hover {
+      background: rgba($primary, 0.08);
+      color: $primary;
+      transform: none;
+    }
+
+    &.active,
+    &:active {
+      background: rgba(0, 0, 0, 0.08);
+      color: var(--bs-body-color);
+    }
+
+    &:focus {
+      background: rgba($primary, 0.08);
+      outline: none;
+    }
+
+    // Support for text utility classes
+    &.text-danger {
+      color: $danger !important;
+
+      &:hover {
+        background: rgba($danger, 0.08);
+        color: $danger !important;
+      }
+    }
+
+    &.text-warning {
+      color: $warning !important;
+
+      &:hover {
+        background: rgba($warning, 0.08);
+        color: $warning !important;
+      }
+    }
+
+    &.text-success {
+      color: $success !important;
+
+      &:hover {
+        background: rgba($success, 0.08);
+        color: $success !important;
+      }
+    }
+  }
+
+  .dropdown-divider {
+    margin: 0.5rem 0;
+    opacity: 0.1;
+    border-color: currentColor;
+  }
+}
+
+// ============================================
+// Dark Mode Dropdowns
+// ============================================
+[data-bs-theme="dark"] {
+  .dropdown-menu {
+    background: rgba(var(--bs-secondary-bg-rgb), 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+
+    .dropdown-item {
+      color: var(--bs-body-color);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+      }
+
+      &.active,
+      &:active {
+        background: rgba(255, 255, 255, 0.08);
+        color: var(--bs-body-color);
+      }
+
+      &:focus {
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      // Support for text utility classes in dark mode
+      &.text-danger {
+        color: $danger !important;
+
+        &:hover {
+          background: rgba($danger, 0.15);
+          color: lighten($danger, 10%) !important;
+        }
+      }
+
+      &.text-warning {
+        color: $warning !important;
+
+        &:hover {
+          background: rgba($warning, 0.15);
+          color: lighten($warning, 10%) !important;
+        }
+      }
+
+      &.text-success {
+        color: $success !important;
+
+        &:hover {
+          background: rgba($success, 0.15);
+          color: lighten($success, 10%) !important;
+        }
+      }
+    }
+  }
+}
+
+// ============================================
+// Breadcrumb Navigation
+// ============================================
+.breadcrumb {
+  background: transparent;
+  padding: 0;
+  margin-bottom: 0;
+
+  .breadcrumb-item {
+    font-size: 0.875rem;
+
+    + .breadcrumb-item::before {
+      content: "→";
+      padding: 0 0.5rem;
+    }
+
+    &.active {
+      font-weight: 500;
+    }
+
+    a {
+      text-decoration: none;
+      transition: $classy-transition-fast;
+
+      &:hover {
+      }
+    }
+  }
+}
+
+// ============================================
+// Backend Layout Components
+// ============================================
+.sidebar {
+  width: 280px;
+
+  .sidebar-logo {
+    height: 60px; // Fixed height for logo section
+    flex-shrink: 0;
+  }
+}
+
+.topbar {
+  height: 60px; // Match sidebar logo height
+
+  // Ensure content is vertically centered
+  > div {
+    height: 100%;
+  }
+}
+
+// ============================================
+// Backend Sidebar (Bootstrap Collapsible)
+// ============================================
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: .5rem .75rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+  background-color: transparent;
+  border: 0;
+  width: 100%;
+
+  &:hover,
+  &:focus {
+    color: rgba(var(--bs-emphasis-color-rgb), .85);
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &.active {
+    color: var(--bs-emphasis-color);
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  &::after {
+    width: 1.25em;
+    line-height: 0;
+    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+    transition: transform .35s ease;
+    transform-origin: .5em 50%;
+  }
+
+  &[aria-expanded="true"] {
+    color: rgba(var(--bs-emphasis-color-rgb), .85);
+  }
+
+  &[aria-expanded="true"]::after {
+    transform: rotate(90deg);
+  }
+}
+
+[data-bs-theme="dark"] {
+  .btn-toggle {
+    &:hover,
+    &:focus {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    &.active {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+
+    &::after {
+      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+    }
+  }
+}
+
+.btn-toggle-nav a {
+  display: block;
+  padding: .375rem .75rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  margin-right: .5rem;
+  border-radius: .375rem;
+  color: var(--bs-body-color);
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: var(--bs-emphasis-color);
+  }
+
+  &.active {
+    color: var(--bs-emphasis-color);
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+}
+
+// Regular sidebar links (non-dropdown)
+aside.sidebar,
+nav {
+  .link-body-emphasis {
+    &.d-flex {
+      &:hover,
+      &:focus {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.active {
+        color: var(--bs-emphasis-color);
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+
+      // Logo link - no hover effects
+      &.border-bottom {
+        &:hover,
+        &:focus {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+}
+
+// Dark mode overrides for all sidebar links
+[data-bs-theme="dark"] {
+  .btn-toggle-nav a {
+    &:hover,
+    &:focus {
+      background-color: rgba(255, 255, 255, 0.08);
+      color: var(--bs-emphasis-color);
+    }
+
+    &.active {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+  }
+
+  aside.sidebar,
+  nav {
+    .link-body-emphasis {
+      &.d-flex {
+        &:hover,
+        &:focus {
+          background-color: rgba(255, 255, 255, 0.08);
+        }
+
+        &.active {
+          background-color: rgba(255, 255, 255, 0.12);
+        }
+
+        // Logo link - no hover effects in dark mode
+        &.border-bottom {
+          &:hover,
+          &:focus {
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/themes/classy/css/layout/_team.scss

@@ -0,0 +1,18 @@
+.team-member-image {
+  height: 160px;
+  width: 160px;
+}
+
+@media (max-width: 991.98px) {
+  .team-member-image {
+    height: 140px;
+    width: 140px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .team-member-image {
+    height: 120px;
+    width: 120px;
+  }
+}

package/dist/assets/themes/classy/js/logo-scroll.js

@@ -0,0 +1,83 @@
+// Setup speed
+const SCROLL_SPEED_PX_PER_SECOND = 40; // Pixels per second
+
+// Logo scroll animation setup
+export default function setupLogoScroll() {
+  const scrollTracks = document.querySelectorAll('.logo-scroll-track');
+
+  scrollTracks.forEach(track => {
+    if (!track) {
+      return;
+    }
+
+    // Get original logos
+    const originalLogos = Array.from(track.children);
+    if (originalLogos.length === 0) {
+      return;
+    }
+
+    // Calculate total width of original logos
+    let totalWidth = 0;
+    originalLogos.forEach(logo => {
+      totalWidth += logo.getBoundingClientRect().width;
+    });
+
+    // Calculate how many sets we need to fill the screen plus extra for smooth scrolling
+    const viewportWidth = window.innerWidth;
+    const setsNeeded = Math.ceil((viewportWidth * 2.5) / totalWidth);
+
+    // Clone logo sets
+    for (let i = 0; i < setsNeeded; i++) {
+      originalLogos.forEach(logo => {
+        const clone = logo.cloneNode(true);
+        track.appendChild(clone);
+      });
+    }
+
+    // Calculate animation duration based on total width
+    // Slower speed for better visibility
+    const allLogos = track.children;
+    let animationWidth = 0;
+
+    // Calculate width of half the logos (for the 50% translation)
+    const halfCount = Math.floor(allLogos.length / 2);
+    for (let i = 0; i < halfCount; i++) {
+      animationWidth += allLogos[i].getBoundingClientRect().width;
+    }
+
+    // Set CSS variables for animation
+    const duration = animationWidth / SCROLL_SPEED_PX_PER_SECOND;
+    track.style.setProperty('--logo-scroll-duration', `${duration}s`);
+    track.style.setProperty('--logo-scroll-distance', `-${animationWidth}px`);
+
+    // Restart animation when it completes to ensure seamless loop
+    track.addEventListener('animationiteration', () => {
+      // Reset the animation to prevent accumulation of drift
+      track.style.animation = 'none';
+      track.offsetHeight; // Trigger reflow
+      track.style.animation = `scroll-logos var(--logo-scroll-duration, ${duration}s) linear infinite`;
+    });
+  });
+
+  // Recalculate on window resize
+  let resizeTimeout;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      // Reset and recalculate
+      scrollTracks.forEach(track => {
+        // Remove cloned logos
+        const logos = Array.from(track.children);
+        const originalCount = logos.length / (Math.ceil(logos.length / 8)); // Estimate original count
+
+        // Keep only estimated original logos
+        while (track.children.length > 8) { // Assuming max 8 original logos
+          track.removeChild(track.lastChild);
+        }
+      });
+
+      // Re-run setup
+      setupLogoScroll();
+    }, 250);
+  });
+}