refactor: enhance layout and styling for improved UI consistency and performance
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user