root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Improved UI

Browse Source
This commit is contained in:
root
2026-01-01 00:47:28 +01:00
parent 784c95555f
commit 89d369598f
19 changed files with 1192 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/assets/main.css
View File

@@ -1,22 +1,23 @@
@import 'tailwindcss';
/* Tailwind v4: Use .dark class for dark mode instead of prefers-color-scheme */
@custom-variant dark (&:where(.dark, .dark *));
/* Dark mode transition */
html,
/* Global Resets & Transitions */
html {
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
body {
-webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
@apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased font-sans;
min-height: 100vh;
}
html.theme-transition * {
transition: none !important;
}
/* Additional dark mode styles */
body.dark-mode {
background-color: #111827;
color: #e5e7eb;
}
/* Force dark mode styles */
html.dark {
color-scheme: dark;
@@ -27,37 +28,90 @@ html.dark {
input,
select,
button {
font-size: 16px !important; /* Prevent iOS zoom on focus */
font-size: 16px !important;
}
.touch-manipulation {
touch-action: manipulation;
}
}
/* Global Button Styles */
button,
[type='button'],
[type='reset'],
[type='submit'] {
cursor: pointer;
}
button:disabled,
[type='button']:disabled,
[type='reset']:disabled,
[type='submit']:disabled {
cursor: not-allowed;
}
/* Premium Utilities */
@layer utilities {
.glass {
@apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-md border border-white/20 dark:border-gray-800/50;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
}
.touch-manipulation {
touch-action: manipulation; /* Improve touch responsiveness */
.glass-panel {
@apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50;
box-shadow:
0 2px 15px -3px rgba(0, 0, 0, 0.07),
0 10px 20px -2px rgba(0, 0, 0, 0.04);
}
/* Custom Scrollbar */
.scrollbar-thin {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-300 dark:bg-gray-700 rounded-full transition-colors;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-400 dark:bg-gray-600;
}
}
@layer components {
/* Buttons */
.btn {
@apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm rounded-lg transition-all cursor-pointer font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95;
@apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm rounded-lg transition-all duration-200 cursor-pointer font-medium
focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98];
}
.btn-primary {
@apply bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200;
@apply bg-gray-900 text-white hover:bg-black shadow-lg shadow-gray-900/20
dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-white dark:shadow-gray-100/10 border border-transparent;
}
.btn-secondary {
@apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700;
@apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:border-gray-300 shadow-sm
dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-700/80 dark:hover:border-gray-600;
}
.btn-ghost {
@apply text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800;
@apply text-gray-600 hover:bg-gray-100/80 hover:text-gray-900
dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-200;
}
.btn-danger {
@apply text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/30;
}
.btn-dark {
@apply bg-gray-700 text-white hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700;
@apply text-red-600 hover:bg-red-50 hover:text-red-700
dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300;
}
.btn-sm {
@@ -72,104 +126,32 @@ html.dark {
@apply p-2;
}
.btn-icon-sm {
@apply p-1.5;
}
.btn-icon-xs {
@apply p-1;
}
.input-field {
@apply px-2 py-1 text-sm border border-gray-300 rounded outline-none focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100;
@apply px-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700
rounded-lg outline-none transition-shadow focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500
placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-100;
}
.card {
@apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg;
}
/* Custom prose styles for blog content */
.prose {
@apply text-gray-700 dark:text-gray-300 leading-7;
}
.prose h1 {
@apply text-4xl font-bold text-gray-900 dark:text-white mb-4 mt-0;
}
.prose h2 {
@apply text-3xl font-bold text-gray-900 dark:text-white mt-8 mb-4;
}
.prose h3 {
@apply text-2xl font-bold text-gray-900 dark:text-white mt-6 mb-3;
}
.prose h4 {
@apply text-xl font-bold text-gray-900 dark:text-white mt-4 mb-2;
}
.prose p {
@apply text-gray-700 dark:text-gray-300 mb-4 leading-7;
}
.prose a {
@apply text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300;
}
.prose strong {
@apply text-gray-900 dark:text-white font-semibold;
}
.prose em {
@apply italic;
}
.prose code {
@apply text-sm font-mono bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-1 py-0.5 rounded;
}
.prose pre {
@apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 p-4 rounded-lg overflow-x-auto mb-4;
}
.prose pre code {
@apply bg-transparent p-0;
}
.prose ul {
@apply list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300;
}
.prose ol {
@apply list-decimal pl-6 mb-4 text-gray-700 dark:text-gray-300;
}
.prose li {
@apply mb-2 leading-7;
}
.prose blockquote {
@apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-4;
}
.prose img {
@apply rounded-lg shadow-md my-6;
}
.prose hr {
@apply border-gray-300 dark:border-gray-700 my-8;
}
.prose table {
@apply border-collapse w-full my-6;
}
.prose th {
@apply bg-gray-100 dark:bg-gray-800 p-2 text-left font-semibold border border-gray-300 dark:border-gray-700;
}
.prose td {
@apply border border-gray-300 dark:border-gray-700 p-2;
@apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700/60 rounded-xl shadow-sm;
}
}
/* Typography Overrides (Prose) */
.prose {
@apply text-gray-600 dark:text-gray-300 max-w-none;
}
.prose h1,
.prose h2,
.prose h3 {
@apply text-gray-900 dark:text-gray-50 font-bold tracking-tight;
}
.prose a {
@apply text-indigo-600 dark:text-indigo-400 no-underline hover:underline font-medium;
}
.prose code {
@apply bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-0.5 text-sm text-indigo-600 dark:text-indigo-300 font-mono font-medium before:content-[''] after:content-[''];
}
.prose pre {
@apply bg-gray-900 dark:bg-gray-950/50 border border-gray-200 dark:border-gray-800 rounded-xl shadow-lg;
}