Стили блока «Файл» визуального конструктора GetCourse

Стандартные стили блока «Файл» в уроках GetCourse немного устарели и я решил их освежить.

Здесь поделюсь стилями и небольшим скриптом. Без скрипта не вышло реализовать автоматическое определение типа файла. По атрибуту src стили отказались «цепляться».

JS-код, который добавит соответствующий класс к изображению типа файла и родительскому тегу div:

//Для блока «Файл» проверяем тип файла и присваиваем класс, чтобы изменить иконку
window.addEventListener('DOMContentLoaded', (event) => {
    const images = document.querySelectorAll('img');

    const fileTypes = [
        { substring: 'pdf-icon', class: 'pdf-icon' },
        { substring: 'docx-icon', class: 'docx-icon' },
        { substring: 'pptx-icon', class: 'pptx-icon' },
        { substring: 'xlsx-icon', class: 'xlsx-icon' },
        { substring: 'fileservice', class: 'image-icon' },
        { substring: 'txt-icon', class: 'txt-icon' },
        { substring: 'log-icon', class: 'file-icon' },
        { substring: 'mp3-icon', class: 'mp3-icon' },
        // Добавьте другие типы файлов здесь
    ];

    images.forEach(image => {
        const src = image.getAttribute('src');
        fileTypes.forEach(fileType => {
            const regex = new RegExp(fileType.substring, 'i'); // 'i' для игнорирования регистра
            if (regex.test(src)) {
                image.classList.add(fileType.class);
                const parentDiv = image.parentElement;
                if (parentDiv) {
                    parentDiv.classList.add(fileType.class);
                }
            }
        });
    });
});

Теперь добавляем стили.

В GetCourse уже используется иконочный шрифт FontAwesome. Его и будем использовать для вывода новых иконок. Дополнительно загружать и подключать ничего не понадобится. Это быстрее, проще, выглядит аккуратно и минималистично. А ещё позволяет быстро и легко изменить размер и цвет иконок.

Размеры я задавал в относительных единицах. Если используете абсолютные, исправьте по месту.

/*Блок «Файл»*/
.lt-lesson-files .lt-block-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: .5rem 1rem !important;
    background: #f8f8f8; /*Цвет фона блока с файлом*/
    border-radius: 10px;
}
.lt-lesson-files .lt-block-wrapper .container {
    margin: 0;
}
.lt-lesson-files .table>tbody>tr>td,
.lt-lesson-files .table {
    border: none !important;
    margin: 0;
}
.files-row > div,
.lt-lesson-files .container .col-md-12 {
    padding: 0 !important;
}
.lt-lesson-files .table td {
    vertical-align: middle;
    padding: .5rem !important;
}
.lt-lesson-files .table td div {
    height: auto !important;
}
.lt-lesson-files .table td:nth-child(2) {
    color: #777; /*Цвет текста с размером файла*/
}
.lt-lesson-files .table td:nth-child(3) a {
    display: block;
    padding: 1rem 0;
    color: #141414; /*Цвет ссылок на загрузку файла*/
}
.lt-lesson-files .table td:nth-child(3) a:hover {
    color: #167be5; /*Цвет ссылок при наведении*/
}

.lt-lesson-files .files-table img {
    display: none;
}
.lt-lesson-files .files-table div.image-icon,
.lt-lesson-files .files-table div.pdf-icon,
.lt-lesson-files .files-table div.docx-icon,
.lt-lesson-files .files-table div.xlsx-icon,
.lt-lesson-files .files-table div.pptx-icon,
.lt-lesson-files .files-table div.txt-icon,
.lt-lesson-files .files-table div.file-icon,
.lt-lesson-files .files-table div.mp3-icon {
    font-family: 'Font Awesome 6 Free';
    font-weight: 600;
    font-size: 2rem;
    color: #888;
}
.lt-lesson-files .files-table div.image-icon:before {
    content: "\f1c5";
    color: #167be5; /*Здесь и ниже задаём цвет иконок*/
}
.lt-lesson-files .files-table div.pdf-icon:before {
    content: "\f1c1";
    color: #b40a00;
}
.lt-lesson-files .files-table div.docx-icon:before {
    content: "\f1c2";
    color: #1b60bd;
}
.lt-lesson-files .files-table div.xlsx-icon:before {
    content: "\f1c3";
    color: #107c40;
}
.lt-lesson-files .files-table div.pptx-icon:before {
    content: "\f1c4";
    color: #bd3817;
}
.lt-lesson-files .files-table div.txt-icon:before {
    content: "\f15c";
    color: #888;
}
.lt-lesson-files .files-table div.file-icon:before {
    content: "\f15b";
}
.lt-lesson-files .files-table div.mp3-icon:before {
    content: "\f1c7";
    color: #167be5;
}

Код можно вставить в настройках аккаунта в поле «Счетчики и прочие скрипты для BODY», либо в блоки CSS и JavaScript непосредственно в уроке, либо использовать в теме.

Если найдёте баг, дайте знать в комментариях или напишите мне.

Данный набор стилей входит в мой дизайн-пак для GetCourse.