pacnpal/thrillwiki_laravel
1
0
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_laravel.git synced 2025-12-20 07:11:09 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: enhance alert and button styles; improve dark mode support and transition effects

Browse Source
This commit is contained in:
pacnpal
2025-02-26 12:12:11 -05:00
parent a57e5deb3f
commit f6d0ecd82e
2 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/css/alerts.css
View File

@@ -1,23 +1,27 @@
/* Alert Styles */ /* Alert Styles */
.alert { .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; animation: slideIn 0.5s ease-out forwards;
} }
.alert.hide {
animation: slideOut 0.5s ease-out forwards;
}
.alert-success { .alert-success {
@apply text-white bg-green-500; @apply bg-green-500 dark:bg-green-600;
} }
.alert-error { .alert-error {
@apply text-white bg-red-500; @apply bg-red-500 dark:bg-red-600;
} }
.alert-info { .alert-info {
@apply text-white bg-blue-500; @apply bg-blue-500 dark:bg-blue-600;
} }
.alert-warning { .alert-warning {
@apply text-white bg-yellow-500; @apply bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white;
} }
/* Animation keyframes */ /* Animation keyframes */

84
resources/css/app.css
View File

@@ -11,60 +11,104 @@
} }
body { 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 */ /* Custom components */
@layer components { @layer components {
/* Navigation */
.nav-link { .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 { .site-logo {
@apply text-2xl; @apply text-2xl font-bold text-primary-600 dark:text-primary-400;
} }
/* Menu Items */
.menu-item { .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 { .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 { .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 { .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 { /* Cards */
@apply relative px-4 py-3 mb-4 text-white rounded-lg; .card {
@apply bg-white border border-gray-200 rounded-lg shadow-sm
dark:bg-gray-800 dark:border-gray-700;
} }
.alert-success { .card-header {
@apply bg-green-500; @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
} }
.alert-error { .card-body {
@apply bg-red-500; @apply p-6;
} }
.alert-warning { .card-footer {
@apply bg-yellow-500; @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700;
}
.alert-info {
@apply bg-blue-500;
} }
} }
/* Custom utilities */ /* Custom utilities */
@layer utilities { @layer utilities {
.text-gradient { .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;
} }
} }