clawbot
61371d388e
check / check (push) Successful in 3m25s
make css ran whatever tailwindcss binary was on the host's PATH, so the committed stylesheet depended on the machine that built it, and nothing noticed when a template used a class the stylesheet lacked. make css now runs the standalone tailwindcss v4.2.1, pinned by sha256, in a Dockerfile stage, and a check stage, run by make check and required by the image build, fails when the committed static/css/tailwind.css differs from what the templates need, showing the differing rules. input.css names its sources. The unused .btn-text is removed and the stylesheet regenerated, dropping only unused rules. The README has a Stylesheet section. Model: opus-5-5
108 lines
3.8 KiB
CSS
108 lines
3.8 KiB
CSS
/* Classes are taken only from the files named below. A class written in
|
|
any other file is not generated: name that file here too. */
|
|
@import "tailwindcss" source(none);
|
|
@source "../../templates/**/*.html";
|
|
@source "../js/app.js";
|
|
/* targetStatus picks a target's status colour class */
|
|
@source "../../internal/handlers/recent_events.go";
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|