browser-extension-manager 1.0.14 → 1.1.0

package/dist/assets/themes/classy/css/base/_utilities.scss

@@ -0,0 +1,77 @@
+// Classy Utility Classes
+// Custom helper classes and theme-specific utilities
+
+// ============================================
+// Section Spacing
+// ============================================
+
+// Section Spacing
+// .section {
+//   padding: $classy-spacing-4xl 0;
+
+//   &.section-sm {
+//     padding: $classy-spacing-2xl 0;
+//   }
+
+//   &.section-lg {
+//     padding: 6rem 0;
+//   }
+
+//   &.section-xl {
+//     padding: 8rem 0;
+//   }
+// }
+
+// Hero Sections
+// .hero {
+//   padding: 6rem 0;
+//   position: relative;
+//   overflow: hidden;
+
+//   &.hero-gradient {
+//     background: $classy-gradient-primary;
+//   }
+
+//   &.hero-pattern {
+//     &::before {
+//       content: "";
+//       position: absolute;
+//       top: 0;
+//       left: 0;
+//       right: 0;
+//       bottom: 0;
+//       background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235B47FB' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+//       opacity: 0.1;
+//       z-index: 0;
+//     }
+//   }
+
+//   .hero-content {
+//     position: relative;
+//     z-index: 1;
+//   }
+// }
+
+// ============================================
+// Shadow Utilities
+// ============================================
+.shadow-xs { box-shadow: $classy-shadow-xs !important; }
+.shadow-sm { box-shadow: $classy-shadow-sm !important; }
+.shadow-md { box-shadow: $classy-shadow-md !important; }
+.shadow-lg { box-shadow: $classy-shadow-lg !important; }
+.shadow-xl { box-shadow: $classy-shadow-xl !important; }
+.shadow-2xl { box-shadow: $classy-shadow-2xl !important; }
+.shadow-glow { box-shadow: $classy-shadow-glow !important; }
+.shadow-none { box-shadow: none !important; }
+
+
+// ============================================
+// Cursor Utilities
+// ============================================
+// TODO: cursor-move, cursor-grab
+
+// .cursor-pointer { cursor: pointer !important; }
+// .cursor-default { cursor: default !important; }
+// .cursor-wait { cursor: wait !important; }
+// .cursor-not-allowed { cursor: not-allowed !important; }
+

package/dist/assets/themes/classy/css/components/_accordion.scss

@@ -0,0 +1,33 @@
+// Classy Theme Accordion Component
+// SVG plus/minus icons using Bootstrap's official approach
+
+// ============================================
+// Accordion Base Styles
+// ============================================
+.accordion-item {
+  background-color: var(--bs-secondary-bg);
+}
+
+.accordion-button {
+  background-color: var(--bs-secondary-bg);
+
+  &:not(.collapsed) {
+    background-color: var(--bs-secondary-bg);
+  }
+}
+
+.accordion-body {
+  background-color: var(--bs-secondary-bg);
+}
+
+// Light mode icons
+.accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}
+
+// Dark mode icons - match Bootstrap's exact selector pattern
+[data-bs-theme="dark"] .accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}

package/dist/assets/themes/classy/css/components/_avatars.scss

@@ -0,0 +1,32 @@
+// Classy Avatar Components
+// Circular profile images with responsive sizing
+// Uses $avatar-sizes map from config
+
+// ============================================
+// Base Avatar Styles
+// ============================================
+.avatar {
+  display: inline-block;
+  height: map-get($avatar-sizes, null);
+  position: relative;
+  width: map-get($avatar-sizes, null);
+
+  img {
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+    width: 100%;
+  }
+}
+
+// ============================================
+// Size Class Generation
+// ============================================
+@each $size, $dimension in $avatar-sizes {
+  @if $size != null {
+    .avatar-#{$size} {
+      height: $dimension;
+      width: $dimension;
+    }
+  }
+}

package/dist/assets/themes/classy/css/components/_badges.scss

@@ -0,0 +1,25 @@
+// Classy Badge Components
+// Badges and labels that can extend outside their containers
+
+// ============================================
+// Badge Soft Colors & Gradient
+// ============================================
+.badge-gradient {
+  background: $classy-gradient-primary;
+}
+
+.badge-soft-primary {
+  background: $classy-primary-soft;
+}
+
+// Global fix - any element containing a badge should not clip
+// * {
+//   &:has(.badge) {
+//     overflow: visible !important;
+//   }
+// }
+
+// Base badge styling improvements
+.badge {
+  z-index: 100; // Ensure badge is always on top
+}

package/dist/assets/themes/classy/css/components/_buttons.scss

@@ -0,0 +1,397 @@
+// Classy Button Components
+// Modern button styles inspired by premium SaaS websites
+
+// ============================================
+// Base Button Styles
+// ============================================
+.btn {
+  font-weight: 600;
+  border-radius: $classy-radius-lg;
+  border: 2px solid transparent;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: -0.01em;
+
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+  }
+
+  // // Slot machine hover effect
+  // // Works on direct text nodes when wrapped in any inline element
+  // > * {
+  //   position: relative;
+  //   display: inline-block;
+  //   transition: transform 0.3s ease;
+
+  //   // Create duplicate text below using the same content
+  //   &::before {
+  //     content: attr(data-hover);
+  //     position: absolute;
+  //     top: 100%;
+  //     left: 0;
+  //     width: max-content;
+  //     transform: translate3d(0, 0, 0);
+  //   }
+  // }
+
+  // // On hover, slide the content upward
+  // &:hover > * {
+  //   transform: translateY(-100%);
+  // }
+}
+
+// ============================================
+// Primary Button Enhancement
+// ============================================
+.btn-primary {
+  box-shadow: $classy-shadow-md, inset 0 1px 0 rgba(255, 255, 255, 0.15);
+
+  &:hover {
+    box-shadow: $classy-shadow-lg, inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  }
+
+  &:active {
+    box-shadow: $classy-shadow-sm, inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  }
+}
+
+// ============================================
+// Glass Morphism Buttons
+// ============================================
+.btn-glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: var(--bs-body-color);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--bs-body-color);
+    box-shadow: $classy-shadow-lg;
+  }
+
+  &.btn-glass-dark {
+    background: rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+// ============================================
+// Glow Effect Button
+// ============================================
+.btn-glow {
+  background: $primary;
+  color: white;
+  box-shadow: 0 0 20px rgba($primary, 0.4);
+
+  &:hover {
+    background: darken($primary, 5%);
+    color: white;
+    box-shadow: 0 0 30px rgba($primary, 0.6);
+    transform: translateY(-2px);
+  }
+}
+
+// ============================================
+// Secondary Button
+// ============================================
+.btn-secondary {
+  &:hover {
+    box-shadow: $classy-shadow-md;
+  }
+}
+
+// ============================================
+// Outline Button Overrides
+// ============================================
+[class*="btn-outline-"] {
+  background: transparent !important;
+  border-width: 2px !important;
+  border-style: solid !important;
+
+  &:not(:hover) {
+    background: transparent !important;
+  }
+}
+
+.btn-outline-primary {
+  border-color: $primary !important;
+  color: $primary !important;
+
+  &:hover {
+    background: $primary !important;
+    border-color: $primary !important;
+    color: white !important;
+    box-shadow: $classy-shadow-md;
+  }
+}
+
+.btn-outline-secondary {
+  border-color: $secondary !important;
+  color: $secondary !important;
+
+  &:hover {
+    background: $secondary !important;
+    border-color: $secondary !important;
+    color: white !important;
+  }
+}
+
+.btn-outline-success {
+  border-color: $success !important;
+  color: $success !important;
+
+  &:hover {
+    background: $success !important;
+    border-color: $success !important;
+    color: white !important;
+  }
+}
+
+.btn-outline-danger {
+  border-color: $danger !important;
+  color: $danger !important;
+
+  &:hover {
+    background: $danger !important;
+    border-color: $danger !important;
+    color: white !important;
+  }
+}
+
+.btn-outline-warning {
+  border-color: $warning !important;
+  color: $warning !important;
+
+  &:hover {
+    background: $warning !important;
+    border-color: $warning !important;
+    color: white !important;
+  }
+}
+
+.btn-outline-info {
+  border-color: $info !important;
+  color: $info !important;
+
+  &:hover {
+    background: $info !important;
+    border-color: $info !important;
+    color: white !important;
+  }
+}
+
+.btn-outline-light {
+  border-color: $light !important;
+  color: $light !important;
+
+  &:hover {
+    background: $light !important;
+    border-color: $light !important;
+    color: $dark !important;
+  }
+}
+
+.btn-outline-dark {
+  border-color: $dark !important;
+  color: $dark !important;
+
+  &:hover {
+    background: $dark !important;
+    border-color: $dark !important;
+    color: white !important;
+  }
+}
+
+// ============================================
+// Ghost Button
+// ============================================
+.btn-ghost {
+  background: transparent;
+  box-shadow: none;
+}
+
+// ============================================
+// Soft Buttons
+// ============================================
+.btn-soft-primary {
+  background: rgba($primary, 0.1);
+  color: $primary;
+
+  &:hover {
+    background: rgba($primary, 0.2);
+    color: $primary;
+    box-shadow: $classy-shadow-md;
+  }
+}
+
+.btn-soft-secondary {
+  background: rgba($secondary, 0.1);
+  color: $secondary;
+
+  &:hover {
+    background: rgba($secondary, 0.2);
+    color: $secondary;
+  }
+}
+
+.btn-soft-success {
+  background: rgba($success, 0.1);
+  color: $success;
+
+  &:hover {
+    background: rgba($success, 0.2);
+    color: $success;
+  }
+}
+
+.btn-soft-danger {
+  background: rgba($danger, 0.1);
+  color: $danger;
+
+  &:hover {
+    background: rgba($danger, 0.2);
+    color: $danger;
+  }
+}
+
+.btn-soft-warning {
+  background: rgba($warning, 0.1);
+  color: $warning;
+
+  &:hover {
+    background: rgba($warning, 0.2);
+    color: $warning;
+  }
+}
+
+.btn-soft-info {
+  background: rgba($info, 0.1);
+  color: $info;
+
+  &:hover {
+    background: rgba($info, 0.2);
+    color: $info;
+  }
+}
+
+// ============================================
+// Button Groups
+// ============================================
+.btn-group {
+  .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: $classy-radius-lg;
+      border-bottom-left-radius: $classy-radius-lg;
+    }
+
+    &:last-child {
+      border-top-right-radius: $classy-radius-lg;
+      border-bottom-right-radius: $classy-radius-lg;
+    }
+  }
+
+  &.btn-group-pill .btn {
+    &:first-child {
+      border-top-left-radius: $classy-radius-full;
+      border-bottom-left-radius: $classy-radius-full;
+    }
+
+    &:last-child {
+      border-top-right-radius: $classy-radius-full;
+      border-bottom-right-radius: $classy-radius-full;
+    }
+  }
+}
+
+// ============================================
+// Adaptive Theme Buttons
+// ============================================
+.btn-adaptive {
+  @extend .btn-dark;
+}
+
+[data-bs-theme="dark"] .btn-adaptive {
+  @extend .btn-light;
+}
+
+.btn-outline-adaptive {
+  @extend .btn-outline-dark;
+  color: var(--bs-body-color) !important;
+
+  &:hover {
+    color: white !important;
+  }
+
+  &.active,
+  &:active {
+    background: $dark !important;
+    border-color: $dark !important;
+    color: white !important;
+  }
+}
+
+[data-bs-theme="dark"] .btn-outline-adaptive {
+  @extend .btn-outline-light;
+  color: var(--bs-body-color) !important;
+
+  &:hover {
+    color: $dark !important;
+  }
+
+  &.active,
+  &:active {
+    background: $light !important;
+    border-color: $light !important;
+    color: $dark !important;
+  }
+}
+
+// ============================================
+// Adaptive Inverse Buttons
+// ============================================
+// .btn-adaptive-inverse {
+//   @extend .btn-light;
+//   // color: $dark !important;
+
+//   // &:hover {
+//   //   background: $dark !important;
+//   //   color: white !important;
+//   // }
+// }
+
+// [data-bs-theme="dark"] .btn-adaptive-inverse {
+//   @extend .btn-dark;
+//   // color: white !important;
+
+//   // &:hover {
+//   //   background: white !important;
+//   //   color: $dark !important;
+//   // }
+// }
+
+// ============================================
+// Gradient Rainbow Button
+// ============================================
+.btn-gradient-rainbow {
+  border-width: 0 !important;
+  border-color: transparent !important;
+  background-color: transparent !important;
+  background-image: $classy-gradient-rainbow !important;
+  background-size: 300% 300% !important;
+  text-transform: none !important;
+  color: rgba(255, 255, 255, 1) !important;
+  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  transition-duration: 0.3s !important;
+
+  &:hover {
+    opacity: 0.70;
+  }
+}

package/dist/assets/themes/classy/css/components/_cards.scss

@@ -0,0 +1,33 @@
+// Classy Card Components
+// Modern card designs with glass effects and subtle animations
+
+// ============================================
+// Base Card Styles
+// ============================================
+.card {
+  background: var(--bs-secondary-bg);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: $classy-radius-xl;
+  box-shadow: $classy-shadow-sm;
+  position: relative;
+
+  // Allow badges to overflow
+  &:has(.badge) {
+    overflow: visible !important;
+  }
+
+  .card-header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    padding: 1.5rem;
+    font-weight: 600;
+  }
+
+  .card-body {
+    padding: 1.5rem;
+  }
+
+  .card-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    padding: 1rem 1.5rem;
+  }
+}

package/dist/assets/themes/classy/css/components/_carousel.scss

@@ -0,0 +1,41 @@
+// Classy Carousel Component
+// Better contrast for navigation arrows
+
+// ============================================
+// Carousel Controls
+// ============================================
+.carousel-control-prev,
+.carousel-control-next {
+  // Add semi-transparent dark background for better contrast
+  width: 50px;
+  height: 50px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  // Add background circle for better visibility
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 12px;
+    width: 50px;
+    height: 50px;
+  }
+}
+
+// Dark mode adjustments
+// [data-bs-theme="dark"] {
+//   .carousel-control-prev,
+//   .carousel-control-next {
+//     .carousel-control-prev-icon,
+//     .carousel-control-next-icon {
+//       background-color: rgba(255, 255, 255, 0.9);
+//     }
+//   }
+// }