Переопределение стилей через CSS

Noty — это лёгкая библиотека для уведомлений в JavaScript, которая использует DOM-элементы с классами для стилизации сообщений. Каждое уведомление создаётся с набором стандартных классов, которые можно переопределять через CSS для достижения уникального внешнего вида.

Ключевые классы, используемые Noty, включают:

  • .noty_bar — контейнер уведомления.
  • .noty_type_* — тип уведомления: alert, success, error, warning, information.
  • .noty_text — текстовое содержимое уведомления.
  • .noty_close — кнопка закрытия уведомления.

Эти классы можно комбинировать для создания кастомных стилей.

Переопределение базовых стилей уведомлений

Чтобы изменить фон, цвет текста и отступы уведомления, можно использовать селекторы классов Noty. Например:

/* Изменение стиля всех уведомлений */
.noty_bar {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px 25px;
    border-radius: 8px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Стиль текста уведомления */
.noty_text {
    font-size: 16px;
    line-height: 1.5;
}

Использование этих правил позволяет задать общий стиль уведомлений, который будет применяться ко всем типам, если не определены более специфичные селекторы.

Переопределение стилей по типам уведомлений

Noty поддерживает несколько типов уведомлений. Каждый тип имеет собственный класс .noty_type_<type>. Это позволяет настраивать отдельный вид для каждого типа сообщения.

/* Уведомление типа success */
.noty_type_success {
    background-color: #27ae60;
    color: #ffffff;
}

/* Уведомление типа error */
.noty_type_error {
    background-color: #c0392b;
    color: #ffffff;
}

/* Уведомление типа warning */
.noty_type_warning {
    background-color: #f39c12;
    color: #2c3e50;
}

/* Уведомление типа information */
.noty_type_information {
    background-color: #3498db;
    color: #ffffff;
}

Использование этих классов обеспечивает визуальную дифференциацию уведомлений без изменения JavaScript-кода.

Настройка кнопки закрытия уведомлений

Кнопка закрытия уведомления может быть стилизована отдельно. Класс .noty_close позволяет управлять положением, размером и эффектами при наведении.

.noty_close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.noty_close:hover {
    color: #e74c3c;
}

Для полного контроля можно использовать псевдоэлементы или добавить собственные иконки через background-image.

Переопределение анимаций

Noty поддерживает анимации при показе и скрытии уведомлений. Для кастомизации используются классы noty_effect_*, например noty_effect_fade или noty_effect_slide. Можно переопределить CSS для этих эффектов:

/* Кастомная анимация появления уведомления */
.noty_effect_fade {
    animation: customFadeIn 0.6s ease-in-out;
}

@keyframes customFadeIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Кастомная анимация скрытия уведомления */
.noty_effect_fade.noty_closing {
    animation: customFadeOut 0.4s ease-in-out forwards;
}

@keyframes customFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

Такой подход позволяет создавать плавные и уникальные визуальные эффекты, отличные от стандартных.

Использование собственных CSS-классов через опции Noty

Noty позволяет добавлять собственные CSS-классы при создании уведомления с помощью опции className:

new Noty({
    text: 'Пользователь успешно сохранён',
    type: 'success',
    layout: 'topRight',
    timeout: 3000,
    className: 'custom-noty'
}).show();

В CSS можно определить стиль для собственного класса:

.custom-noty {
    background: linear-gradient(90deg, #1abc9c, #16a085);
    border-left: 6px solid #ffffff;
    font-weight: bold;
}

Это позволяет создавать уникальные уведомления для конкретных случаев, не затрагивая глобальные стили Noty.

Медиа-запросы для адаптивного дизайна

Для корректного отображения уведомлений на мобильных устройствах используют медиазапросы:

@media (max-width: 768px) {
    .noty_bar {
        width: 90%;
        padding: 12px 18px;
        font-size: 14px;
    }

    .noty_close {
        font-size: 16px;
        top: 8px;
        right: 8px;
    }
}

Адаптивные стили позволяют уведомлениям оставаться читаемыми и удобными на любых экранах.

Эта структура переопределений CSS даёт полный контроль над внешним видом и поведением уведомлений Noty без необходимости вмешательства в JavaScript-логику библиотеки.

Оглавление