Falknat
02ae56b78c
Большое обновление GUI интерфейс - Добавлен фраемворr Walles - Удалена консольная версия - Проработан интерфейс и дизайн - Добавлено кеширование для быстрой реакции. - Сделан .ps1 сборщик для удобной сборки проекта. - Обновлён Readme
88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
/* ============================================
|
|
Badges Component
|
|
Единая система бейджей
|
|
============================================ */
|
|
|
|
/* Base Badge */
|
|
.badge {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-bold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
backdrop-filter: var(--backdrop-blur-light);
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge-online {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15));
|
|
color: var(--accent-green);
|
|
border: 1px solid rgba(16, 185, 129, 0.4);
|
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.badge-offline {
|
|
background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
|
|
color: var(--accent-red);
|
|
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.badge-pending {
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.15));
|
|
color: var(--accent-yellow);
|
|
border: 1px solid rgba(245, 158, 11, 0.4);
|
|
box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
/* Yes/No Badges */
|
|
.badge-yes {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: var(--accent-green);
|
|
border: 1px solid var(--accent-green);
|
|
}
|
|
|
|
.badge-no {
|
|
background: rgba(100, 116, 139, 0.2);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--text-muted);
|
|
}
|
|
|
|
/* Status Indicator (Dot) */
|
|
.status-indicator {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: var(--radius-full);
|
|
box-shadow: 0 0 8px currentColor;
|
|
}
|
|
|
|
.status-online {
|
|
background: var(--accent-green);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.status-offline {
|
|
background: var(--accent-red);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
/* Mini Tags (для таблиц) */
|
|
.mini-tag {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background: rgba(139, 92, 246, 0.15);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
color: var(--accent-purple-light);
|
|
margin: 2px;
|
|
transition: all var(--transition-base);
|
|
|
|
&:hover {
|
|
background: rgba(139, 92, 246, 0.25);
|
|
}
|
|
}
|
|
|