Falknat
05ddb1e796
1. Добавлен функционал в интерфейс по управлению сертификатами и службой редактирования сертификатов. 2. Добавлена кнопка для добавления прокси и экран редактирования прокси.
108 lines
2.5 KiB
CSS
108 lines
2.5 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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* Certificate Icons */
|
|
.cert-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
margin-right: 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cert-valid {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-green);
|
|
border: 1px solid rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.cert-expired {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-red);
|
|
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
}
|
|
|