feat: Добавление статистических карточек и улучшение форм в компонентах ASNsNewManager, DomainsNewManager и IPRangesManager. Обновлены стили для улучшения пользовательского интерфейса и добавлены новые иконки для визуализации данных.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m43s

This commit is contained in:
2025-11-11 19:39:28 +07:00
parent 216e05df9f
commit b34bf4af95
4 changed files with 966 additions and 364 deletions
+136
View File
@@ -216,4 +216,140 @@ button:focus-visible,
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
}
}
/* ===== Animations ===== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeIn 0.4s ease both;
}
/* ===== Statistics Cards ===== */
.card-sm .avatar {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--tblr-border-radius);
}
.card-sm .h2 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
}
/* ===== Form Improvements ===== */
.form-label.required::after {
content: ' *';
color: var(--tblr-danger);
}
.input-icon {
position: relative;
}
.input-icon .input-icon-addon {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
color: var(--tblr-muted);
}
.input-icon .form-control,
.input-icon .form-select {
padding-left: 2.5rem;
}
.input-icon .form-control:focus ~ .input-icon-addon,
.input-icon .form-select:focus ~ .input-icon-addon {
color: var(--tblr-primary);
}
/* Кнопка очистки поиска */
.input-icon .btn-icon {
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
/* ===== Table Improvements ===== */
.table thead th {
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--tblr-muted);
border-bottom: 2px solid var(--tblr-border-color);
}
.table tbody tr {
border-bottom: 1px solid var(--tblr-border-color);
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr.table-active {
background-color: rgba(32, 107, 196, 0.1);
}
.user-select-none {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* ===== Pagination Improvements ===== */
.pagination .page-link {
min-width: 2.5rem;
text-align: center;
transition: all 0.2s ease;
}
.pagination .page-item.active .page-link {
font-weight: 600;
}
/* ===== Card Header Improvements ===== */
.card-header.bg-primary-lt {
background-color: rgba(32, 107, 196, 0.1);
border-bottom: 1px solid rgba(32, 107, 196, 0.2);
}
/* ===== Responsive Improvements ===== */
@media (max-width: 768px) {
.card-sm .avatar {
width: 2.5rem;
height: 2.5rem;
}
.card-sm .h2 {
font-size: 1.25rem;
}
.table-responsive {
font-size: 0.875rem;
}
.btn-group {
flex-wrap: wrap;
}
}