Your Name
99085adc76
- Flask backend with 23 API routes (entertainment, telegram, docker, system) - Alpine.js + Tailwind CSS dark-mode SPA with 4 tabs - pos-dashboard CLI tool with port/config management - Mobile slide-in drawer with swipe-to-close - Sticky header stays pinned on scroll - Tab completion fixes for category-less tools - POST /api/telegram/commands endpoint for adding commands
93 lines
3.3 KiB
CSS
93 lines
3.3 KiB
CSS
/*
|
|
* Homelab Dashboard — Custom styles
|
|
*
|
|
* Beyond Tailwind: animations, scrollbars, safe-area, htmx indicators.
|
|
* This file is the design authority for non-utility CSS (see 03-DESIGN-SPEC §10).
|
|
*/
|
|
|
|
/* ── Animations ─────────────────────────────────────────────────────────────── */
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.3s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes badgePop {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.animate-badge-pop {
|
|
animation: badgePop 0.3s ease-out;
|
|
}
|
|
|
|
/* ── Safe area padding for notched phones ───────────────────────────────────── */
|
|
|
|
main {
|
|
padding-bottom: calc(4rem + env(safe-area-inset-bottom));
|
|
}
|
|
@media (min-width: 1024px) {
|
|
main { padding-bottom: 0; }
|
|
}
|
|
|
|
/* ── Alpine.js cloak ────────────────────────────────────────────────────────── */
|
|
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* ── Scrollbar styling (dark) ───────────────────────────────────────────────── */
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #334155 transparent;
|
|
}
|
|
|
|
/* ── Reduced motion ─────────────────────────────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ── htmx loading indicator ─────────────────────────────────────────────────── */
|
|
|
|
.htmx-indicator { display: none; }
|
|
.htmx-request .htmx-indicator,
|
|
.htmx-request.htmx-indicator { display: block; }
|
|
.htmx-settling .htmx-indicator { display: none; }
|
|
|
|
/* ── Focus visible (keyboard users only) ────────────────────────────────────── */
|
|
|
|
:focus:not(:focus-visible) { outline: none; }
|
|
:focus-visible {
|
|
outline: 2px solid #06b6d4;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Line clamp utility ─────────────────────────────────────────────────────── */
|
|
|
|
.line-clamp-1 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|