public/assets/css/task_manager.css

Вот содержимое файла public/assets/css/task_manager.css:

/* Task Manager Styles */

/* General Styles for Task Manager */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3 {
    color: #333;
}

/* Header */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
}

.header h1 {
    font-size: 24px;
}

/* Task Manager Navbar */
.navbar {
    background-color: #333;
    overflow: hidden;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Task List Styles */
.task-list {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-list .task-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
}

.task-list .task-item:last-child {
    border-bottom: none;
}

.task-list .task-item h3 {
    margin: 0;
    font-size: 18px;
}

.task-list .task-item .task-status {
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
}

.task-list .task-item .task-status.completed {
    background-color: #4CAF50;
    color: white;
}

.task-list .task-item .task-status.pending {
    background-color: #FF9800;
    color: white;
}

.task-list .task-item .task-status.overdue {
    background-color: #F44336;
    color: white;
}

/* Task Form Styles */
.task-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-form input,
.task-form textarea,
.task-form select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.task-form button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.task-form button:hover {
    background-color: #45a049;
}

/* Task Filter Styles */
.task-filter {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.task-filter .filter-item {
    width: 24%;
}

.task-filter .filter-item select {
    width: 100%;
}

/* Calendar Styles */
.calendar {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.calendar .calendar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.calendar .calendar-header button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.calendar .calendar-header button:hover {
    background-color: #45a049;
}

/* Task Notification Styles */
.notification-list {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.notification-list .notification-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
}

.notification-list .notification-item:last-child {
    border-bottom: none;
}

.notification-list .notification-item .notification-status {
    font-weight: bold;
    color: #4CAF50;
}

/* Log Styles */
.task-log {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-log .log-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
}

.task-log .log-item:last-child {
    border-bottom: none;
}

.task-log .log-item .log-status {
    font-weight: bold;
    color: #4CAF50;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .task-filter {
        flex-direction: column;
    }

    .task-filter .filter-item {
        width: 100%;
        margin-bottom: 10px;
    }

    .navbar {
        flex-direction: column;
    }
}

Объяснение:

1. Общие стили: Установлены стандартные стили для тела документа и контейнера.

2. Стили для заголовков: Заголовки всех уровней (h1, h2, h3) используют тёмно-серый цвет.

3. Навигационная панель (Navbar): Простой дизайн с изменением цвета при наведении.

4. Стили для списка задач: Задачи отображаются с возможностью отображения статуса (выполнена, ожидает выполнения, просрочена). Каждому статусу присваиваются свои цвета.

5. Форма задач: Все поля ввода и кнопки стилизованы для удобства использования.

6. Фильтры для задач: Структура фильтров с полями для выбора, расположена горизонтально на больших экранах и вертикально на мобильных устройствах.

7. Календарь: Стили для отображения календаря с кнопками для перехода между месяцами.

8. Уведомления и логи: Стили для отображения уведомлений и журналов с разделением каждого элемента.

9. Адаптивность: Медиа-запросы добавлены для улучшения отображения на мобильных устройствах.

Этот CSS файл предназначен для стилизации различных компонентов модуля "Менеджер задач" в OpenCart.