4381 lines
84 KiB
CSS
4381 lines
84 KiB
CSS
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
line-height: 1.6;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #333;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 99%;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
display: none;
|
||
}
|
||
|
||
header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 25px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
header h1 {
|
||
margin-bottom: 1.2rem;
|
||
text-align: center;
|
||
color: #2c3e50;
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1.2rem;
|
||
padding: 12px 20px;
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
border-radius: 10px;
|
||
color: white;
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
text-align: center;
|
||
}
|
||
|
||
.user-info span {
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.user-info button {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.user-info button:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
nav button {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
min-width: 140px;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
nav button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||
}
|
||
|
||
.section {
|
||
display: none;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: 25px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section.active {
|
||
display: block;
|
||
animation: fadeIn 0.5s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="datetime-local"],
|
||
textarea,
|
||
select {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
input[type="text"]:focus,
|
||
input[type="password"]:focus,
|
||
input[type="datetime-local"]:focus,
|
||
textarea:focus,
|
||
select:focus {
|
||
outline: none;
|
||
border-color: #3498db;
|
||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
textarea {
|
||
resize: vertical;
|
||
min-height: 120px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
button {
|
||
background: linear-gradient(135deg, #27ae60, #219a52);
|
||
color: white;
|
||
padding: 12px 30px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
|
||
}
|
||
|
||
button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
|
||
}
|
||
|
||
button.delete-btn {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
|
||
}
|
||
|
||
button.delete-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
|
||
}
|
||
|
||
button.edit-btn {
|
||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||
box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
|
||
}
|
||
|
||
button.edit-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
|
||
}
|
||
|
||
button.copy-btn {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
button.copy-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||
}
|
||
|
||
button.restore-btn {
|
||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||
box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
|
||
}
|
||
|
||
button.restore-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
|
||
}
|
||
|
||
button.edit-date-btn {
|
||
background: linear-gradient(135deg, #17a2b8, #138496);
|
||
padding: 6px 12px;
|
||
font-size: 0.85rem;
|
||
box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
|
||
}
|
||
|
||
button.edit-date-btn:hover {
|
||
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
|
||
}
|
||
|
||
#tasks-controls {
|
||
margin-bottom: 20px;
|
||
padding: 15px 20px;
|
||
background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
#tasks-controls label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 0;
|
||
font-weight: normal;
|
||
color: #2c3e50;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#tasks-controls input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.task-card {
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 0;
|
||
margin-bottom: 20px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||
border-left: 5px solid #3498db;
|
||
}
|
||
|
||
.task-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.task-card.deleted {
|
||
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
|
||
border-left-color: #e74c3c;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.task-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 0;
|
||
gap: 20px;
|
||
}
|
||
|
||
.task-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
cursor: pointer;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.task-title:hover {
|
||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.1));
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.task-status {
|
||
padding: 8px 16px;
|
||
border-radius: 25px;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.status-purple {
|
||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||
color: white;
|
||
}
|
||
.status-red {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
color: white;
|
||
}
|
||
.status-orange {
|
||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||
color: white;
|
||
}
|
||
.status-green {
|
||
background: linear-gradient(135deg, #27ae60, #219a52);
|
||
color: white;
|
||
}
|
||
.status-gray {
|
||
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
||
color: white;
|
||
}
|
||
.status-darkred {
|
||
background: linear-gradient(135deg, #8b0000, #660000);
|
||
color: white;
|
||
}
|
||
|
||
.deleted-badge {
|
||
background: #e74c3c;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.copy-badge {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.role-badge {
|
||
font-size: 0.8rem;
|
||
padding: 4px 10px;
|
||
border-radius: 15px;
|
||
margin-left: 8px;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.role-admin {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
color: white;
|
||
}
|
||
.role-creator {
|
||
background: linear-gradient(135deg, #27ae60, #219a52);
|
||
color: white;
|
||
}
|
||
.role-executor {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
color: white;
|
||
}
|
||
|
||
.task-original {
|
||
margin: 10px 0;
|
||
padding: 10px 15px;
|
||
background: linear-gradient(135deg, #e8f4fd, #d4e6f1);
|
||
border-radius: 8px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.task-original small {
|
||
color: #2c3e50;
|
||
font-style: italic;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.task-description {
|
||
margin: 15px 0;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
line-height: 1.6;
|
||
color: #495057;
|
||
}
|
||
|
||
.task-dates-files {
|
||
margin: 15px 0;
|
||
padding: 15px;
|
||
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
||
border-radius: 10px;
|
||
border-left: 4px solid #f39c12;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.task-dates-files .task-dates {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
font-size: 0.95rem;
|
||
color: #856404;
|
||
}
|
||
|
||
.task-dates-files .file-list {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
font-size: 0.95rem;
|
||
color: #856404;
|
||
}
|
||
|
||
.task-dates-files .file-list strong {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.task-dates-files .files-placeholder {
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
}
|
||
|
||
.task-dates-files strong {
|
||
color: #e67e22;
|
||
}
|
||
|
||
.task-assignments {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.assignment {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
padding: 12px 15px;
|
||
border-radius: 10px;
|
||
background: rgba(248, 249, 250, 0.8);
|
||
transition: all 0.3s ease;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.assignment:hover {
|
||
background: rgba(233, 236, 239, 0.8);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.assignment.overdue {
|
||
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
|
||
border: 1px solid #e74c3c;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
|
||
}
|
||
|
||
.assignment-status {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.status-assigned {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
}
|
||
.status-in_progress {
|
||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||
}
|
||
.status-completed {
|
||
background: linear-gradient(135deg, #27ae60, #219a52);
|
||
}
|
||
.status-overdue {
|
||
background: linear-gradient(135deg, #8b0000, #660000);
|
||
}
|
||
|
||
.assignment-dates {
|
||
margin-top: 8px;
|
||
font-size: 0.85rem;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.assignment-dates small {
|
||
display: block;
|
||
margin: 3px 0;
|
||
}
|
||
|
||
.action-buttons {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-buttons button {
|
||
margin-right: 0;
|
||
padding: 8px 16px;
|
||
font-size: 0.9rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.task-actions {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.task-actions button {
|
||
padding: 8px 12px;
|
||
font-size: 1rem;
|
||
border-radius: 8px;
|
||
min-width: auto;
|
||
}
|
||
|
||
.file-list {
|
||
margin-top: 15px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px;
|
||
background: white;
|
||
margin-bottom: 8px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e9ecef;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-item:hover {
|
||
transform: translateX(5px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.file-item a {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
margin-right: 15px;
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.file-item a:hover {
|
||
color: #2980b9;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.file-item small {
|
||
color: #6c757d;
|
||
margin-left: auto;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.task-meta {
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 2px solid #e9ecef;
|
||
}
|
||
|
||
.task-meta small {
|
||
color: #6c757d;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.log-entry {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #e9ecef;
|
||
font-size: 0.95rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.log-entry:hover {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.log-time {
|
||
color: #6c757d;
|
||
font-size: 0.85rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(5px);
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.modal-content {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
margin: 8% auto;
|
||
padding: 30px;
|
||
border-radius: 20px;
|
||
width: 90%;
|
||
max-width: 600px;
|
||
max-height: 85vh;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from { transform: translateY(-50px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
|
||
.close {
|
||
color: #6c757d;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 15px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.close:hover {
|
||
color: #e74c3c;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.checkbox-group {
|
||
max-height: 250px;
|
||
overflow-y: auto;
|
||
border: 2px solid #e9ecef;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.checkbox-item {
|
||
margin: 8px 0;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.checkbox-item:hover {
|
||
background: rgba(52, 152, 219, 0.1);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.checkbox-item label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin: 0;
|
||
font-weight: normal;
|
||
cursor: pointer;
|
||
color: #495057;
|
||
}
|
||
|
||
.checkbox-item input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#login-modal .modal-content {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
|
||
text-align: center;
|
||
max-width: 500px;
|
||
}
|
||
|
||
#login-form .form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
#login-form input[type="text"],
|
||
#login-form input[type="password"] {
|
||
text-align: center; /* Центрирование текста в полях ввода */
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 12px 16px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
#login-form input[type="text"]:focus,
|
||
#login-form input[type="password"]:focus {
|
||
outline: none;
|
||
border-color: #3498db;
|
||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.test-users {
|
||
margin-top: 25px;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||
border-radius: 15px;
|
||
border-left: 5px solid #3498db;
|
||
}
|
||
|
||
.test-users h3 {
|
||
margin-bottom: 15px;
|
||
color: #2c3e50;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.test-users ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.test-users li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #dee2e6;
|
||
color: #495057;
|
||
}
|
||
|
||
.test-users li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.test-users strong {
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.loading {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #6c757d;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.error {
|
||
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
|
||
color: #721c24;
|
||
padding: 15px 20px;
|
||
border-radius: 10px;
|
||
margin: 15px 0;
|
||
border: 1px solid #f5c6cb;
|
||
border-left: 5px solid #e74c3c;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.task-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
}
|
||
|
||
.task-actions {
|
||
position: static;
|
||
margin-top: 15px;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
nav {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 95%;
|
||
margin: 5% auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.user-info {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.assignment {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.action-buttons {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
#login-form input[type="text"],
|
||
#login-form input[type="password"] {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.section {
|
||
padding: 15px;
|
||
}
|
||
|
||
.task-card {
|
||
padding: 15px;
|
||
}
|
||
|
||
.task-title {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.task-status {
|
||
font-size: 0.8rem;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.task-actions {
|
||
gap: 5px;
|
||
}
|
||
|
||
.task-actions button {
|
||
padding: 8px 12px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
nav button {
|
||
padding: 10px 15px;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(135deg, #2980b9, #1f618d);
|
||
}
|
||
|
||
button:focus,
|
||
input:focus,
|
||
textarea:focus,
|
||
select:focus {
|
||
outline: 2px solid #3498db;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
@media print {
|
||
.task-actions,
|
||
nav,
|
||
.user-info button {
|
||
display: none !important;
|
||
}
|
||
|
||
.task-card {
|
||
break-inside: avoid;
|
||
box-shadow: none;
|
||
border: 1px solid #ddd;
|
||
}
|
||
}
|
||
|
||
.filters {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.filter-group label {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.filter-group input,
|
||
.filter-group select {
|
||
padding: 8px 12px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.user-search {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.user-search input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.status-yellow {
|
||
background: linear-gradient(135deg, #ffc107, #e0a800);
|
||
color: white;
|
||
}
|
||
|
||
.task-card.closed {
|
||
background: linear-gradient(135deg, #e9ecef, #dee2e6);
|
||
border-left-color: #6c757d;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.closed-badge {
|
||
background: #6c757d;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.rework-comment {
|
||
margin: 10px 0;
|
||
padding: 12px 15px;
|
||
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
||
border-radius: 8px;
|
||
border-left: 4px solid #ffc107;
|
||
color: #856404;
|
||
}
|
||
|
||
.assignment-rework-comment {
|
||
margin-top: 8px;
|
||
padding: 8px;
|
||
background: #fff3cd;
|
||
border-radius: 6px;
|
||
border-left: 3px solid #ffc107;
|
||
}
|
||
|
||
.assignment.rework {
|
||
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
||
border: 1px solid #ffc107;
|
||
}
|
||
|
||
button.rework-btn {
|
||
background: linear-gradient(135deg, #ffc107, #e0a800);
|
||
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
|
||
}
|
||
|
||
button.rework-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
|
||
}
|
||
|
||
button.close-btn {
|
||
background: linear-gradient(135deg, #6c757d, #5a6268);
|
||
box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
|
||
}
|
||
|
||
button.close-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
|
||
}
|
||
|
||
button.reopen-btn {
|
||
background: linear-gradient(135deg, #20c997, #1ea085);
|
||
box-shadow: 0 4px 15px rgba(32, 201, 151, 0.3);
|
||
}
|
||
|
||
button.reopen-btn:hover {
|
||
box-shadow: 0 6px 20px rgba(32, 201, 151, 0.4);
|
||
}
|
||
|
||
.show-deleted-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: normal;
|
||
color: #2c3e50;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.show-deleted-label input {
|
||
margin: 0;
|
||
}
|
||
|
||
.show-deleted-label[style*="display: none"] {
|
||
display: none !important;
|
||
}
|
||
|
||
.deadline-badge {
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.deadline-48h {
|
||
background: linear-gradient(135deg, #ffc107, #e0a800);
|
||
color: #856404;
|
||
}
|
||
|
||
.deadline-24h {
|
||
background: linear-gradient(135deg, #fd7e14, #e8590c);
|
||
color: white;
|
||
}
|
||
|
||
.deadline-indicator {
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.7rem;
|
||
margin-left: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.task-title .deadline-badge {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.filter-group select {
|
||
min-width: 150px;
|
||
}
|
||
|
||
.filters {
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.filters {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.filter-group select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.admin-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
display: none;
|
||
}
|
||
|
||
.admin-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 2px solid #e9ecef;
|
||
}
|
||
|
||
.admin-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
border-bottom: 2px solid #e9ecef;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.admin-tab {
|
||
padding: 10px 20px;
|
||
background: #f8f9fa;
|
||
border: none;
|
||
border-radius: 8px 8px 0 0;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.admin-tab:hover {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.admin-tab.active {
|
||
background: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
.admin-section {
|
||
display: none;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.admin-section.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.users-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.users-table th,
|
||
.users-table td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.users-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.users-table tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.user-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.user-actions button {
|
||
padding: 6px 12px;
|
||
font-size: 0.85rem;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.ldap-badge {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.admin-badge {
|
||
background: #e74c3c;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-row .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.password-fields {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.modal-lg {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.search-container {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.search-container input {
|
||
flex: 1;
|
||
}
|
||
|
||
.stats-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.stat-card h3 {
|
||
margin: 0 0 10px 0;
|
||
color: #495057;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-desc {
|
||
color: #6c757d;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.stat-card.admin-stat {
|
||
border-left-color: #e74c3c;
|
||
}
|
||
|
||
.stat-card.ldap-stat {
|
||
border-left-color: #2ecc71;
|
||
}
|
||
|
||
.stat-card.local-stat {
|
||
border-left-color: #f39c12;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.error {
|
||
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
|
||
color: #721c24;
|
||
padding: 15px 20px;
|
||
border-radius: 10px;
|
||
margin: 15px 0;
|
||
border: 1px solid #f5c6cb;
|
||
border-left: 5px solid #e74c3c;
|
||
text-align: center;
|
||
}
|
||
|
||
.task-number {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.8rem;
|
||
margin-right: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.task-header .task-title .expand-icon {
|
||
font-size: 0.8rem;
|
||
color: #6c757d;
|
||
margin-left: auto;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.task-content {
|
||
padding: 20px;
|
||
border-top: 1px solid #e9ecef;
|
||
margin-top: 10px;
|
||
animation: fadeIn 0.3s ease;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease;
|
||
max-height: 0;
|
||
}
|
||
|
||
.task-content.expanded {
|
||
max-height: 2000px;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.tasks-no-date-btn {
|
||
background: linear-gradient(135deg, #17a2b8, #138496);
|
||
box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
|
||
}
|
||
|
||
.tasks-no-date-btn.active {
|
||
background: linear-gradient(135deg, #138496, #117a8b);
|
||
box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
|
||
}
|
||
|
||
.no-date-badge {
|
||
background: linear-gradient(135deg, #6c757d, #5a6268);
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.task-dates-files {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.task-dates-files .task-dates,
|
||
.task-dates-files .file-list {
|
||
min-width: 100%;
|
||
}
|
||
}
|
||
/* Стили для иконок файлов */
|
||
.file-icons-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-icon-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 80px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.file-icon-container:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.file-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.file-icon:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.file-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 20px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.file-extension {
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||
z-index: 1;
|
||
}
|
||
|
||
.file-name {
|
||
margin-top: 5px;
|
||
font-size: 0.75rem;
|
||
color: #495057;
|
||
text-align: center;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.file-download-link {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
width: 100%;
|
||
}
|
||
|
||
.file-download-link:hover .file-name {
|
||
color: #3498db;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Тултип при наведении */
|
||
.file-icon-container::before {
|
||
content: attr(title);
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.file-icon-container:hover::before {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.file-icons-container {
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.file-icon-container {
|
||
width: 70px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.file-extension {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.file-icons-container {
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-icon-container {
|
||
width: 60px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
}
|
||
|
||
.file-extension {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
.no-files {
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Сделаем файлы видимыми всегда */
|
||
.task-dates-files .file-list {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
font-size: 0.95rem;
|
||
color: #856404;
|
||
}
|
||
|
||
.task-dates-files .file-list strong {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Уменьшим отступы для компактности */
|
||
.task-dates-files {
|
||
margin: 10px 0;
|
||
padding: 12px;
|
||
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
||
border-radius: 10px;
|
||
border-left: 4px solid #f39c12;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
/* Стили для иконок файлов */
|
||
.file-icons-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-icon-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 80px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.file-icon-container:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.file-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.file-icon:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.file-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 20px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.file-extension {
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||
z-index: 1;
|
||
padding: 0 5px;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
max-width: 100%;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
/* Для коротких текстов (1-2 символа) */
|
||
.file-extension.short {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* Для средних текстов (3-4 символа) */
|
||
.file-extension.medium {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Для длинных текстов (5+ символов) */
|
||
.file-extension.long {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.file-name {
|
||
margin-top: 5px;
|
||
font-size: 0.75rem;
|
||
color: #495057;
|
||
text-align: center;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.file-download-link {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
width: 100%;
|
||
}
|
||
|
||
.file-download-link:hover .file-name {
|
||
color: #3498db;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Тултип при наведении */
|
||
.file-icon-container::before {
|
||
content: attr(title);
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
z-index: 100;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.file-icon-container:hover::before {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.file-icons-container {
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.file-icon-container {
|
||
width: 70px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.file-extension {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.file-extension.short {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.file-extension.medium {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.file-extension.long {
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.file-icons-container {
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-icon-container {
|
||
width: 60px;
|
||
}
|
||
|
||
.file-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
}
|
||
|
||
.file-extension {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.file-extension.short {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.file-extension.medium {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.file-extension.long {
|
||
font-size: 0.55rem;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
/* Добавьте эти стили в style.css */
|
||
|
||
.assignments-container {
|
||
margin-top: 10px;
|
||
border: 1px solid #e1e5e9;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.assignments-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e1e5e9;
|
||
}
|
||
|
||
.assignment-filter-input {
|
||
flex: 1;
|
||
padding: 6px 10px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.assignment-filter-input:focus {
|
||
outline: none;
|
||
border-color: #3498db;
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.filter-count {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
background: #e9ecef;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.assignments-scroll-container {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
/* Стили для скроллбара */
|
||
.assignments-scroll-container::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.assignments-scroll-container::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.assignments-scroll-container::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.assignments-scroll-container::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
/* Стили для отдельных исполнителей */
|
||
.assignment {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 8px;
|
||
margin-bottom: 8px;
|
||
background: white;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 6px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.assignment:hover {
|
||
background: #f8f9fa;
|
||
border-color: #dee2e6;
|
||
}
|
||
|
||
.assignment:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
/* Добавить в стили */
|
||
.kanban-section {
|
||
padding: 20px;
|
||
}
|
||
|
||
.kanban-board {
|
||
background: #f5f5f5;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
min-height: 70vh;
|
||
}
|
||
|
||
.kanban-controls {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.kanban-period {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.kanban-period label {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kanban-period select {
|
||
padding: 8px 15px;
|
||
border: 2px solid #3498db;
|
||
border-radius: 5px;
|
||
background: white;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.kanban-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.kanban-stats span {
|
||
font-weight: bold;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.refresh-btn {
|
||
padding: 8px 15px;
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.refresh-btn:hover {
|
||
background: #2980b9;
|
||
}
|
||
|
||
.kanban-columns {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.kanban-column {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
min-height: 500px;
|
||
}
|
||
|
||
.kanban-column-header {
|
||
padding: 15px;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.kanban-column-header h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.kanban-count {
|
||
background: rgba(255,255,255,0.3);
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kanban-column-body {
|
||
padding: 15px;
|
||
min-height: 450px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.kanban-empty {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #95a5a6;
|
||
font-style: italic;
|
||
}
|
||
|
||
.kanban-card {
|
||
background: white;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
cursor: move;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.kanban-card:hover {
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||
transform: translateY(-2px);
|
||
border-color: #3498db;
|
||
}
|
||
|
||
.kanban-card.dragging {
|
||
opacity: 0.5;
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
.kanban-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.kanban-task-id {
|
||
font-size: 12px;
|
||
color: #7f8c8d;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kanban-task-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
.kanban-task-actions button {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.kanban-task-actions button:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.kanban-task-title {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.kanban-task-title:hover {
|
||
color: #3498db;
|
||
}
|
||
|
||
.kanban-task-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.kanban-deadline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.kanban-date {
|
||
color: #e74c3c;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kanban-no-date {
|
||
color: #95a5a6;
|
||
font-style: italic;
|
||
}
|
||
|
||
.kanban-assignees {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.kanban-assignee {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #3498db;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kanban-no-assignee {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.kanban-more-assignees {
|
||
font-size: 10px;
|
||
color: #7f8c8d;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.kanban-task-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
color: #7f8c8d;
|
||
border-top: 1px solid #f0f0f0;
|
||
padding-top: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.kanban-creator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.kanban-files {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 1200px) {
|
||
.kanban-columns {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.kanban-columns {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.kanban-controls {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
align-items: stretch;
|
||
}
|
||
}
|
||
.error-message {
|
||
background: #ffebee;
|
||
border: 1px solid #f44336;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
color: #c62828;
|
||
margin: 20px;
|
||
}
|
||
|
||
.retry-btn {
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.retry-btn:hover {
|
||
background: #45a049;
|
||
}
|
||
.kanban-filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border: 1px solid #e9ecef;
|
||
}
|
||
|
||
.kanban-period, .kanban-filter-type {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.kanban-period label, .kanban-filter-type label {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.kanban-period select, .kanban-filter-type select {
|
||
padding: 8px 12px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
background: white;
|
||
font-size: 14px;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.kanban-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.filter-title {
|
||
font-weight: 600;
|
||
color: #495057;
|
||
background: #e9ecef;
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.task-count {
|
||
color: #6c757d;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.refresh-btn {
|
||
background: #6c757d;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.refresh-btn:hover {
|
||
background: #5a6268;
|
||
}
|
||
|
||
.kanban-task-role {
|
||
font-size: 16px;
|
||
cursor: help;
|
||
margin: 0 5px;
|
||
}
|
||
.kanban-column[data-status="overdue"] .kanban-column-body,
|
||
.kanban-column[data-status="assigned"] .kanban-column-body {
|
||
opacity: 0.6;
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
.kanban-column[data-status="overdue"] .kanban-card,
|
||
.kanban-column[data-status="assigned"] .kanban-card {
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
.kanban-column[data-status="overdue"] .kanban-card:hover,
|
||
.kanban-column[data-status="assigned"] .kanban-card:hover {
|
||
transform: none !important;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
||
}
|
||
/* Добавим в существующий style.css */
|
||
|
||
.profile-card {
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.profile-card p {
|
||
margin: 10px 0;
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.profile-card p:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.notification-settings {
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.checkbox-label input[type="checkbox"] {
|
||
margin-right: 10px;
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.checkbox-label span {
|
||
font-weight: 500;
|
||
}
|
||
|
||
#notification-email {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
#notification-email:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
small {
|
||
color: #666;
|
||
font-size: 12px;
|
||
display: block;
|
||
margin-top: 5px;
|
||
}
|
||
/* ИСПОЛНИТЕЛИ В ШАПКЕ ЗАДАЧИ */
|
||
.executor-logins {
|
||
font-size: 12px;
|
||
color: #666;
|
||
background: #f5f5f5;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
margin-left: 8px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.role-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.executor-logins-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.executor-login-badge {
|
||
background: #e9ecef;
|
||
color: #495057;
|
||
padding: 1px 6px;
|
||
border-radius: 10px;
|
||
font-size: 11px;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
/* public/admin-doc.html */
|
||
/* public/admin-doc.html */
|
||
|
||
/* Цвета для кнопок навигации */
|
||
.nav-btn.create {
|
||
background: linear-gradient(135deg, #27ae60, #219a52);
|
||
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
|
||
}
|
||
.nav-btn.tasks {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
.nav-btn.doc {
|
||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||
box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
|
||
}
|
||
.nav-btn.kanban {
|
||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||
box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
|
||
}
|
||
.nav-btn.help {
|
||
background: linear-gradient(135deg, #17a2b8, #138496);
|
||
box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
|
||
}
|
||
.nav-btn.profile {
|
||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
|
||
}
|
||
.nav-btn.admin {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
|
||
}
|
||
|
||
/* Эффекты при наведении сохраняются */
|
||
.nav-btn.create:hover { box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4); }
|
||
.nav-btn.tasks:hover { box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); }
|
||
.nav-btn.doc:hover { box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4); }
|
||
.nav-btn.kanban:hover { box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4); }
|
||
.nav-btn.help:hover { box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4); }
|
||
.nav-btn.profile:hover { box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4); }
|
||
.nav-btn.admin:hover { box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); }
|
||
/* doc */
|
||
|
||
|
||
|
||
/* Кнопки выбора времени */
|
||
.time-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.date-btn {
|
||
flex: 1;
|
||
padding: 10px 15px;
|
||
background: #f8f9fa;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
color: #495057;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
.date-btn:hover {
|
||
background: #f2f4f7;
|
||
border-color: #3d94eb;
|
||
transform: translateY(-2px);
|
||
}
|
||
.time-btn {
|
||
flex: 1;
|
||
padding: 10px 15px;
|
||
background: #f8f9fa;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
color: #495057;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
.time-btn:hover {
|
||
background: #e9ecef;
|
||
border-color: #dee2e6;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.time-btn.active {
|
||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||
color: white;
|
||
border-color: #2980b9;
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
.time-btn.active:hover {
|
||
background: linear-gradient(135deg, #2980b9, #1f618d);
|
||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||
}
|
||
|
||
.time-btn i {
|
||
font-size: 16px;
|
||
}
|
||
/* Добавьте в конец style.css */
|
||
.task-card .task-meta {
|
||
padding: 10px 20px;
|
||
background: #f8f9fa;
|
||
border-top: 1px solid #e9ecef;
|
||
border-radius: 0 0 15px 15px;
|
||
margin-top: 0;
|
||
font-size: 0.85rem;
|
||
color: #6c757d;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.task-card .task-content {
|
||
border-top: none;
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.task-card.deleted .task-meta {
|
||
background: #f5c6cb;
|
||
color: #721c24;
|
||
}
|
||
|
||
.task-card.closed .task-meta {
|
||
background: #e9ecef;
|
||
color: #6c757d;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.task-card .task-meta {
|
||
padding: 8px 15px;
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
/* Стили для выбора типа задачи */
|
||
.task-type-selector {
|
||
margin-bottom: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.task-type-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between; /* Равномерное распределение */
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.task-type-btn {
|
||
flex: 1 1 calc(11.11% - 10px); /* 9 кнопок = примерно 11.11% каждая */
|
||
min-width: 100px;
|
||
max-width: 150px;
|
||
padding: 12px 8px;
|
||
border: 2px solid #e0e0e0;
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 95px;
|
||
font-size: 12px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
color: #333; /* Темный цвет текста для неактивных кнопок */
|
||
}
|
||
|
||
.task-type-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: transparent;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.task-type-btn:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* Цвета для разных типов задач при наведении и активности */
|
||
.task-type-btn[data-type="regular"]:hover {
|
||
border-color: #3498db;
|
||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||
}
|
||
.task-type-btn[data-type="regular"].active {
|
||
border-color: #2980b9;
|
||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="document"]:hover {
|
||
border-color: #9b59b6;
|
||
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
|
||
}
|
||
.task-type-btn[data-type="document"].active {
|
||
border-color: #8e44ad;
|
||
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(155, 89, 182, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="it"]:hover {
|
||
border-color: #2ecc71;
|
||
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
|
||
}
|
||
.task-type-btn[data-type="it"].active {
|
||
border-color: #27ae60;
|
||
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(46, 204, 113, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="ahch"]:hover {
|
||
border-color: #e67e22;
|
||
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
|
||
}
|
||
.task-type-btn[data-type="ahch"].active {
|
||
border-color: #d35400;
|
||
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(230, 126, 34, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="psychologist"]:hover {
|
||
border-color: #e74c3c;
|
||
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
|
||
}
|
||
.task-type-btn[data-type="psychologist"].active {
|
||
border-color: #c0392b;
|
||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(231, 76, 60, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="speech_therapist"]:hover {
|
||
border-color: #1abc9c;
|
||
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
|
||
}
|
||
.task-type-btn[data-type="speech_therapist"].active {
|
||
border-color: #16a085;
|
||
background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(26, 188, 156, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="hr"]:hover {
|
||
border-color: #f39c12;
|
||
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
|
||
}
|
||
.task-type-btn[data-type="hr"].active {
|
||
border-color: #e67e22;
|
||
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(243, 156, 18, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="certificate"]:hover {
|
||
border-color: #34495e;
|
||
background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
|
||
}
|
||
.task-type-btn[data-type="certificate"].active {
|
||
border-color: #2c3e50;
|
||
background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(52, 73, 94, 0.3);
|
||
}
|
||
|
||
.task-type-btn[data-type="e_journal"]:hover {
|
||
border-color: #8e44ad;
|
||
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
|
||
}
|
||
.task-type-btn[data-type="e_journal"].active {
|
||
border-color: #7d3c98;
|
||
background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
|
||
color: white;
|
||
box-shadow: 0 6px 12px rgba(142, 68, 173, 0.3);
|
||
}
|
||
|
||
.task-type-btn.active::before {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.task-type-btn i {
|
||
font-size: 20px;
|
||
margin-bottom: 8px;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.task-type-btn:hover i {
|
||
color: #333;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.task-type-btn.active i {
|
||
color: white;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Цвета иконок для неактивных кнопок */
|
||
.task-type-btn[data-type="regular"] i {
|
||
color: #3498db;
|
||
}
|
||
.task-type-btn[data-type="document"] i {
|
||
color: #9b59b6;
|
||
}
|
||
.task-type-btn[data-type="it"] i {
|
||
color: #2ecc71;
|
||
}
|
||
.task-type-btn[data-type="ahch"] i {
|
||
color: #e67e22;
|
||
}
|
||
.task-type-btn[data-type="psychologist"] i {
|
||
color: #e74c3c;
|
||
}
|
||
.task-type-btn[data-type="speech_therapist"] i {
|
||
color: #1abc9c;
|
||
}
|
||
.task-type-btn[data-type="hr"] i {
|
||
color: #f39c12;
|
||
}
|
||
.task-type-btn[data-type="certificate"] i {
|
||
color: #34495e;
|
||
}
|
||
.task-type-btn[data-type="e_journal"] i {
|
||
color: #8e44ad;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 1400px) {
|
||
.task-type-btn {
|
||
flex: 1 1 calc(16.66% - 10px); /* 6 в ряд */
|
||
min-width: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.task-type-btn {
|
||
flex: 1 1 calc(20% - 10px); /* 5 в ряд */
|
||
min-width: 110px;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.task-type-btn {
|
||
flex: 1 1 calc(25% - 10px); /* 4 в ряд */
|
||
min-width: 100px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.task-type-btn {
|
||
flex: 1 1 calc(33.333% - 10px); /* 3 в ряд */
|
||
min-width: 90px;
|
||
min-height: 85px;
|
||
}
|
||
.task-type-btn i {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.task-type-btn {
|
||
flex: 1 1 calc(50% - 10px); /* 2 в ряд */
|
||
min-width: 120px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.task-type-btn {
|
||
flex: 1 1 100%; /* 1 в ряд */
|
||
min-width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Стили для календаря */
|
||
.calendar-wrapper {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.calendar-header {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
background: #f8f9fa;
|
||
border-bottom: 2px solid #dee2e6;
|
||
}
|
||
|
||
.calendar-day-header {
|
||
padding: 12px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #495057;
|
||
border-right: 1px solid #dee2e6;
|
||
}
|
||
|
||
.calendar-day-header:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.calendar-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
grid-auto-rows: 120px;
|
||
}
|
||
|
||
.calendar-day {
|
||
border-right: 1px solid #dee2e6;
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding: 8px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.calendar-day.empty-day {
|
||
background-color: #d4edda !important; /* светло-зеленый */
|
||
}
|
||
|
||
.calendar-day.busy-day {
|
||
background-color: #f8d7da !important; /* розовый */
|
||
}
|
||
|
||
.calendar-day.today {
|
||
background-color: #e7f3ff !important;
|
||
border: 2px solid #007bff;
|
||
}
|
||
|
||
.calendar-day.weekend {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.calendar-day.empty {
|
||
background-color: #f8f9fa;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.calendar-date {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.today-badge {
|
||
background: #007bff;
|
||
color: white;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.calendar-tasks {
|
||
max-height: calc(100% - 25px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.calendar-task {
|
||
background: white;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
padding: 4px 6px;
|
||
margin-bottom: 4px;
|
||
font-size: 12px;
|
||
cursor: move;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.calendar-task:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.calendar-task.dragging {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.calendar-task-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.calendar-task-id {
|
||
font-size: 10px;
|
||
color: #6c757d;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.calendar-task-title {
|
||
cursor: pointer;
|
||
color: #007bff;
|
||
display: inline;
|
||
}
|
||
|
||
.calendar-task-title:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.calendar-task-status {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.calendar-task-status.assigned { background: #e74c3c; }
|
||
.calendar-task-status.in_progress { background: #f39c12; }
|
||
.calendar-task-status.rework { background: #f1c40f; }
|
||
.calendar-task-status.completed { background: #2ecc71; }
|
||
|
||
.no-tasks {
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.more-tasks {
|
||
color: #007bff;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
padding: 2px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.more-tasks:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.calendar-navigation {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.month-nav-btn {
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.month-nav-btn:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.current-month {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
min-width: 150px;
|
||
text-align: center;
|
||
}
|
||
|
||
.today-btn {
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.today-btn:hover {
|
||
background: #218838;
|
||
}
|
||
|
||
.calendar-legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.legend-color {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.legend-color.empty-day {
|
||
background-color: #d4edda;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.legend-color.normal-day {
|
||
background-color: white;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.legend-color.busy-day {
|
||
background-color: #f8d7da;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
.drag-over {
|
||
background-color: #e7f3ff !important;
|
||
border: 2px dashed #007bff !important;
|
||
}
|
||
.chat-btn {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin-right: 5px;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.chat-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.chat-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* admin */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.stat-card.task-stat {
|
||
border-left-color: #3498db;
|
||
}
|
||
|
||
.stat-card.user-stat {
|
||
border-left-color: #2ecc71;
|
||
}
|
||
|
||
.stat-card.file-stat {
|
||
border-left-color: #9b59b6;
|
||
}
|
||
|
||
.stat-card.status-stat {
|
||
border-left-color: #f39c12;
|
||
}
|
||
|
||
.stat-card h3 {
|
||
margin: 0 0 15px 0;
|
||
color: #495057;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-desc {
|
||
color: #6c757d;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-subitems {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.stat-subitem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.stat-subitem:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.stat-subitem .label {
|
||
color: #6c757d;
|
||
}
|
||
|
||
.stat-subitem .value {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.recent-tasks {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.recent-tasks h3 {
|
||
margin: 0 0 15px 0;
|
||
color: #495057;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.task-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-bottom: 1px solid #e9ecef;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.task-item:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.task-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.task-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.task-title {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.task-meta {
|
||
font-size: 0.85rem;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.task-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.view-task-btn {
|
||
padding: 6px 12px;
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.view-task-btn:hover {
|
||
background: #2980b9;
|
||
}
|
||
|
||
.percentage-bar {
|
||
height: 6px;
|
||
background: #e9ecef;
|
||
border-radius: 3px;
|
||
margin-top: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.percentage-fill {
|
||
height: 100%;
|
||
background: #3498db;
|
||
border-radius: 3px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.users-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.users-table th,
|
||
.users-table td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.users-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.users-table tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.user-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ldap-badge {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.admin-badge {
|
||
background: #e74c3c;
|
||
color: white;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-row .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.modal-lg {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.search-container {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.search-container input {
|
||
flex: 1;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 1.2rem;
|
||
color: #2c3e50;
|
||
margin-top: 5px;
|
||
}
|
||
/* admin */
|
||
/* style.css */
|
||
/* Основные стили для School CRM */
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
/* Модальные окна */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
overflow: auto;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #fff;
|
||
margin: 5% auto;
|
||
padding: 30px;
|
||
border-radius: 8px;
|
||
width: 90%;
|
||
max-width: 500px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
position: relative;
|
||
}
|
||
|
||
.modal-content h2 {
|
||
margin-bottom: 20px;
|
||
color: #2c3e50;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-content h3 {
|
||
margin-bottom: 15px;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.modal-lg {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 15px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close:hover {
|
||
color: #333;
|
||
}
|
||
|
||
/* Формы */
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
color: #555;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: #3498db;
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-row .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
button {
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
button:hover {
|
||
background: #2980b9;
|
||
}
|
||
|
||
button:disabled {
|
||
background: #95a5a6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Административная панель */
|
||
.admin-container {
|
||
padding: 20px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.admin-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 2px solid #e0e6ed;
|
||
}
|
||
|
||
.admin-header h1 {
|
||
color: #2c3e50;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.user-info span {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
background: #e8f4fc;
|
||
padding: 8px 15px;
|
||
border-radius: 20px;
|
||
border: 1px solid #3498db;
|
||
}
|
||
|
||
.user-info button {
|
||
background: #2c3e50;
|
||
padding: 8px 16px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.user-info button:hover {
|
||
background: #34495e;
|
||
}
|
||
|
||
/* Вкладки */
|
||
.admin-tabs {
|
||
display: flex;
|
||
gap: 5px;
|
||
margin-bottom: 30px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 5px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.admin-tab {
|
||
flex: 1;
|
||
padding: 12px 20px;
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.admin-tab:hover {
|
||
background: #f8f9fa;
|
||
color: #3498db;
|
||
}
|
||
|
||
.admin-tab.active {
|
||
background: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
/* Секции */
|
||
.admin-section {
|
||
display: none;
|
||
animation: fadeIn 0.3s ease-in;
|
||
}
|
||
|
||
.admin-section.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* Дашборд - сетка статистики */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.stat-card h3 {
|
||
margin-bottom: 15px;
|
||
color: #2c3e50;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-desc {
|
||
color: #666;
|
||
font-size: 13px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.stat-subitems {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stat-subitem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 6px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.stat-subitem:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.stat-subitem .label {
|
||
color: #666;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.stat-subitem .value {
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 14px;
|
||
color: #27ae60;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Прогресс бар */
|
||
.percentage-bar {
|
||
height: 6px;
|
||
background: #ecf0f1;
|
||
border-radius: 3px;
|
||
margin: 15px 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.percentage-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #3498db, #2ecc71);
|
||
border-radius: 3px;
|
||
transition: width 1s ease-in-out;
|
||
}
|
||
|
||
/* Управление пользователями */
|
||
.search-container {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-container input {
|
||
flex: 1;
|
||
padding: 10px 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.search-container input:focus {
|
||
outline: none;
|
||
border-color: #3498db;
|
||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.users-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: white;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.users-table th {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
border-bottom: 2px solid #e0e6ed;
|
||
font-size: 13px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.users-table td {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.users-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.users-table tr:hover {
|
||
background: #f8fafd;
|
||
}
|
||
|
||
.users-table .loading,
|
||
.users-table .error {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
|
||
.users-table .error {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
/* Бейджи */
|
||
.ldap-badge,
|
||
.admin-badge {
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.ldap-badge {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.admin-badge {
|
||
background: #ffebee;
|
||
color: #d32f2f;
|
||
}
|
||
|
||
/* Действия пользователя */
|
||
.user-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.edit-btn,
|
||
.delete-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.edit-btn {
|
||
background: #f0f7ff;
|
||
color: #3498db;
|
||
border: 1px solid #3498db;
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
background: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
.delete-btn {
|
||
background: #fff5f5;
|
||
color: #e74c3c;
|
||
border: 1px solid #e74c3c;
|
||
}
|
||
|
||
.delete-btn:hover:not(:disabled) {
|
||
background: #e74c3c;
|
||
color: white;
|
||
}
|
||
|
||
.delete-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Тестовые пользователи */
|
||
.test-users {
|
||
margin-top: 25px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 6px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.test-users h3 {
|
||
margin-bottom: 10px;
|
||
color: #2c3e50;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.test-users ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.test-users li {
|
||
padding: 5px 0;
|
||
color: #666;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.test-users strong {
|
||
color: #2c3e50;
|
||
}
|
||
|
||
/* Сообщения об ошибках */
|
||
.error-message {
|
||
text-align: center;
|
||
padding: 40px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.error-message p {
|
||
color: #e74c3c;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* Заголовки секций */
|
||
.admin-section h2 {
|
||
margin-bottom: 20px;
|
||
color: #2c3e50;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #e0e6ed;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 1200px) {
|
||
.stats-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.admin-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
}
|
||
|
||
.user-info {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.admin-tabs {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-row {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.modal-content {
|
||
margin: 10% auto;
|
||
width: 95%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.users-table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.search-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.filter-row {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.admin-container {
|
||
padding: 15px;
|
||
}
|
||
|
||
.admin-header h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.user-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.edit-btn,
|
||
.delete-btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Анимации */
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
.stat-card:hover .stat-value {
|
||
animation: pulse 1s ease-in-out;
|
||
}
|
||
|
||
/* Кастомные стили для разных типов статистики */
|
||
.task-stat {
|
||
border-top: 4px solid #3498db;
|
||
}
|
||
|
||
.status-stat {
|
||
border-top: 4px solid #9b59b6;
|
||
}
|
||
|
||
.user-stat {
|
||
border-top: 4px solid #2ecc71;
|
||
}
|
||
|
||
.file-stat {
|
||
border-top: 4px solid #e74c3c;
|
||
}
|
||
|
||
/* Скроллбар */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
button.btn-primary {
|
||
width: 100%; /* Занимает всю доступную ширину */
|
||
max-width: 600px; /* Максимальная ширина */
|
||
padding: 14px 20px; /* Увеличиваем внутренние отступы */
|
||
font-size: 1.1rem; /* Увеличиваем шрифт */
|
||
}
|
||
/* Дополнительные стили для детальной статистики */
|
||
.filters-container {
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-group {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.filter-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.filter-group select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.users-stats-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: #fff;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.users-stats-table th {
|
||
background: #f8f9fa;
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: #333;
|
||
border-bottom: 2px solid #dee2e6;
|
||
}
|
||
|
||
.users-stats-table td {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid #dee2e6;
|
||
}
|
||
|
||
.users-stats-table tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.statuses-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-assigned { background: #e3f2fd; color: #1976d2; }
|
||
.status-in-progress { background: #fff3e0; color: #f57c00; }
|
||
.status-completed { background: #e8f5e9; color: #388e3c; }
|
||
.status-overdue { background: #ffebee; color: #d32f2f; }
|
||
.status-rework { background: #f3e5f5; color: #7b1fa2; }
|
||
|
||
.status-count {
|
||
font-weight: 600;
|
||
min-width: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
.no-statuses {
|
||
color: #999;
|
||
font-style: italic;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.user-role {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.user-role.admin { background: #ffebee; color: #d32f2f; }
|
||
.user-role.teacher { background: #e3f2fd; color: #1976d2; }
|
||
|
||
.stat-numbers {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.stat-number {
|
||
background: #f8f9fa;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.export-btn {
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.export-btn:hover {
|
||
background: #218838;
|
||
}
|
||
|
||
.reset-btn {
|
||
background: #1976d2;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.reset-btn:hover {
|
||
background: #e00707;
|
||
}
|
||
|
||
.no-data {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
font-style: italic;
|
||
}
|
||
|
||
.stats-loading {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
}
|
||
|
||
.stats-error {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #dc3545;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.page-btn {
|
||
padding: 6px 12px;
|
||
border: 1px solid #ddd;
|
||
background: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.page-btn.active {
|
||
background: #007bff;
|
||
color: white;
|
||
border-color: #007bff;
|
||
}
|
||
|
||
.page-btn:hover:not(.active) {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.page-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.stats-summary {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.total-count {
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.page-dots {
|
||
padding: 6px 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.user-info {
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.user-login {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.user-email {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.stats-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stats-header h2 {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stats-header p {
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
.overall-stats {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.overall-stats h3 {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.detailed-stats h3 {
|
||
margin-bottom: 15px;
|
||
}
|
||
/* Скрытые элементы */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Или более мягкий вариант - скрыть, но сохранить место */
|
||
.visually-hidden {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
border: 0;
|
||
}
|
||
|
||
/* Если нужно сделать плавное появление позже */
|
||
.hidden-conditional {
|
||
opacity: 0.3;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
/* Стили для модального окна доработки */
|
||
#rework-assignment-modal .modal-content {
|
||
max-width: 550px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
#rework-assignment-modal textarea {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
resize: vertical;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
}
|
||
|
||
#rework-assignment-modal textarea:focus {
|
||
border-color: #f39c12;
|
||
outline: none;
|
||
box-shadow: 0 0 5px rgba(243, 156, 18, 0.3);
|
||
}
|
||
|
||
#rework-assignment-modal .btn-warning {
|
||
background-color: #f39c12;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#rework-assignment-modal .btn-warning:hover {
|
||
background-color: #e67e22;
|
||
}
|
||
|
||
#rework-assignment-modal .btn-warning:disabled {
|
||
background-color: #f1c40f;
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
}
|
||
/* Современный профиль */
|
||
.profile-modern {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
color: white;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.profile-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3px solid rgba(255,255,255,0.5);
|
||
}
|
||
|
||
.profile-avatar i {
|
||
font-size: 50px;
|
||
color: white;
|
||
}
|
||
|
||
.profile-title {
|
||
flex: 1;
|
||
}
|
||
|
||
.profile-title h3 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.profile-badge {
|
||
display: inline-block;
|
||
padding: 5px 15px;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.profile-badge.admin {
|
||
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.profile-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.profile-info-card {
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 15px;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
backdrop-filter: blur(10px);
|
||
transition: transform 0.3s, background 0.3s;
|
||
}
|
||
|
||
.profile-info-card:hover {
|
||
background: rgba(255,255,255,0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.info-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.info-icon i {
|
||
font-size: 20px;
|
||
color: white;
|
||
}
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.groups-card {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.groups-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.group-tag {
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.badge-ldap, .badge-local {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 13px;
|
||
background: rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.profile-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.profile-error {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.profile-error i {
|
||
font-size: 40px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.profile-error p {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.profile-modern {
|
||
padding: 20px;
|
||
}
|
||
|
||
.profile-header {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.profile-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.profile-stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
} |