From 7eaa2f9a73d4d1e07bc949377065223fca53f93f Mon Sep 17 00:00:00 2001 From: kalugin66 Date: Fri, 6 Feb 2026 17:23:36 +0500 Subject: [PATCH] style.css --- public/style.css | 631 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 630 insertions(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index cd3fa28..8725d35 100644 --- a/public/style.css +++ b/public/style.css @@ -3210,4 +3210,633 @@ small { color: #2c3e50; margin-top: 5px; } - /* admin */ \ No newline at end of file + /* 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; +} \ No newline at end of file