@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/themes/mashroom/06-components/_components.river.scss

@@ -1,570 +0,0 @@
-/*!
- * Mashroom Theme River Component
- * Flowing content stream animations with psychedelic mushroom effects
- */
-
-// Import required tools and settings
-@use '../02-tools/tools.trippy-effects' as trippy;
-@use '../02-tools/tools.psychedelic-gradients' as gradients;
-@use '../01-settings/settings.colors' as *;
-
-.c-river {
-  $root: &;
-
-  // Base river container
-  position: relative;
-  width: 100%;
-  height: 400px;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.8);
-  border-radius: 20px;
-  border: 1px solid rgba(157, 0, 255, 0.3);
-
-  // Mushroom cap shape
-  border-radius: 20px 20px 10px 10px;
-
-  // Animated background flow
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      45deg,
-      rgba(157, 0, 255, 0.1),
-      rgba(255, 187, 0, 0.1),
-      rgba(255, 0, 128, 0.1),
-      rgba(0, 255, 157, 0.1)
-    );
-    background-size: 400% 400%;
-    animation: flowBackground 15s ease infinite;
-    pointer-events: none;
-  }
-
-  @keyframes flowBackground {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  // River content stream
-  &__stream {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  // Individual content items
-  &__item {
-    position: absolute;
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(157, 0, 255, 0.2);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
-    cursor: pointer;
-    animation: floatDown 20s linear infinite;
-
-    &:hover {
-      background: rgba(157, 0, 255, 0.2);
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.3), 8px);
-      transform: scale(1.05);
-    }
-
-    @keyframes floatDown {
-      0% {
-        transform: translateY(-100%) translateX(0) rotate(0deg);
-        opacity: 0;
-      }
-      10% {
-        opacity: 1;
-      }
-      90% {
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(500px) translateX(50px) rotate(360deg);
-        opacity: 0;
-      }
-    }
-
-    // Staggered animation delays
-    &:nth-child(1) {
-      animation-delay: 0s;
-      left: 10%;
-    }
-    &:nth-child(2) {
-      animation-delay: 3s;
-      left: 30%;
-    }
-    &:nth-child(3) {
-      animation-delay: 6s;
-      left: 50%;
-    }
-    &:nth-child(4) {
-      animation-delay: 9s;
-      left: 70%;
-    }
-    &:nth-child(5) {
-      animation-delay: 12s;
-      left: 20%;
-    }
-    &:nth-child(6) {
-      animation-delay: 15s;
-      left: 60%;
-    }
-  }
-
-  // Content within river items
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  // Item header
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  // Avatar/icon
-  &__avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, $purple-4, $yellow-4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: $white;
-    font-weight: bold;
-    font-size: 0.875rem;
-    animation: avatarGlow 3s ease-in-out infinite;
-
-    @keyframes avatarGlow {
-      0%,
-      100% {
-        box-shadow: 0 0 10px rgba(157, 0, 255, 0.5);
-      }
-      50% {
-        box-shadow: 0 0 20px rgba(255, 187, 0, 0.5);
-      }
-    }
-  }
-
-  // Author/username
-  &__author {
-    font-weight: 600;
-    color: $white;
-    font-size: 0.875rem;
-  }
-
-  // Timestamp
-  &__time {
-    font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  // Main content text
-  &__text {
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-
-  // Media content (images/videos)
-  &__media {
-    width: 100%;
-    height: 120px;
-    border-radius: 8px;
-    background: linear-gradient(135deg, rgba(157, 0, 255, 0.2), rgba(255, 187, 0, 0.2));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.75rem;
-    animation: mediaShimmer 3s ease-in-out infinite;
-
-    @keyframes mediaShimmer {
-      0%,
-      100% {
-        opacity: 0.7;
-      }
-      50% {
-        opacity: 1;
-      }
-    }
-  }
-
-  // Action buttons
-  &__actions {
-    display: flex;
-    gap: 1rem;
-    margin-top: 0.5rem;
-  }
-
-  // Action button
-  &__action {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.5rem;
-    background: rgba(157, 0, 255, 0.2);
-    border: none;
-    border-radius: 16px;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.75rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      background: rgba(255, 187, 0, 0.3);
-      color: $white;
-      transform: scale(1.1);
-    }
-
-    .c-icon {
-      width: 12px;
-      height: 12px;
-    }
-  }
-
-  // Scroll indicator
-  &__scroll {
-    position: absolute;
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.75rem;
-    animation: scrollHint 3s ease-in-out infinite;
-
-    @keyframes scrollHint {
-      0%,
-      100% {
-        opacity: 0.7;
-        transform: translateX(-50%) translateY(0);
-      }
-      50% {
-        opacity: 1;
-        transform: translateX(-50%) translateY(-5px);
-      }
-    }
-
-    .c-icon {
-      width: 16px;
-      height: 16px;
-      animation: arrowBounce 2s ease-in-out infinite;
-
-      @keyframes arrowBounce {
-        0%,
-        100% {
-          transform: translateY(0);
-        }
-        50% {
-          transform: translateY(3px);
-        }
-      }
-    }
-  }
-
-  // Loading state
-  &--loading {
-    #{$root}__item {
-      animation: none;
-      background: linear-gradient(
-        90deg,
-        rgba(157, 0, 255, 0.1) 25%,
-        rgba(255, 187, 0, 0.1) 50%,
-        rgba(157, 0, 255, 0.1) 75%
-      );
-      background-size: 200% 100%;
-      animation: loadingShimmer 2s ease-in-out infinite;
-    }
-
-    @keyframes loadingShimmer {
-      0% {
-        background-position: -200% 0;
-      }
-      100% {
-        background-position: 200% 0;
-      }
-    }
-  }
-
-  // Empty state
-  &--empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1rem;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 1.125rem;
-
-    #{$root}__icon {
-      width: 64px;
-      height: 64px;
-      color: rgba(157, 0, 255, 0.5);
-      animation: emptyFloat 4s ease-in-out infinite;
-
-      @keyframes emptyFloat {
-        0%,
-        100% {
-          transform: translateY(0);
-        }
-        50% {
-          transform: translateY(-10px);
-        }
-      }
-    }
-  }
-
-  // Horizontal flow variant
-  &--horizontal {
-    height: 200px;
-
-    #{$root}__item {
-      animation: floatRight 15s linear infinite;
-      width: 300px;
-      height: 150px;
-    }
-
-    @keyframes floatRight {
-      0% {
-        transform: translateX(-100%) translateY(0) rotate(0deg);
-        opacity: 0;
-      }
-      10% {
-        opacity: 1;
-      }
-      90% {
-        opacity: 1;
-      }
-      100% {
-        transform: translateX(100vw) translateY(20px) rotate(180deg);
-        opacity: 0;
-      }
-    }
-
-    #{$root}__item:nth-child(1) {
-      animation-delay: 0s;
-      top: 20%;
-    }
-    #{$root}__item:nth-child(2) {
-      animation-delay: 2s;
-      top: 40%;
-    }
-    #{$root}__item:nth-child(3) {
-      animation-delay: 4s;
-      top: 60%;
-    }
-    #{$root}__item:nth-child(4) {
-      animation-delay: 6s;
-      top: 30%;
-    }
-    #{$root}__item:nth-child(5) {
-      animation-delay: 8s;
-      top: 50%;
-    }
-  }
-
-  // Circular flow variant
-  &--circular {
-    #{$root}__item {
-      animation: circularFlow 20s linear infinite;
-      transform-origin: center;
-    }
-
-    @keyframes circularFlow {
-      0% {
-        transform: rotate(0deg) translateX(150px) rotate(0deg);
-        opacity: 0;
-      }
-      10% {
-        opacity: 1;
-      }
-      90% {
-        opacity: 1;
-      }
-      100% {
-        transform: rotate(360deg) translateX(150px) rotate(-360deg);
-        opacity: 0;
-      }
-    }
-  }
-
-  // Size variants
-  &--sm {
-    height: 300px;
-
-    #{$root}__item {
-      padding: 1rem;
-      width: 200px;
-    }
-
-    #{$root}__avatar {
-      width: 24px;
-      height: 24px;
-      font-size: 0.75rem;
-    }
-
-    #{$root}__text {
-      font-size: 0.75rem;
-    }
-  }
-
-  &--lg {
-    height: 500px;
-
-    #{$root}__item {
-      padding: 2rem;
-      width: 350px;
-    }
-
-    #{$root}__avatar {
-      width: 40px;
-      height: 40px;
-      font-size: 1rem;
-    }
-
-    #{$root}__text {
-      font-size: 1rem;
-    }
-  }
-
-  // Psychedelic variant
-  &--psychedelic {
-    background: linear-gradient(135deg, $purple-4, $yellow-4, $red-4, $green-4);
-    background-size: 400% 400%;
-    animation: psychedelicShift 10s ease infinite;
-
-    #{$root}__item {
-      background: rgba(0, 0, 0, 0.3);
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-
-    @keyframes psychedelicShift {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-  }
-
-  // Glow variant
-  &--glow {
-    @include trippy.trippy-glow(rgba(157, 0, 255, 0.4), 20px);
-
-    &:hover {
-      @include trippy.trippy-glow(rgba(255, 187, 0, 0.6), 30px);
-    }
-  }
-
-  // Dark variant
-  &--dark {
-    background: rgba(0, 0, 0, 0.9);
-    border-color: rgba(157, 0, 255, 0.5);
-  }
-
-  // Light variant
-  &--light {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(157, 0, 255, 0.2);
-
-    #{$root}__text,
-    #{$root}__author,
-    #{$root}__time {
-      color: $black;
-    }
-  }
-
-  // Floating spore particles
-  &__spore {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background: radial-gradient(circle, $yellow-4, transparent);
-    border-radius: 50%;
-    animation: sporeFloat 12s ease-in-out infinite;
-    pointer-events: none;
-
-    &:nth-child(odd) {
-      animation-delay: -3s;
-    }
-
-    &:nth-child(even) {
-      animation-delay: -6s;
-    }
-  }
-
-  @keyframes sporeFloat {
-    0% {
-      transform: translateY(0) translateX(0) scale(0);
-      opacity: 0;
-    }
-    10% {
-      opacity: 1;
-    }
-    90% {
-      opacity: 1;
-    }
-    100% {
-      transform: translateY(-100px) translateX(20px) scale(1);
-      opacity: 0;
-    }
-  }
-
-  // Responsive
-  @media (max-width: 768px) {
-    #{$root}__item {
-      width: 250px;
-      padding: 1rem;
-    }
-
-    &--horizontal {
-      #{$root}__item {
-        width: 200px;
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    height: 300px;
-
-    #{$root}__item {
-      width: 200px;
-      padding: 0.75rem;
-    }
-
-    &--horizontal {
-      height: 150px;
-
-      #{$root}__item {
-        width: 150px;
-        height: 100px;
-      }
-    }
-  }
-}