815 lines
16 KiB
CSS
815 lines
16 KiB
CSS
/**
|
|
* Users management specific styles
|
|
* static/css/users.css
|
|
*/
|
|
|
|
/* Users Page Header */
|
|
.users-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: var(--spacing-8);
|
|
padding: var(--spacing-6);
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.users-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #059669, #047857);
|
|
}
|
|
|
|
.users-header h1 {
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.users-header p {
|
|
color: var(--gray-500);
|
|
font-size: var(--font-size-lg);
|
|
margin: 0;
|
|
}
|
|
|
|
/* User Statistics */
|
|
.user-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--spacing-6);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--white);
|
|
padding: var(--spacing-6);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
transition: var(--transition);
|
|
border: 1px solid var(--gray-200);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
}
|
|
|
|
.stat-card.admin::before {
|
|
background: linear-gradient(90deg, #fbbf24, #f59e0b);
|
|
}
|
|
|
|
.stat-card.staff::before {
|
|
background: linear-gradient(90deg, var(--gray-500), var(--gray-600));
|
|
}
|
|
|
|
.stat-card.active::before {
|
|
background: linear-gradient(90deg, var(--success-color), #047857);
|
|
}
|
|
|
|
.stat-card.inactive::before {
|
|
background: linear-gradient(90deg, var(--danger-color), #b91c1c);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
color: var(--white);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-icon.admin {
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
}
|
|
|
|
.stat-icon.staff {
|
|
background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
|
|
}
|
|
|
|
.stat-icon.active {
|
|
background: linear-gradient(135deg, var(--success-color), #047857);
|
|
}
|
|
|
|
.stat-icon.inactive {
|
|
background: linear-gradient(135deg, var(--danger-color), #b91c1c);
|
|
}
|
|
|
|
.stat-info h3 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-info p {
|
|
color: var(--gray-500);
|
|
font-size: var(--font-size-sm);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Users Controls */
|
|
.users-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-6);
|
|
padding: var(--spacing-6);
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.search-filters {
|
|
display: flex;
|
|
gap: var(--spacing-4);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: var(--spacing-3);
|
|
color: var(--gray-400);
|
|
z-index: 1;
|
|
}
|
|
|
|
.search-box input {
|
|
padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
|
|
border: 2px solid var(--gray-200);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-sm);
|
|
width: 300px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.search-box input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-select {
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
border: 2px solid var(--gray-200);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-sm);
|
|
background-color: var(--white);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.results-counter {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--gray-600);
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
/* Users Table */
|
|
.users-table-container {
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.users-table th {
|
|
background-color: var(--gray-50);
|
|
padding: var(--spacing-4);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
font-size: var(--font-size-sm);
|
|
border-bottom: 1px solid var(--gray-200);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.users-table th:first-child {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: var(--spacing-4);
|
|
border-bottom: 1px solid var(--gray-100);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.users-table tr.user-row {
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.users-table tr.user-row:hover {
|
|
background-color: var(--gray-50);
|
|
}
|
|
|
|
.users-table tr.user-row:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* User Avatar */
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
);
|
|
color: var(--white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: var(--font-size-sm);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.user-details h4 {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
margin: 0 0 var(--spacing-1) 0;
|
|
}
|
|
|
|
.user-details p {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--gray-500);
|
|
margin: 0;
|
|
}
|
|
|
|
/* User Role Badge */
|
|
.user-role {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.user-role.admin {
|
|
background-color: rgba(251, 191, 36, 0.1);
|
|
color: #d97706;
|
|
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
.user-role.staff {
|
|
background-color: rgba(100, 116, 139, 0.1);
|
|
color: var(--gray-600);
|
|
border: 1px solid rgba(100, 116, 139, 0.3);
|
|
}
|
|
|
|
/* User Status Badge */
|
|
.user-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-status.active {
|
|
background-color: rgba(5, 150, 105, 0.1);
|
|
color: var(--success-color);
|
|
border: 1px solid rgba(5, 150, 105, 0.2);
|
|
}
|
|
|
|
.user-status.inactive {
|
|
background-color: rgba(220, 38, 38, 0.1);
|
|
color: var(--danger-color);
|
|
border: 1px solid rgba(220, 38, 38, 0.2);
|
|
}
|
|
|
|
/* User Actions Dropdown */
|
|
.user-actions {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-trigger {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--spacing-2);
|
|
border-radius: var(--radius);
|
|
transition: var(--transition);
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.dropdown-trigger:hover {
|
|
background-color: var(--gray-100);
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
min-width: 200px;
|
|
background: var(--white);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: var(--z-dropdown);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-10px);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.dropdown-menu.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
width: 100%;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
color: var(--gray-700);
|
|
text-decoration: none;
|
|
border: none;
|
|
background: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: var(--gray-50);
|
|
color: var(--gray-900);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown-item.danger {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.dropdown-item.danger:hover {
|
|
background-color: var(--danger-light);
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.dropdown-item.success {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.dropdown-item.success:hover {
|
|
background-color: var(--success-light);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.dropdown-item:first-child {
|
|
border-top-left-radius: var(--radius-lg);
|
|
border-top-right-radius: var(--radius-lg);
|
|
}
|
|
|
|
.dropdown-item:last-child {
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
border-bottom-right-radius: var(--radius-lg);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background-color: var(--gray-200);
|
|
margin: var(--spacing-1) 0;
|
|
}
|
|
|
|
/* Bulk Actions */
|
|
.bulk-actions-bar {
|
|
position: fixed;
|
|
bottom: var(--spacing-4);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(100px);
|
|
background: var(--white);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
padding: var(--spacing-4) var(--spacing-6);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
z-index: var(--z-dropdown);
|
|
opacity: 0;
|
|
transition: all 0.3s ease-out;
|
|
min-width: 400px;
|
|
}
|
|
|
|
.bulk-actions-bar.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.bulk-actions-info {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--gray-600);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.selected-count {
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.bulk-actions-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
/* User Details Modal */
|
|
.user-details-modal {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.user-profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
margin-bottom: var(--spacing-6);
|
|
padding: var(--spacing-6);
|
|
background: var(--gray-50);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.user-profile-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary-color),
|
|
var(--primary-hover)
|
|
);
|
|
color: var(--white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.user-profile-info h3 {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
.user-profile-info p {
|
|
color: var(--gray-500);
|
|
margin: 0;
|
|
}
|
|
|
|
.user-details-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-4);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--gray-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
/* Password Reset Modal */
|
|
.password-reset-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.password-strength {
|
|
margin-top: var(--spacing-2);
|
|
}
|
|
|
|
.strength-bar {
|
|
height: 4px;
|
|
background-color: var(--gray-200);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.strength-fill {
|
|
height: 100%;
|
|
transition: var(--transition);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.strength-weak {
|
|
background-color: var(--danger-color);
|
|
width: 25%;
|
|
}
|
|
.strength-fair {
|
|
background-color: var(--warning-color);
|
|
width: 50%;
|
|
}
|
|
.strength-good {
|
|
background-color: #10b981;
|
|
width: 75%;
|
|
}
|
|
.strength-strong {
|
|
background-color: var(--success-color);
|
|
width: 100%;
|
|
}
|
|
|
|
.strength-text {
|
|
font-size: var(--font-size-xs);
|
|
margin-top: var(--spacing-1);
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
/* Animation classes */
|
|
.fade-in {
|
|
animation: fadeInUp 0.3s ease-out;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fadeOutDown 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
/* Loading states */
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: -10px 0 0 -10px;
|
|
border: 2px solid var(--primary-color);
|
|
border-top: 2px solid transparent;
|
|
border-radius: var(--radius-full);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Empty state */
|
|
.users-empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-16) var(--spacing-8);
|
|
background: var(--white);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto var(--spacing-6);
|
|
background: var(--gray-100);
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.users-empty-state h3 {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--gray-700);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
.users-empty-state p {
|
|
color: var(--gray-500);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 1024px) {
|
|
.user-details-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 250px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.users-header {
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
text-align: center;
|
|
}
|
|
|
|
.user-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.users-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.search-filters {
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.filter-group {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide less important columns on mobile */
|
|
.users-table th:nth-child(4),
|
|
.users-table td:nth-child(4),
|
|
.users-table th:nth-child(5),
|
|
.users-table td:nth-child(5) {
|
|
display: none;
|
|
}
|
|
|
|
.user-profile-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.bulk-actions-bar {
|
|
left: var(--spacing-3);
|
|
right: var(--spacing-3);
|
|
transform: translateY(100px);
|
|
min-width: auto;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.bulk-actions-bar.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.bulk-actions-buttons {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.user-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.users-table {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.users-table th,
|
|
.users-table td {
|
|
padding: var(--spacing-2);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.user-details h4 {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.user-details p {
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
/* Hide checkbox column on very small screens */
|
|
.users-table th:first-child,
|
|
.users-table td:first-child {
|
|
display: none;
|
|
}
|
|
|
|
.bulk-actions-bar {
|
|
padding: var(--spacing-3);
|
|
}
|
|
}
|