body { font-family: "Helvetica Neue", sans-serif; background: linear-gradient(to bottom, #f7f7f7, #e1e1e1); /* Градиентный фон в стиле Apple */ display: flex; align-items: center; justify-content: center; min-height: 100vh; } .app-container { background-color: #ffffff; /* Белый фон для контейнера */ padding: 40px; /* Увеличено для большего пространства */ border-radius: 20px; width: 100%; max-width: 500px; /* Увеличена ширина контейнера */ box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3); border: 1px solid #d9d9d9; } h1 { font-family: "Helvetica", sans-serif; text-align: center; margin-bottom: 20px; font-size: 30px; /* Увеличен размер заголовка */ color: #4a4a4a; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); } .subtitle { font-size: 16px; /* Увеличен размер подзаголовка */ color: #6d6d72; text-align: center; margin-bottom: 20px; font-weight: 300; } form { display: flex; gap: 10px; margin-bottom: 20px; } #task-input { flex-grow: 1; padding: 15px; /* Увеличено для удобства ввода */ border-radius: 8px; border: 1px solid #c7c7c7; background-color: #f0f0f0; /* Светлый фон для ввода */ font-size: 18px; /* Увеличен размер текста */ box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1); } form button { padding: 15px 25px; /* Увеличены размеры кнопок */ border: none; background: linear-gradient(to bottom, #4da6ff, #0066cc); color: #ffffff; border-radius: 12px; cursor: pointer; font-weight: bold; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; font-size: 16px; /* Увеличен размер текста на кнопках */ } form button:active { background: linear-gradient(to bottom, #0066cc, #4da6ff); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); transform: translateY(2px); } .filter-buttons { display: flex; justify-content: space-around; margin: 20px 0; } .filter { background: linear-gradient(to bottom, #e6e6e6, #d1d1d1); border: 1px solid #c3c3c3; padding: 10px 20px; /* Увеличены размеры кнопок фильтров */ color: #4a4a4a; border-radius: 12px; cursor: pointer; font-weight: bold; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); transition: all 0.2s ease; font-size: 16px; /* Увеличен размер текста на кнопках фильтров */ } .filter.active, .filter:hover { background: linear-gradient(to bottom, #4da6ff, #0066cc); color: #ffffff; } #task-list { list-style: none; max-height: 400px; /* Увеличена высота списка задач */ overflow-y: auto; padding: 10px 0; background-color: #ffffff; border-radius: 8px; border: 1px solid #e2e2e2; } .task-item { padding: 15px; /* Добавляем отступы для элементов задач */ border-radius: 10px; /* Скругление углов */ background-color: #ffffff; /* Исходный цвет фона задачи */ margin-bottom: 10px; /* Отступ между задачами */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для задач */ transition: background 0.3s ease; /* Плавный переход фона */ } /* Добавляем эффект наведения для задачи */ .task-item:hover { background: linear-gradient(to bottom, #4da6ff, #0066cc); /* Градиентный фон при наведении */ color: #ffffff; /* Изменение цвета текста при наведении */ } .task-item.completed { text-decoration: line-through; color: #a09b8d; } .task-actions { display: flex; gap: 15px; /* Увеличено расстояние между кнопками */ } .task-actions button { background: none; border: none; cursor: pointer; font-size: 1.5em; /* Увеличен размер иконок действий */ } .task-actions button.complete-btn { color: #60a36e; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); } .task-actions button.delete-btn { color: #d9534f; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); } body { font-family: "Helvetica Neue", sans-serif; background-image: url('file:///D:/kapli-vody-59.webp'); /* Полный путь к изображению */ background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; min-height: 100vh; }