56c032a63f
All checks were successful
check / check (push) Successful in 1m13s
- Remove all Bootstrap CSS/JS references from templates - Add Tailwind CSS v4 with Material Design inspired theme (input.css) - Compile tailwind.css with standalone CLI (committed to repo) - Vendor Alpine.js 3.14.9 for reactive UI components - Rewrite base.html to match µPaaS layout structure - Rewrite htmlheader.html with Tailwind CSS link - Rewrite navbar.html with Alpine.js mobile menu toggle - Convert index.html to Tailwind utility classes - Convert login.html to Tailwind utility classes - Convert profile.html to Tailwind utility classes - Add make css target for Tailwind compilation - Add footer template with project links closes #4
109 lines
3.9 KiB
CSS
109 lines
3.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Source the templates */
|
|
@source "../../templates/**/*.html";
|
|
|
|
/* Material Design inspired theme customization */
|
|
@theme {
|
|
/* Primary colors */
|
|
--color-primary-50: #e3f2fd;
|
|
--color-primary-100: #bbdefb;
|
|
--color-primary-200: #90caf9;
|
|
--color-primary-300: #64b5f6;
|
|
--color-primary-400: #42a5f5;
|
|
--color-primary-500: #2196f3;
|
|
--color-primary-600: #1e88e5;
|
|
--color-primary-700: #1976d2;
|
|
--color-primary-800: #1565c0;
|
|
--color-primary-900: #0d47a1;
|
|
|
|
/* Error colors */
|
|
--color-error-50: #ffebee;
|
|
--color-error-500: #f44336;
|
|
--color-error-700: #d32f2f;
|
|
|
|
/* Success colors */
|
|
--color-success-50: #e8f5e9;
|
|
--color-success-500: #4caf50;
|
|
--color-success-700: #388e3c;
|
|
|
|
/* Warning colors */
|
|
--color-warning-50: #fff3e0;
|
|
--color-warning-500: #ff9800;
|
|
--color-warning-700: #f57c00;
|
|
|
|
/* Material Design elevation shadows */
|
|
--shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
--shadow-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
|
--shadow-elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
|
}
|
|
|
|
/* Material Design component styles */
|
|
@layer components {
|
|
/* Buttons */
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:ring-primary-500 shadow-elevation-1 hover:shadow-elevation-2;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 active:bg-gray-100 focus:ring-primary-500;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-error-500 text-white hover:bg-error-700 active:bg-red-800 focus:ring-red-500 shadow-elevation-1 hover:shadow-elevation-2;
|
|
}
|
|
|
|
.btn-text {
|
|
@apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed text-primary-600 hover:bg-primary-50 active:bg-primary-100;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-elevation-1 overflow-hidden;
|
|
}
|
|
|
|
.card-elevated {
|
|
@apply bg-white rounded-lg shadow-elevation-1 overflow-hidden hover:shadow-elevation-2 transition-shadow;
|
|
}
|
|
|
|
/* Form inputs */
|
|
.input {
|
|
@apply w-full px-4 py-3 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
|
}
|
|
|
|
.form-group {
|
|
@apply mb-4;
|
|
}
|
|
|
|
/* Status badges */
|
|
.badge-success {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-50 text-success-700;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error-50 text-error-700;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-50 text-primary-700;
|
|
}
|
|
|
|
/* App bar / Navigation */
|
|
.app-bar {
|
|
@apply bg-white shadow-elevation-1 px-6 py-4;
|
|
}
|
|
|
|
/* Alert / Message boxes */
|
|
.alert-error {
|
|
@apply p-4 rounded-md mb-4 bg-error-50 text-error-700 border border-error-500/20;
|
|
}
|
|
|
|
.alert-success {
|
|
@apply p-4 rounded-md mb-4 bg-success-50 text-success-700 border border-success-500/20;
|
|
}
|
|
}
|