@freqhole/playlistz 0.0.1

package/src/styles.css

@@ -0,0 +1,428 @@
+@import "tailwindcss";
+
+@theme {
+  /* Custom color palette - black, white, magenta */
+  --color-magenta-50: #fdf4ff;
+  --color-magenta-100: #fae8ff;
+  --color-magenta-200: #f5d0fe;
+  --color-magenta-300: #f0abfc;
+  --color-magenta-400: #e879f9;
+  --color-magenta-500: #d946ef;
+  --color-magenta-600: #c026d3;
+  --color-magenta-700: #a21caf;
+  --color-magenta-800: #86198f;
+  --color-magenta-900: #701a75;
+  --color-magenta-950: #4a044e;
+
+  /* Dark theme grays */
+  --color-dark-100: #1a1a1a;
+  --color-dark-200: #2a2a2a;
+  --color-dark-300: #3a3a3a;
+  --color-dark-400: #4a4a4a;
+  --color-dark-500: #5a5a5a;
+  --color-dark-600: #6a6a6a;
+  --color-dark-700: #7a7a7a;
+  --color-dark-800: #0a0a0a;
+  --color-dark-900: #000000;
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  /* buttons and interactive labels always show the pointer cursor */
+  button:not([disabled]),
+  label[for],
+  label:has(input),
+  input[type="checkbox"]:not([disabled]),
+  input[type="radio"]:not([disabled]),
+  input[type="range"]:not([disabled]),
+  select:not([disabled]) {
+    cursor: pointer;
+  }
+
+  /* disabled buttons should show the not-allowed cursor */
+  button[disabled] {
+    cursor: not-allowed;
+  }
+
+  body {
+    background-color: black;
+    color: white;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Custom scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #2a2a2a;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #4a4a4a;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #d946ef;
+  }
+
+  /* Firefox scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #4a4a4a #2a2a2a;
+  }
+}
+
+@layer components {
+  /* Playlist button hover effects */
+  .playlist-button-hover {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease-out;
+  }
+
+  .playlist-button-hover:hover {
+    transform: scale(1.02);
+    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
+  }
+
+  /* Playlist item hover effects */
+  .playlist-item-hover:hover {
+    transform: translateX(2px);
+    box-shadow: -2px 0 8px rgba(217, 70, 239, 0.4);
+  }
+
+  /* Glass morphism effects */
+  .glass {
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgba(26, 26, 26, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.125);
+  }
+  /* slide-down animation for inline edit panels */
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* song row exit animations - small translate + opacity so they stay visible within scroll containers */
+  @keyframes rowFlyDown {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(56px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rowFlyUp {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(-56px);
+      opacity: 0;
+    }
+  }
+
+  /* song row enter animation */
+  @keyframes rowFlyIn {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* comet-border: a rotating gradient that appears as a moving "comet tail"
+     border around a button. wrap the button in a div.comet-border element.
+     the div needs overflow:hidden and padding:1px (the visible border width).
+     the button inside needs a solid bg (e.g. bg-black) to mask the gradient
+     except at the 1px edge. */
+  @keyframes comet-border-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .comet-border {
+    position: relative;
+    overflow: hidden;
+    padding: 1px;
+  }
+
+  .comet-border > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  .comet-border::before {
+    content: '';
+    position: absolute;
+    /* oversized square centered on the element so the conic gradient
+       fully covers all four edges as it rotates */
+    inset: -50%;
+    width: 200%;
+    height: 200%;
+    background: conic-gradient(
+      from 0deg,
+      transparent 40%,
+      #d946ef 55%,
+      transparent 70%
+    );
+    animation: comet-border-spin 2s linear infinite;
+    z-index: 0;
+    pointer-events: none;
+  }
+}
+
+@layer utilities {
+  /* Text selection */
+  .no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  /* Focus styles */
+  .focus-outline:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.5);
+  }
+}
+
+/* Loading shimmer animation */
+.loading-shimmer {
+  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Mobile responsive breakpoints */
+@media (max-width: 900px) {
+  .mobile-full-width {
+    width: 100% !important;
+  }
+
+  .mobile-hidden {
+    display: none !important;
+  }
+
+  .mobile-flex-col {
+    flex-direction: column !important;
+  }
+
+  .mobile-text-center {
+    text-align: center !important;
+  }
+
+  .mobile-gap-2 {
+    gap: 0.5rem !important;
+  }
+
+  .mobile-p-4 {
+    padding: 1rem !important;
+  }
+}
+
+/* Dynamic background effects */
+.dynamic-background {
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: background-image, filter;
+}
+
+.dynamic-background::before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  filter: blur(12px) saturate(1.2);
+  z-index: -1;
+}
+
+/* Sidebar collapse animations */
+.sidebar-collapse-enter {
+  animation: slideInLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-collapse-exit {
+  animation: slideOutLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* Background fade transitions */
+.bg-fade-enter {
+  animation: fadeIn 1000ms ease-out;
+}
+
+.bg-fade-exit {
+  animation: fadeOut 500ms ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    filter: blur(20px) brightness(0.1);
+  }
+  to {
+    opacity: 0.2;
+    filter: blur(8px) brightness(0.3);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 0.2;
+    filter: blur(8px) brightness(0.3);
+  }
+  to {
+    opacity: 0;
+    filter: blur(20px) brightness(0.1);
+  }
+}
+
+/* Touch-friendly button sizes on mobile */
+@media (max-width: 900px) {
+  .touch-target {
+    min-height: 44px !important;
+    min-width: 44px !important;
+  }
+
+  /* Larger text on mobile for readability */
+  .mobile-text-lg {
+    font-size: 1.125rem !important;
+  }
+
+  .mobile-text-base {
+    font-size: 1rem !important;
+  }
+
+  /* Better spacing on mobile */
+  .mobile-p-6 {
+    padding: 1.5rem !important;
+  }
+
+  .mobile-px-4 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  /* Overlay button improvements */
+  .mobile-overlay-buttons {
+    background: rgba(0, 0, 0, 0.9) !important;
+    backdrop-filter: blur(8px) !important;
+    border-radius: 12px !important;
+    padding: 8px !important;
+  }
+}
+
+/* Seek slider styling */
+.seek-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #000000;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 405L125 155L375 155L303.611 340.714L250 405Z' fill='%23ec4899'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.seek-slider::-webkit-slider-thumb:hover {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 405L125 155L375 155L303.611 340.714L250 405Z' fill='%23f472b6'/%3E%3C/svg%3E");
+  transform: scale(1.1);
+}
+
+.seek-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #000000;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 405L125 155L375 155L303.611 340.714L250 405Z' fill='%23ec4899'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.seek-slider::-moz-range-thumb:hover {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250 405L125 155L375 155L303.611 340.714L250 405Z' fill='%23f472b6'/%3E%3C/svg%3E");
+  transform: scale(1.1);
+}
+
+.seek-slider:focus {
+  outline: none;
+}
+
+.seek-slider:focus::-webkit-slider-thumb {
+  outline: none;
+}
+
+.seek-slider:focus::-moz-range-thumb {
+  outline: none;
+}