refactor: enhance layout and styling for improved UI consistency and performance

This commit is contained in:
2025-12-17 12:39:36 -05:00
parent b4e2923a2c
commit 3219d4d7f3
2 changed files with 297 additions and 266 deletions

View File

@@ -150,54 +150,70 @@
</div>
</div>
<style>
/* TailAdmin Progress Bar Styles */
progress {
border-radius: var(--radius-lg);
background-color: hsl(var(--color-background));
border: 1px solid hsl(var(--color-neutral));
border-radius: 8px;
background-color: #f1f5f9;
border: none;
width: 100%;
overflow: hidden;
height: 8px;
}
.dark progress {
background-color: #334155;
}
progress[value]::-webkit-progress-bar {
background-color: hsl(var(--color-background));
background-color: #f1f5f9;
border-radius: 8px;
}
.dark progress[value]::-webkit-progress-bar {
background-color: #334155;
}
progress[value]#memory::-webkit-progress-value {
background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
border: 1px solid hsl(var(--color-success));
border-radius: var(--radius-lg);
background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
border-radius: 8px;
}
progress[value]#memory::-moz-progress-bar {
background-color: color-mix(in oklab, hsl(var(--color-success)) 60%, transparent);
border: 1px solid hsl(var(--color-success));
border-radius: var(--radius-lg);
background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
border-radius: 8px;
}
progress[value]#cpu::-webkit-progress-value {
background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
border: 1px solid hsl(var(--color-info));
border-radius: var(--radius-lg);
background: linear-gradient(90deg, #465fff 0%, #818cf8 100%);
border-radius: 8px;
}
progress[value]#cpu::-moz-progress-bar {
background-color: color-mix(in oklab, hsl(var(--color-info)) 60%, transparent);
border: 1px solid hsl(var(--color-info));
border-radius: var(--radius-lg);
background: linear-gradient(90deg, #465fff 0%, #818cf8 100%);
border-radius: 8px;
}
.formRight select {
background-color: hsl(var(--color-background));
border: 1px solid hsl(var(--color-neutral));
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.625rem 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.15s ease;
}
.dark .formRight select {
background-color: #1e293b;
border-color: #334155;
}
.formRight select:focus {
outline: none;
box-shadow: 0 0 0 2px hsl(var(--color-secondary));
border-color: #465fff;
box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.1);
}
</style>