@charset "UTF-8"; /***** [HTMX] *****/ .htmx-indicator { opacity: 0; display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; -webkit-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; display: inline; } /* Global HTMX progress bar — slim animated bar pinned to the top of the viewport while any HTMX request is in flight. Toggled by tpl/js/app.js which adds/removes `.htmx-loading` on via htmx:beforeRequest / htmx:afterRequest. */ #htmx-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--bs-primary, #0d6efd), var(--bs-info, #0dcaf0)); z-index: 99999; pointer-events: none; opacity: 0; -webkit-transition: opacity 100ms ease-out; transition: opacity 100ms ease-out; } body.htmx-loading #htmx-progress-bar { opacity: 1; -webkit-animation: htmx-progress-anim 1.4s ease-in-out infinite; animation: htmx-progress-anim 1.4s ease-in-out infinite; } @-webkit-keyframes htmx-progress-anim { 0% { width: 0; left: 0; } 50% { width: 60%; left: 20%; } 100% { width: 0; left: 100%; } } @keyframes htmx-progress-anim { 0% { width: 0; left: 0; } 50% { width: 60%; left: 20%; } 100% { width: 0; left: 100%; } } /***** [ICONS] *****/ .icon-spin { display: inline-block; -webkit-animation: icon-spin 1s linear infinite; animation: icon-spin 1s linear infinite; } @-webkit-keyframes icon-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes icon-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }