Initial open-source self-hosted Songs2YT edition
This commit is contained in:
Songs2YT
+248
@@ -0,0 +1,248 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-surface-dark text-gray-100 antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.input-field {
|
||||
@apply w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white placeholder-gray-500 focus:border-accent focus:outline-none;
|
||||
}
|
||||
|
||||
.mockup-upload-box {
|
||||
animation: mockup-border-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mockup-upload-box-image {
|
||||
animation: mockup-border-pulse 3s ease-in-out infinite,
|
||||
mockup-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mockup-upload-box-audio {
|
||||
animation: mockup-border-pulse 3s ease-in-out infinite 0.5s,
|
||||
mockup-float 4s ease-in-out infinite 0.5s;
|
||||
}
|
||||
|
||||
.mockup-icon-image {
|
||||
animation: mockup-icon-glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mockup-icon-audio {
|
||||
animation: mockup-icon-glow 3s ease-in-out infinite 0.5s;
|
||||
}
|
||||
|
||||
.mockup-progress-shimmer {
|
||||
animation: mockup-shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mockup-dot-1 {
|
||||
animation: processing-dot 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mockup-dot-2 {
|
||||
animation: processing-dot 1.4s ease-in-out infinite 0.2s;
|
||||
}
|
||||
|
||||
.mockup-dot-3 {
|
||||
animation: processing-dot 1.4s ease-in-out infinite 0.4s;
|
||||
}
|
||||
|
||||
.benefits-flow-line {
|
||||
animation: benefits-flow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.benefits-process-icon {
|
||||
animation: benefits-process-pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.benefits-flow-path {
|
||||
stroke-dasharray: 6 8;
|
||||
animation: benefits-flow-dash 2s linear infinite;
|
||||
}
|
||||
|
||||
.mobile-sidebar-panel-open {
|
||||
animation: mobile-sidebar-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
|
||||
.mobile-sidebar-panel-close {
|
||||
animation: mobile-sidebar-close 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
|
||||
}
|
||||
|
||||
.mobile-sidebar-close-btn-open {
|
||||
animation: mobile-sidebar-close-btn-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
|
||||
.mobile-sidebar-close-btn-close {
|
||||
animation: mobile-sidebar-close-btn-out 0.2s ease-in forwards;
|
||||
}
|
||||
|
||||
.mobile-sidebar-link {
|
||||
@apply relative block overflow-hidden rounded-lg px-4 py-3 text-base font-medium text-gray-300 transition-all duration-300 ease-out;
|
||||
}
|
||||
|
||||
.mobile-sidebar-link::before {
|
||||
content: "";
|
||||
@apply absolute bottom-2 left-0 top-2 w-1 origin-left scale-y-0 rounded-r bg-accent transition-transform duration-300 ease-out;
|
||||
}
|
||||
|
||||
.mobile-sidebar-link:hover {
|
||||
@apply translate-x-1 bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.12)];
|
||||
}
|
||||
|
||||
.mobile-sidebar-link:hover::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
|
||||
.mobile-sidebar-link-active {
|
||||
@apply bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.2)];
|
||||
}
|
||||
|
||||
.mobile-sidebar-link-active::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
|
||||
.mobile-sidebar-link-danger:hover {
|
||||
@apply bg-red-500/10 text-red-300 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.2)];
|
||||
}
|
||||
|
||||
.mobile-sidebar-link-danger:hover::before {
|
||||
@apply bg-red-400;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mockup-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mockup-border-pulse {
|
||||
0%,
|
||||
100% {
|
||||
border-color: rgb(75 85 99 / 0.5);
|
||||
box-shadow: 0 0 0 0 rgb(255 255 255 / 0);
|
||||
}
|
||||
50% {
|
||||
border-color: rgb(156 163 175 / 0.7);
|
||||
box-shadow: 0 0 12px 0 rgb(255 255 255 / 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mockup-icon-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.85;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mockup-shimmer {
|
||||
0% {
|
||||
left: -30%;
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes processing-dot {
|
||||
0%,
|
||||
20% {
|
||||
opacity: 0;
|
||||
}
|
||||
40%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes benefits-flow-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes benefits-process-pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes benefits-flow-dash {
|
||||
to {
|
||||
stroke-dashoffset: -28;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mobile-sidebar-open {
|
||||
from {
|
||||
opacity: 0.85;
|
||||
transform: translateX(100%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mobile-sidebar-close {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0.85;
|
||||
transform: translateX(100%) scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mobile-sidebar-close-btn-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.6) rotate(-90deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mobile-sidebar-close-btn-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.6) rotate(90deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user