/** * ND54 — улучшения UX: тёмная тема (data-bs-theme), сводка задач, скелетоны, * сдержанные анимации, уважение к prefers-reduced-motion. * Подключать ПОСЛЕ inline-стилей страницы (или в конце ), чтобы перекрывать body { background }. */ /* -------------------------------------------------------------------------- */ /* Reduced motion (глобально поверх nd54-lively) */ /* -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .btn:hover, .card:hover, .stat-card:hover, .glass-card:hover, .nd54-hub-pill:hover, .main-nav-item:hover { transform: none !important; } } /* -------------------------------------------------------------------------- */ /* Сводка задач (руководитель) */ /* -------------------------------------------------------------------------- */ .nd54-task-hub-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.85rem; padding: 0.85rem 1.15rem; border-radius: 14px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } .nd54-task-hub-title { font-weight: 700; font-size: 0.9rem; color: #0f172a; display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 0.25rem; } .nd54-hub-pill { display: inline-flex; align-items: center; gap: 0.35rem; border: none; cursor: pointer; font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; background: #f1f5f9; color: #0f172a; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .nd54-hub-pill:hover { background: #e2e8f0; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1); transform: translateY(-1px); } .nd54-hub-pill:active { transform: scale(0.98); } .nd54-hub-pill .badge { font-size: 0.72rem; } .nd54-hub-pill--primary { background: rgba(13, 110, 253, 0.12); color: #0a58ca; } .nd54-hub-pill--warning { background: rgba(255, 193, 7, 0.2); color: #664d03; } .nd54-hub-pill--info { background: rgba(13, 202, 240, 0.18); color: #055160; } .nd54-hub-pill--secondary { background: rgba(108, 117, 125, 0.15); color: #343a40; } /* -------------------------------------------------------------------------- */ /* Полоса «Мои задачи» (дружинник) */ /* -------------------------------------------------------------------------- */ .nd54-druz-task-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .nd54-druz-task-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(15, 23, 42, 0.08); color: #334155; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nd54-druz-task-chip.is-on { background: rgba(25, 135, 84, 0.15); border-color: rgba(25, 135, 84, 0.35); color: #0f5132; } button.nd54-druz-task-chip { cursor: pointer; border: 1px solid rgba(13, 110, 253, 0.25); background: rgba(13, 110, 253, 0.08); color: #0a58ca; } button.nd54-druz-task-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15); } /* -------------------------------------------------------------------------- */ /* Скелетон загрузки */ /* -------------------------------------------------------------------------- */ .nd54-skeleton { position: relative; overflow: hidden; background: #e2e8f0; border-radius: 8px; } .nd54-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.55), transparent ); animation: nd54-shimmer 1.1s ease-in-out infinite; } @keyframes nd54-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .nd54-skeleton::after { animation: none; } } .nd54-empty-hint { text-align: center; padding: 2rem 1rem; color: #64748b; font-size: 0.95rem; } .nd54-empty-hint i { font-size: 2rem; opacity: 0.35; display: block; margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- */ /* Тёмная тема (руководитель + общие Bootstrap-компоненты) */ /* -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { color-scheme: dark; } [data-bs-theme="dark"] body { background: linear-gradient(145deg, #0f172a 0%, #1e293b 52%, #172554 100%) !important; color: #e2e8f0 !important; } [data-bs-theme="dark"] .nd54-task-hub-inner { background: rgba(30, 41, 59, 0.92); border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .nd54-task-hub-title { color: #f1f5f9; } [data-bs-theme="dark"] .nd54-hub-pill { background: #334155; color: #f1f5f9; } [data-bs-theme="dark"] .nd54-hub-pill:hover { background: #475569; } [data-bs-theme="dark"] .filter-bar { background: rgba(30, 41, 59, 0.95) !important; border-color: rgba(148, 163, 184, 0.2) !important; color: #e2e8f0; } [data-bs-theme="dark"] .readiness-indicator { background: rgba(30, 41, 59, 0.92) !important; border-color: rgba(148, 163, 184, 0.15) !important; } [data-bs-theme="dark"] .table-modern thead th { background: #334155 !important; color: #cbd5e1 !important; } [data-bs-theme="dark"] .table-modern tbody td { background: #1e293b !important; color: #e2e8f0 !important; } [data-bs-theme="dark"] .table-modern tbody tr:hover td { background: #273549 !important; } [data-bs-theme="dark"] .calendar-container, [data-bs-theme="dark"] .chat-container { background: #1e293b !important; border: 1px solid rgba(148, 163, 184, 0.12); } [data-bs-theme="dark"] .chat-users-list { background: #0f172a !important; border-color: #334155 !important; } [data-bs-theme="dark"] .quick-actions-bar { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(148, 163, 184, 0.15) !important; } [data-bs-theme="dark"] .main-nav { background: rgba(15, 23, 42, 0.65) !important; border-color: rgba(148, 163, 184, 0.12) !important; } [data-bs-theme="dark"] .modal-content { background: #1e293b; color: #e2e8f0; border-color: #334155; } [data-bs-theme="dark"] .modal-footer { border-color: #334155; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f172a; border-color: #475569; color: #e2e8f0; } [data-bs-theme="dark"] .nd54-druz-task-chip { background: rgba(30, 41, 59, 0.9); border-color: rgba(148, 163, 184, 0.15); color: #e2e8f0; } [data-bs-theme="dark"] button.nd54-druz-task-chip { background: rgba(37, 99, 235, 0.2); border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; } [data-bs-theme="dark"] .nd54-skeleton { background: #334155; } [data-bs-theme="dark"] .nd54-skeleton::after { background: linear-gradient( 90deg, transparent, rgba(148, 163, 184, 0.2), transparent ); } /* Шапка руководителя в тёмной теме (перекрывает светлый градиент из inline-стилей) */ [data-bs-theme="dark"] .main-header { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 42%, #2563eb 100%) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important; } @media (prefers-reduced-motion: reduce) { .section-pane.active { animation: none !important; } .modal.fade .modal-dialog { transition: none !important; } } @media (prefers-reduced-motion: no-preference) { .modal.fade .modal-dialog { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } .appeal-row { transition: background-color 0.2s ease, box-shadow 0.2s ease; } .table-modern tbody tr.appeal-row:hover td { box-shadow: inset 3px 0 0 0 var(--bs-primary); } } /* Кабинеты: ряды действий, чтобы кнопки не наезжали (доп. к nd54-theme) */ @media (max-width: 991.98px) { .nd54-task-hub-inner, .section-pane .d-flex.justify-content-between, .section-pane .d-flex.gap-2, .section-pane .d-flex.gap-3 { flex-wrap: wrap; row-gap: 0.5rem; column-gap: 0.5rem; } .table-modern td .btn, .table .btn-group, .appeal-row .btn { max-width: 100%; } }