Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2025-12-30 19:48:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

🔥Spline object responsive

Browse Source
This commit is contained in:
abhrajitray77
2025-08-05 13:21:31 +05:30
parent e255142e70
commit dd6554509c
4 changed files with 195 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
www/src/styles/global.css
View File

@@ -1,10 +1,10 @@
@import 'tailwindcss';
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@custom-media --xs (width >= 475px);
@import 'tailwindcss/theme' layer(theme);
@import "tailwindcss/theme" layer(theme);
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
@@ -134,78 +134,92 @@
/* Custom gradient utilities */
@layer utilities {
.bg-gradient-radial {
background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
background-image: radial-gradient(
circle at center,
var(--tw-gradient-stops)
);
}
.text-gradient {
@apply bg-gradient-to-r bg-clip-text text-transparent;
}
.gradient-border {
position: relative;
background: linear-gradient(var(--background), var(--background)) padding-box,
linear-gradient(to right, var(--tw-gradient-stops)) border-box;
background: linear-gradient(var(--background), var(--background))
padding-box,
linear-gradient(to right, var(--tw-gradient-stops)) border-box;
border: 2px solid transparent;
}
.glow-sm {
box-shadow: 0 0 20px -5px var(--tw-shadow-color);
}
.glow-md {
box-shadow: 0 0 40px -10px var(--tw-shadow-color);
}
.glow-lg {
box-shadow: 0 0 60px -15px var(--tw-shadow-color);
}
/* Accent color utilities */
.text-accent-purple {
color: var(--accent-purple);
}
.text-accent-teal {
color: var(--accent-teal);
}
.text-accent-coral {
color: var(--accent-coral);
}
.bg-accent-purple {
background-color: var(--accent-purple);
}
.bg-accent-teal {
background-color: var(--accent-teal);
}
.bg-accent-coral {
background-color: var(--accent-coral);
}
.from-accent-purple\/10 {
--tw-gradient-from: oklch(from var(--accent-purple) l c h / 0.1);
}
.from-accent-teal\/10 {
--tw-gradient-from: oklch(from var(--accent-teal) l c h / 0.1);
}
.from-accent-coral\/10 {
--tw-gradient-from: oklch(from var(--accent-coral) l c h / 0.1);
}
.to-accent-purple\/10 {
--tw-gradient-to: oklch(from var(--accent-purple) l c h / 0.1);
}
.to-accent-teal\/10 {
--tw-gradient-to: oklch(from var(--accent-teal) l c h / 0.1);
}
.to-accent-coral\/10 {
--tw-gradient-to: oklch(from var(--accent-coral) l c h / 0.1);
}
@media (width >= 135rem /* 2160px */) {
.spline-object {
max-height: 70rem /* 960px */;
@apply -translate-y-40;
}
.clip-avoid {
height: 25rem /* 320px */;
}
}
}