From f6d0ecd82ed5b644ef40c32f79352c40c9c99334 Mon Sep 17 00:00:00 2001 From: pacnpal <183241239+pacnpal@users.noreply.github.com> Date: Wed, 26 Feb 2025 12:12:11 -0500 Subject: [PATCH] style: enhance alert and button styles; improve dark mode support and transition effects --- resources/css/alerts.css | 14 ++++--- resources/css/app.css | 84 ++++++++++++++++++++++++++++++---------- 2 files changed, 73 insertions(+), 25 deletions(-) diff --git a/resources/css/alerts.css b/resources/css/alerts.css index 3b7d426..ae7c89c 100644 --- a/resources/css/alerts.css +++ b/resources/css/alerts.css @@ -1,23 +1,27 @@ /* Alert Styles */ .alert { - @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4; + @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4 text-white; animation: slideIn 0.5s ease-out forwards; } +.alert.hide { + animation: slideOut 0.5s ease-out forwards; +} + .alert-success { - @apply text-white bg-green-500; + @apply bg-green-500 dark:bg-green-600; } .alert-error { - @apply text-white bg-red-500; + @apply bg-red-500 dark:bg-red-600; } .alert-info { - @apply text-white bg-blue-500; + @apply bg-blue-500 dark:bg-blue-600; } .alert-warning { - @apply text-white bg-yellow-500; + @apply bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white; } /* Animation keyframes */ diff --git a/resources/css/app.css b/resources/css/app.css index 7a1818b..7e91167 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -11,60 +11,104 @@ } body { - font-family: 'Poppins', sans-serif; + @apply font-sans text-gray-900 bg-white dark:text-gray-100 dark:bg-gray-900 transition-colors duration-200; + } + + h1, h2, h3, h4, h5, h6 { + @apply font-semibold text-gray-900 dark:text-white; } } /* Custom components */ @layer components { + /* Navigation */ .nav-link { - @apply flex items-center gap-2 px-3 py-2 text-gray-500 transition-colors rounded-lg hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700; + @apply flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 + text-gray-600 hover:text-primary-600 hover:bg-gray-100 + dark:text-gray-300 dark:hover:text-primary-400 dark:hover:bg-gray-800; + } + + .nav-link.active { + @apply text-primary-600 bg-primary-50 dark:text-primary-400 dark:bg-gray-800; } .site-logo { - @apply text-2xl; + @apply text-2xl font-bold text-primary-600 dark:text-primary-400; } + /* Menu Items */ .menu-item { - @apply flex items-center gap-3 px-4 py-2 text-gray-600 transition-colors dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700; + @apply flex items-center gap-3 px-4 py-2 rounded-lg transition-all duration-200 + text-gray-600 hover:text-primary-600 hover:bg-gray-100 + dark:text-gray-300 dark:hover:text-primary-400 dark:hover:bg-gray-800; } + /* Forms */ .form-input { - @apply w-full px-4 py-2 text-gray-700 transition-colors bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 border-gray-200/50 dark:border-gray-700/50 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20; + @apply w-full px-4 py-2 rounded-lg transition-all duration-200 + text-gray-900 bg-white border border-gray-200 + focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 + dark:text-gray-100 dark:bg-gray-800 dark:border-gray-700 + dark:focus:border-primary-400 dark:focus:ring-primary-400/20 + disabled:opacity-50 disabled:cursor-not-allowed; } + .form-label { + @apply block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300; + } + + /* Buttons */ .btn { - @apply px-4 py-2 font-semibold text-white transition-colors rounded-lg shadow-lg bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-primary/20; + @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold + transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed + focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900; + } + + .btn-primary { + @apply btn bg-gradient-to-r from-primary-600 to-primary-500 text-white + hover:from-primary-700 hover:to-primary-600 + focus:ring-primary-500/50 + dark:from-primary-500 dark:to-primary-400 + dark:hover:from-primary-600 dark:hover:to-primary-500; } .btn-secondary { - @apply text-gray-700 bg-white border dark:bg-gray-800 dark:text-white border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700; + @apply btn bg-white text-gray-700 border border-gray-200 + hover:bg-gray-50 hover:text-gray-900 + focus:ring-gray-500/50 + dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 + dark:hover:bg-gray-700 dark:hover:text-gray-100; } - .alert { - @apply relative px-4 py-3 mb-4 text-white rounded-lg; + /* Cards */ + .card { + @apply bg-white border border-gray-200 rounded-lg shadow-sm + dark:bg-gray-800 dark:border-gray-700; } - .alert-success { - @apply bg-green-500; + .card-header { + @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700; } - .alert-error { - @apply bg-red-500; + .card-body { + @apply p-6; } - .alert-warning { - @apply bg-yellow-500; - } - - .alert-info { - @apply bg-blue-500; + .card-footer { + @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700; } } /* Custom utilities */ @layer utilities { .text-gradient { - @apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary; + @apply text-transparent bg-clip-text bg-gradient-to-r + from-primary-600 to-secondary-500 + dark:from-primary-400 dark:to-secondary-400; + } + + .bg-gradient { + @apply bg-gradient-to-r from-primary-600 to-secondary-500 + dark:from-primary-500 dark:to-secondary-400; } }