162 lines
3 KiB
CSS
162 lines
3 KiB
CSS
/**
|
||
* PermissionMatrix – glassmorphism and glow for active cells
|
||
*/
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.tableWrap {
|
||
overflow-x: auto;
|
||
border-radius: 12px;
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 0.6rem 0.75rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.table thead th {
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.05em;
|
||
background: rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.table tbody tr:hover {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.cellUser {
|
||
min-width: 160px;
|
||
}
|
||
|
||
.userName {
|
||
display: block;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.userEmail {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.cellRole {
|
||
min-width: 70px;
|
||
text-align: center;
|
||
}
|
||
|
||
.cellActive {
|
||
min-width: 56px;
|
||
text-align: center;
|
||
}
|
||
|
||
.cellActions {
|
||
min-width: 90px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cellEmpty {
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
padding: 1.5rem !important;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 1.75rem;
|
||
padding: 0.2rem 0.4rem;
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
color: var(--text-secondary);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.badgeActive {
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(242, 88, 67, 0.25),
|
||
rgba(242, 88, 67, 0.12)
|
||
);
|
||
border-color: rgba(242, 88, 67, 0.4);
|
||
color: var(--primary-color, #f25843);
|
||
box-shadow: 0 0 10px rgba(242, 88, 67, 0.2);
|
||
}
|
||
|
||
.actionBtn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
margin-right: 4px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 6px;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.actionBtn:hover:not(:disabled) {
|
||
background: rgba(242, 88, 67, 0.2);
|
||
border-color: rgba(242, 88, 67, 0.4);
|
||
color: var(--primary-color, #f25843);
|
||
box-shadow: 0 0 8px rgba(242, 88, 67, 0.25);
|
||
}
|
||
|
||
.actionBtn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.actionBtnDanger:hover:not(:disabled) {
|
||
background: rgba(220, 53, 69, 0.2);
|
||
border-color: rgba(220, 53, 69, 0.4);
|
||
color: #dc3545;
|
||
box-shadow: 0 0 8px rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.empty {
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 12px;
|
||
border: 1px dashed rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
:global(.dark-theme) .tableWrap {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
:global(.dark-theme) .table thead th {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|