@phillipsharring/graspr-framework 0.1.0

package/styles/base.css

@@ -0,0 +1,165 @@
+/* Graspr Framework — base styles
+   Import this from your app's CSS after @import 'tailwindcss' and @source directives. */
+
+/* Override inline FOUC prevention — body becomes visible once this stylesheet loads */
+body { opacity: 1; }
+
+/* Form error styles */
+.field-error {
+    @apply border-red-600;
+}
+
+.field-error:focus {
+    @apply ring-red-600;
+}
+
+.field-error-text {
+    @apply text-sm text-red-600 mt-1;
+}
+
+.form-error-banner {
+    @apply rounded border border-red-200 bg-red-50 text-red-800 px-4 py-3 text-sm;
+}
+
+/* Disabled buttons — visual feedback when HTMX or JS disables a button */
+button:disabled,
+button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* HTMX request indicator - dims content during fetch */
+.htmx-request,
+.search-loading {
+    opacity: 0.3;
+    transition: opacity 75ms ease-out;
+}
+
+.htmx-settling {
+    transition: opacity 150ms ease-in;
+}
+
+/* Modal animation */
+#global-modal {
+    transition: visibility 0s linear 150ms, opacity 150ms ease-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+#global-modal.modal-open {
+    transition: visibility 0s linear 0s, opacity 150ms ease-out;
+    opacity: 1;
+    visibility: visible;
+}
+
+#global-modal [role="dialog"] {
+    transition: transform 150ms ease-out;
+    transform: translateY(2rem);
+    outline: none;
+}
+
+#global-modal.modal-open [role="dialog"] {
+    transform: translateY(0);
+}
+
+/* Darker backdrop when examples layout is active */
+body:has(#app[data-layout="examples"]) #global-modal .absolute.inset-0 {
+    background: rgba(255, 255, 255, 0.50);
+}
+
+/* Modal size variants */
+#global-modal [role="dialog"].modal-sm {
+    max-width: 24rem;
+}
+
+#global-modal [role="dialog"].modal-lg {
+    max-width: 56rem;
+}
+
+/* Takeover modal - fullscreen with blurred backdrop */
+#global-modal.modal-takeover .absolute.inset-0 {
+    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.3);
+}
+
+#global-modal.modal-takeover > .relative.z-10 {
+    padding: 0;
+    align-items: stretch;
+}
+
+#global-modal.modal-takeover [role="dialog"] {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100dvh;
+    border-radius: 0;
+    border: none;
+    background: transparent;
+}
+
+/* Hide default header in takeover mode - template provides its own UI */
+#global-modal.modal-takeover #global-modal-header {
+    display: none;
+}
+
+/* Show takeover close button only in takeover mode */
+#global-modal.modal-takeover .takeover-close-btn {
+    display: block;
+}
+
+/* Takeover content should fill available space */
+#global-modal.modal-takeover #global-modal-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+/* Takeover modal animation - fade/scale instead of slide */
+#global-modal.modal-takeover [role="dialog"] {
+    transform: scale(0.98);
+    opacity: 0;
+    transition: transform 200ms ease-out, opacity 200ms ease-out;
+}
+
+#global-modal.modal-takeover.modal-open [role="dialog"] {
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* Sortable drag-and-drop */
+.sortable-ghost { opacity: 0.4; background-color: #dbeafe; }
+.sortable-chosen { background-color: #eff6ff; }
+.sortable-disabled .drag-handle { visibility: hidden; pointer-events: none; }
+
+/* Active nav link — faux-bold via text-shadow to avoid layout shift */
+.active-nav {
+    text-shadow: 0 0 0.01px currentColor, 0 0 0.01px currentColor;
+}
+
+/* ---- Confirm dialog: default (admin/base) ---- */
+.confirm-message   { color: rgb(15 23 42); }        /* slate-900 */
+.confirm-subtext   { color: rgb(71 85 105); }        /* slate-600 */
+.confirm-checkbox  { color: rgb(51 65 85); }          /* slate-700 */
+.confirm-cancel-btn {
+    border-color: rgb(203 213 225);                   /* slate-300 */
+    color: rgb(51 65 85);
+}
+.confirm-cancel-btn:hover { background: rgb(248 250 252); } /* slate-50 */
+.confirm-ok-btn {
+    background: rgb(15 23 42);                        /* slate-900 */
+    color: white;
+}
+.confirm-ok-btn:hover { background: rgb(30 41 59); }  /* slate-800 */
+
+/* Table column sort headers */
+th[data-sort] { cursor: pointer; user-select: none; }
+th[data-sort]:hover { background-color: rgba(0, 0, 0, 0.04); }
+th[data-sort]::after { content: '\21C5'; opacity: 0.3; margin-left: 0.25rem; font-size: 0.75em; }
+th[data-sort].sort-asc::after { content: '\2191'; opacity: 1; }
+th[data-sort].sort-desc::after { content: '\2193'; opacity: 1; }
+
+/* Confirm dialog progress bar */
+.confirm-progress-bar {
+    transition: width 1s ease-out;
+}