*
*
* States:
* .tp-ai-summary-loading - Shows loading animation
* .tp-ai-summary-error - Shows error state
*
* Extracted from IssueHub with all animations preserved.
*/
/* ===========================
AI Summary Container
=========================== */
.tp-ai-summary {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--tp-border);
background: linear-gradient(
to bottom right,
rgba(59, 130, 246, 0.05),
rgba(99, 102, 241, 0.08),
rgba(168, 85, 247, 0.05)
);
}
/* Dark mode base */
[data-theme="dark"] .tp-ai-summary {
background: linear-gradient(
to bottom right,
rgba(59, 130, 246, 0.1),
rgba(99, 102, 241, 0.15),
rgba(168, 85, 247, 0.1)
);
}
/* ===========================
AI Summary Header
=========================== */
.tp-ai-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.tp-ai-summary-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
background: none;
border: none;
cursor: pointer;
text-align: left;
padding: 0;
}
.tp-ai-summary-toggle:hover {
opacity: 0.8;
}
.tp-ai-summary-icon {
color: #9ca3af;
font-size: 0.75rem;
transition: transform 0.2s ease;
}
/* No rotation needed - using different icons (chevron-down/chevron-right) */
.tp-ai-summary-icon.expanded,
.tp-ai-summary-icon.collapsed {
transform: rotate(0deg);
}
.tp-ai-summary-title {
font-weight: 500;
font-size: 0.875rem;
color: #1f2937;
}
[data-theme="dark"] .tp-ai-summary-title {
color: #e5e7eb;
}
/* Regenerate Button */
.tp-ai-summary-regenerate {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
color: #6b7280;
background: none;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tp-ai-summary-regenerate:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #374151;
}
[data-theme="dark"] .tp-ai-summary-regenerate {
color: #9ca3af;
}
[data-theme="dark"] .tp-ai-summary-regenerate:hover {
background-color: rgba(31, 41, 55, 0.5);
color: #d1d5db;
}
/* ===========================
AI Summary Content
=========================== */
.tp-ai-summary-content {
padding: 0 1rem 0.75rem 1.75rem;
}
.tp-ai-summary-content .prose {
font-size: 0.875rem;
line-height: 1.625;
color: #374151;
}
[data-theme="dark"] .tp-ai-summary-content .prose {
color: #d1d5db;
}
.tp-ai-summary-content .prose p {
margin-bottom: 0.5rem;
}
.tp-ai-summary-content .prose ul {
margin: 0.5rem 0;
padding-left: 1.25rem;
}
.tp-ai-summary-content .prose li {
margin-bottom: 0.25rem;
}
.tp-ai-summary-content .prose code {
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
background-color: rgba(99, 102, 241, 0.1);
border-radius: 0.25rem;
color: #6366f1;
}
[data-theme="dark"] .tp-ai-summary-content .prose code {
background-color: rgba(99, 102, 241, 0.2);
color: #a5b4fc;
}
/* ===========================
Loading State
=========================== */
.tp-ai-summary.tp-ai-summary-loading {
min-height: 5rem;
padding: 1.5rem;
/* Animated gradient background */
background: linear-gradient(
125deg,
rgba(99, 102, 241, 0.03) 0%,
rgba(168, 85, 247, 0.08) 20%,
rgba(236, 72, 153, 0.05) 40%,
rgba(99, 102, 241, 0.08) 60%,
rgba(59, 130, 246, 0.05) 80%,
rgba(168, 85, 247, 0.03) 100%
);
background-size: 300% 300%;
animation: tp-ai-gradient-flow 4s ease infinite;
/* Glow border */
box-shadow:
inset 0 1px 0 0 rgba(168, 85, 247, 0.1),
inset 0 -1px 0 0 rgba(99, 102, 241, 0.1);
}
/* Dark mode loading state */
[data-theme="dark"] .tp-ai-summary.tp-ai-summary-loading {
background: linear-gradient(
125deg,
rgba(99, 102, 241, 0.08) 0%,
rgba(168, 85, 247, 0.15) 20%,
rgba(236, 72, 153, 0.1) 40%,
rgba(99, 102, 241, 0.15) 60%,
rgba(59, 130, 246, 0.1) 80%,
rgba(168, 85, 247, 0.08) 100%
);
background-size: 300% 300%;
animation: tp-ai-gradient-flow 4s ease infinite;
box-shadow:
inset 0 1px 0 0 rgba(168, 85, 247, 0.2),
inset 0 -1px 0 0 rgba(99, 102, 241, 0.2);
}
/* Hide content when loading */
.tp-ai-summary.tp-ai-summary-loading .tp-ai-summary-header,
.tp-ai-summary.tp-ai-summary-loading .tp-ai-summary-content {
display: none !important;
}
/* Show loading content */
.tp-ai-summary.tp-ai-summary-loading .tp-ai-loading {
display: flex !important;
align-items: center;
justify-content: center;
gap: 1rem;
}
/* Sparkle effect overlay */
.tp-ai-summary.tp-ai-summary-loading::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.4) 0%, transparent 8%),
radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.5) 0%, transparent 6%),
radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.4) 0%, transparent 7%),
radial-gradient(circle at 90% 70%, rgba(59, 130, 246, 0.5) 0%, transparent 5%),
radial-gradient(circle at 10% 60%, rgba(168, 85, 247, 0.3) 0%, transparent 6%),
radial-gradient(circle at 60% 10%, rgba(236, 72, 153, 0.4) 0%, transparent 4%);
animation: tp-ai-sparkle 2s ease-in-out infinite;
pointer-events: none;
}
/* Dark mode sparkle */
[data-theme="dark"] .tp-ai-summary.tp-ai-summary-loading::before {
background-image:
radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.6) 0%, transparent 8%),
radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.7) 0%, transparent 6%),
radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.6) 0%, transparent 7%),
radial-gradient(circle at 90% 70%, rgba(59, 130, 246, 0.7) 0%, transparent 5%),
radial-gradient(circle at 10% 60%, rgba(168, 85, 247, 0.5) 0%, transparent 6%),
radial-gradient(circle at 60% 10%, rgba(236, 72, 153, 0.6) 0%, transparent 4%);
}
/* ===========================
Loading Content
=========================== */
.tp-ai-loading {
display: none;
flex-direction: column;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 1;
}
.tp-ai-loading-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.tp-ai-loading-text-main {
font-size: 0.875rem;
font-weight: 600;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: tp-ai-text-shimmer 2s linear infinite;
}
[data-theme="dark"] .tp-ai-loading-text-main {
background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tp-ai-loading-text-sub {
font-size: 0.75rem;
color: var(--tp-text-secondary);
opacity: 0.8;
}
/* ===========================
Loading Dots
=========================== */
.tp-ai-loading-dots {
display: inline-flex;
gap: 4px;
}
.tp-ai-loading-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #a855f7);
animation: tp-ai-dot-bounce 1.4s ease-in-out infinite;
}
.tp-ai-loading-dots span:nth-child(1) {
animation-delay: 0s;
}
.tp-ai-loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.tp-ai-loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
[data-theme="dark"] .tp-ai-loading-dots span {
background: linear-gradient(135deg, #818cf8, #c084fc);
}
/* ===========================
Error State
=========================== */
.tp-ai-summary.tp-ai-summary-error {
background: linear-gradient(
to bottom right,
rgba(239, 68, 68, 0.05),
rgba(239, 68, 68, 0.1)
);
}
.tp-ai-summary-error-message {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #dc2626;
}
.tp-ai-summary-error-message i {
font-size: 1rem;
}
[data-theme="dark"] .tp-ai-summary.tp-ai-summary-error {
background: linear-gradient(
to bottom right,
rgba(239, 68, 68, 0.1),
rgba(239, 68, 68, 0.15)
);
}
[data-theme="dark"] .tp-ai-summary-error-message {
color: #f87171;
}
/* ===========================
Keyframe Animations
=========================== */
/* Gradient flow animation */
@keyframes tp-ai-gradient-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Sparkle pulse animation */
@keyframes tp-ai-sparkle {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
/* Text shimmer animation */
@keyframes tp-ai-text-shimmer {
0% {
background-position: 0% center;
}
100% {
background-position: 200% center;
}
}
/* Dot bounce animation */
@keyframes tp-ai-dot-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Icon pulse animation */
@keyframes tp-ai-icon-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Sparkle rotation for icons */
@keyframes tp-ai-sparkle-rotate {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
25% {
transform: scale(1.15) rotate(10deg);
opacity: 0.9;
}
50% {
transform: scale(0.9) rotate(-10deg);
opacity: 1;
}
75% {
transform: scale(1.1) rotate(5deg);
opacity: 0.95;
}
}
/* ===========================
Utility Classes
=========================== */
.tp-ai-animate-sparkle {
animation: tp-ai-sparkle-rotate 1.2s ease-in-out infinite;
}
.tp-ai-animate-pulse {
animation: tp-ai-icon-pulse 2s ease-in-out infinite;
}
/* ===========================
AI Summary Variants
=========================== */
/* Compact variant */
.tp-ai-summary-compact .tp-ai-summary-header {
padding: 0.375rem 0.75rem;
}
.tp-ai-summary-compact .tp-ai-summary-content {
padding: 0 0.75rem 0.5rem 1.5rem;
}
.tp-ai-summary-compact .tp-ai-summary-title {
font-size: 0.75rem;
}
/* Card variant (with border radius) */
.tp-ai-summary-card {
border-radius: 0.5rem;
border: 1px solid var(--tp-border);
margin: 0.5rem;
}
/* Inline variant (no border-bottom) */
.tp-ai-summary-inline {
border-bottom: none;
}
/**
* TP Design System - Alert / Banner
* Inline status strips (filter active, form errors, success toasts-adjacent)
*
* Usage:
* ...
* ...
* …
*/
.tp-alert {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--tp-border);
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
font-size: 0.75rem;
line-height: 1.4;
}
.tp-alert-icon {
flex-shrink: 0;
font-size: 0.875rem;
}
.tp-alert-body {
flex: 1;
min-width: 0;
color: var(--tp-text);
}
.tp-alert-actions {
flex-shrink: 0;
margin-left: auto;
}
.tp-alert-info {
border-color: var(--tp-badge-info-bg);
background-color: var(--tp-badge-info-bg);
color: var(--tp-badge-info-text);
}
.tp-alert-info .tp-alert-body {
color: var(--tp-badge-info-text);
}
.tp-alert-success {
border-color: var(--tp-badge-success-bg);
background-color: var(--tp-badge-success-bg);
color: var(--tp-badge-success-text);
}
.tp-alert-success .tp-alert-body {
color: var(--tp-badge-success-text);
}
.tp-alert-warning {
border-color: var(--tp-badge-warning-bg);
background-color: var(--tp-badge-warning-bg);
color: var(--tp-badge-warning-text);
}
.tp-alert-warning .tp-alert-body {
color: var(--tp-badge-warning-text);
}
.tp-alert-danger {
border-color: var(--tp-badge-danger-bg);
background-color: var(--tp-badge-danger-bg);
color: var(--tp-badge-danger-text);
}
.tp-alert-danger .tp-alert-body {
color: var(--tp-badge-danger-text);
}
/**
* TP Design System - App Switcher Component
* Google Cloud Console-style service navigation drawer
*
* Structure:
*
*
*
*
*
*
*
*
*/
/* x-cloak: hide before Alpine initializes */
[x-cloak] { display: none !important; }
/* ===========================
Burger Button
=========================== */
.tp-app-switcher-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
color: #b3b3b3;
background: transparent;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
font-size: 1rem;
flex-shrink: 0;
}
.tp-app-switcher-btn:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
/* ===========================
Drawer Overlay
=========================== */
.tp-app-switcher-drawer {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
}
.tp-app-switcher-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
}
/* ===========================
Panel
=========================== */
.tp-app-switcher-panel {
position: relative;
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
background-color: var(--tp-surface);
border-right: 1px solid var(--tp-border);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
z-index: 1;
overflow: hidden;
}
/* ===========================
Header
=========================== */
.tp-app-switcher-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background-color: var(--tp-nav-bg);
flex-shrink: 0;
}
.tp-app-switcher-header-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
color: rgba(255, 255, 255, 0.6);
background: transparent;
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 1rem;
transition: all 0.15s;
flex-shrink: 0;
}
.tp-app-switcher-header-close:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
}
.tp-app-switcher-header-brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex: 1;
min-width: 0;
}
.tp-app-switcher-header-logo {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
background: linear-gradient(135deg, #1d4b8e 0%, #0b549c 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(29, 75, 142, 0.4);
}
.tp-app-switcher-header-logo svg {
fill: white;
width: 60%;
height: 60%;
}
.tp-app-switcher-header-title {
font-size: 0.9375rem;
font-weight: 600;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===========================
Search
=========================== */
.tp-app-switcher-search {
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--tp-border);
flex-shrink: 0;
}
.tp-app-switcher-search-input {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--tp-hover-bg);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
font-size: 0.8125rem;
color: var(--tp-text-secondary);
cursor: text;
width: 100%;
}
.tp-app-switcher-search-input input {
background: none;
border: none;
outline: none;
font-size: 0.8125rem;
color: var(--tp-text);
flex: 1;
min-width: 0;
}
.tp-app-switcher-search-input input::placeholder {
color: var(--tp-text-secondary);
}
/* ===========================
Body (scrollable)
=========================== */
.tp-app-switcher-body {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--tp-border) transparent;
}
.tp-app-switcher-body::-webkit-scrollbar {
width: 4px;
}
.tp-app-switcher-body::-webkit-scrollbar-thumb {
background-color: var(--tp-border);
border-radius: 2px;
}
/* ===========================
Sections
=========================== */
.tp-app-switcher-section {
padding: 0.5rem 0;
}
.tp-app-switcher-section + .tp-app-switcher-section {
border-top: 1px solid var(--tp-border);
}
.tp-app-switcher-section-title {
padding: 0.375rem 1rem 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--tp-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ===========================
Service Items
=========================== */
.tp-app-switcher-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.75rem;
text-decoration: none;
color: var(--tp-text);
transition: background-color 0.1s;
cursor: pointer;
user-select: none;
position: relative;
}
.tp-app-switcher-item:hover {
background-color: var(--tp-hover-bg);
}
.tp-app-switcher-item.active {
background-color: rgba(29, 75, 142, 0.08);
}
.tp-app-switcher-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background-color: var(--tp-primary);
color: white;
font-size: 0.8125rem;
flex-shrink: 0;
}
.tp-app-switcher-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Star / Favorite button */
.tp-app-switcher-star {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 0.875rem;
color: var(--tp-text-secondary);
border-radius: 0.25rem;
transition: all 0.15s;
flex-shrink: 0;
opacity: 0;
padding: 0;
}
.tp-app-switcher-item:hover .tp-app-switcher-star {
opacity: 1;
}
.tp-app-switcher-star:hover {
color: var(--tp-warning);
background-color: rgba(245, 158, 11, 0.1);
}
.tp-app-switcher-star.active {
color: var(--tp-warning);
opacity: 1;
}
.tp-app-switcher-star.active:hover {
color: var(--tp-text-secondary);
background-color: var(--tp-hover-bg);
}
/* Sub-menu arrow */
.tp-app-switcher-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: var(--tp-text-secondary);
border-radius: 0.25rem;
transition: all 0.15s;
flex-shrink: 0;
padding: 0;
}
.tp-app-switcher-arrow:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
/* ===========================
Sub-menu Panel (Google Cloud Console Style)
Desktop: erscheint rechts neben dem Haupt-Panel
Mobile: deckt das Haupt-Panel ab (Overlay)
=========================== */
.tp-app-switcher-submenu {
position: fixed;
top: 0;
bottom: 0;
left: 300px; /* direkt rechts vom 300px Haupt-Panel */
width: 240px;
background-color: var(--tp-surface);
border-right: 1px solid var(--tp-border);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
z-index: 201; /* über dem Overlay */
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Mobile: Sub-Menü deckt den Haupt-Panel ab */
@media (max-width: 640px) {
.tp-app-switcher-submenu {
left: 0;
width: 100vw;
max-width: 300px;
}
}
.tp-app-switcher-submenu-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--tp-border);
flex-shrink: 0;
}
.tp-app-switcher-submenu-back {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background: none;
border: none;
cursor: pointer;
color: var(--tp-text-secondary);
border-radius: 0.375rem;
font-size: 0.875rem;
transition: all 0.15s;
flex-shrink: 0;
padding: 0;
}
.tp-app-switcher-submenu-back:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
.tp-app-switcher-submenu-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--tp-text);
}
.tp-app-switcher-submenu-body {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0;
}
.tp-app-switcher-submenu-item {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--tp-text);
text-decoration: none;
transition: background-color 0.1s;
cursor: pointer;
}
.tp-app-switcher-submenu-item:hover {
background-color: var(--tp-hover-bg);
}
.tp-app-switcher-submenu-item.active {
color: var(--tp-accent);
font-weight: 500;
}
/* ===========================
Footer
=========================== */
.tp-app-switcher-footer {
padding: 0.5rem;
border-top: 1px solid var(--tp-border);
flex-shrink: 0;
}
.tp-app-switcher-footer-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
color: var(--tp-text-secondary);
text-decoration: none;
transition: all 0.15s;
}
.tp-app-switcher-footer-link:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
/* ===========================
ConsoleHub Shell Placeholder
Verhindert FOUC (Flash of Unstyled Content) wenn Topbar via HTMX geladen wird.
Nutzung in Services:
=========================== */
.ch-topbar-placeholder {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3.5rem;
background: var(--tp-nav-bg, #1a1a1a);
z-index: 50;
display: flex;
align-items: center;
padding: 0 1rem;
gap: 0.75rem;
}
.ch-topbar-placeholder::before {
content: '';
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.ch-topbar-placeholder::after {
content: '';
width: 7rem;
height: 0.875rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.12);
}
/**
* TP Design System - Auth Card Component
* Login/Register card with gradient background
*
* Usage:
*
*
*/
/* ===========================
Auth Page Background
=========================== */
.tp-auth-page {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/* Animated gradient background */
.tp-auth-bg {
position: fixed;
inset: 0;
z-index: 0;
}
.tp-auth-bg-gradient {
position: absolute;
inset: 0;
background: linear-gradient(-45deg, #0080c8, #0b549c, #18cf72, #0080c8);
background-size: 300% 300%;
animation: tp-auth-gradient-shift 20s ease infinite;
}
.tp-auth-bg-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}
@keyframes tp-auth-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===========================
Auth Card
=========================== */
.tp-auth-card {
position: relative;
z-index: 10;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 2rem;
width: 100%;
max-width: 400px;
}
/* Header with logo and title */
.tp-auth-card-header {
text-align: center;
margin-bottom: 2rem;
}
.tp-auth-card-title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.5rem;
}
.tp-auth-card-subtitle {
color: #6b7280;
font-size: 1rem;
}
/* Body */
.tp-auth-card-body {
margin-bottom: 1.5rem;
}
/* Footer with links */
.tp-auth-card-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.tp-auth-card-footer-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.tp-auth-card-footer-link {
color: #6b7280;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.tp-auth-card-footer-link:hover {
color: #2563eb;
}
/* ===========================
Logo Box
=========================== */
.tp-auth-logo {
display: inline-block;
margin-bottom: 1.5rem;
}
.tp-auth-logo-box {
width: 80px;
height: 80px;
background-color: var(--tp-primary, #1d4b8e);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 32px rgba(29, 75, 142, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.tp-auth-logo-box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: tp-auth-logo-shine 3s infinite;
}
@keyframes tp-auth-logo-shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.tp-auth-logo-box img,
.tp-auth-logo-box svg {
width: 48px;
height: 48px;
position: relative;
z-index: 1;
}
.tp-auth-logo-box svg {
fill: white;
}
/* ===========================
OAuth Button
=========================== */
.tp-auth-oauth-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: linear-gradient(to right, #1d4b8e, #0b549c);
color: white;
font-weight: 600;
font-size: 1.125rem;
padding: 1rem 1.5rem;
border-radius: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px 0 rgba(29, 75, 142, 0.39);
position: relative;
overflow: hidden;
}
.tp-auth-oauth-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(29, 75, 142, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1);
}
.tp-auth-oauth-btn:active {
transform: translateY(0);
}
.tp-auth-oauth-btn svg,
.tp-auth-oauth-btn i {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
.tp-auth-oauth-hint {
margin-top: 0.75rem;
text-align: center;
font-size: 0.875rem;
color: #6b7280;
}
/* Loading state */
.tp-auth-oauth-btn.tp-auth-loading {
pointer-events: none;
}
.tp-auth-oauth-btn .tp-auth-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
min-width: 1.25rem;
min-height: 1.25rem;
flex-shrink: 0;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: tp-auth-spin 1s ease-in-out infinite;
}
@keyframes tp-auth-spin {
to { transform: rotate(360deg); }
}
/* ===========================
Error Message
=========================== */
.tp-auth-error {
background-color: #fee2e2;
border: 1px solid #f87171;
color: #b91c1c;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tp-auth-error i {
flex-shrink: 0;
}
/* ===========================
Form Variant (for email/password)
=========================== */
.tp-auth-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
color: #9ca3af;
font-size: 0.875rem;
}
.tp-auth-divider::before,
.tp-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background-color: #e5e7eb;
}
/* ===========================
Dark Mode
=========================== */
[data-theme="dark"] .tp-auth-card {
background: rgba(31, 41, 55, 0.95);
border-color: rgba(75, 85, 99, 0.3);
}
[data-theme="dark"] .tp-auth-card-title {
color: #f9fafb;
}
[data-theme="dark"] .tp-auth-card-subtitle {
color: #9ca3af;
}
[data-theme="dark"] .tp-auth-card-footer {
border-top-color: #374151;
}
[data-theme="dark"] .tp-auth-card-footer-link {
color: #9ca3af;
}
[data-theme="dark"] .tp-auth-card-footer-link:hover {
color: #60a5fa;
}
[data-theme="dark"] .tp-auth-error {
background-color: rgba(239, 68, 68, 0.1);
border-color: #dc2626;
color: #fca5a5;
}
[data-theme="dark"] .tp-auth-divider {
color: #6b7280;
}
[data-theme="dark"] .tp-auth-divider::before,
[data-theme="dark"] .tp-auth-divider::after {
background-color: #374151;
}
/**
* TP Design System - Avatar Component
* DaisyUI-inspired avatar with Tailwind width classes for sizing
*
* Usage:
*
*
*
* ...
* ...
*
*
* KS
*
*
*
*
* 
*
*
*
*
*
*
*
* Sizes (use Tailwind width classes):
* w-6 (1.5rem / 24px) - extra small
* w-8 (2rem / 32px) - small
* w-10 (2.5rem / 40px) - medium (default)
* w-12 (3rem / 48px) - large
* w-16 (4rem / 64px) - extra large
* w-20 (5rem / 80px) - 2x large
*/
/* ===========================
Base Avatar
=========================== */
.tp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
overflow: hidden;
background-color: var(--tp-primary);
color: white;
font-weight: 600;
flex-shrink: 0;
position: relative;
text-transform: uppercase;
user-select: none;
border-radius: 50%;
}
.tp-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Auto-scale font size based on container */
.tp-avatar span,
.tp-avatar i {
font-size: 0.4em;
line-height: 1;
}
/* Specific font sizes for width classes */
.tp-avatar.w-6 span,
.tp-avatar.w-6 i { font-size: 0.625rem; }
.tp-avatar.w-8 span,
.tp-avatar.w-8 i { font-size: 0.75rem; }
.tp-avatar.w-10 span,
.tp-avatar.w-10 i { font-size: 0.875rem; }
.tp-avatar.w-12 span,
.tp-avatar.w-12 i { font-size: 1rem; }
.tp-avatar.w-16 span,
.tp-avatar.w-16 i { font-size: 1.25rem; }
.tp-avatar.w-20 span,
.tp-avatar.w-20 i { font-size: 1.5rem; }
/* ===========================
Avatar Variants
=========================== */
/* Placeholder (icon or empty) */
.tp-avatar-placeholder {
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
}
/* Online/Offline indicators - need overflow visible to show indicator */
.tp-avatar-online,
.tp-avatar-offline,
.tp-avatar-busy,
.tp-avatar-away {
overflow: visible;
}
.tp-avatar-online::after,
.tp-avatar-offline::after,
.tp-avatar-busy::after,
.tp-avatar-away::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 25%;
height: 25%;
min-width: 0.5rem;
min-height: 0.5rem;
border-radius: 50%;
border: 2px solid var(--tp-surface);
z-index: 1;
}
.tp-avatar-online::after {
background-color: #22c55e;
}
.tp-avatar-offline::after {
background-color: #6b7280;
}
.tp-avatar-busy::after {
background-color: #ef4444;
}
.tp-avatar-away::after {
background-color: #f59e0b;
}
/* Ring/border variant */
.tp-avatar-ring {
box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent);
}
/* ===========================
Avatar Group
=========================== */
.tp-avatar-group {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.tp-avatar-group .tp-avatar {
border: 2px solid var(--tp-surface);
margin-left: -0.5rem;
}
.tp-avatar-group .tp-avatar:last-child {
margin-left: 0;
}
/* Avatar group count (+N) */
.tp-avatar-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
font-weight: 500;
}
/* ===========================
Avatar Sizes (convenience classes)
=========================== */
.tp-avatar-xs {
width: 1.5rem;
height: 1.5rem;
}
.tp-avatar-xs span,
.tp-avatar-xs i { font-size: 0.5rem; }
.tp-avatar-sm {
width: 2rem;
height: 2rem;
}
.tp-avatar-sm span,
.tp-avatar-sm i { font-size: 0.625rem; }
.tp-avatar-md {
width: 2.5rem;
height: 2.5rem;
}
.tp-avatar-md span,
.tp-avatar-md i { font-size: 0.75rem; }
.tp-avatar-lg {
width: 3rem;
height: 3rem;
}
.tp-avatar-lg span,
.tp-avatar-lg i { font-size: 0.875rem; }
.tp-avatar-xl {
width: 4rem;
height: 4rem;
}
.tp-avatar-xl span,
.tp-avatar-xl i { font-size: 1.125rem; }
/* ===========================
Avatar Colors (presets)
=========================== */
.tp-avatar-primary { background-color: var(--tp-primary); }
.tp-avatar-success { background-color: #16a34a; }
.tp-avatar-danger { background-color: #dc2626; }
.tp-avatar-warning { background-color: #ca8a04; }
.tp-avatar-info { background-color: #2563eb; }
.tp-avatar-blue { background-color: #2563eb; }
.tp-avatar-green { background-color: #16a34a; }
.tp-avatar-red { background-color: #dc2626; }
.tp-avatar-yellow { background-color: #ca8a04; }
.tp-avatar-purple { background-color: #9333ea; }
.tp-avatar-pink { background-color: #db2777; }
.tp-avatar-indigo { background-color: #4f46e5; }
.tp-avatar-gray { background-color: #6b7280; }
/* ===========================
Hover Effect (optional)
=========================== */
.tp-avatar-hover:hover {
transform: scale(1.05);
transition: transform 0.1s ease;
}
/**
* TP Design System - Breadcrumb trail (form back path)
* Note: existing breadcrumb.css covers admin header crumbs
*/
.tp-crumb-trail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
color: var(--tp-text-secondary);
}
.tp-crumb-trail a {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--tp-text-secondary);
text-decoration: none;
transition: color 0.15s;
}
.tp-crumb-trail a:hover {
color: var(--tp-text);
}
.tp-crumb-trail-sep {
font-size: 0.65rem;
color: var(--tp-border);
}
.tp-crumb-trail-current {
color: var(--tp-text-secondary);
}
/**
* TP Design System - Breadcrumb Component
* Navigation breadcrumb trail
*
* Usage (with items - chevron separator auto-generated):
*
*
* Usage (manual separators):
*
*
* Variants: tp-breadcrumb-sm, tp-breadcrumb-lg, tp-breadcrumb-slash
* Default separator: chevron (>)
*/
/* ===========================
Breadcrumb Container
=========================== */
.tp-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
/* ===========================
Breadcrumb Link
=========================== */
.tp-breadcrumb-link {
color: var(--tp-text-secondary);
text-decoration: none;
transition: color 0.15s ease;
white-space: nowrap;
}
.tp-breadcrumb-link:hover {
color: var(--tp-text);
text-decoration: underline;
}
.tp-breadcrumb-link:focus {
outline: none;
}
.tp-breadcrumb-link:focus-visible {
outline: 2px solid var(--tp-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* Link with icon */
.tp-breadcrumb-link-icon {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.tp-breadcrumb-link-icon i {
font-size: 0.75em;
}
/* ===========================
Breadcrumb Separator
=========================== */
.tp-breadcrumb-separator {
color: var(--tp-text-secondary);
opacity: 0.5;
user-select: none;
}
/* Chevron separator */
.tp-breadcrumb-separator-chevron::before {
content: '';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: 0.5;
}
/* Arrow separator */
.tp-breadcrumb-separator-arrow::before {
content: '>';
}
/* ===========================
Breadcrumb Current (Active)
=========================== */
.tp-breadcrumb-current {
color: var(--tp-text);
font-weight: 500;
white-space: nowrap;
}
/* Truncate long current page */
.tp-breadcrumb-current-truncate {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===========================
Breadcrumb Sizes
=========================== */
.tp-breadcrumb-sm {
font-size: 0.75rem;
gap: 0.375rem;
}
.tp-breadcrumb-lg {
font-size: 1rem;
gap: 0.625rem;
}
/* ===========================
Breadcrumb in Container
=========================== */
.tp-breadcrumb-bar {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
background-color: var(--tp-surface);
border-bottom: 1px solid var(--tp-border);
}
.tp-breadcrumb-bar .tp-breadcrumb {
flex: 1;
min-width: 0;
}
/* ===========================
Breadcrumb with Actions
=========================== */
.tp-breadcrumb-with-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.tp-breadcrumb-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* ===========================
Collapsed Breadcrumb (Mobile)
=========================== */
.tp-breadcrumb-collapsed {
position: relative;
}
.tp-breadcrumb-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
color: var(--tp-text-secondary);
background: none;
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 0.1em;
}
.tp-breadcrumb-ellipsis:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
.tp-breadcrumb-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 10rem;
margin-top: 0.25rem;
padding: 0.25rem 0;
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tp-breadcrumb-dropdown-item {
display: block;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: var(--tp-text);
text-decoration: none;
transition: background-color 0.1s ease;
}
.tp-breadcrumb-dropdown-item:hover {
background-color: var(--tp-hover-bg);
}
/* ===========================
Responsive
=========================== */
@media (max-width: 640px) {
.tp-breadcrumb-responsive .tp-breadcrumb-link:not(:first-child):not(:last-child) {
display: none;
}
.tp-breadcrumb-responsive .tp-breadcrumb-separator:not(:first-of-type):not(:last-of-type) {
display: none;
}
/* Show ellipsis instead */
.tp-breadcrumb-responsive .tp-breadcrumb-mobile-ellipsis {
display: inline;
}
}
.tp-breadcrumb-mobile-ellipsis {
display: none;
}
/* ===========================
Breadcrumb Item (Alternative Structure)
=========================== */
.tp-breadcrumb-item {
display: inline-flex;
align-items: center;
}
.tp-breadcrumb-item:not(:last-child)::after {
content: '';
display: inline-block;
width: 0.375rem;
height: 0.375rem;
margin: 0 0.5rem;
border-right: 1.5px solid var(--tp-text-secondary);
border-top: 1.5px solid var(--tp-text-secondary);
transform: rotate(45deg);
opacity: 0.6;
}
/* Slash separator variant */
.tp-breadcrumb-slash .tp-breadcrumb-item:not(:last-child)::after {
content: '/';
display: inline;
width: auto;
height: auto;
border: none;
transform: none;
font-size: 1em;
opacity: 0.5;
}
.tp-breadcrumb-item:last-child {
color: var(--tp-text);
font-weight: 500;
}
.tp-breadcrumb-item:last-child a {
color: inherit;
pointer-events: none;
}
/**
* TP Design System - Button Components
* DaisyUI-style button classes
*
* Usage:
*
*
*/
/* ===========================
Base Button
=========================== */
.tp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
min-height: 2.25rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
border-radius: 0.375rem;
border: 1px solid transparent;
box-sizing: border-box;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
text-decoration: none;
}
.tp-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.3);
}
.tp-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ===========================
Button Variants
=========================== */
/* Primary - Main action button */
.tp-btn-primary {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
color: white;
}
.tp-btn-primary:hover:not(:disabled) {
background-color: var(--tp-primary-hover);
border-color: var(--tp-primary-hover);
}
.tp-btn-primary:active:not(:disabled) {
background-color: #1e3a5f;
}
/* Secondary - Outline button */
.tp-btn-secondary {
background-color: var(--tp-surface);
border-color: var(--tp-border);
color: var(--tp-text);
}
.tp-btn-secondary:hover:not(:disabled) {
background-color: var(--tp-hover-bg);
border-color: var(--tp-text-secondary);
}
.tp-btn-secondary:active:not(:disabled) {
background-color: var(--tp-border);
}
/* Ghost - Text-only button */
.tp-btn-ghost {
background-color: transparent;
border-color: transparent;
color: var(--tp-text-secondary);
}
.tp-btn-ghost:hover:not(:disabled) {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
.tp-btn-ghost:active:not(:disabled) {
background-color: var(--tp-border);
}
/* Danger - Destructive action */
.tp-btn-danger {
background-color: #dc2626;
border-color: #dc2626;
color: white;
}
.tp-btn-danger:hover:not(:disabled) {
background-color: #b91c1c;
border-color: #b91c1c;
}
.tp-btn-danger:active:not(:disabled) {
background-color: #991b1b;
}
/* Danger Outline */
.tp-btn-danger-outline {
background-color: transparent;
border-color: #dc2626;
color: #dc2626;
}
.tp-btn-danger-outline:hover:not(:disabled) {
background-color: #dc2626;
color: white;
}
/* Success - Positive action (create, confirm) */
.tp-btn-success {
background-color: #16a34a;
border-color: #16a34a;
color: white;
}
.tp-btn-success:hover:not(:disabled) {
background-color: #15803d;
border-color: #15803d;
}
.tp-btn-success:active:not(:disabled) {
background-color: #166534;
}
/* Icon-only button */
.tp-btn-icon {
padding: 0.5rem;
width: 2.25rem;
height: 2.25rem;
background-color: transparent;
border-color: transparent;
color: var(--tp-text-secondary);
}
.tp-btn-icon:hover:not(:disabled) {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
/* ===========================
Button Sizes
=========================== */
.tp-btn-sm {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
line-height: 1rem;
}
.tp-btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.tp-btn-icon.tp-btn-sm {
width: 1.75rem;
height: 1.75rem;
padding: 0.25rem;
}
.tp-btn-icon.tp-btn-lg {
width: 2.75rem;
height: 2.75rem;
padding: 0.75rem;
}
/* ===========================
Button with Loading
=========================== */
.tp-btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.tp-btn-loading::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: tp-btn-spin 0.6s linear infinite;
}
.tp-btn-primary.tp-btn-loading::after {
border-color: white;
border-right-color: transparent;
}
@keyframes tp-btn-spin {
to {
transform: rotate(360deg);
}
}
/* ===========================
Button Group
=========================== */
.tp-btn-group {
display: inline-flex;
}
.tp-btn-group .tp-btn {
border-radius: 0;
}
.tp-btn-group .tp-btn:first-child {
border-radius: 0.375rem 0 0 0.375rem;
}
.tp-btn-group .tp-btn:last-child {
border-radius: 0 0.375rem 0.375rem 0;
}
.tp-btn-group .tp-btn:not(:last-child) {
border-right-width: 0;
}
.tp-btn-group .tp-btn:hover,
.tp-btn-group .tp-btn:focus {
z-index: 1;
}
/**
* TP Design System - Card Components
* Reusable card system for comments, issues, and content blocks
*
* Components:
* - tp-icon-btn: Small icon-only button
* - tp-user-meta: Avatar + Name + Time
* - tp-card: Base card container
* - tp-card-header: Card header with user meta and actions
* - tp-comment-card: Specialized card for comments
*/
/* ===========================
Icon Button
=========================== */
.tp-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 0.75rem;
color: var(--tp-text-secondary);
background-color: transparent;
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tp-icon-btn:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
.tp-icon-btn:active {
background-color: var(--tp-border);
}
.tp-icon-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}
/* Icon button sizes */
.tp-icon-btn-sm {
width: 1.5rem;
height: 1.5rem;
font-size: 0.625rem;
}
.tp-icon-btn-lg {
width: 2.5rem;
height: 2.5rem;
font-size: 1rem;
}
/* Icon button variants */
.tp-icon-btn-ghost {
border-color: transparent;
}
.tp-icon-btn-ghost:hover {
border-color: var(--tp-border);
}
/* ===========================
User Meta (Avatar + Name + Time)
=========================== */
.tp-user-meta {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1;
}
.tp-user-meta-avatar {
flex-shrink: 0;
}
.tp-user-meta-info {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
min-width: 0;
font-size: 0.875rem;
}
.tp-user-meta-name {
font-weight: 600;
color: var(--tp-text);
white-space: nowrap;
}
.tp-user-meta-time {
color: var(--tp-text-secondary);
white-space: nowrap;
}
.tp-user-meta-badge {
margin-left: 0.25rem;
}
/* Compact variant */
.tp-user-meta-compact .tp-user-meta-info {
font-size: 0.75rem;
}
/* ===========================
Card Base
=========================== */
.tp-card {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
/* Card Header */
.tp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--tp-hover-bg);
border-bottom: 1px solid var(--tp-border);
}
.tp-card-header-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
/* Card Content */
.tp-card-content {
padding: 0.75rem;
}
.tp-card-content-sm {
padding: 0.5rem 0.75rem;
}
.tp-card-content-lg {
padding: 1rem;
}
/* Card with prose content */
.tp-card-content .prose {
font-size: 0.875rem;
line-height: 1.625;
color: var(--tp-text);
}
.tp-card-content .prose p {
margin-bottom: 0.75rem;
}
.tp-card-content .prose p:last-child {
margin-bottom: 0;
}
.tp-card-content .prose code {
padding: 0.125rem 0.375rem;
font-size: 0.8125rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
background-color: var(--tp-hover-bg);
border-radius: 0.25rem;
color: var(--tp-text);
}
.tp-card-content .prose a {
color: var(--tp-accent);
text-decoration: none;
}
.tp-card-content .prose a:hover {
text-decoration: underline;
}
.tp-card-content .prose strong {
font-weight: 600;
color: var(--tp-text);
}
.tp-card-content .prose ul,
.tp-card-content .prose ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.tp-card-content .prose li {
margin-bottom: 0.25rem;
}
/* Card Footer */
.tp-card-footer {
padding: 0.75rem;
background-color: var(--tp-hover-bg);
border-top: 1px solid var(--tp-border);
}
/* Card Sections (for multiple content blocks) */
.tp-card-section {
border-bottom: 1px solid var(--tp-border);
}
.tp-card-section:last-child {
border-bottom: none;
}
/* ===========================
Card Variants
=========================== */
/* Highlighted card (for author's own comments) */
.tp-card-highlighted {
border-color: var(--tp-accent);
border-width: 2px;
}
.tp-card-highlighted .tp-card-header {
background-color: rgba(29, 78, 216, 0.05);
}
/* Muted card */
.tp-card-muted {
opacity: 0.7;
}
/* Card without border */
.tp-card-borderless {
border: none;
border-radius: 0;
}
/* ===========================
Comment Card
=========================== */
.tp-comment-card {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
.tp-comment-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--tp-hover-bg);
border-bottom: 1px solid var(--tp-border);
border-radius: 0.5rem 0.5rem 0 0;
}
.tp-comment-card-content {
padding: 0.625rem 0.75rem;
}
/* Comment card reactions (GitHub style) */
.tp-comment-card-reactions {
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--tp-border);
}
.tp-reaction-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
font-size: 0.875rem;
color: var(--tp-text-secondary);
background-color: transparent;
border: 1px solid var(--tp-border);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tp-reaction-btn:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
border-color: var(--tp-text-secondary);
}
/* Comment card with AI Summary section */
.tp-comment-card .tp-ai-summary {
margin: 0;
border-radius: 0;
}
/* ===========================
Issue Body Card
=========================== */
.tp-issue-body {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
.tp-issue-body-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: var(--tp-hover-bg);
border-bottom: 1px solid var(--tp-border);
}
.tp-issue-body-content {
padding: 1rem;
}
/* AI Summary inside Issue Body */
.tp-issue-body .tp-ai-summary {
border-radius: 0;
}
/* ===========================
Timeline
=========================== */
.tp-timeline {
position: relative;
padding-left: 1.5rem;
}
/* Vertical timeline line */
.tp-timeline::before {
content: '';
position: absolute;
left: 1.1875rem;
top: 1.25rem;
bottom: 0;
width: 2px;
background-color: var(--tp-border);
}
.tp-timeline-items {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ===========================
Timeline Item
=========================== */
.tp-timeline-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.tp-timeline-item-avatar {
position: absolute;
left: -1.5rem;
width: 2.5rem;
display: flex;
justify-content: center;
z-index: 1;
}
.tp-timeline-item-content {
flex: 1;
margin-left: 1.5rem;
}
/* Timeline Event (non-comment item) */
.tp-timeline-event {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
font-size: 0.875rem;
color: var(--tp-text-secondary);
}
.tp-timeline-event-icon {
position: absolute;
left: -1.5rem;
width: 2.5rem;
display: flex;
justify-content: center;
}
.tp-timeline-event-icon i {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tp-surface);
border: 2px solid var(--tp-border);
border-radius: 50%;
font-size: 0.625rem;
color: var(--tp-text-secondary);
}
.tp-timeline-event-text {
margin-left: 1.5rem;
}
.tp-timeline-event-text strong {
font-weight: 500;
color: var(--tp-text);
}
.tp-timeline-event-time {
color: var(--tp-text-secondary);
margin-left: 0.25rem;
}
/* ===========================
Comment Form
=========================== */
.tp-comment-form {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
.tp-comment-form-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--tp-hover-bg);
border-bottom: 1px solid var(--tp-border);
}
.tp-comment-form-header-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text);
}
.tp-comment-form-body {
padding: 1rem;
}
.tp-comment-form-textarea {
width: 100%;
min-height: 6rem;
padding: 0.75rem;
font-size: 0.875rem;
font-family: inherit;
color: var(--tp-text);
background-color: var(--tp-input-bg);
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
resize: vertical;
}
.tp-comment-form-textarea:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}
.tp-comment-form-textarea::placeholder {
color: var(--tp-text-secondary);
}
.tp-comment-form-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: var(--tp-hover-bg);
border-top: 1px solid var(--tp-border);
}
.tp-comment-form-hint {
font-size: 0.75rem;
color: var(--tp-text-secondary);
}
.tp-comment-form-hint kbd {
padding: 0.125rem 0.375rem;
font-size: 0.625rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.25rem;
color: var(--tp-text-secondary);
}
.tp-comment-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
/* Comment Form Tabs (GitHub style) */
.tp-comment-form-tabs {
display: flex;
gap: 0;
margin-left: auto;
}
.tp-comment-form-tab {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text-secondary);
background-color: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.tp-comment-form-tab:hover {
color: var(--tp-text);
}
.tp-comment-form-tab.active {
color: var(--tp-text);
border-bottom-color: var(--tp-accent);
}
/* Comment Form Toolbar (GitHub style) */
.tp-comment-form-toolbar {
display: flex;
align-items: center;
gap: 0.125rem;
padding: 0.5rem;
border-bottom: 1px solid var(--tp-border);
}
.tp-comment-form-toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
font-size: 0.75rem;
color: var(--tp-text-secondary);
background-color: transparent;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tp-comment-form-toolbar-btn:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
.tp-comment-form-toolbar-divider {
width: 1px;
height: 1rem;
margin: 0 0.25rem;
background-color: var(--tp-border);
}
/* Comment Form File Hint (GitHub style) */
.tp-comment-form-file-hint {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.75rem;
color: var(--tp-text-secondary);
border-top: 1px solid var(--tp-border);
cursor: pointer;
}
.tp-comment-form-file-hint:hover {
color: var(--tp-text);
}
.tp-comment-form-file-hint i {
font-size: 0.875rem;
}
/**
* TP Design System - Comment Form Component
* GitHub-style markdown comment editor
*
* Usage:
*
*
*/
/* ===========================
Comment Form Container
=========================== */
.tp-comment-form {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
/* ===========================
Comment Form Header
=========================== */
.tp-comment-form-header {
display: flex;
flex-direction: column;
gap: 0;
background-color: var(--tp-hover-bg);
}
.tp-comment-form-header-title {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-text-secondary);
border-bottom: 1px solid var(--tp-border);
}
/* Header row with tabs and optional actions */
.tp-comment-form-header-row {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--tp-border);
}
/* ===========================
Comment Form Tabs
=========================== */
.tp-comment-form-tabs {
display: flex;
align-items: center;
padding: 0 0.5rem;
border-bottom: 1px solid var(--tp-border);
}
.tp-comment-form-tab {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
margin-bottom: -1px;
}
.tp-comment-form-tab:hover {
color: var(--tp-text);
}
.tp-comment-form-tab.active {
color: var(--tp-text);
border-bottom-color: var(--tp-accent);
}
/* ===========================
Comment Form Toolbar
=========================== */
.tp-comment-form-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.125rem;
padding: 0.375rem 0.5rem;
flex-wrap: wrap;
}
.tp-comment-form-toolbar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
color: var(--tp-text-secondary);
background: none;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.15s ease;
}
.tp-comment-form-toolbar-btn:hover {
color: var(--tp-text);
background-color: var(--tp-surface);
}
.tp-comment-form-toolbar-btn:focus {
outline: none;
}
.tp-comment-form-toolbar-btn:focus-visible {
outline: 2px solid var(--tp-accent);
outline-offset: -2px;
}
.tp-comment-form-toolbar-divider {
width: 1px;
height: 1rem;
background-color: var(--tp-border);
margin: 0 0.25rem;
}
/* ===========================
Comment Form Body
=========================== */
.tp-comment-form-body {
padding: 0;
}
.tp-comment-form-textarea {
width: 100%;
min-height: 8rem;
padding: 0.75rem;
font-size: 0.875rem;
font-family: inherit;
line-height: 1.5;
color: var(--tp-text);
background-color: var(--tp-input-bg);
border: none;
resize: vertical;
}
.tp-comment-form-textarea::placeholder {
color: var(--tp-text-secondary);
}
.tp-comment-form-textarea:focus {
outline: none;
}
/* ===========================
Comment Form Preview
=========================== */
.tp-comment-form-preview {
min-height: 8rem;
padding: 0.75rem;
background-color: var(--tp-input-bg);
}
.tp-comment-form-preview-empty {
color: var(--tp-text-secondary);
font-style: italic;
}
/* ===========================
Comment Form File Hint
=========================== */
.tp-comment-form-file-hint {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
color: var(--tp-text-secondary);
background-color: var(--tp-hover-bg);
border-top: 1px solid var(--tp-border);
cursor: pointer;
transition: background-color 0.15s ease;
}
.tp-comment-form-file-hint:hover {
background-color: var(--tp-border);
}
.tp-comment-form-file-hint i {
font-size: 0.875rem;
}
/* ===========================
Comment Form Footer
=========================== */
.tp-comment-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem;
background-color: var(--tp-hover-bg);
border-top: 1px solid var(--tp-border);
}
.tp-comment-form-hint {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--tp-text-secondary);
}
.tp-comment-form-hint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.25rem;
font-size: 0.625rem;
font-family: inherit;
color: var(--tp-text-secondary);
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.25rem;
box-shadow: 0 1px 0 var(--tp-border);
}
.tp-comment-form-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ===========================
Comment Form Variants
=========================== */
/* Compact form (less padding) */
.tp-comment-form-compact .tp-comment-form-textarea {
min-height: 5rem;
padding: 0.5rem;
}
.tp-comment-form-compact .tp-comment-form-footer {
padding: 0.5rem;
}
/* Inline form (no border) */
.tp-comment-form-inline {
border: none;
border-radius: 0;
background: transparent;
}
.tp-comment-form-inline .tp-comment-form-header,
.tp-comment-form-inline .tp-comment-form-footer {
background: transparent;
}
/* Form with avatar */
.tp-comment-form-with-avatar {
display: flex;
gap: 0.75rem;
}
.tp-comment-form-avatar {
flex-shrink: 0;
}
.tp-comment-form-with-avatar .tp-comment-form {
flex: 1;
}
/* ===========================
Comment Form States
=========================== */
/* Disabled state */
.tp-comment-form-disabled {
opacity: 0.6;
pointer-events: none;
}
/* Loading state */
.tp-comment-form-loading .tp-comment-form-textarea {
opacity: 0.5;
}
.tp-comment-form-loading .tp-comment-form-actions button {
pointer-events: none;
}
/* Error state */
.tp-comment-form-error {
border-color: #ef4444;
}
.tp-comment-form-error-message {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
color: #ef4444;
background-color: rgba(239, 68, 68, 0.1);
border-top: 1px solid rgba(239, 68, 68, 0.2);
}
/* ===========================
Drag & Drop Zone
=========================== */
.tp-comment-form-dropzone {
border: 2px dashed var(--tp-border);
border-radius: 0.375rem;
transition: all 0.15s ease;
}
.tp-comment-form-dropzone.dragover {
border-color: var(--tp-accent);
background-color: rgba(29, 75, 142, 0.05);
}
/* ===========================
Mention Autocomplete
=========================== */
.tp-comment-form-mention-dropdown {
position: absolute;
z-index: 100;
min-width: 12rem;
max-height: 16rem;
overflow-y: auto;
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tp-comment-form-mention-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: var(--tp-text);
cursor: pointer;
transition: background-color 0.1s ease;
}
.tp-comment-form-mention-item:hover,
.tp-comment-form-mention-item.selected {
background-color: var(--tp-hover-bg);
}
.tp-comment-form-mention-item-name {
font-weight: 500;
}
.tp-comment-form-mention-item-username {
color: var(--tp-text-secondary);
font-size: 0.75rem;
}
/* ===========================
Responsive
=========================== */
@media (max-width: 640px) {
.tp-comment-form-footer {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.tp-comment-form-hint {
display: none;
}
.tp-comment-form-actions {
flex-direction: column;
}
.tp-comment-form-actions button {
width: 100%;
justify-content: center;
}
}
/**
* TP Design System - Components
* Extracted 1:1 from IssueHub (crates/issuehub-web/src/app.css)
*/
/* ===========================
Base Styles
=========================== */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[x-cloak] {
display: none !important;
}
/* ===========================
Badge Component
=========================== */
.badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 500;
}
.badge-success { background-color: var(--tp-badge-success-bg); color: var(--tp-badge-success-text); }
.badge-warning { background-color: var(--tp-badge-warning-bg); color: var(--tp-badge-warning-text); }
.badge-danger { background-color: var(--tp-badge-danger-bg); color: var(--tp-badge-danger-text); }
.badge-info { background-color: var(--tp-badge-info-bg); color: var(--tp-badge-info-text); }
.badge-gray { background-color: var(--tp-badge-gray-bg); color: var(--tp-badge-gray-text); }
/* Status badges for issues */
.status-open { background-color: var(--tp-badge-success-bg); color: var(--tp-badge-success-text); }
.status-in_progress { background-color: var(--tp-badge-info-bg); color: var(--tp-badge-info-text); }
.status-resolved { background-color: var(--tp-badge-warning-bg); color: var(--tp-badge-warning-text); }
.status-closed { background-color: var(--tp-badge-gray-bg); color: var(--tp-badge-gray-text); }
/* Priority badges */
.priority-low { background-color: var(--tp-badge-gray-bg); color: var(--tp-badge-gray-text); }
.priority-medium { background-color: var(--tp-badge-info-bg); color: var(--tp-badge-info-text); }
.priority-high { background-color: var(--tp-badge-warning-bg); color: var(--tp-badge-warning-text); }
.priority-critical { background-color: var(--tp-badge-danger-bg); color: var(--tp-badge-danger-text); }
/* Issue Labels */
.issue-label {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
border-width: 1px;
background-color: color-mix(in srgb, var(--label-color) 18%, transparent);
color: color-mix(in srgb, var(--label-color) 55%, black);
border-color: color-mix(in srgb, var(--label-color) 40%, transparent);
}
[data-theme="dark"] .issue-label {
background-color: var(--label-color);
color: var(--label-text-color, white);
border-color: transparent;
}
/* ===========================
Button Components
=========================== */
.btn-primary {
font-weight: 500;
transition: all 0.15s ease;
font-size: 0.875rem;
background-color: var(--tp-primary);
color: white;
border-radius: 6px;
padding: 0.375rem 0.75rem;
display: inline-flex;
align-items: center;
}
.btn-primary:hover {
background-color: var(--tp-primary-hover);
}
.btn-secondary {
font-weight: 500;
transition: all 0.15s ease;
font-size: 0.875rem;
background-color: var(--tp-secondary);
color: white;
border-radius: 6px;
padding: 0.375rem 0.75rem;
display: inline-flex;
align-items: center;
}
.btn-secondary:hover {
opacity: 0.9;
}
.btn-danger {
font-weight: 500;
transition: all 0.15s ease;
font-size: 0.875rem;
background-color: var(--tp-danger);
color: white;
border-radius: 6px;
padding: 0.375rem 0.75rem;
display: inline-flex;
align-items: center;
}
.btn-danger:hover {
opacity: 0.9;
}
.btn-outline {
font-weight: 500;
transition: all 0.15s ease;
font-size: 0.875rem;
background-color: transparent;
border: 1px solid var(--tp-border);
color: var(--tp-text);
border-radius: 6px;
padding: 0.375rem 0.75rem;
display: inline-flex;
align-items: center;
}
.btn-outline:hover {
background-color: var(--tp-hover-bg);
}
/* ===========================
Form Components
=========================== */
.form-input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
font-size: 0.875rem;
background-color: var(--tp-input-bg);
color: var(--tp-text);
}
.form-input:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 2px var(--tp-focus-ring);
}
.form-input::placeholder {
color: var(--tp-text-secondary);
}
.form-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
font-size: 0.875rem;
background-color: var(--tp-input-bg);
color: var(--tp-text);
}
.form-select:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 2px var(--tp-focus-ring);
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text-secondary);
margin-bottom: 0.25rem;
}
/* ===========================
Surface / Card
=========================== */
.tp-surface {
background-color: var(--tp-surface);
border-radius: 8px;
box-shadow: 0 1px 3px var(--tp-card-shadow), 0 1px 2px var(--tp-card-shadow);
border: 1px solid var(--tp-card-border);
}
/* ===========================
Layout Components
=========================== */
.tp-topbar {
background-color: var(--tp-nav-bg);
border-bottom: 1px solid var(--tp-border);
height: 56px;
}
.tp-topbar-icon {
color: #b3b3b3;
transition: color 0.2s ease;
}
.tp-topbar-icon:hover {
color: white;
}
.tp-sidebar {
background-color: var(--tp-sidebar-bg);
border-right: 1px solid var(--tp-border);
}
.sidebar-link {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.15s ease;
position: relative;
border-radius: 6px;
margin: 2px 8px;
color: var(--tp-text);
}
.sidebar-link:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
.sidebar-link.active {
background-color: var(--tp-primary);
color: white;
font-weight: 500;
}
/* Logo */
.tp-logo {
background: linear-gradient(135deg, #1d4b8e 0%, #0b549c 100%);
box-shadow: 0 8px 16px rgba(29, 75, 142, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.tp-logo svg {
fill: white;
position: relative;
z-index: 10;
}
.tp-logo-shine {
position: relative;
}
.tp-logo-shine::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
transform: rotate(45deg);
animation: logoShine 4s infinite;
}
@keyframes logoShine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
/* ===========================
GitHub-style Markdown (Prose)
=========================== */
.prose {
font-size: 14px;
line-height: 1.6;
word-wrap: break-word;
color: var(--tp-prose-text);
overflow-wrap: break-word;
}
.prose > *:first-child {
margin-top: 0 !important;
}
.prose > *:last-child {
margin-bottom: 0 !important;
}
/* Headings */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
color: var(--tp-prose-heading);
}
.prose h1 {
font-size: 2em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--tp-prose-border);
}
.prose h2 {
font-size: 1.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--tp-prose-border);
}
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1em; }
.prose h5 { font-size: 0.875em; }
.prose h6 { font-size: 0.85em; color: var(--tp-prose-muted); }
/* Paragraphs */
.prose p {
margin-top: 0;
margin-bottom: 16px;
}
/* Links */
.prose a {
color: var(--tp-prose-link);
text-decoration: none;
}
.prose a:hover {
text-decoration: underline;
}
/* Bold & Italic */
.prose strong {
font-weight: 600;
color: var(--tp-prose-heading);
}
.prose em {
font-style: italic;
}
/* Lists */
.prose ul, .prose ol {
margin-top: 0;
margin-bottom: 16px;
padding-left: 2em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
.prose li {
margin-top: 4px;
}
.prose li + li {
margin-top: 4px;
}
/* Code - Inline */
.prose code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
white-space: break-spaces;
background-color: var(--tp-prose-code-bg);
border-radius: 6px;
color: var(--tp-prose-text);
}
/* Code - Block */
.prose pre {
margin-top: 0;
margin-bottom: 16px;
padding: 16px;
overflow-x: auto;
font-size: 85%;
line-height: 1.45;
color: var(--tp-prose-text);
background-color: var(--tp-prose-pre-bg);
border-radius: 6px;
border: 1px solid var(--tp-prose-border);
max-width: 100%;
}
.prose pre code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
border-radius: 0;
}
/* Blockquotes */
.prose blockquote {
margin: 0 0 16px 0;
padding: 0 1em;
color: var(--tp-prose-muted);
border-left: 4px solid var(--tp-prose-border);
}
/* Tables */
.prose table {
width: 100%;
margin-top: 0;
margin-bottom: 16px;
border-spacing: 0;
border-collapse: collapse;
overflow: auto;
display: block;
}
.prose table th {
font-weight: 600;
padding: 6px 13px;
border: 1px solid var(--tp-prose-border);
background-color: var(--tp-prose-table-alt-bg);
color: var(--tp-prose-heading);
}
.prose table td {
padding: 6px 13px;
border: 1px solid var(--tp-prose-border);
color: var(--tp-prose-text);
}
.prose table tr {
background-color: var(--tp-prose-table-bg);
border-top: 1px solid var(--tp-prose-border);
}
.prose table tr:nth-child(2n) {
background-color: var(--tp-prose-table-alt-bg);
}
/* Images */
.prose img {
max-width: 100%;
box-sizing: content-box;
border-radius: 6px;
}
/* Horizontal Rules */
.prose hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: var(--tp-prose-border);
border: 0;
}
/* Mentions */
.prose .mention {
background-color: var(--tp-prose-mention-bg);
color: var(--tp-prose-link);
padding: 0 4px;
border-radius: 4px;
font-weight: 500;
}
/* ===========================
Animations
=========================== */
@keyframes fade-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===========================
Data Table
=========================== */
.data-table {
width: 100%;
font-size: 0.875rem;
}
.data-table th {
text-align: left;
font-weight: 600;
color: var(--tp-text-secondary);
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--tp-table-border);
background-color: var(--tp-table-header-bg);
}
.data-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--tp-table-border-light);
color: var(--tp-text);
}
.data-table tr:hover td {
background-color: var(--tp-table-row-hover);
}
/* ===========================
Notification
=========================== */
.notification {
background-color: var(--tp-surface);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px var(--tp-card-shadow), 0 4px 6px -2px var(--tp-card-shadow);
display: flex;
align-items: center;
gap: 0.75rem;
border-left: 4px solid;
padding: 16px 20px;
min-width: 300px;
pointer-events: auto;
animation: slideUp 0.3s ease-out;
color: var(--tp-text);
}
.notification.success { border-left-color: var(--tp-success); }
.notification.error { border-left-color: var(--tp-danger); }
.notification.info { border-left-color: var(--tp-info); }
.notification.warning { border-left-color: var(--tp-warning); }
/* ===========================
Empty State
=========================== */
.empty-state {
text-align: center;
padding: 3rem 0;
color: var(--tp-text-secondary);
}
.empty-state-icon {
font-size: 2.25rem;
color: var(--tp-border);
margin-bottom: 1rem;
}
/**
* DataTable Skeleton — Initial-Load-State für admin-table-Cells, die via
* HTMX-Fragment nachgeladen werden.
*
* Ersetzt den heutigen `consolehub-layout::skeleton_card()` (zwei graue
* Linien) durch eine Tabelle-shaped Vorschau mit Shimmer-Animation.
*
* Markup-Erwartung (vom consolehub-layout-Renderer ausgegeben — siehe
* Storybook `V1/Components/DataTableSkeleton`):
*
*
*
* ...
*
*
*
*
*
*
*
* …echte Header…
*
*
*
*
* Die Header sind ECHT (nicht skeletoniert) — sie machen den Skeleton
* informativer als "5 graue Streifen" und vermeiden Layout-Shift wenn die
* echten Daten ankommen.
*/
.tp-table-skeleton-bar {
display: inline-block;
background: linear-gradient(
90deg,
var(--tp-hover-bg, #f3f4f6) 0%,
var(--tp-border, #e1e1e1) 50%,
var(--tp-hover-bg, #f3f4f6) 100%
);
background-size: 200% 100%;
border-radius: 0.25rem;
animation: tp-table-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes tp-table-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Verlangsame Animation bei reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
.tp-table-skeleton-bar {
animation-duration: 3s;
}
}
/**
* TP Design System - Data Table Components
* Shopify-style data tables for admin interfaces
*
* Usage:
* | … |
*
* ...
*
*/
/* ===========================
Data Table Container
=========================== */
.tp-data-table {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
overflow: hidden;
}
/* ===========================
Toolbar (Tabs + Actions)
=========================== */
.tp-data-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.75rem;
border-bottom: 1px solid var(--tp-border);
background-color: var(--tp-surface);
min-height: 3rem;
gap: 1rem;
}
/* ===========================
Tabs Navigation
=========================== */
.tp-data-table-tabs {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tp-data-table-tabs::-webkit-scrollbar {
display: none;
}
.tp-data-table-tab {
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text-secondary);
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.tp-data-table-tab:hover {
color: var(--tp-text);
}
.tp-data-table-tab.active {
color: var(--tp-text);
border-bottom-color: var(--tp-text);
}
.tp-data-table-tab-add {
padding: 0.75rem 0.5rem;
color: var(--tp-text-secondary);
transition: color 0.15s ease;
}
.tp-data-table-tab-add:hover {
color: var(--tp-text);
}
/* ===========================
Actions (Search, Filter, etc.)
=========================== */
.tp-data-table-actions {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.tp-data-table-action {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
color: var(--tp-text-secondary);
transition: color 0.15s ease, background-color 0.15s ease;
}
.tp-data-table-action:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
.tp-data-table-action.active {
color: var(--tp-accent);
background-color: rgba(29, 78, 216, 0.1);
}
/* Action button group (grouped icons) */
.tp-data-table-action-group {
display: flex;
align-items: center;
background-color: var(--tp-hover-bg);
border-radius: 0.375rem;
padding: 0.125rem;
}
.tp-data-table-action-group .tp-data-table-action {
background-color: transparent;
}
.tp-data-table-action-group .tp-data-table-action:hover {
background-color: var(--tp-surface);
}
/* ===========================
Search Input (Expandable)
=========================== */
.tp-data-table-search {
display: flex;
align-items: center;
gap: 0.5rem;
}
.tp-data-table-search-input {
width: 0;
padding: 0;
border: none;
background: transparent;
font-size: 0.875rem;
color: var(--tp-text);
transition: width 0.2s ease, padding 0.2s ease;
}
.tp-data-table-search-input::placeholder {
color: var(--tp-text-secondary);
}
.tp-data-table-search.expanded .tp-data-table-search-input {
width: 12rem;
padding: 0.375rem 0.5rem;
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
background-color: var(--tp-input-bg);
}
.tp-data-table-search.expanded .tp-data-table-search-input:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}
/* ===========================
Table Content
=========================== */
.tp-data-table-content {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
/* Table Header */
.tp-data-table-content thead {
background-color: var(--tp-hover-bg);
border-bottom: 1px solid var(--tp-border);
}
.tp-data-table-content th {
padding: 0.625rem 0.75rem;
text-align: left;
font-weight: 500;
color: var(--tp-text-secondary);
white-space: nowrap;
border-bottom: 1px solid var(--tp-border);
}
.tp-data-table-content th.sortable {
cursor: pointer;
user-select: none;
}
.tp-data-table-content th.sortable:hover {
color: var(--tp-text);
}
.tp-data-table-content th .sort-icon {
margin-left: 0.25rem;
opacity: 0;
transition: opacity 0.15s ease;
}
.tp-data-table-content th.sortable:hover .sort-icon,
.tp-data-table-content th.sorted .sort-icon {
opacity: 1;
}
.tp-data-table-content th.sorted {
color: var(--tp-text);
}
/* Table Body */
.tp-data-table-content tbody tr {
border-bottom: 1px solid var(--tp-border);
transition: background-color 0.1s ease;
}
.tp-data-table-content tbody tr:last-child {
border-bottom: none;
}
.tp-data-table-content tbody tr:hover {
background-color: var(--tp-hover-bg);
}
.tp-data-table-content tbody tr.selected {
background-color: rgba(29, 78, 216, 0.05);
}
.tp-data-table-content td {
padding: 0.625rem 0.75rem;
color: var(--tp-text);
vertical-align: middle;
}
/* Checkbox Column */
.tp-data-table-content .col-checkbox {
width: 2.5rem;
padding-left: 1rem;
padding-right: 0.5rem;
}
.tp-data-table-checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--tp-border);
border-radius: 0.25rem;
background-color: var(--tp-surface);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tp-data-table-checkbox:hover {
border-color: var(--tp-text-secondary);
}
.tp-data-table-checkbox:checked {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.tp-data-table-checkbox:indeterminate {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8a1 1 0 011-1h6a1 1 0 110 2H5a1 1 0 01-1-1z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* Primary Column (e.g., Order ID) */
.tp-data-table-content .col-primary {
font-weight: 500;
color: var(--tp-text);
}
.tp-data-table-content .col-primary a {
color: var(--tp-text);
transition: color 0.15s ease;
}
.tp-data-table-content .col-primary a:hover {
color: var(--tp-accent);
}
/* Secondary/Muted Column */
.tp-data-table-content .col-secondary {
color: var(--tp-text-secondary);
}
/* Numeric Column (right-aligned) */
.tp-data-table-content .col-numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Badges are defined once, in v2/components/pill.css (`@tp/ui/badge`).
This file used to redefine `.tp-badge` and its variants with hex literals;
being alphabetically later it won over the tokenised definition, so
.tp-badge-success rendered #16a34a on its own tint — 2.79:1 (D-003), and
the badge was a 9999px pill in the two hubs that ship data-table.css and a
4px rectangle in the other 18. Both halves are gone (D-002c). */
/* ===========================
Empty State
=========================== */
.tp-data-table-empty {
padding: 3rem 1.5rem;
text-align: center;
}
.tp-data-table-empty-icon {
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
color: var(--tp-text-secondary);
opacity: 0.5;
}
.tp-data-table-empty-title {
font-size: 1rem;
font-weight: 500;
color: var(--tp-text);
margin-bottom: 0.25rem;
}
.tp-data-table-empty-description {
font-size: 0.875rem;
color: var(--tp-text-secondary);
}
/* ===========================
Pagination
=========================== */
.tp-data-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-top: 1px solid var(--tp-border);
background-color: var(--tp-surface);
font-size: 0.875rem;
}
.tp-data-table-pagination-info {
color: var(--tp-text-secondary);
}
.tp-data-table-pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.tp-data-table-pagination-btn {
padding: 0.375rem 0.75rem;
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
background-color: var(--tp-surface);
color: var(--tp-text);
font-size: 0.875rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tp-data-table-pagination-btn:hover:not(:disabled) {
background-color: var(--tp-hover-bg);
border-color: var(--tp-text-secondary);
}
.tp-data-table-pagination-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.tp-data-table-pagination-pages {
display: flex;
align-items: center;
gap: 0.25rem;
}
.tp-data-table-pagination-page {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
font-size: 0.875rem;
color: var(--tp-text);
transition: background-color 0.15s ease;
}
.tp-data-table-pagination-page:hover {
background-color: var(--tp-hover-bg);
}
.tp-data-table-pagination-page.active {
background-color: var(--tp-primary);
color: white;
}
/* ===========================
Bulk Actions Bar
=========================== */
.tp-data-table-bulk {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background-color: var(--tp-primary);
color: white;
}
.tp-data-table-bulk-count {
font-size: 0.875rem;
font-weight: 500;
}
.tp-data-table-bulk-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.tp-data-table-bulk-btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
background-color: rgba(255, 255, 255, 0.2);
color: white;
transition: background-color 0.15s ease;
}
.tp-data-table-bulk-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.tp-data-table-bulk-cancel {
margin-left: auto;
padding: 0.375rem;
border-radius: 0.375rem;
color: white;
opacity: 0.8;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.tp-data-table-bulk-cancel:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.2);
}
/* ===========================
Aggregate Row (Summary Footer)
=========================== */
.tp-data-table-content tfoot tr,
.tp-data-table-content tbody tr.tp-agg-row {
background-color: var(--tp-content-bg, #f3f4f6);
border-top: 2px solid var(--tp-border, #e1e1e1);
}
.tp-data-table-content tfoot td,
.tp-data-table-content tbody tr.tp-agg-row td {
padding: 0.625rem 0.875rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--tp-text, #202223);
white-space: nowrap;
border-bottom: none;
}
.tp-data-table-content tfoot td.agg-numeric,
.tp-data-table-content tbody tr.tp-agg-row td.agg-numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.tp-data-table-content tfoot td.agg-empty,
.tp-data-table-content tbody tr.tp-agg-row td.agg-empty {
color: var(--tp-text-secondary, #6d7175);
font-weight: 400;
}
.tp-data-table-content tfoot td.agg-label,
.tp-data-table-content tbody tr.tp-agg-row td.agg-label {
color: var(--tp-text-secondary, #6d7175);
font-weight: 500;
}
.tp-data-table-content tfoot tr:hover,
.tp-data-table-content tbody tr.tp-agg-row:hover {
background-color: var(--tp-content-bg, #f3f4f6);
}
/* ===========================
Responsive
=========================== */
@media (max-width: 767px) {
.tp-data-table-toolbar {
flex-direction: column;
align-items: stretch;
padding: 0.5rem;
gap: 0.5rem;
}
.tp-data-table-tabs {
order: 2;
padding-bottom: 0.5rem;
}
.tp-data-table-actions {
order: 1;
justify-content: flex-end;
}
.tp-data-table-content {
display: block;
overflow-x: auto;
}
.tp-data-table-pagination {
flex-direction: column;
gap: 0.75rem;
}
}
.datahub-fragment {
display: flex;
flex-direction: column;
gap: 0;
}
.datahub-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--tp-border);
background-color: var(--tp-hover-bg);
font-size: 0.8125rem;
color: var(--tp-text-secondary);
}
.tp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.tp-table-head {
background-color: var(--tp-table-header-bg, #f6f8fa);
}
.tp-table-th {
padding: 0.5rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--tp-table-border, var(--tp-border));
white-space: nowrap;
}
.tp-table-th a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: inherit;
text-decoration: none;
transition: color 0.12s;
}
.tp-table-th a:hover {
color: var(--tp-accent);
}
.tp-table-body {}
.tp-table-row {
border-bottom: 1px solid var(--tp-table-border-light, var(--tp-border));
transition: background-color 0.1s;
}
.tp-table-row:hover {
background-color: var(--tp-table-row-hover, var(--tp-hover-bg));
}
.tp-table-row:last-child {
border-bottom: none;
}
.tp-table-td {
padding: 0.625rem 1rem;
color: var(--tp-text);
vertical-align: middle;
}
.tp-table-td a {
color: var(--tp-accent);
text-decoration: none;
font-weight: 500;
}
.tp-table-td a:hover {
text-decoration: underline;
}
.datahub-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1rem;
border-top: 1px solid var(--tp-border);
font-size: 0.8125rem;
color: var(--tp-text-secondary);
background-color: var(--tp-surface);
}
.datahub-pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Spec 179 Phase 1a — Footer-Schicht für aggregierte Tabellen.
Marker-Klassen; die strukturelle Optik kommt aus den Tailwind-Utilities
im Template (bg-tp-hover-bg, border-t-2). Hier nur Zahlen-Alignment und
leichte Kontrast-Akzente. */
.tp-table-summary-row td {
font-variant-numeric: tabular-nums;
}
.tp-table-meta-footer {
font-variant-numeric: tabular-nums;
background-color: var(--tp-surface);
}
/* ─── Loading-Overlay für HTMX-Requests (Spec 179 Phase G) ──────────────────
Triggered via `hx-indicator="#
*
*
*
* Positions: tp-drawer-right (default), tp-drawer-left, tp-drawer-top, tp-drawer-bottom
* Sizes: tp-drawer-sm, tp-drawer-md (default), tp-drawer-lg, tp-drawer-xl, tp-drawer-full
*/
/* ===========================
Drawer Container
=========================== */
.tp-drawer {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
}
/* ===========================
Drawer Overlay
=========================== */
.tp-drawer-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
/* ===========================
Drawer Panel
=========================== */
.tp-drawer-panel {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--tp-surface);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease;
overflow: hidden;
z-index: 1;
}
/* ===========================
Drawer Header
=========================== */
.tp-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--tp-border);
flex-shrink: 0;
}
.tp-drawer-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--tp-text);
margin: 0;
}
.tp-drawer-subtitle {
font-size: 0.875rem;
color: var(--tp-text-secondary);
margin-top: 0.25rem;
}
.tp-drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--tp-text-secondary);
background: none;
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.tp-drawer-close:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
/* ===========================
Drawer Body
=========================== */
.tp-drawer-body {
flex: 1;
padding: 1.25rem;
overflow-y: auto;
}
/* Body with no padding */
.tp-drawer-body-flush {
padding: 0;
}
/* ===========================
Drawer Footer
=========================== */
.tp-drawer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--tp-border);
background-color: var(--tp-hover-bg);
flex-shrink: 0;
}
.tp-drawer-footer-start {
justify-content: flex-start;
}
.tp-drawer-footer-between {
justify-content: space-between;
}
/* ===========================
Drawer Positions
=========================== */
/* Right (Default) */
.tp-drawer-right {
justify-content: flex-end;
}
.tp-drawer-right .tp-drawer-panel {
height: 100%;
width: 24rem; /* Default md size */
max-width: 100%;
}
/* Left */
.tp-drawer-left {
justify-content: flex-start;
}
.tp-drawer-left .tp-drawer-panel {
height: 100%;
width: 24rem;
max-width: 100%;
}
/* Top */
.tp-drawer-top {
flex-direction: column;
justify-content: flex-start;
}
.tp-drawer-top .tp-drawer-panel {
width: 100%;
height: auto;
max-height: 80vh;
}
/* Bottom */
.tp-drawer-bottom {
flex-direction: column;
justify-content: flex-end;
}
.tp-drawer-bottom .tp-drawer-panel {
width: 100%;
height: auto;
max-height: 80vh;
}
/* ===========================
Drawer Sizes (Horizontal)
=========================== */
.tp-drawer-xs .tp-drawer-panel {
width: 16rem; /* 256px */
}
.tp-drawer-sm .tp-drawer-panel {
width: 20rem; /* 320px */
}
.tp-drawer-md .tp-drawer-panel {
width: 24rem; /* 384px */
}
.tp-drawer-lg .tp-drawer-panel {
width: 32rem; /* 512px */
}
.tp-drawer-xl .tp-drawer-panel {
width: 40rem; /* 640px */
}
.tp-drawer-2xl .tp-drawer-panel {
width: 48rem; /* 768px */
}
.tp-drawer-full .tp-drawer-panel {
width: 100%;
}
/* Half width */
.tp-drawer-half .tp-drawer-panel {
width: 50%;
}
/* ===========================
Drawer Sizes (Vertical - Top/Bottom)
=========================== */
.tp-drawer-top.tp-drawer-sm .tp-drawer-panel,
.tp-drawer-bottom.tp-drawer-sm .tp-drawer-panel {
max-height: 25vh;
}
.tp-drawer-top.tp-drawer-md .tp-drawer-panel,
.tp-drawer-bottom.tp-drawer-md .tp-drawer-panel {
max-height: 40vh;
}
.tp-drawer-top.tp-drawer-lg .tp-drawer-panel,
.tp-drawer-bottom.tp-drawer-lg .tp-drawer-panel {
max-height: 60vh;
}
.tp-drawer-top.tp-drawer-full .tp-drawer-panel,
.tp-drawer-bottom.tp-drawer-full .tp-drawer-panel {
max-height: 100vh;
height: 100vh;
}
/* ===========================
Drawer Animations (Alpine.js)
=========================== */
/* Overlay animations */
.tp-drawer-overlay[x-cloak] {
display: none !important;
}
/* Right drawer slide */
.tp-drawer-right .tp-drawer-panel {
transform: translateX(0);
}
.tp-drawer-right[x-show="false"] .tp-drawer-panel,
.tp-drawer-right.tp-drawer-closed .tp-drawer-panel {
transform: translateX(100%);
}
/* Left drawer slide */
.tp-drawer-left .tp-drawer-panel {
transform: translateX(0);
}
.tp-drawer-left[x-show="false"] .tp-drawer-panel,
.tp-drawer-left.tp-drawer-closed .tp-drawer-panel {
transform: translateX(-100%);
}
/* Top drawer slide */
.tp-drawer-top .tp-drawer-panel {
transform: translateY(0);
}
.tp-drawer-top[x-show="false"] .tp-drawer-panel,
.tp-drawer-top.tp-drawer-closed .tp-drawer-panel {
transform: translateY(-100%);
}
/* Bottom drawer slide */
.tp-drawer-bottom .tp-drawer-panel {
transform: translateY(0);
}
.tp-drawer-bottom[x-show="false"] .tp-drawer-panel,
.tp-drawer-bottom.tp-drawer-closed .tp-drawer-panel {
transform: translateY(100%);
}
/* ===========================
Drawer Variants
=========================== */
/* Drawer without overlay */
.tp-drawer-no-overlay .tp-drawer-overlay {
display: none;
}
/* Drawer with border instead of shadow */
.tp-drawer-bordered .tp-drawer-panel {
box-shadow: none;
}
.tp-drawer-right.tp-drawer-bordered .tp-drawer-panel {
border-left: 1px solid var(--tp-border);
}
.tp-drawer-left.tp-drawer-bordered .tp-drawer-panel {
border-right: 1px solid var(--tp-border);
}
.tp-drawer-top.tp-drawer-bordered .tp-drawer-panel {
border-bottom: 1px solid var(--tp-border);
}
.tp-drawer-bottom.tp-drawer-bordered .tp-drawer-panel {
border-top: 1px solid var(--tp-border);
}
/* Drawer with rounded corners */
.tp-drawer-right.tp-drawer-rounded .tp-drawer-panel {
border-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
.tp-drawer-left.tp-drawer-rounded .tp-drawer-panel {
border-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
.tp-drawer-top.tp-drawer-rounded .tp-drawer-panel {
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
.tp-drawer-bottom.tp-drawer-rounded .tp-drawer-panel {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
/* ===========================
Drawer Push Mode
=========================== */
.tp-drawer-push {
position: relative;
}
.tp-drawer-push .tp-drawer-overlay {
display: none;
}
.tp-drawer-push .tp-drawer-panel {
position: relative;
}
/* ===========================
Drawer Tabs (for multi-section drawers)
=========================== */
.tp-drawer-tabs {
display: flex;
border-bottom: 1px solid var(--tp-border);
}
.tp-drawer-tab {
flex: 1;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
}
.tp-drawer-tab:hover {
color: var(--tp-text);
background-color: var(--tp-hover-bg);
}
.tp-drawer-tab.active {
color: var(--tp-accent);
border-bottom-color: var(--tp-accent);
}
/* ===========================
Drawer Sections
=========================== */
.tp-drawer-section {
padding: 1rem 0;
border-bottom: 1px solid var(--tp-border);
}
.tp-drawer-section:last-child {
border-bottom: none;
}
.tp-drawer-section-title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tp-text-secondary);
margin-bottom: 0.75rem;
}
/* ===========================
Drawer Loading State
=========================== */
.tp-drawer-loading .tp-drawer-body {
display: flex;
align-items: center;
justify-content: center;
}
.tp-drawer-loading .tp-drawer-footer {
opacity: 0.5;
pointer-events: none;
}
/* ===========================
Responsive
=========================== */
@media (max-width: 640px) {
/* Make horizontal drawers full width on mobile */
.tp-drawer-right .tp-drawer-panel,
.tp-drawer-left .tp-drawer-panel {
width: 100%;
}
/* Reduce padding on mobile */
.tp-drawer-header,
.tp-drawer-body,
.tp-drawer-footer {
padding-left: 1rem;
padding-right: 1rem;
}
}
/**
* TP Design System - Dropdown Components
* DaisyUI-style dropdown menu classes
*
* Usage:
*
*
* ...
* ...
*
*
*
*
*
*/
/* ===========================
Dropdown Container
=========================== */
.tp-dropdown {
position: relative;
display: inline-block;
}
/* ===========================
Dropdown Trigger
=========================== */
.tp-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
/* ===========================
Dropdown Menu
=========================== */
.tp-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 10rem;
margin-top: 0.25rem;
padding: 0.25rem 0;
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* Positioning variants */
.tp-dropdown-menu-right {
left: auto;
right: 0;
}
.tp-dropdown-menu-top {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0.25rem;
}
.tp-dropdown-menu-center {
left: 50%;
transform: translateX(-50%);
}
/* ===========================
Dropdown Item
=========================== */
.tp-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: var(--tp-text);
text-align: left;
background-color: transparent;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tp-dropdown-item:hover {
background-color: var(--tp-hover-bg);
}
.tp-dropdown-item:active {
background-color: var(--tp-border);
}
.tp-dropdown-item:focus {
outline: none;
background-color: var(--tp-hover-bg);
}
/* Item icon */
.tp-dropdown-item-icon {
width: 1rem;
color: var(--tp-text-secondary);
flex-shrink: 0;
}
/* Item description (secondary text) */
.tp-dropdown-item-description {
font-size: 0.75rem;
color: var(--tp-text-secondary);
margin-left: auto;
}
/* Danger item (destructive actions) */
.tp-dropdown-item-danger {
color: #dc2626;
}
.tp-dropdown-item-danger:hover {
background-color: rgba(220, 38, 38, 0.1);
}
.tp-dropdown-item-danger .tp-dropdown-item-icon {
color: #dc2626;
}
/* Disabled item */
.tp-dropdown-item:disabled,
.tp-dropdown-item-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Active/selected item */
.tp-dropdown-item-active {
background-color: var(--tp-hover-bg);
font-weight: 500;
}
.tp-dropdown-item-active::before {
content: '';
position: absolute;
left: 0;
width: 3px;
height: 100%;
background-color: var(--tp-primary);
}
/* ===========================
Dropdown Divider
=========================== */
.tp-dropdown-divider {
height: 1px;
margin: 0.25rem 0;
background-color: var(--tp-border);
}
/* ===========================
Dropdown Header
=========================== */
.tp-dropdown-header {
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ===========================
Dropdown with Search
=========================== */
.tp-dropdown-search {
padding: 0.5rem;
border-bottom: 1px solid var(--tp-border);
}
.tp-dropdown-search-input {
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border: 1px solid var(--tp-border);
border-radius: 0.375rem;
background-color: var(--tp-input-bg);
color: var(--tp-text);
}
.tp-dropdown-search-input:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}
.tp-dropdown-search-input::placeholder {
color: var(--tp-text-secondary);
}
/* ===========================
Dropdown with Checkbox
=========================== */
.tp-dropdown-item-checkbox {
display: flex;
align-items: center;
gap: 0.75rem;
}
.tp-dropdown-item-checkbox input[type="checkbox"] {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
/* ===========================
Dropdown Footer
=========================== */
.tp-dropdown-footer {
padding: 0.5rem;
border-top: 1px solid var(--tp-border);
}
/* ===========================
Context Menu (Right-click)
=========================== */
.tp-context-menu {
position: fixed;
z-index: 100;
min-width: 12rem;
padding: 0.25rem 0;
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
/* ===========================
Animations
=========================== */
.tp-dropdown-menu[x-cloak] {
display: none !important;
}
/* For Alpine.js transitions */
.tp-dropdown-enter {
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
.tp-dropdown-enter-start {
opacity: 0;
transform: scale(0.95);
}
.tp-dropdown-enter-end {
opacity: 1;
transform: scale(1);
}
.tp-dropdown-leave {
transition: opacity 0.075s ease-in, transform 0.075s ease-in;
}
.tp-dropdown-leave-start {
opacity: 1;
transform: scale(1);
}
.tp-dropdown-leave-end {
opacity: 0;
transform: scale(0.95);
}
/**
* TP Design System - Empty State
* ConsoleHub "Keine Einträge" placeholder
*/
.tp-empty-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 16rem;
border: 1px solid var(--tp-border);
border-radius: 0.75rem;
background-color: var(--tp-surface);
padding: 2rem 1.5rem;
}
.tp-empty-state-inner {
text-align: center;
max-width: 20rem;
}
.tp-empty-state-icon-wrap {
width: 3.5rem;
height: 3.5rem;
margin: 0 auto 1rem;
border-radius: 9999px;
background-color: var(--tp-hover-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--tp-text-secondary);
font-size: 1.25rem;
}
.tp-empty-state-title {
margin: 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--tp-text);
}
.tp-empty-state-desc {
margin: 0 0 1rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--tp-text-secondary);
}
.tp-empty-state-action {
display: inline-flex;
justify-content: center;
}
/**
* TP Design System - Filter bar & chips
* ConsoleHub release-notes type filters
*/
.tp-filter-bar {
background-color: var(--tp-surface);
border: 1px solid var(--tp-border);
border-radius: 0.75rem;
padding: 1rem;
}
.tp-filter-bar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.tp-filter-bar-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--tp-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.25rem;
}
.tp-filter-chip {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
border: 1px solid var(--tp-border);
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.tp-filter-chip:hover {
border-color: var(--tp-text-secondary);
color: var(--tp-text);
}
.tp-filter-chip-active {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
color: #fff;
}
.tp-filter-chip-active:hover {
background-color: var(--tp-primary-hover);
border-color: var(--tp-primary-hover);
color: #fff;
}
/**
* TP Design System - Form Components
* Input, Select, Textarea, Checkbox, Radio, Label
*
* Usage:
*
*
*
*
*
*
* Mindestens 8 Zeichen
*
*
* Sizes: tp-form-input-sm, tp-form-input-lg
* States: :focus, :disabled, .tp-form-input-error
*/
/* ===========================
Form Label
=========================== */
.tp-form-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--tp-text);
margin-bottom: 0.375rem;
}
.tp-form-label-required::after {
content: ' *';
color: #ef4444;
}
.tp-form-label-optional::after {
content: ' (optional)';
font-weight: 400;
color: var(--tp-text-secondary);
font-size: 0.75rem;
}
/* ===========================
Form Input
=========================== */
.tp-form-input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--tp-text);
background-color: var(--tp-input-bg);
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tp-form-input::placeholder {
color: var(--tp-text-secondary);
}
.tp-form-input:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-input:disabled {
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
cursor: not-allowed;
opacity: 0.7;
}
/* Input Sizes */
.tp-form-input-sm {
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
}
.tp-form-input-lg {
padding: 0.625rem 1rem;
font-size: 1rem;
}
/* Input States */
.tp-form-input-error {
border-color: #ef4444;
}
.tp-form-input-error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.tp-form-input-success {
border-color: #22c55e;
}
.tp-form-input-success:focus {
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
/* ===========================
Form Select
=========================== */
.tp-form-select {
width: 100%;
padding: 0.5rem 2rem 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--tp-text);
background-color: var(--tp-input-bg);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
appearance: none;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tp-form-select:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-select:disabled {
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
cursor: not-allowed;
opacity: 0.7;
}
/* Select Sizes */
.tp-form-select-sm {
padding: 0.375rem 2rem 0.375rem 0.625rem;
font-size: 0.75rem;
}
.tp-form-select-lg {
padding: 0.625rem 2.5rem 0.625rem 1rem;
font-size: 1rem;
}
/* ===========================
Form Textarea
=========================== */
.tp-form-textarea {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--tp-text);
background-color: var(--tp-input-bg);
border: 1px solid var(--tp-input-border);
border-radius: 0.375rem;
resize: vertical;
min-height: 5rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tp-form-textarea::placeholder {
color: var(--tp-text-secondary);
}
.tp-form-textarea:focus {
outline: none;
border-color: var(--tp-accent);
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-textarea:disabled {
background-color: var(--tp-hover-bg);
color: var(--tp-text-secondary);
cursor: not-allowed;
opacity: 0.7;
}
.tp-form-textarea-error {
border-color: #ef4444;
}
/* ===========================
Form Checkbox
=========================== */
.tp-form-checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--tp-input-border);
border-radius: 0.25rem;
background-color: var(--tp-input-bg);
cursor: pointer;
appearance: none;
transition: all 0.15s ease;
position: relative;
flex-shrink: 0;
}
.tp-form-checkbox:checked {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
}
.tp-form-checkbox:checked::after {
content: '';
position: absolute;
left: 50%;
top: 45%;
width: 0.25rem;
height: 0.5rem;
border: solid white;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.tp-form-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-checkbox:disabled {
background-color: var(--tp-hover-bg);
cursor: not-allowed;
opacity: 0.5;
}
/* Checkbox with Label */
.tp-form-checkbox-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--tp-text);
cursor: pointer;
}
.tp-form-checkbox-label:has(.tp-form-checkbox:disabled) {
cursor: not-allowed;
opacity: 0.7;
}
/* ===========================
Form Radio
=========================== */
.tp-form-radio {
width: 1rem;
height: 1rem;
border: 1px solid var(--tp-input-border);
border-radius: 50%;
background-color: var(--tp-input-bg);
cursor: pointer;
appearance: none;
transition: all 0.15s ease;
position: relative;
flex-shrink: 0;
}
.tp-form-radio:checked {
border-color: var(--tp-accent);
border-width: 4px;
}
.tp-form-radio:focus {
outline: none;
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-radio:disabled {
background-color: var(--tp-hover-bg);
cursor: not-allowed;
opacity: 0.5;
}
/* Radio with Label */
.tp-form-radio-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--tp-text);
cursor: pointer;
}
/* ===========================
Form Group
=========================== */
.tp-form-group {
margin-bottom: 1rem;
}
.tp-form-group:last-child {
margin-bottom: 0;
}
/* ===========================
Form Hint / Error Message
=========================== */
.tp-form-hint {
display: block;
margin-top: 0.375rem;
font-size: 0.75rem;
color: var(--tp-text-secondary);
}
.tp-form-error {
display: block;
margin-top: 0.375rem;
font-size: 0.75rem;
color: #ef4444;
}
.tp-form-success {
display: block;
margin-top: 0.375rem;
font-size: 0.75rem;
color: #22c55e;
}
/* ===========================
Input with Icon
=========================== */
.tp-form-input-wrapper {
position: relative;
}
.tp-form-input-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--tp-text-secondary);
pointer-events: none;
}
.tp-form-input-wrapper .tp-form-input {
padding-left: 2.25rem;
}
.tp-form-input-icon-right {
left: auto;
right: 0.75rem;
}
.tp-form-input-wrapper:has(.tp-form-input-icon-right) .tp-form-input {
padding-left: 0.75rem;
padding-right: 2.25rem;
}
/* ===========================
Input Group (Addon)
=========================== */
.tp-form-input-group {
display: flex;
}
.tp-form-input-group .tp-form-input {
border-radius: 0;
}
.tp-form-input-group .tp-form-input:first-child {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.tp-form-input-group .tp-form-input:last-child {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
.tp-form-input-addon {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: var(--tp-text-secondary);
background-color: var(--tp-hover-bg);
border: 1px solid var(--tp-input-border);
white-space: nowrap;
}
.tp-form-input-addon:first-child {
border-right: none;
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.tp-form-input-addon:last-child {
border-left: none;
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
/* ===========================
Search Input
=========================== */
.tp-form-search {
position: relative;
}
.tp-form-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--tp-text-secondary);
pointer-events: none;
font-size: 0.875rem;
}
.tp-form-search .tp-form-input {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.tp-form-search-clear {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--tp-text-secondary);
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
}
.tp-form-search:hover .tp-form-search-clear,
.tp-form-search .tp-form-input:focus ~ .tp-form-search-clear {
opacity: 1;
}
.tp-form-search-clear:hover {
background-color: var(--tp-hover-bg);
color: var(--tp-text);
}
/* ===========================
Toggle Switch
=========================== */
.tp-form-toggle {
position: relative;
width: 2.5rem;
height: 1.5rem;
background-color: var(--tp-hover-bg);
border: 1px solid var(--tp-input-border);
border-radius: 9999px;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
flex-shrink: 0;
}
.tp-form-toggle::after {
content: '';
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
width: 1.125rem;
height: 1.125rem;
background-color: white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.tp-form-toggle:checked {
background-color: var(--tp-primary);
border-color: var(--tp-primary);
}
.tp-form-toggle:checked::after {
transform: translateY(-50%) translateX(1rem);
}
.tp-form-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-form-toggle:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Toggle with Label */
.tp-form-toggle-label {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--tp-text);
cursor: pointer;
}
/* ===========================
Form Row
===========================
* The markup of `shopcloud_ui::FormRow` — one line of fields with the submit
* button on the same baseline. It replaces the unused `.tp-form-inline`, which
* described the same idea without saying how a cell is sized and was therefore
* copied as an inline `style` four times over on the ShopcloudHub rights
* surface (I-022c).
*
* Usage — the component writes this, nobody hand-rolls it:
*
*
*/
.tp-form-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
margin: 0;
}
/* Room for what follows in the same form (a fieldset of checkboxes). */
.tp-form-row-space-below {
margin-bottom: 0.85rem;
}
/* `min-width: 0` and not `auto`: a cell holding a `…label + input…
*
*