pacnpal/thrillwiki_laravel
1
0
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_laravel.git synced 2025-12-20 08:31: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

84
resources/css/app.css
View File

@@ -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;
}
}