/* big-checkbox-notify-comments-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Крупный чекбокс «Уведомлять о комментах»'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Делает в материалах чекбокс «Уведомлять по почте об ответах на мои комментарии» намного заметней, чем по умолчанию в Мемберлюксе.'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ :root { /* Фон чекбокса */ --bg-checkbox-notify: #ffffff; /* Цвет галочки в чекбоксе */ --hue-color-checkbox-notify: 0deg; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Надпись с чекбоксом "Уведомлять по почте об ответах на мои комментарии" */ .lesson-row .comments-row .form-group > label { display: flex; gap: 10px; flex-flow: row; align-items: center; justify-content: flex-start; margin: 0; font-size: 2rem; width: fit-content; line-height: normal; font-weight: bold; cursor: pointer; } /* Чекбокс */ .lesson-row .comments-row .form-group > label input[name="notify-about-comments"] { display: grid; flex-shrink: 0; margin: 0; width: 30px; height: 30px; font-size: 14px; border-radius: 4px; place-content: center; background-color: var(--bg-checkbox-notify); border: 1px solid #aeaeae; -webkit-appearance: none; appearance: none; cursor: pointer; } .lesson-row .comments-row .form-group > label input[name="notify-about-comments"]:focus { outline: none } /* Галочка в чекбоксе */ /* Активируется сразу, если в Преображаторе включено дополнение «Активный чекбокс» */ /* Пример цвета: #0aa0ff => %230aa0ff */ /* .lesson-row .comments-row .form-group > label input[name="notify-about-comments"][checked="checked"]::before { width: 2.3em; height: 2.3em; margin: 0; content: ''; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230aa0ff' viewBox='0 0 20 20'%3e%3cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; transform: translateX(-1px); filter: hue-rotate(var(--hue-color-checkbox-notify)); } */ /* Галочка в чекбоксе */ /* Срабатывает, если в Преображаторе НЕ включено дополнение «Активный чекбокс» */ .lesson-row .comments-row .form-group > label input[name="notify-about-comments"]:checked::before { width: 2.3em; height: 2.3em; margin: 0; /* Убираем стандартную галочку */ content: ''; /* Пример цвета: #0aa0ff => %230aa0ff */ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230aa0ff' viewBox='0 0 20 20'%3e%3cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; transform: translateX(-1px); filter: hue-rotate(var(--hue-color-checkbox-notify)); } /* breadcrumbs-and-progress-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Хлебные крошки и Прогресс'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Хлебные крошки станут похожи на меню + Адаптивный и стилизованный Прогресс обучения. Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0».'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ /* Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0» */ :root { /* Фон хлебных крошек */ --bg-bread-progress: #ffffff; /* Закругление фона хлебных крошек */ --radius-bread-progress: 25px; /* Цвет-Градиент 1 в Прогрессе */ --color-progress-bar-1-bread-progress: #fffc00; /* Цвет-Градиент 2 в Прогрессе */ --color-progress-bar-2-bread-progress: #FF9800; /* Выравнивание хлебных крошек - на Больших экранах */ /* flex-start - СЛЕВА, center - ЦЕНТР, end - СПРАВА */ --align-big-screen-bread-progress: flex-start; /* Корректировка отступа Крошек - на Больших экранах */ /* Задайте "0", если выше указано выравнивание "СЛЕВА" (flex-start) */ /* Зайдайте "1", если выше указано выравнивание "ЦЕНТР" или "СПРАВА" */ --align-correction-bread-progress: 0; /* Выравнивание хлебных крошек - на Маленьких экранах */ /* flex-start - СЛЕВА, center - ЦЕНТР, end - СПРАВА */ --align-small-screen-bread-progress: center; /* Иконка в хлебной крошке - Материал */ /* "\f118" - смайл, "\f0f6" - файл (по умолчанию) */ --icon-mat-bread-progress: "\f118"; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Хлебные крошки на мобильных */ @media (max-width: 767px) { .breadcrumbs-row:not(.mkk_nav) .container { max-width: 100%; } } /* Обёртка Хлебных крошек */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap { display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; border: none; margin-top: 30px; padding: 3px 20px; background-color: var(--bg-bread-progress); border-radius: var(--radius-bread-progress); } /* Выравнивание Хлебных крошек и Прогресса - на Маленьких экранах */ @media (max-width: 767px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap { flex-flow: column; /* выравнивание Прогресса */ align-items: var(--align-small-screen-bread-progress); } /* выравнивание Крошек */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs { justify-content: var(--align-small-screen-bread-progress); } } /* Хлебные крошки */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs { display: flex; flex: auto; flex-wrap: wrap; align-items: center; padding: 10px 0 10px 0; } /* Выравнивание крошек - на Больших экранах */ @media (min-width: 768px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs { justify-content: var(--align-big-screen-bread-progress); } } /* Крошка */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item { padding: 0; margin: 5px 0 5px 0; vertical-align: middle; max-width: 330px; cursor: pointer; } /* Крошка - на Средних экранах */ @media (min-width: 768px) and (max-width: 991px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item { max-width: 200px; } } /* Крошка - на Маленьких экранах */ @media (max-width: 767px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item { max-width: 200px; } } /* Обёртка Иконки в крошке */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon { margin: 0; margin-right: 5px; line-height: normal; } /* Общая корректировка Иконок у крошек - Рубрики и Материал */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon:before, section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before, section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before { margin: 0; line-height: normal; } /* Корректируем Иконку у крошек - Рубрики и Материал */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before, section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before { margin-top: 1px; } /* Обёртка Разделителя крошек */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .separator { padding: 0; margin: 2px 15px 0 15px; line-height: normal; vertical-align: middle; } /* Новая Иконка хлебной крошки - Материал */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before { content: var(--icon-mat-bread-progress); } /* ИНДИКАТОР ПРОХОЖДЕНИЯ УРОКОВ */ /* ---------------------------- */ /* Обёртка Индикатора */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap { display: flex; gap: 5px; align-items: center; margin: 0; padding: 0; width: 90px !important; } /* Отступ Крошек - на Средних и Больших экранах */ /* Чтобы Крошки были по центру страницы */ /* Корректировка отступа Крошек для выравнивания Слева */ /* Только для Залогинненных, когда отображается Прогресс */ @media (min-width: 768px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap:has(.course-progress-wrap) .breadcrumbs { margin-left: calc(105px * var(--align-correction-bread-progress)); } } /* Отступ Обёртки Индикатора - на Средних и Больших экранах */ @media (min-width: 768px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap { margin-left: 15px; } } /* Обёртка Индикатора - на Маленьких экранах */ @media (max-width: 767px) { section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap { padding: 5px 0 15px 0; width: 150px !important; } } /* Непройденная часть Прогресса */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress { width: 100%; height: 15px; margin: 0px 2px 0px 0; border-radius: 50px; } /* Пройденная часть Прогресса */ section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress-bar { height: 15px; background-image: linear-gradient(to right, var(--color-progress-bar-1-bread-progress) 0%, var(--color-progress-bar-2-bread-progress) 100%); } /* КОРРЕКТИРОВКА МЕНЮ НА БОЛЬШИХ ЭКРАНАХ */ /* ------------------------------------- */ /* Чтобы левая часть меню хорошо смотрелась, когда Крошки СЛЕВА */ @media (min-width: 1199px) { .top-nav-row .container .row .top-nav-row--inner { padding-left: 21px; } } /* delete-activation-code-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Убираем код активации'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Скрывает код рядом с уровнем доступа в разделе «Активация». Полезно, если используется модуль Авторегистрации.'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ :root { /* Скрыть/Показать форму активации доступа */ /* Значение "none" - скрывает форму, значение "block" - показывает */ --hide-show-form-activation-code: none; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Убрать коды доступов */ .keys-table .key-row .col-key .key { display: none; } /* Убрать форму активации пин-кодов */ .activation-form-wrap { display: var(--hide-show-form-activation-code); } /* jump-notice-indicator-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Прыгающий индикатор писем'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Заставляет индикатор уведомлений игриво подпрыгивать и привлекать внимание ученика.'; */ /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Анимация Индикатора уведомлений */ .mbln-notifications-number { /* характер анимации. Бесконечная. linear или ease */ animation: number_ani 1s ease infinite; /* проигрывает анимацию сначала вперед, потом назад */ animation-direction: alternate; } .mbln-notifications-number:hover { /* пауза анимации при наведении мыши */ animation-play-state: paused; } /* Подпрыгивание Индикатора уведомлений */ @keyframes number_ani { 0% { transform: translateY(0); } 30% { transform: translateY(-5px); } 50% { transform: translateY(0); } 100% { transform: translateY(0); } } /* Мигание. Плавное затухание, резкое появление */ /* @keyframes number_ani { from { opacity: 1; } to { opacity: 0; } } */ /* Мигание. Плавное появление, резкое затухание */ /* @keyframes number_ani { 0% {opacity: 0;} 100% {opacity: 1;} } */ /* Мигание. Отдельно цифра, отдельно круг */ /* @-webkit-keyframes number_ani { 100% { color: rgba(34, 34, 34, 0); } 100% { background: rgba(34, 34, 34, 0); } } */ /* my-style.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Мои css'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Александра Фомина'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Все мои стили тут'; */ /* Закругление сразу всех кнопок*/ .button {border-radius: 50px;} /* Закругление сразу всех изображений*/ .img {border-radius: 25px !importaint;} /* Поиск */ /* Поиск внешний вид */ .search-hint-form {border-radius: 50px;} .search-hint-form input {border-radius: 50px !important; /* Закругляем левые углы input */} .search-hint-form button {border-radius: 50px !important; /* Закругляем правые углы button */} /* Корзина */ /* кнопка корзины */ .a.mbr-btn.btn-default.btn-solid.btn-green.text-uppercase.cart-proceed-button {border-radius: 50px !important;} /* Закругление картинки в корзине */ .folder-wrap {border-radius: 50px !important;} /* Закругление всего блока в корзине */ .tab-content {border-radius: 25px !important;} /* Закругление кнопки закрыть в корзине */ .remove-cart-item { display: inline-block; border-radius: 25px !important;; overflow: hidden; width: 20px; /* Пример */ height: 20px; /* Пример */ } /* Личный кабинет */ /* скругление в личном кабинете кнопок загрузить аватарку */ [data-id="mblpr_field_avatar_1"] {border-radius: 25px !important;} /* скругление в личном кабинете кнопки сохранить */ .mblpr-submit.mbr-btn {border-radius: 50px !important;} /* Закругление для кнопки в личном кабинете удалить */ [data-avatar-clear="mblpr_field_avatar_1"] {border-radius: 50px !important;} /* Закругление аватарки в личном кабинете */ .mblpr-avatar-preview-box img { border-radius: 50px !important; /* Для скругленных углов */ overflow: hidden; /* Чтобы скрыть углы изображения */ } /* Закругление всех форм ввода данных в личном кабинете */ .mblpr-field {border-radius: 50px !important;} /* Главная страница кнопки и стикеры */ /* Закругление кнопок доступ открыт */ .doc-label.opened {border-radius: 50px !important;} /* Закругление стикера */ .label { border-radius: 50px !important; /* Устанавливаем радиус закругления */ padding: 5px 10px; /* Добавляем отступы для лучшего визуального эффекта */ } /* Закругление кнопки доступ закрыт внутри обложки */ .doc-label.locked { border-radius: 50px !important; /* Или другой желаемый радиус */ overflow: hidden; /* Опционально: предотвращает "вылезание" текста */ } /* Закругление подложки прозрачной на всем сайте */ .folder-content {border-radius: 50px !important;} /* прозрачная нижняя граница (с замочком) на всех элементах папок */ .bottom-icons { display: none !important; margin-bottom: -30px !important; } /* Элементы управления в верхней части сайта */ /* Закругление кнопки закрыть в уведомлениях */ .mbln-close-icon { border-radius: 50px; } /* Закругление кнопки закрыть в верхней части сайта */ .close-button { border-radius: 50px !important; } /* Закругление вокруг кнопки закрыть в верхней части сайта */ .mbln-close { border-radius: 50px; } /* Закругление всех форм ввода данных при регистрации */ .form-control { border-radius: 50px !important; } /* Закругление кнопки зарегистрироваться */ .mbr-btn { border-radius: 50px !important; } /* ======================================== FOMI — Единая система стилей для блоков "подробнее" ======================================== */ .fomi-block { max-width: 820px; margin: 50px auto; padding: 55px 65px; background: #ffffff; border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); text-align: center; border: 1px solid #f0ece7; } .fomi-badge { display: inline-block; background: #fef5eb; padding: 14px 40px; border-radius: 40px; border: 1px solid #f7d5b0; margin-bottom: 20px; } .fomi-badge strong { font-size: 1.6rem; font-weight: 700; color: #b85d14; } .fomi-text { font-size: 1.25rem; color: #4a4540; margin: 0 0 25px; line-height: 1.8; } .fomi-text strong { color: #b85d14; } .fomi-note { font-size: 1.15rem; color: #5a554f; margin: 18px 0 10px; } .fomi-skills { background: #faf7f4; padding: 18px 28px; border-radius: 16px; border-left: 4px solid #e07c1f; margin: 20px 0 35px; text-align: left; } .fomi-skills p { margin: 0; font-size: 1.1rem; color: #6b625a; line-height: 1.7; } .fomi-warning { background: #fcf6ef; padding: 24px 32px; border-radius: 16px; border-left: 4px solid #e07c1f; text-align: left; margin: 5px 0 0; } .fomi-warning p { margin: 0; font-size: 1.1rem; color: #6b625a; line-height: 1.7; } .fomi-warning strong { color: #b85d14; font-size: 1.15rem; } .fomi-button { display: inline-block; background: #e87a1e; padding: 18px 70px; border-radius: 60px; color: #ffffff; font-weight: 700; font-size: 1.35rem; text-decoration: none; letter-spacing: 0.8px; box-shadow: 0 6px 0 #b85d14, 0 6px 20px rgba(232, 122, 30, 0.3); transition: all 0.1s ease; border: none; cursor: pointer; } .fomi-button:hover { background: #d46d17; transform: translateY(2px); box-shadow: 0 4px 0 #b85d14, 0 8px 22px rgba(232, 122, 30, 0.35); } .fomi-button:active { transform: translateY(6px); box-shadow: 0 1px 0 #b85d14; } .fomi-mt-20 { margin-top: 20px; } /* ======================================== АДАПТИВНОСТЬ ======================================== */ @media (max-width: 768px) { .fomi-block { padding: 28px 18px 32px; margin: 20px 12px; } .fomi-badge strong { font-size: 1.2rem; } .fomi-text { font-size: 1rem; } .fomi-note { font-size: 0.95rem; } .fomi-skills p { font-size: 0.95rem; } .fomi-warning p { font-size: 0.95rem; } .fomi-button { padding: 16px 30px; font-size: 1.1rem; width: 100%; box-sizing: border-box; display: block; text-align: center; } } /* Технические страницы: скрываем прогресс и навигацию урока */ body.fomi-technical .reading-status-row, body.fomi-technical .course-progress-wrap, body.fomi-technical .progress-wrap { display: none !important; } /* name-student-back-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Имя ученика в меню'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё описание файла между '' */ /* --human-description-css: 'Возвращает имя ученика в верхнее меню школы.'; */ /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Настройки для больших экранов */ /* ----------------------------- */ /* Возвращаем в меню Имя и Фамилию ученика */ @media (min-width: 768px) { .top-nav-row .dropdown-button.user-profile-dropdown-button:after { content: attr(title); top: 2px; position: relative; /* order: -1; */ /* margin-right: 5px; */ /* font-size: 17px; */ } /* Стрелка в Профиле и Аватар */ #user-profile-dropdown .caret { margin-left: 10px; } .top-nav-row .user-profile-humbnail { margin-right: 5px; } } /* Настройки для маленьких экранов */ /* ------------------------------- */ /* Стрелка в Профиле и Аватар */ @media (max-width: 768px) { #user-profile-dropdown .caret { margin-left: 2px; } .top-nav-row .user-profile-humbnail { margin-right: 5px; } } /* Общие настройки */ /* --------------- */ /* Выравниваем стрелочку в Профиле на больших экранах */ .top-nav-row .dropdown-button.user-profile-dropdown-button { display: inherit; /* gap: 10px; */ /* gap: 5px; */ } #user-profile-dropdown .caret { float: right; top: 15.5px; position: relative; /* margin-left: 0px; */ /* display: inline-block; */ /* vertical-align: middle; */ } /* page-description-content-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Стили описания рубрики'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Добавляем стили для блока описания рубрики, которых нет в обычных настройках.'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ :root { /* Ширина блока описания в процентах - на больших экранах */ --width-pc-description-content: 100%; /* Ширина блока описания в процентах - на мобильных */ --width-mobile-description-content: 100%; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* ----------------------------- */ /* Ширина блока описания рубрики */ /* ----------------------------- */ /* Растягиваем контейнер блока описания на всю ширину */ /* В исходных стилях задано max-width: 370px; */ /* начало стилей для мобильных */ @media (max-width: 767px) { .site-content .page-title-row .container { max-width: var(--width-mobile-description-content);; /* max-width: fit-content; */ /* max-width: none; */ } } /* конец стилей для мобильных */ /* начало стилей для больших экранов */ @media (min-width: 767px) { .site-content .page-title-row .page-description-content { max-width: var(--width-pc-description-content); } } /* конец стилей для больших экранов */ /* Растягиваем содержимое блока описания на всю доступную ширину блока описания */ .site-content .page-title-row .page-description-content .content { width: 100%; max-width: none; } /* remove-page-shift-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Убираем дёргание страницы'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Предотвращает дёргание страницы при открытии выпадающих меню на Windows.'; */ /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Убираем скрытие полосы прокрутки на Windows при открытии выпадающих меню */ /* Убираем дёргание страницы школы на Windows при открытии выпадающих меню */ body[style*="overflow: hidden;"] { overflow: visible!important; } /* scrollbar-elegant-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Элегантные полосы прокрутки'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Современные и изящные полосы прокрутки на страницах школы, в панели навигации и уведомлениях.'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ :root { /* Ширина ВСЕХ полос прокруток */ --width-scroll-elegant: 10px; /* Закругление ВСЕХ Перетаскиваемых элементов */ --radius-scroll-elegant: 10px; /* Цвет Перетаскиваемого элемента - на Страницах */ --color-thumb-scroll-elegant: #C3CCD5; /* Цвет пустой области Прокрутки - на Страницах */ --color-empty-scroll-elegant: #ffffff; /* Цвет Перетаскиваемого элемента - в панели Навигации по урокам */ --color-thumb-menu-lessons-scroll-elegant: #C3CCD5; /* Цвет пустой области Прокрутки - в панели Навигации по урокам */ --color-empty-menu-lessons-scroll-elegant: #ffffff; /* Цвет Перетаскиваемого элемента - в Уведомлениях */ --color-thumb-notify-scroll-elegant: #C3CCD5; /* Цвет пустой области Прокрутки - в Уведомлениях */ --color-empty-notify-scroll-elegant: #F7F7F7; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* ПОЛОСА ПРОКРУТКИ НА ВСЕХ СТРАНИЦАХ */ /* ---------------------------------- */ /* Вся область полосы прокрутки */ ::-webkit-scrollbar { width: var(--width-scroll-elegant); } /* Индикатор Прокрутки - перетаскиваемый элемент */ body::-webkit-scrollbar-thumb { background-color: var(--color-thumb-scroll-elegant); border-radius: var(--radius-scroll-elegant); border: none; } /* Пустое пространство под индикатором Прокрутки */ body::-webkit-scrollbar-track { background: var(--color-empty-scroll-elegant); } /* Полоса прокрутки в панели Навигации по урокам */ body .menu-opened.mbli3-left-menu::-webkit-scrollbar-thumb { background-color: var(--color-thumb-menu-lessons-scroll-elegant); border-radius: var(--radius-scroll-elegant); border: none; } /* Пустое пространство под индикатором Прокрутки в панели Навигации */ body .menu-opened.mbli3-left-menu::-webkit-scrollbar-track { background: var(--color-empty-menu-lessons-scroll-elegant); } /* Полоса прокрутки в панели Уведомлений */ .mbln-notifications-tab-content > .mbln-notifications-tab-pane::-webkit-scrollbar-thumb { background-color: var(--color-thumb-notify-scroll-elegant); border-radius: var(--radius-scroll-elegant); border: none; } /* Пустое пространство под индикатором Прокрутки панели Уведомлений */ .mbln-notifications-tab-content > .mbln-notifications-tab-pane::-webkit-scrollbar-track { background: var(--color-empty-notify-scroll-elegant); } /* -------------------------- */ /* ПОЛОСА ПРОКРУТКИ В FIREFOX */ /* -------------------------- */ @-moz-document url-prefix() { /* Общие настройки полосы прокрутки для FIREFOX */ * { scrollbar-color: var(--color-thumb-scroll-elegant) var(--color-empty-scroll-elegant) !important; scrollbar-width: thin !important; } /* Полоса прокрутки в панели Навигации по урокам для FIREFOX */ body .menu-opened.mbli3-left-menu { scrollbar-color: var(--color-thumb-menu-lessons-scroll-elegant) var(--color-empty-menu-lessons-scroll-elegant) !important; } } /* Конец стилей для FIREFOX */ /* ------------------------ */ /* super-catalog-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Внушительный каталог продуктов'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Делает карточки товаров крупными, а их обложки выразительными.'; */ /* ----------------- */ /* НАСТРОЙКИ ДИЗАЙНА */ /* ----------------- */ :root { /* Количество товаров в ряду */ --count-super-catalog: 3; /* Размер текста в описании товара */ --font-size-info-super-catalog: 1.8rem; } /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* На большом экране */ @media (min-width: 1200px) { .shop-row .col-lg-3 { width: calc(100% / var(--count-super-catalog)); } } /* Размер цены и доступа в Каталоге */ /* Актуально, если в ряду 3 товара */ @media (min-width: 1200px) { .shop-row .shop-single-product .product-info { font-size: var(--font-size-info-super-catalog); min-height: 75px; } } /* folder.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Мои папки на главной'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Александра Фомина'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Меняет внешний вид папок на главной странице'; */ /* --- СТИЛЬ ДЛЯ КАРТОЧЕК КУРСОВ (Версия 30, Финальная и Комплексная) --- */ /* === ЧАСТЬ 1: ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ КАРТОЧЕК === */ a.folder-wrap { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; background-color: #fff !important; border-radius: 20px !important; overflow: hidden !important; /* Ключевое свойство для обрезки углов! */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; text-decoration: none !important; position: relative !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } a.folder-wrap:hover { transform: translateY(-5px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; } /* ЭТОТ ПСЕВДОЭЛЕМЕНТ ТЕПЕРЬ ОТВЕЧАЕТ ЗА ОТОБРАЖЕНИЕ КАРТИНКИ */ a.folder-wrap::before { content: ''; display: block; width: 100%; /* Фото везде 4:3: высота = 75% ширины карточки, без обрезки */ height: 0; padding-bottom: 75%; /* 4:3 (3/4 = 0.75) */ order: 1; /* Ставим его первым, над контентом */ flex-shrink: 0; /* ДОБАВЛЕНО: Фоновый цвет, который всегда будет виден, если нет картинки */ background-color: #f0f0f0; /* Стили для фоновой картинки, которая будет задана JS-скриптом */ background-image: var(--card-image); background-size: cover; background-position: center center; background-repeat: no-repeat; /* ФИНАЛЬНЫЙ ФИКС: Скругляем углы для этого контейнера! */ border-radius: 20px 20px 0 0 !important; z-index: 1; /* Слой картинки */ } /* Контентная часть */ a.folder-wrap .folder-content { order: 2; position: relative !important; z-index: 2; /* Контент выше картинки */ padding: 15px !important; background: #fff !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } /* Заголовок */ a.folder-wrap .folder-content h1.title { color: #333 !important; background: none !important; margin-top: 0 !important; margin-bottom: 5px !important; flex-grow: 1 !important; font-size: 16px !important; line-height: 1.3 !important; min-height: 42px; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Стикер */ a.folder-wrap .label { position: absolute !important; top: 15px !important; right: 15px !important; z-index: 3 !important; /* Стикер выше всего */ } /* Нижние иконки */ a.folder-wrap .bottom-icons { display: flex !important; align-items: center !important; margin-bottom: 0 !important; background: none !important; flex-shrink: 0; } a.folder-wrap .folder-icon.status { margin-right: 10px; } /* Если у папки есть обложка, название уже написано на картинке: скрываем текстовый дубль визуально, но оставляем его для скринридеров. */ a.folder-wrap[style*="--card-image"] .folder-content h1.title { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; flex-grow: 0 !important; } /* Заголовок больше не растягивает контент — прижимаем прогресс/статус к низу. */ a.folder-wrap[style*="--card-image"] .folder-content .bottom-icons { margin-top: auto !important; } /* Обновляем и добавляем стили для обертки прогресса курса в папках */ a.folder-wrap .course-progress-wrap { display: flex !important; align-items: center !important; flex-grow: 1 !important; /* --- ДОБАВЛЕНО/ОБНОВЛЕНО --- */ gap: 10px !important; /* Отступ между полосой прогресса и процентом */ margin-top: 10px !important; /* Отступ сверху от других элементов bottom-icons */ padding: 0 !important; box-sizing: border-box !important; position: relative !important; /* --- КОНЕЦ ДОБАВЛЕНО/ОБНОВЛЕНО --- */ } /* Обновляем и добавляем стили для контейнера полосы прогресса */ a.folder-wrap .progress { flex-grow: 1 !important; margin-bottom: 0 !important; /* --- ДОБАВЛЕНО/ОБНОВЛЕНО --- */ height: 15px !important; /* Высота полосы прогресса */ background-color: #f0f0f0 !important; /* Фон непройденной части (светло-серый) */ border-radius: 50px !important; /* Закругление (для .progress-bar-unlock) */ overflow: hidden !important; /* Важно для корректного отображения прогресс-бара */ position: relative !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Легкая тень для глубины */ /* - КОНЕЦ ДОБАВЛЕНО/ОБНОВЛЕНО - */ } /* - НОВЫЕ СТИЛИ ДЛЯ ВНУТРЕННИХ ЭЛЕМЕНТОВ ПРОГРЕССА В ПАПКАХ - */ /* Пройденная часть Прогресса */ a.folder-wrap .course-progress-wrap .progress-bar { height: 100% !important; /* Заполняет всю высоту контейнера .progress */ border-radius: 50px !important; /* Закругление (для левого края, если <100%) */ /* ИСПОЛЬЗУЕМ ВАШИ ПЕРЕМЕННЫЕ ИЗ ХЛЕБНЫХ КРОШЕК */ background-image: linear-gradient(to right, #fffc00 0%, #FF9800 100%) !important; /* <--- ИЗМЕНЕНО: цвета прописаны напрямую */ background-size: 100% 100% !important; /* Чтобы градиент#FF9800 был от начала до конца заполненной части */ transition: width 0.6s ease !important; /* Плавное изменение при обновлении процента */ display: flex !important; /* Для выравнивания текста внутри, если он будет */ align-items: center !important; justify-content: center !important; color: transparent !important; /* Скрываем стандартный текст "sr-only", если он показывается */ font-size: 0 !important; /* Убираем размер шрифта для sr-only */ line-height: 0 !important; /* Убираем line-height для sr-only */ } /* Текст процента прохождения (например, "20%") */ a.folder-wrap .course-progress-wrap .progress-count { font-size: 0.9em !important; font-weight: 600 !important; color: #555 !important; /* Цвет текста процента */ min-width: 40px !important; /* Минимальная ширина, чтобы текст не прыгал */ text-align: right !important; /* Выравнивание по правому краю */ flex-shrink: 0 !important; /* Не сжимается */ } /* Скрываем элемент sr-only, который предназначен для скринридеров */ a.folder-wrap .course-progress-wrap .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; } /* === ЧАСТЬ 2: СКРЫВАЕМ ВЕСЬ ОРИГИНАЛЬНЫЙ SVG-МУСОР И ТЕГИ IMG === */ .folder-wrap .folder-sub-front, .folder-wrap .folder-front, .folder-wrap .folder-back, .folder-wrap .folder-sub, .folder-wrap .folder-sub-back, .folder-wrap .files-group, .folder-wrap img.course-cover-image { /* Скрываем и обычные картинки, если они есть */ display: none !important; } /* === ЧАСТЬ 3: ФИКС ДЛЯ СЕТКИ === */ .row:has(.folder-wrap) { display: flex !important; flex-wrap: wrap !important; } .row:has(.folder-wrap) > div[class*="col-"] { display: flex !important; flex-direction: column !important; } /* --- НОВЫЙ БЛОК: АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ (1 ПАПКА В РЯДУ) --- */ @media (max-width: 767px) { /* Медиа-запрос для экранов шириной до 767px (мобильные устройства) */ /* 1. Настройка сетки для 1 колонки в ряду */ .row:has(.folder-wrap) > div[class*="col-"] { width: 100% !important; /* Каждая колонка занимает всю ширину */ max-width: 100% !important; /* Ограничиваем максимальную ширину */ padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 15px !important; /* Отступ между карточками */ } .row:has(.folder-wrap) { margin-left: -10px !important; /* Компенсация padding колонок */ margin-right: -10px !important; /* Компенсация padding колонок */ } /* 2. Изображение в пропорции 4:3, как и исходные фото (без обрезки) */ a.folder-wrap::before { height: 0 !important; /* Обнуляем фиксированную высоту */ padding-bottom: 75% !important; /* Пропорции 4:3 (3/4 = 0.75) */ background-size: cover !important; /* Фон заполняет контейнер */ background-position: center center !important; /* Центрируем фон */ } /* 3. Заголовок — крупнее и до 2 строк, чтобы название было видно */ a.folder-wrap .folder-content h1.title { min-height: auto !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 18px !important; /* Крупнее, чем на десктопе (16px) */ line-height: 1.35 !important; } /* 4. Чуть больше внутренних отступов контента */ a.folder-wrap .folder-content { padding: 18px !important; } /* 5. Если внизу карточки нечего показывать, убираем пустую белую полосу. Заголовок при этом остаётся в DOM (доступность), просто контент схлопывается. */ a.folder-wrap.folder-no-bottom .bottom-icons { display: none !important; } a.folder-wrap.folder-no-bottom[style*="--card-image"] .folder-content { padding: 0 !important; min-height: 0 !important; flex-grow: 0 !important; } } /* --- КОНЕЦ НОВОГО БЛОКА АДАПТИВНОСТИ --- */ /* --- СКРЫВАЕМ ПУСТОЙ ЗАГОЛОВОК СТРАНИЦЫ "Онлайн-курсы и видео мастер-классы FomiToys" --- */ /* Скрываем только блоки без описания (с кнопкой "Получить доступ"), чтобы не трогать шапку уроков */ .page-title-row:not(:has(.page-description-content)) { display: none !important; } /* --- УМЕНЬШАЕМ ОТСТУПЫ ВОКРУГ ЛОГОТИПА НА МОБИЛЬНЫХ --- */ @media (max-width: 767px) { /* Обнуляем ВСЕ отступы у логотипа и всех его обёрток */ .brand-row, .brand-row .container, .brand-row .row, .brand-row .flex-logo-wrap, .brand-row .wpm_default_header { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* Контейнер занимает всю ширину экрана, содержимое по центру */ .brand-row { display: flex !important; justify-content: center !important; } .brand-row .container { width: 100% !important; max-width: 100% !important; } .brand-row .row, .brand-row .flex-logo-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; } /* Логотип показываем в натуральном размере */ .brand-row .wpm_default_header { display: flex !important; justify-content: center !important; /* Центрируем по горизонтали */ align-items: center !important; /* Центрируем по вертикали */ } .brand-row .brand-logo { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; /* Не ограничиваем, но не даём вылезти за экран */ margin: 0 !important; } } /* --- КОРЗИНА: превью товара в пропорции 4:3, как исходные обложки --- */ @supports (aspect-ratio: 4 / 3) { .woocommerce-cart-form .tab-content .folder-wrap.folder-image { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; background-size: cover !important; background-position: center center !important; } } /* lessons.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Мои папки уроков'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Александра Фомина'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Создает внешний вид уроков без фото'; */ /* --- СТИЛИ ДЛЯ КАРТОЧЕК УРОКОВ ВНУТРИ КУРСА (Версия 31 - Финальное исправление) --- */ /* === 1. ОБЩИЕ СТИЛИ ДЛЯ ВСЕЙ КАРТОЧКИ УРОКА (На основе Версии 20, с исправлениями отступов и высоты) === */ .material-item { display: flex !important; flex-direction: column !important; /* Главный контейнер для вертикального выравнивания */ background-color: #fff !important; border-radius: 25px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; overflow: hidden !important; /* Обрезает содержимое по скругленным углам */ position: relative !important; /* Для абсолютного позиционирования замка и оверлея */ min-height: 0 !important; /* <<< ИСПРАВЛЕНО: Убрана минимальная высота, чтобы не было лишнего отступа >>> */ height: auto !important; /* Высота подстраивается под содержимое */ transition: transform 0.2s ease, box-shadow 0.2s ease !important; /* Эффект при наведении */ margin-bottom: 20px !important; width: 100% !important; } /* Эффект при наведении на карточку */ .material-item:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important; } /* Ссылка-обёртка для всего содержимого карточки */ .material-item > a.flex-wrap { display: flex !important; flex-direction: column !important; /* Элементы внутри ссылки располагаются вертикально */ padding: 20px !important; /* Единые отступы со всех сторон */ justify-content: flex-start !important; /* Элементы начинаются сверху */ text-decoration: none !important; color: inherit !important; width: 100% !important; min-height: 0 !important; /* <<< ИСПРАВЛЕНО: Убрана минимальная высота, чтобы не было лишнего отступа >>> */ height: auto !important; /* Высота подстраивается по контенту */ flex-grow: 0 !important; /* <<< ИСПРАВЛЕНО: Убран flex-grow, чтобы не было лишнего растягивания >>> */ background-color: transparent !important; border: none !important; overflow: visible !important; /* <<< ИСПРАВЛЕНО: Убеждаемся, что содержимое не обрезается >>> */ } /* === 2. ВИЗУАЛЬНЫЙ ПОРЯДОК ЭЛЕМЕНТОВ (col-content сверху, col-thumb снизу, как на референсе) === */ /* col-content содержит заголовок и описание, ставим его первым визуально */ .material-item > a.flex-wrap > .col-content { order: 1 !important; /* col-content первым */ flex-grow: 0 !important; /* <<< ИСПРАВЛЕНО: Убран flex-grow, чтобы блок не создавал лишнюю пустоту >>> */ flex-shrink: 0 !important; width: 100% !important; background-color: transparent !important; border: none !important; box-shadow: none !important; /* >>> АГРЕССИВНЫЙ СБРОС ОТСТУПОВ И ВЫСОТЫ ДЛЯ УДАЛЕНИЯ ФИОЛЕТОВОЙ ОБЛАСТИ <<< */ padding: 0 !important; margin: 0 !important; /* Сбрасываем все margin (включая margin-bottom) */ padding-top: 0 !important; /* Отдельный сброс padding */ padding-right: 0 !important; padding-bottom: 0 !important; /* Гарантированный сброс padding-bottom */ padding-left: 0 !important; margin-top: 0 !important; /* Отдельный сброс margin */ margin-right: 0 !important; margin-bottom: 0 !important; /* Гарантированный сброс margin-bottom */ margin-left: 0 !important; min-height: 0 !important; /* Убеждаемся, что нет минимальной высоты */ height: auto !important; /* Высота подстраивается под содержимое */ /* Конец агрессивного сброса */ display: flex !important; /* Делаем его flex-контейнером для .content-wrap */ flex-direction: column !important; position: relative !important; /* Контекст для абсолютного позиционирования content-overlay */ overflow: hidden !important; /* На всякий случай, если что-то выходит за рамки */ } /* col-thumb содержит кнопки, ставим его вторым визуально */ .material-item > a.flex-wrap > .col-thumb { order: 2 !important; /* col-thumb вторым (снизу) */ flex-shrink: 0 !important; width: 100% !important; height: auto !important; background: transparent !important; padding: 0 !important; border: none !important; margin-top: 0 !important; /* Отсутствие auto-margin */ min-height: 0 !important; overflow: visible !important; /* <<< ИСПРАВЛЕНО: Убеждаемся, что содержимое не обрезается >>> */ } /* === 3. СКРЫВАЕМ НЕИСПОЛЬЗУЕМЫЕ/ФОНОВЫЕ ЭЛЕМЕНТЫ (фото и оригинальные иконки/замок) === */ /* Убираем фоновое изображение у thumbnail-wrap (фото) и стилизуем его для кнопок */ .material-item .col-thumb .thumbnail-wrap { background-image: none !important; /* <<< НЕТ ФОТО! <<< */ background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: flex !important; /* Делаем thumbnail-wrap flex-контейнером для его детей (кнопок) */ width: 100% !important; align-items: center !important; /* Выравнивание по центру вертикально */ flex-wrap: wrap !important; /* Позволяет кнопкам переноситься на новую строку */ gap: 10px !important; /* Отступ между кнопками */ justify-content: flex-start !important; /* Кнопки по умолчанию слева */ min-height: 0 !important; margin-top: 15px !important; /* <<< ЖЕЛАЕМЫЙ ОТСТУП: Отступ от описания к кнопкам, как в Версии 20 >>> */ overflow: visible !important; /* <<< ИСПРАВЛЕНО: Убеждаемся, что содержимое не обрезается >>> */ } /* Скрываем ненужные элементы из HTML, которые будут заменены ::before */ .material-item .col-thumb .icons-top { display: contents !important; /* Снимаем с него flex-контейнер, чтобы inner .icons стал прямым потомком .thumbnail-wrap */ } .material-item .col-thumb .icons-top .icons { display: flex !important; /* Делаем .icons flex-контейнером для .m-icon */ flex-wrap: wrap !important; gap: 10px !important; /* Отступ между кнопками */ width: 100% !important; /* Растягиваем на всю ширину */ justify-content: flex-start !important; /* Кнопки слева */ padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Скрываем оригинальный span с иконкой внутри m-icon (т.к. мы используем ::before) */ .material-item .m-icon span, .material-item .m-icon i, .material-item .m-icon svg { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; position: absolute !important; content: none !important; background-image: none !important; } /* Скрываем также любой ::after на .m-icon, если он генерируется темой */ .material-item .m-icon::after { content: none !important; display: none !important; visibility: hidden !important; } /* Скрываем оригинальный элемент замка из HTML (т.к. мы используем ::before на material-item) */ .material-item .status-icon { display: none !important; } /* Скрываем icons-bottom (комментарии/просмотры) по умолчанию */ .material-item .col-thumb .icons-bottom { display: none !important; } /* Скрываем оригинальный span "доступ открыт" - теперь он используется для наведения, но по умолчанию скрыт */ .material-item .content-overlay > .doc-label.opened { display: none !important; /* По умолчанию скрыт, показывается только при наведении */ } /* === 4. СТИЛИ ДЛЯ ЗАГОЛОВКА И ОПИСАНИЯ (ШРИФТЫ КАК В ВЕРСИИ 20 для соответствия скриншоту) === */ .material-item .col-content .content-wrap { flex-grow: 0 !important; /* <<< ИСПРАВЛЕНО: Убран flex-grow, чтобы блок не создавал лишнюю пустоту >>> */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; width: 100% !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; margin: 0 !important; /* Дополнительно сбрасываем margin на content-wrap */ } /* Заголовок урока (размер шрифта из версии 20) */ .material-item .col-content .content-wrap .title { font-size: 1.1em !important; /* Размер шрифта, как на образце в Версии 20 */ font-weight: 700 !important; color: #333 !important; margin-top: 0 !important; margin-bottom: 8px !important; /* Отступ от описания, как на образце */ line-height: 1.3 !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; overflow: visible !important; text-overflow: unset !important; } /* Описание урока (размер шрифта из версии 20) */ .material-item .col-content .content-wrap .description { font-size: 0.9em !important; /* Размер шрифта описания, как на образце в Версии 20 */ color: #666 !important; line-height: 1.4 !important; margin-bottom: 0px !important; /* Отсутствие отступа после описания */ min-height: 0 !important; flex-grow: 0 !important; /* Убеждаемся, что описание не растягивается */ } .material-item .col-content .content-wrap .description p { margin-bottom: 0 !important; } .material-item .col-content .content-wrap .description p:empty { display: none !important; } /* === 5. Замок (из Версии 20, позиция: правый нижний угол) === */ .material-item::before { /* Используем ::before для замка */ content: ''; /* По умолчанию пустой, если нет статуса */ font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'dashicons', sans-serif !important; /* <<< ВАЖНО: Убедитесь, что Font Awesome загружен! >>> */ font-weight: 900 !important; /* Для Solid иконок Font Awesome */ position: absolute !important; bottom: 20px !important; /* Отступ снизу, соответствует внутреннему padding */ right: 20px !important; /* Отступ справа, соответствует внутреннему padding */ top: auto !important; /* Сбрасываем top */ left: auto !important; /* Сбрасываем left */ font-size: 1.2em !important; /* Размер иконки */ z-index: 10 !important; /* Поверх всего контента (выше оверлея) */ pointer-events: none !important; /* Чтобы не мешал кликам по ссылке */ display: inline-block !important; /* Убеждаемся, что псевдо-элемент отображается */ visibility: visible !important; /* Убеждаемся, что псевдо-элемент видим */ } /* Стиль для открытого замка (если карточка имеет класс material-opened) */ .material-item.material-opened::before { content: '\f09c' !important; /* Юникод Font Awesome 'unlock' */ color: #79c142 !important; /* Ярко-зеленый цвет */ } /* Стиль для закрытого замка (если карточка НЕ имеет класс material-opened или имеет material-locked) */ .material-item:not(.material-opened)::before, .material-item.material-locked::before { content: '\f023' !important; /* Юникод Font Awesome 'lock' */ color: #bbb !important; /* Серый цвет */ } /* === 6. Стилизация КНОПОК ("Описание", "Видео", "+ Файл") (Обновленный стиль: контурные кнопки) === */ .material-item .m-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Убираем border: none, добавляем прозрачную рамку по умолчанию */ border: 1px solid transparent !important; /* Базовая прозрачная рамка */ border-radius: 25px !important; /* Вернул 8px, если 20px - опечатка или вам нужен круглый, скажите */ padding: 8px 15px !important; font-size: 0.85em !important; font-weight: 600 !important; cursor: pointer !important; /* transition теперь включает background-color, color, и border-color */ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; pointer-events: all !important; text-decoration: none !important; position: static !important; margin: 0 !important; width: auto !important; height: auto !important; line-height: 1.2 !important; flex-shrink: 0 !important; order: 1 !important; background-image: none !important; background-color: transparent !important; /* Кнопка по умолчанию прозрачная */ color: inherit !important; /* Цвет текста будет задаваться ниже */ text-indent: 0 !important; min-width: 0 !important; overflow: visible !important; } /* Общие стили для ::before кнопок (иконка + текст) */ .material-item .m-icon::before { font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', sans-serif !important; font-weight: 900 !important; margin-right: 5px !important; font-size: 1em !important; color: inherit !important; /* Наследуем цвет от родителя (.m-icon) */ display: inline-flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; width: auto !important; height: auto !important; position: static !important; content: ''; } /* Кнопка "Видео" (для .m-icon.video) */ .material-item .m-icon.video { background-color: transparent !important; /* Делаем фон прозрачным */ border-color: #ff9800 !important; /* Рамка светло-красного цвета */ color: #ff9800 !important; /* Текст и иконка светло-красного цвета */ } .material-item .m-icon.video::before { content: '\f03d Видео' !important; } .material-item .m-icon.video:hover { background-color: #ff9800 !important; /* Наведение: фон становится светло-красным (как был hover) */ border-color: #ff9800 !important; /* Рамка тоже светло-красная */ color: #ff9800 !important; /* Текст и иконка становятся темно-красными (как был original color) */ } /* Кнопка "+ Файл" (для .m-icon.audio) */ .material-item .m-icon.audio { background-color: transparent !important; /* Делаем фон прозрачным */ border-color: #ff9800 !important; /* Рамка светло-оранжевого цвета */ color: #ff9800 !important; /* Текст и иконка светло-оранжевого цвета */ } .material-item .m-icon.audio::before { content: '\f15c + Файл' !important; } .material-item .m-icon.audio:hover { background-color: #ff9800 !important; /* Наведение: фон становится светло-оранжевым */ border-color: #ff9800 !important; /* Рамка тоже светло-оранжевая */ color: #ff9800 !important; /* Текст и иконка становятся темно-оранжевыми */ } /* Кнопка "Описание" (для .m-icon.file) */ .material-item .m-icon.file { background-color: transparent !important; /* Делаем фон прозрачным */ border-color: #ff9800 !important; /* Рамка светло-оранжевого цвета */ color: #ff9800 !important; /* Текст и иконка светло-оранжевого цвета */ } .material-item .m-icon.file::before { content: '\f15c Описание' !important; } .material-item .m-icon.file:hover { background-color: #ff9800 !important; /* Наведение: фон становится светло-оранжевым */ border-color: #ff9800 !important; /* Рамка тоже светло-оранжевая */ color: #ff9800 !important; /* Текст и иконка становятся темно-оранжевыми */ } /* --- НОВЫЙ БЛОК: СТИЛИ ДЛЯ ОТМЕТКИ О ПРОХОЖДЕНИИ УРОКА --- */ /* 1. Скрываем оригинальную галочку, которая выходила за пределы */ /* Судя по скриншоту, галочка - это псевдоэлемент ::after у div.col-thumb.done */ .material-item .col-thumb.done::after { display: none !important; content: none !important; } /* На всякий случай, если галочка может быть и у .thumbnail-wrap.done::after */ .material-item .col-thumb .thumbnail-wrap.done::after { display: none !important; content: none !important; } /* 2. Новый контейнер для кнопки статуса урока */ /* Этот контейнер будет создан JavaScript'ом и помещен в конец a.flex-wrap */ .material-item .lesson-status-container { display: flex !important; justify-content: flex-start !important; /* Выравнивание по левому краю, как и другие кнопки */ align-items: center !important; width: 100% !important; margin-top: 15px !important; /* Отступ сверху, чтобы отделить от предыдущего блока */ padding: 0 !important; flex-shrink: 0 !important; /* Убеждаемся, что этот контейнер отображается после col-content (order: 1) и col-thumb (order: 2) */ order: 3 !important; } /* 3. Базовые стили для кнопки "Урок пройден / не пройден" */ .material-item .m-icon.lesson-status { /* Базовые стили кнопки, как и для других m-icon */ display: inline-flex !important; /* Всегда отображаем, так как статус всегда должен быть виден */ align-items: center !important; justify-content: center !important; border: none !important; border-radius: 25px !important; padding: 8px 15px !important; font-size: 0.85em !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color 0.2s ease !important; pointer-events: all !important; text-decoration: none !important; position: static !important; /* Убеждаемся, что не абсолютно позиционирован */ margin: 0 !important; /* Сбрасываем любые стандартные отступы */ width: auto !important; height: auto !important; line-height: 1.2 !important; flex-shrink: 0 !important; } /* 4. Стили для кнопки "Урок пройден" (если карточка имеет класс material-done) */ .material-item.material-done .m-icon.lesson-status { background-color: #e6ffed !important; /* Светло-зеленый фон */ color: #4CAF50 !important; /* Темно-зеленый текст */ } .material-item.material-done .m-icon.lesson-status::before { font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', sans-serif !important; /* Используем Font Awesome */ font-weight: 900 !important; /* Для Solid иконок */ content: '\f00c Урок пройден' !important; /* Иконка галочки (\f00c) + текст */ margin-right: 0 !important; /* Убираем отступ, так как текст внутри content */ } .material-item.material-done .m-icon.lesson-status:hover { background-color: #c8e6c9 !important; /* Чуть более темный зеленый при наведении */ } /* 5. Стили для кнопки "Урок не пройден" (если карточка НЕ имеет класс material-done) */ .material-item:not(.material-done) .m-icon.lesson-status { background-color: #ffebe6 !important; /* Светло-красный фон */ color: #ff5252 !important; /* Красный текст */ } .material-item:not(.material-done) .m-icon.lesson-status::before { font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', sans-serif !important; /* Используем Font Awesome */ font-weight: 900 !important; /* Для Solid иконок */ content: '\f06a Урок не пройден' !important; /* Иконка восклицательного знака (\f06a) + текст */ margin-right: 0 !important; /* Убираем отступ, так как текст внутри content */ } .material-item:not(.material-done) .m-icon.lesson-status:hover { background-color: #ffdede !important; /* Чуть более темный красный при наведении */ } /* - КОНЕЦ НОВОГО БЛОКА - */ /* === 7. НАВЕДЕНИЕ: БЕЛЫЙ ОВЕРЛЕЙ с кнопкой/лейблом (ВОССТАНОВЛЕНО КАК В ВЕРСИИ 20, с учетом HTML) === */ .material-item .content-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(255, 255, 255, 0.7) !important; /* Бело-серый, полупрозрачный фон */ display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; /* Изначально скрыт */ visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; z-index: 5 !important; /* Поверх другого контента, но ниже замка */ pointer-events: none !important; /* Чтобы по умолчанию не перехватывал события */ } /* Показываем content-overlay при наведении на всю карточку */ .material-item:hover .content-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; /* Разрешаем клики по оверлею и его содержимому */ } /* Стиль для кнопки внутри content-overlay (красная кнопка "Посмотреть урок" или "доступ открыт") */ .material-item:hover .content-overlay > span.doc-label.opened, /* Для открытой карточки с label "доступ открыт" */ .material-item:hover .content-overlay > a.btn-primary, /* Для закрытой карточки, если используется theme button */ .material-item:hover .content-overlay > .btn-default, /* Другие варианты theme button */ .material-item:hover .content-overlay > .text-overlay /* Еще один вариант theme button/overlay text */ { display: inline-flex !important; /* Показываем и стилизуем как кнопку */ align-items: center !important; justify-content: center !important; font-size: 1.1em !important; padding: 10px 20px !important; border-radius: 25px !important; color: #fff !important; text-decoration: none !important; transition: background-color 0.2s ease !important; cursor: pointer !important; line-height: 1.2 !important; pointer-events: all !important; /* Разрешаем клики */ position: relative !important; z-index: 1 !important; } /* Эффект при наведении на саму кнопку внутри оверлея */ .material-item:hover .content-overlay > span.doc-label.opened:hover, .material-item:hover .content-overlay > a.btn-primary:hover, .material-item:hover .content-overlay > .btn-default:hover, .material-item:hover .content-overlay > .text-overlay:hover { background-color: #FF9800 !important; } /* === 8. ФИКС ДЛЯ СЕТКИ (как в Версии 20 / Версии 7) === */ /* Десктопы: 3 колонки */ @media (min-width: 768px) { .site-content .materials-row .col-md-6, .site-content .materials-row .col-lg-6 { width: calc(100% / 3) !important; flex: 0 0 calc(100% / 3) !important; max-width: calc(100% / 3) !important; } } /* Мобильные устройства: 1 колонка */ @media (max-width: 767px) { .site-content .materials-row .col-md-6, .site-content .materials-row .col-lg-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* >>> ИЗМЕНЕНИЯ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ, ЧТОБЫ СООТВЕТСТВОВАТЬ ДЕСКТОПНОЙ <<< */ /* Кнопки теперь будут выравниваться по левому краю, как на десктопе */ .material-item .col-thumb .thumbnail-wrap { justify-content: flex-start !important; /* Изменено: было center, стало flex-start */ gap: 10px !important; /* Возвращаем десктопное значение, если оно было изменено */ margin-top: 15px !important; /* Убеждаемся, что отступ такой же, как на десктопе */ } .material-item .col-thumb .icons-top .icons { justify-content: flex-start !important; /* Изменено: было center, стало flex-start */ } /* Замок возвращается к абсолютному позиционированию в правом нижнем углу, как на десктопе */ .material-item::before { /* Наш псевдо-элемент замка */ position: absolute !important; /* Изменено: было static, стало absolute */ bottom: 20px !important; /* Возвращаем десктопное значение */ right: 20px !important; /* Возвращаем десктопное значение */ top: auto !important; /* Сбрасываем top, left, если они были установлены мобильными стилями */ left: auto !important; margin-left: auto !important; /* Сброс мобильных margin */ margin-right: auto !important; /* Сброс мобильных margin */ margin-top: 0 !important; /* Убираем mobile-специфичный отступ */ order: unset !important; /* Отменяем mobile-специфичный order */ } } /* Убеждаемся, что родительский .row правильно форматирует колонки */ .row:has(.material-item) { display: flex !important; flex-wrap: wrap !important; margin-left: -10px !important; margin-right: -10px !important; } .row:has(.material-item) > div[class*="col-"] { display: flex !important; flex-direction: column !important; padding-left: 10px !important; padding-right: 10px !important; flex-grow: 0 !important; flex-shrink: 0 !important; } /* progress.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Мои стили уроков'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Александра Фомина'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "https://school.fomitoys.ru/wp-content/uploads/2021/11/1598513258153.jpg"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Меняет внешний самого урока'; */ /* === FOUC Prevention: Скрытие вкладок "Задание" и "Вложения" до загрузки JS === */ /* Эти правила скрывают вкладки и их контент до того, как JS их переместит */ .lesson-tasks-nav, #lesson-tasks, .lesson-files-nav, #lesson-files { display: none !important; visibility: hidden !important; } /* --- СТИЛИ ДЛЯ ВНУТРЕННИХ СТРАНИЦ УРОКА (ОБЩИЙ КОНТЕЙНЕР И СОДЕРЖИМОЕ) --- */ /* 1. Общие стили для внешнего контейнера урока (white-tabs) */ .lesson-tabs.white-tabs { background-color: #fff !important; /* Светлый фон по умолчанию */ border-radius: 25px !important; /* Закругленные углы 25px */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important; /* Мягкая тень для объема */ overflow: hidden !important; /* Важно, чтобы содержимое не выходило за закругленные углы */ margin-bottom: 30px !important; /* Отступ снизу от других элементов на странице */ border: none !important; /* УБИРАЕМ: Убедимся, что нет явной рамки */ outline: none !important; /* Убираем возможный outline (может выглядеть как рамка) */ } /* Явно убираем границы с класса 'bordered-tabs', который является источником рамки */ .lesson-tabs.bordered-tabs, .comments-tabs.bordered-tabs { /* Добавлено для блока комментариев */ border: none !important; /* Сбрасываем все границы */ outline: none !important; /* Сбрасываем все outline */ } /* Проверяем также внутренний контейнер содержимого на наличие границ */ .lesson-tabs .tab-content, .comments-tabs .tab-content { /* Добавлено для блока комментариев */ border: none !important; outline: none !important; } /* 2. Общие отступы, центрирование и максимальная ширина контента внутри урока */ .lesson-content .content-wrap { padding: 25px 30px !important; /* Внутренние отступы со всех сторон */ max-width: 800px !important; /* Ограничиваем ширину контента для лучшей читаемости */ margin: 0 auto 30px auto !important; /* Центрируем блок контента, добавляем отступ снизу */ box-sizing: border-box !important; /* Учитываем padding в расчете ширины */ } /* 3. Стилизация абзацев (p) */ .lesson-content p { font-size: 1.1em !important; /* Увеличить размер шрифта */ line-height: 1.6 !important; /* Увеличить межстрочный интервал для читаемости */ margin-bottom: 1.5em !important; /* Отступ после абзаца */ color: #333 !important; /* Темно-серый цвет текста по умолчанию */ word-wrap: break-word !important; /* Обеспечивает перенос длинных слов */ } /* 4. Стилизация списков (ul, ol) и их элементов (li) */ .lesson-content ul, .lesson-content ol { font-size: 1.1em !important; /* Размер шрифта как у абзацев */ line-height: 1.6 !important; /* Межстрочный интервал */ margin-bottom: 1.5em !important; /* Отступ после списка */ margin-left: 25px !important; /* Отступ слева для списка */ color: #333 !important; /* Темно-серый цвет текста по умолчанию */ } .lesson-content ul { list-style-type: disc !important; /* Стандартные круглые маркеры */ } .lesson-content ol { list-style-type: decimal !important; /* Стандартная нумерация */ } .lesson-content li { margin-bottom: 0.8em !important; /* Отступ между пунктами списка */ } /* 5. Стилизация изображений внутри контента (кроме смайликов/эмодзи) */ .lesson-content img:not(.wp-smiley):not(.emoji) { border-radius: 25px !important; /* Закругленные углы для всех изображений */ max-width: 100% !important; /* Адаптивность изображений */ height: auto !important; /* Сохранение пропорций */ display: block !important; /* Для корректного центрирования и отступов */ margin-left: auto !important; /* Центрирование изображения */ margin-right: auto !important; /* Центрирование изображения */ margin-top: 1.5em !important; /* Отступ сверху */ margin-bottom: 1.5em !important; /* Отступ снизу */ box-sizing: border-box !important; /* Учитываем padding/border */ } /* Смайлики и эмодзи в контенте урока: оставляем их в строке текста, как встроенные */ .lesson-content img.wp-smiley, .lesson-content img.emoji { display: inline !important; /* Возвращаем построчное отображение */ margin: 0 0.07em !important; /* Стандартные отступы WordPress для эмодзи */ vertical-align: -0.1em !important; /* Выравнивание по базовой линии */ max-width: 1em !important; /* Не даём смайлику растягиваться */ height: 1em !important; /* Фиксируем размер как у обычного эмодзи */ width: auto !important; border-radius: 0 !important; /* Без скругления */ padding: 0 !important; box-shadow: none !important; box-sizing: content-box !important; } /* 6. Стилизация видеоплеера для полной адаптивности и ИСПРАВЛЕНИЕ СМЕЩЕНИЯ */ .wp-video { width: 100% !important; max-width: 980px !important; margin: 25px auto !important; position: relative !important; padding-bottom: 56.25% !important; /* Аспектное соотношение 16:9 */ height: 0 !important; overflow: hidden !important; background-color: #000 !important; border-radius: 12px !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; } .wp-video .mejs-container, .wp-video .mejs-inner, .wp-video .mejs-mediaelement, .wp-video mediaelementwrapper, .wp-video .mejs-poster, /* Важно для превью */ .wp-video .mejs-layers { position: absolute !important; top: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; min-width: unset !important; max-width: unset !important; min-height: unset !important; max-height: unset !important; object-fit: contain !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } .wp-video video { top: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; min-width: unset !important; max-width: unset !important; min-height: unset !important; max-height: unset !important; object-fit: contain !important; box-sizing: border-box !important; } .wp-video .mejs-poster { background-size: cover !important; /* Или 'contain', если хотите видеть все края, но с черными полосами */ background-position: center center !important; } /* 7. Стили для элементов управления видеоплеером (оранжевые цвета) */ .wp-video .mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgba(255, 152, 0, 0.4) !important; } .wp-video .mejs-controls .mejs-time-rail .mejs-time-current { background: #ff9800 !important; } .wp-video .mejs-controls .mejs-time-rail .mejs-time-handle-content { background: #ff9800 !important; border-color: #ff9800 !important; } .wp-video .mejs-controls .mejs-time, .wp-video .mejs-controls .mejs-button button { color: #fff !important; } /* - СТИЛИ ДЛЯ БЛОКА КОММЕНТАРИЕВ (wpm-comments-wrap) - */ .wpm-comments-wrap { margin-top: 0 !important; /* Отступ сверху убираем, чтобы блок шёл сразу после урока */ margin-bottom: 50px !important; /* Отступ снизу */ } .comments-tabs { background-color: #fff !important; /* Белый фон для всего блока комментариев */ border-radius: 25px !important; /* Закругленные углы для всего блока */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important; /* Мягкая тень */ overflow: hidden !important; /* Обрезает углы содержимого */ } /* Заголовок блока комментариев */ .comments-header { display: flex !important; /* Не даём блоку схлопнуться из-за float и выравниваем содержимое */ justify-content: flex-end !important; /* Счётчик прижимаем вправо (как было изначально) */ align-items: center !important; padding: 0 !important; /* Убираем внутренние отступы */ margin: 0 !important; /* Убираем внешние отступы (были 10px 0 30px в app.css) */ font-size: 1.2em !important; font-weight: 600 !important; color: #333 !important; border-bottom: none !important; /* ИЗМЕНЕНИЕ: Убираем разделительную полоску */ } .comments-header .all-comments-count { float: none !important; /* Отменяем float от .pull-right, чтобы работал flex */ margin: 0 !important; } .comments-row { margin-top: 0 !important; /* Убираем отступ сверху у контейнера комментариев */ padding-top: 0 !important; } .comments-header .all-comments-count { font-size: 0.9em !important; color: #888 !important; } /* 8. Стилизация кнопок "Предыдущий урок" и "Следующий урок" (Оранжевые) */ /* Общие стили для кнопок навигации */ .reading-status-row .ui-icon-wrap { display: inline-flex !important; align-items: center !important; padding: 10px 15px !important; border-radius: 25px !important; /* Закругление до 25px */ text-decoration: none !important; background-color: #ff9800 !important; /* Яркий оранжевый фон (исправлено) */ color: #FFFFFF !important; font-size: 0.9em !important; font-weight: 500 !important; transition: background-color 0.3s ease, box-shadow 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; } /* Ховер эффект для оранжевых кнопок */ .reading-status-row .ui-icon-wrap:hover { background-color: #e68900 !important; /* Чуть темнее оранжевый при наведении (исправлено) */ color: #FFFFFF !important; box-shadow: 0 4px 8px rgba(0,0,0,0.25) !important; } /* Отступы для иконок внутри кнопок */ .reading-status-row .prev.ui-icon-wrap .iconmoon { margin-right: 8px !important; } .reading-status-row .next.ui-icon-wrap .iconmoon { margin-left: 8px !important; } /* 9. Стилизация переключателя "Пройден/Не пройден" (Белая иконка) */ .reading-status-row .status-toggle-wrap .iconmoon { color: #FFFFFF !important; /* Делаем иконку белой */ font-size: 1.2em !important; margin-right: 5px !important; } /* 10. Стилизация нового блока "Задание к уроку" */ .lesson-task-standalone-block { margin-top: 40px !important; /* Отступ сверху от предыдущего блока */ margin-bottom: 40px !important; /* Отступ снизу до следующего блока */ padding: 30px !important; /* Внутренние отступы */ background-color: #ffffff !important; /* Белый фон, как у основного контента */ border: none !important; /* Убираем рамку */ border-radius: 25px !important; /* Закругленные края до 25px */ box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important; /* Мягкая тень, как у основных блоков */ overflow: hidden !important; /* Убеждаемся, что содержимое не выходит за углы */ } /* Заголовок "Задание к уроку" */ .lesson-task-standalone-block h2 { font-size: 1.8em !important; /* Размер заголовка */ color: #ff9800 !important; /* Оранжевый цвет заголовка */ text-align: center !important; /* Центрирование заголовка */ margin-top: 0 !important; margin-bottom: 20px !important; /* Отступ снизу от текста задания */ padding-bottom: 15px !important; border-bottom: 2px solid #f0f0f0 !important; /* Более выраженная линия под заголовком */ } /* Скрытие надписи "Ответьте на вопрос:" */ .lesson-task-standalone-block .question .title { display: none !important; } /* Гарантируем видимость содержимого блока "Задание к уроку" */ .lesson-task-standalone-block #lesson-tasks { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; min-height: 50px !important; /* Минимальная высота на всякий случай */ margin: 0 !important; /* Сброс внешних отступов */ padding: 0 !important; /* Сброс внутренних отступов */ } .lesson-task-standalone-block #lesson-tasks p, .lesson-task-standalone-block #lesson-tasks ul, .lesson-task-standalone-block #lesson-tasks ol, .lesson-task-standalone-block #lesson-tasks li { font-size: 1.1em !important; /* Размер шрифта как у основного контента*/ line-height: 1.6 !important; color: #333 !important; margin-bottom: 1.5em !important; } .lesson-task-standalone-block #lesson-tasks ul, .lesson-task-standalone-block #lesson-tasks ol { margin-left: 25px !important; /* Отступ для списков */ } /* Скрываем весь навигационный блок табов урока */ .nav.nav-tabs.text-center[role="tablist"] { display: none !important; } /* --- 11. Стилизация нового блока "Вложения к уроку" --- */ .lesson-files-standalone-block { margin-top: 40px !important; /* Отступ сверху от предыдущего блока */ margin-bottom: 40px !important; /* Отступ снизу до следующего блока */ padding: 30px !important; /* Внутренние отступы */ background-color: #ffffff !important; /* Белый фон, как у основного контента */ border: none !important; /* Убираем рамку */ border-radius: 25px !important; /* Закругленные края до 25px */ box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important; /* Мягкая тень, как у основных блоков */ overflow: hidden !important; /* Убеждаемся, что содержимое не выходит за углы */ } /* Заголовок "Вложения к уроку" */ .lesson-files-standalone-block h2 { font-size: 1.8em !important; /* Размер заголовка */ color: #ff9800 !important; /* Оранжевый цвет заголовка */ text-align: center !important; /* Центрирование заголовка */ margin-top: 0 !important; margin-bottom: 20px !important; /* Отступ снизу */ padding-bottom: 15px !important; border-bottom: 2px solid #f0f0f0 !important; /* Разделительная линия под заголовком */ } /* Гарантируем видимость содержимого блока "Вложения к уроку" */ .lesson-files-standalone-block #lesson-files { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; min-height: 50px !important; /* Минимальная высота на всякий случай */ margin: 0 !important; /* Сброс внешних отступов */ padding: 0 !important; /* Сброс внутренних отступов */ } /* Список файлов внутри перенесенного блока */ .lesson-files-standalone-block .lesson-files-list { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; overflow: visible !important; } /* Карточка каждого файла */ .lesson-files-standalone-block .lesson-files-list a { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: calc(25% - 12px) !important; /* 4 карточки в ряд на десктопе */ min-height: 100px !important; margin: 0 !important; padding: 15px 10px !important; float: none !important; border: 1px solid #f0f0f0 !important; border-radius: 15px !important; background-color: #fafaf8 !important; box-sizing: border-box !important; text-align: center !important; text-decoration: none !important; transition: all 0.2s ease !important; } .lesson-files-standalone-block .lesson-files-list a:hover { background-color: #fff !important; border-color: #ff9800 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; } /* Иконка файла */ .lesson-files-standalone-block .lesson-files-list a .fa { position: static !important; font-size: 32px !important; margin-bottom: 8px !important; color: #ff9800 !important; } /* Расширение */ .lesson-files-standalone-block .lesson-files-list a .extension { margin-top: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #999 !important; text-align: center !important; } /* Имя файла — переносим на несколько строк, чтобы название было видно полностью */ .lesson-files-standalone-block .lesson-files-list a .filename { font-size: 13px !important; line-height: 1.3 !important; color: #333 !important; max-width: 100% !important; overflow: visible !important; white-space: normal !important; /* Разрешаем перенос строк */ word-break: break-word !important; /* Переносим длинные слова */ text-align: center !important; } /* Стилизация табов навигации комментариев (Основано на вашем файле) */ .comments-tabs .nav-tabs { border-bottom: none !important; /* Удаляем стандартную нижнюю границу */ background-color: #f9f9f9 !important; /* Светлый фон для панели табов */ overflow: hidden !important; /* Убеждаемся, что закругления применяются */ margin-top: 0 !important; /* Отменяем возможный margin-top, чтобы он не конфликтовал с padding .comments-tabs */ margin-bottom: 0 !important; /* Отменяем возможный margin-bottom, чтобы не было лишнего пространства до содержимого */ display: flex !important; /* Для правильного отображения табов */ justify-content: center !important; /* Центрируем табы */ padding: 0 30px !important; /* Отступы для табов, чтобы не прилипали к краям */ } .comments-tabs .nav-tabs li { margin-bottom: 0 !important; /* Убираем отступы, которые могут вызывать проблемы с границами */ margin-right: 10px !important; /* Отступ между табами */ } .comments-tabs .nav-tabs li a { border: none !important; /* Убираем все границы с самих ссылок */ border-radius: 25px !important; /* Закругление 25px для табов */ padding: 12px 20px !important; /* Скорректирован padding для лучшего вида с радиусом */ font-weight: 500 !important; color: #666 !important; /* Цвет неактивных табов */ background-color: transparent !important; /* Прозрачный фон */ transition: all 0.2s ease-in-out !important; /* Плавный переход */ display: flex !important; /* Для выравнивания иконки и текста */ align-items: center !important; gap: 5px !important; /* Отступ между иконкой и текстом */ } .comments-tabs .nav-tabs li a:hover { color: #ff9800 !important; /* Оранжевый при наведении */ background-color: #f0f0f0 !important; /* Легкий фон при наведении */ } .comments-tabs .nav-tabs li.active a { color: #ff9800 !important; /* Активный таб оранжевый */ background-color: #fff !important; /* Белый фон активного таба */ border-bottom: 3px solid #ff9800 !important; /* Оранжевая полоска снизу активного таба */ font-weight: 600 !important; } .comments-tabs .nav-tabs li.active a:hover { color: #ff9800 !important; /* Активный таб остается оранжевым при наведении */ background-color: #fff !important; /* Фон активного таба остается белым при наведении */ } /* Содержимое табов */ .comments-tabs .tab-content { padding: 25px 30px !important; /* Внутренние отступы для всего содержимого таба */ border-top: none !important; /* Убираем верхнюю границу, если есть */ background-color: #fff !important; /* Фон содержимого таба */ border-bottom-left-radius: 25px !important; /* Закругления нижней части */ border-bottom-right-radius: 25px !important; /* Закругления нижней части */ } /* Форма добавления комментария */ .wpm-comment-form { margin-bottom: 25px !important; padding: 0 30px !important; /* Добавляем горизонтальные отступы для формы, чтобы она была внутри закруглений .comments-tabs */ } .wpm-comment-form .form-title { font-size: 1.1em !important; font-weight: 600 !important; color: #333 !important; margin-bottom: 15px !important; margin-top: 25px !important; /* Отступ от нижнего края табов */ } /* Стилизация Summernote редактора (текстового поля) */ .wpm-comment-form .note-editor { border-radius: 25px !important; /* Закругления для текстового поля до 25px */ border: none !important; /* Убираем рамку */ box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Легкая тень вместо рамки */ margin-bottom: 15px !important; background-color: #fff !important; overflow: hidden !important; /* Важно: обрезает углы содержимого по радиусу */ } /* Панель инструментов Summernote */ .wpm-comment-form .note-editor .note-toolbar.panel-heading { background-color: #f9f9f9 !important; /* Светлый фон для панели инструментов */ border-bottom: 1px solid #eee !important; border-top-left-radius: 25px !important; /* Закругление верхних углов */ border-top-right-radius: 25px !important; /* Закругление верхних углов */ padding: 10px 20px !important; display: flex !important; /* ИЗМЕНЕНИЕ: Используем flexbox */ justify-content: center !important; /* ИЗМЕНЕНИЕ: Центрируем содержимое */ flex-wrap: wrap !important; /* ИЗМЕНЕНИЕ: Разрешаем перенос элементов */ gap: 5px !important; /* ИЗМЕНЕНИЕ: Небольшой отступ между группами кнопок */ } .wpm-comment-form .note-editable { min-height: 120px !important; /* Увеличим высоту текстового поля */ line-height: 1.6 !important; font-size: 1em !important; color: #333 !important; padding: 15px 20px !important; /* Увеличил padding для лучшего вида */ border-radius: 25px !important; /* Убедимся, что и редактируемая область закруглена */ } .wpm-comment-form .note-placeholder { padding: 15px 20px !important; /* Отступы для плейсхолдера, как у note-editable */ color: #aaa !important; /* Цвет плейсхолдера */ } /* Стилизация кнопок */ .wpm-comment-form .submit, .wpm-comment-form .wpm-button { border-radius: 25px !important; /* Закругления для всех кнопок до 25px */ padding: 10px 25px !important; /* Увеличил отступы для кнопок */ font-weight: 600 !important; text-transform: none !important; /* Убрать возможный text-transform: uppercase */ transition: all 0.2s ease !important; } .wpm-comment-form .submit { /* Кнопка "Отправить" */ background-color: #ff9800 !important; /* Основной оранжевый цвет */ color: #fff !important; border: 1px solid #ff9800 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Добавил тень */ } .wpm-comment-form .submit:hover:not(:disabled) { background-color: #e68900 !important; /* Чуть темнее при наведении */ border-color: #e68900 !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* Усиленная тень при наведении */ } .wpm-comment-form .submit:disabled { opacity: 0.6 !important; /* Затемнение, если кнопка неактивна */ cursor: not-allowed !important; } .wpm-comment-form .refresh-comments { /* Кнопка "Обновить" */ display: inline-flex !important; align-items: center !important; gap: 5px !important; color: #666 !important; text-decoration: none !important; font-size: 0.95em !important; margin-top: 10px !important; /* Отступ сверху */ } .wpm-comment-form .refresh-comments:hover { color: #ff9800 !important; } /* --- НОВОЕ Стилизация кнопки "Отменить" (крестик) --- */ /* --- Стилизация формы и кнопки "Отменить" (крестик) [Абсолютное позиционирование, БЕЗОПАСНАЯ ВЕРСИЯ] --- */ /* ШАГ 1: БЕЗОПАСНО делаем форму точкой отсчета */ #respond #commentform { position: relative !important; } /* ШАГ 2: Стилизуем и позиционируем саму кнопку-крестик */ #cancel-comment-reply-link { /* 1. Абсолютное позиционирование */ position: absolute !important; bottom: 0 !important; /* 2. Внешний вид кнопки */ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; padding: 0 !important; border-radius: 50% !important; background-color: #f0f0f0 !important; border: 1px solid #ddd !important; cursor: pointer !important; transition: all 0.2s ease !important; /* 3. Скрываем родной текст "Отменить" */ color: transparent !important; font-size: 1px !important; text-decoration: none !important; overflow: hidden !important; } #cancel-comment-reply-link:hover { background-color: #e0e0e0 !important; border-color: #ccc !important; } /* 4. Рисуем крестик внутри */ #cancel-comment-reply-link::before { content: '\00D7' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: #555 !important; font-size: 28px !important; line-height: 1 !important; font-weight: 400; transition: color 0.2s ease !important; } #cancel-comment-reply-link:hover::before { color: #ff9800 !important; } /* Темная тема */ @media (prefers-color-scheme: dark) { #cancel-comment-reply-link { background-color: #3a3a3a !important; border-color: #555 !important; } #cancel-comment-reply-link:hover { background-color: #4a4a4a !important; border-color: #666 !important; } #cancel-comment-reply-link::before { color: #e0e0e0 !important; } #cancel-comment-reply-link:hover::before { color: #ff9800 !important; } } /* Стилизация кнопки "Выбрать файлы" для формы комментариев и ЗАДАНИЯ */ /* Стиль применяется к span.wpm-button внутри label, как указано в HTML */ label.wpm_jqhfu-file-container.file-attachment-button > span.wpm-button.wpm-homework-edit-popup-addfile-button { background-color: #f0f0f0 !important; color: #555 !important; border: 1px solid #ddd !important; border-radius: 25px !important; /* Закругляем до 25px */ padding: 8px 15px !important; cursor: pointer !important; display: inline-flex !important; /* Для выравнивания иконки и текста внутри */ align-items: center !important; gap: 8px !important; font-size: 0.95em !important; transition: all 0.2s ease !important; /* Убедимся, что span не наследует лишние стили и корректно отображается */ line-height: normal !important; vertical-align: middle !important; /* Выравнивание по центру с другими инлайн-элементами */ } /* Ховер для кнопки "Выбрать файлы" */ label.wpm_jqhfu-file-container.file-attachment-button > span.wpm-button.wpm-homework-edit-popup-addfile-button:hover { background-color: #e0e0e0 !important; color: #ff9800 !important; border-color: #ccc !important; } /* Иконка, которая находится напрямую в label (до span.wpm-button) */ label.wpm_jqhfu-file-container.file-attachment-button > span.iconmoon { color: #555 !important; /* Цвет иконки по умолчанию */ font-size: 1.1em !important; /* Убедимся, что иконка корректно отображается внутри label */ vertical-align: middle !important; } label.wpm_jqhfu-file-container.file-attachment-button:hover > span.iconmoon { color: #ff9800 !important; /* Цвет иконки при ховере label */ } /* Название выбранного файла */ label.wpm_jqhfu-file-container.file-attachment-button > span.selected-file-name { font-size: 0.9em !important; color: #777 !important; margin-left: 10px !important; /* Отступ от самой кнопки */ display: inline-block !important; /* Чтобы правильно отображался рядом */ vertical-align: middle !important; } /* Теперь нужно убедиться, что сам LABEL (который оборачивает иконку, инпут и текстовый спан) */ /* не имеет лишних стилей, которые могли бы сломать внешний вид. Он должен быть просто контейнером */ label.wpm_jqhfu-file-container.file-attachment-button { display: inline-flex !important; /* Чтобы span.iconmoon, span.wpm-button и span.selected-file-name выстраивались */ align-items: center !important; border: none !important; /* Убрать границы с label */ background: transparent !important; /* Убрать фон с label */ padding: 0 !important; /* Убрать padding с label */ margin: 0 !important; border-radius: 0 !important; /* Убрать border-radius с label */ cursor: default !important; /* Курсор на label может быть стандартным, т.к. кнопка внутри */ } /* Общий контейнер, чтобы он не конфликтовал */ .fileupload-buttonbar { display: flex !important; /* Используем flexbox для размещения элементов */ align-items: center !important; /* Выравниваем по центру по вертикали */ flex-wrap: wrap !important; /* Разрешаем перенос на следующую строку */ gap: 10px !important; /* Отступ между элементами */ } .fileupload-buttons { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } /* Список комментариев (базовый стиль) */ .comments-list { list-style: none !important; padding: 0 30px !important; /* Горизонтальные отступы, чтобы соответствовало остальному контенту внутри .comments-tabs */ margin: 0 !important; } /* Если будут элементы комментариев, то сюда можно добавить: */ /* .comment-item { background-color: #fdfdfd; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-bottom: 15px; } */ /* - СТИЛИ ДЛЯ ПОЛЯ ВВОДА ОТВЕТА НА ЗАДАНИЕ К УРОКУ (Summernote) - */ #wpm_response_form > div.form > div.note-editor { border-radius: 25px !important; /* Закругления 25px */ border: none !important; /* Убираем рамку, если есть */ box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Легкая тень */ background-color: #fff !important; /* Белый фон */ overflow: hidden !important; /* Обрезает углы */ margin-bottom: 20px !important; /* Отступ снизу */ } /* Панель инструментов Summernote для задания (исправлено) */ #wpm_response_form > div.form > div.note-editor .note-toolbar.panel-heading { background-color: #ffffff !important; /* Белый фон для панели инструментов */ border-bottom: 1px solid #eee !important; /* Разделитель */ border-top-left-radius: 25px !important; /* Закругление верхних углов */ border-top-right-radius: 25px !important; /* Закругление верхних углов */ display: flex !important; /* ИЗМЕНЕНИЕ: Используем flexbox */ justify-content: center !important; /* ИЗМЕНЕНИЕ: Центрируем содержимое */ flex-wrap: wrap !important; /* ИЗМЕНЕНИЕ: Разрешаем перенос элементов */ gap: 5px !important; /* ИЗМЕНЕНИЕ: Небольшой отступ между группами кнопок */ /* Важное замечание: кнопки внутри тулбара (жирный, курсив и т.д.) я оставил стандартными, поскольку полное закругление до 25px может выглядеть избыточно. Если вы хотите их тоже немного закруглить, добавьте этот код: #wpm_response_form .note-toolbar .note-btn { border-radius: 8px !important; } */ } #wpm_response_form > div.form > div.note-editor .note-editable { min-height: 150px !important; /* Увеличиваем высоту */ padding: 15px 20px !important; border-radius: 25px !important; /* Закругления для редактируемой области */ line-height: 1.6 !important; font-size: 1em !important; color: #333 !important; } #wpm_response_form > div.form > div.note-editor .note-placeholder { padding: 15px 20px !important; /* Отступы для плейсхолдера */ color: #aaa !important; } /* - Стили для блока вывода домашнего задания (answer-row) - */ #lesson-tasks > div > div.question-answer-row { background-color: #f9f9f9 !important; /* Легкий фон */ border-radius: 25px !important; /* Закругления 25px */ padding: 20px 25px !important; /* Отступы внутри блока */ margin-top: 20px !important; /* Отступ сверху */ box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important; /* Внутренняя тень, чтобы выделить */ } /* - АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ - */ @media (max-width: 767px) { .lesson-tabs.white-tabs, .comments-tabs, .lesson-task-standalone-block, .lesson-files-standalone-block { /* Адаптивность для блока "Вложения" */ border-radius: 15px !important; /* Чуть меньше закругления на мобильных */ margin-bottom: 20px !important; } .lesson-content .content-wrap, .comments-tabs .tab-content { padding: 15px !important; /* Уменьшаем внутренние отступы на мобильных */ margin-bottom: 20px !important; } .lesson-content p, .lesson-content ul, .lesson-content ol, .comments-header, .wpm-comment-form .form-title, .lesson-task-standalone-block h2 { /* Адаптивность для заголовка задания */ font-size: 1em !important; /* Немного уменьшить размер шрифта на мобильных */ margin-left: 0 !important; /* Сброс отступа для списков */ } .lesson-content ul, .lesson-content ol { margin-left: 15px !important; /* Чуть меньше отступ для списков */ } .lesson-task-standalone-block #lesson-tasks p, .lesson-task-standalone-block #lesson-tasks ul, .lesson-task-standalone-block #lesson-tasks ol, .lesson-task-standalone-block #lesson-tasks li { font-size: 1em !important; /* Немного уменьшить размер шрифта на мобильных */ margin-bottom: 1em !important; } .lesson-task-standalone-block #lesson-tasks ul, .lesson-task-standalone-block #lesson-tasks ol { margin-left: 15px !important; } /* Карточки вложений на мобильных: 2 в ряд */ .lesson-files-standalone-block { padding: 20px !important; } .lesson-files-standalone-block h2 { font-size: 1.3em !important; } .lesson-files-standalone-block .lesson-files-list a { width: calc(50% - 8px) !important; /* 2 карточки в ряд */ } .lesson-content img:not(.wp-smiley):not(.emoji), .wp-video { margin: 15px auto !important; /* Меньше отступы для изображений и видео */ border-radius: 8px !important; /* Чуть меньше закругления */ } /* Адаптивность для табов комментариев на мобильных */ .comments-tabs .nav-tabs { flex-wrap: wrap !important; /* Перенос табов на новую строку, если не помещаются */ padding: 0 15px !important; /* Уменьшен padding на мобильных */ } .comments-tabs .nav-tabs li { flex-grow: 1 !important; /* Табы равномерно распределяются */ margin-right: 5px !important; /* Меньше отступ между табами */ margin-bottom: 5px !important; /* Отступ снизу для табов, если переносятся */ } .comments-tabs .nav-tabs li a { padding: 10px 15px !important; /* Меньше отступы у табов */ text-align: center !important; border-radius: 15px !important; /* Закругление 15px на мобильных */ } .comments-tabs .tab-content { border-bottom-left-radius: 15px !important; border-bottom-right-radius: 15px !important; } /* Заголовок комментариев: счётчик выровнен вправо (обрабатывается общими стилями выше), здесь ничего дополнительно делать не нужно */ /* Адаптивность кнопок и формы */ .wpm-comment-form { padding: 0 15px !important; /* Уменьшаем padding на мобильных */ } .wpm-comment-form .row > div { margin-bottom: 15px !important; /* Добавляем отступ между элементами формы */ } .fileupload-buttonbar, .fileupload-buttons { justify-content: center !important; /* Центрируем кнопки на мобильных */ } .wpm-comment-form .submit { width: 100% !important; /* Кнопка "Отправить" на всю ширину */ } /* Summernote на мобильных */ .wpm-comment-form .note-editor, #wpm_response_form > div.form > div.note-editor { /* Для комментариев и задания */ border-radius: 15px !important; } .wpm-comment-form .note-editable, #wpm_response_form > div.form > div.note-editor .note-editable { /* Для комментариев и задания */ border-radius: 15px !important; padding: 10px 15px !important; } .wpm-comment-form .note-placeholder, #wpm_response_form > div.form > div.note-editor .note-placeholder { /* Для комментариев и задания */ padding: 10px 15px !important; } .wpm-comment-form .submit, .wpm-comment-form .wpm-button, label.wpm_jqhfu-file-container.file-attachment-button > span.wpm-button.wpm-homework-edit-popup-addfile-button { /* Кнопки в комментах и задании */ border-radius: 15px !important; padding: 8px 15px !important; } .comments-list { padding: 0 15px !important; /*Адаптивность для списка комментариев */ } /* Адаптивность блока вывода ДЗ */ #lesson-tasks > div > div.question-answer-row { border-radius: 15px !important; padding: 15px 20px !important; } } /* - ПОДДЕРЖКА ТЕМНОЙ ТЕМЫ (DARK MODE) - */ @media (prefers-color-scheme: dark) { /* Контейнер урока и комментариев */ .lesson-tabs.white-tabs, .comments-tabs, .lesson-task-standalone-block { /* Добавлена поддержка темной темы для блока "Задание" */ background-color: #2b2b2b !important; /* Темный фон для контейнеров */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4) !important; /* Более выраженная тень */ border: none !important; /* Убеждаемся, что нет рамок */ } /* Текст внутри урока и комментариев */ .lesson-content p, .lesson-content ul, .lesson-content ol, .lesson-content li, .comments-header, .comments-header .all-comments-count, .wpm-comment-form .form-title, .wpm-comment-form .note-editable, .wpm-comment-form .refresh-comments, .lesson-task-standalone-block h2, .lesson-task-standalone-block #lesson-tasks p, .lesson-task-standalone-block #lesson-tasks ul, .lesson-task-standalone-block #lesson-tasks ol, .lesson-task-standalone-block #lesson-tasks li { /* Добавлена поддержка темной темы для заголовка и контента задания */ color: #e0e0e0 !important; /* Светлый текст в темной теме */ } .wpm-comment-form .note-placeholder, #wpm_response_form > div.form > div.note-editor .note-placeholder { /* Плейсхолдер для комментариев и задания */ color: #888 !important; /* Цвет плейсхолдера в темной теме */ } .wpm-comment-form .note-editor, #wpm_response_form > div.form > div.note-editor { /* Редактор Summernote для комментариев и задания */ background-color: #333 !important; /* Фон редактора в темной теме */ box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; /* Тень в темной теме */ } /* Панель инструментов Summernote в темной теме (исправлено) */ .wpm-comment-form .note-editor .note-toolbar.panel-heading, #wpm_response_form > div.form > div.note-editor .note-toolbar.panel-heading { background-color: #3a3a3a !important; /* Темный фон для панели инструментов */ border-bottom-color: #444 !important; display: flex !important; /* ИЗМЕНЕНИЕ: Используем flexbox */ justify-content: center !important; /* ИЗМЕНЕНИЕ: Центрируем содержимое */ flex-wrap: wrap !important; /* ИЗМЕНЕНИЕ: Разрешаем перенос элементов */ gap: 5px !important; /* ИЗМЕНЕНИЕ: Небольшой отступ между группами кнопок */ } .lesson-task-standalone-block h2 { /* Обновил разделитель для задания в тёмной теме */ border-bottom-color: #444 !important; } /* Блок "Вложения к уроку" в темной теме */ .lesson-files-standalone-block { background-color: #2b2b2b !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4) !important; } .lesson-files-standalone-block h2 { color: #ff9800 !important; border-bottom-color: #444 !important; } .lesson-files-standalone-block .lesson-files-list a { background-color: #333 !important; border-color: #444 !important; } .lesson-files-standalone-block .lesson-files-list a:hover { background-color: #3a3a3a !important; border-color: #ff9800 !important; } .lesson-files-standalone-block .lesson-files-list a .filename { color: #e0e0e0 !important; } /* Табы комментариев в темной теме */ .comments-tabs .nav-tabs { background-color: #333 !important; /* Темный фон для панели табов */ } .comments-tabs .nav-tabs li a {color: #bbb !important; /* Цвет неактивных табов */ } .comments-tabs .nav-tabs li a:hover { background-color: #444 !important; /* Фон при наведении */ } .comments-tabs .nav-tabs li.active a { background-color: #2b2b2b !important; /* Фон активного таба */ } .comments-tabs .nav-tabs li.active a { border-bottom-color: #ff9800 !important; /* Оранжевая полоска активного таба */ } .comments-tabs .tab-content { background-color: #2b2b2b !important; /* Фон содержимого таба */ } /* Кнопки в темной теме */ label.wpm_jqhfu-file-container.file-attachment-button > span.wpm-button.wpm-homework-edit-popup-addfile-button { /* Кнопки "Выбрать файлы" для комментариев и задания */ background-color: #3a3a3a !important; color: #e0e0e0 !important; border-color: #555 !important; } label.wpm_jqhfu-file-container.file-attachment-button > span.wpm-button.wpm-homework-edit-popup-addfile-button:hover { background-color: #4a4a4a !important; color: #ff9800 !important; border-color: #666 !important; } label.wpm_jqhfu-file-container.file-attachment-button > span.iconmoon { color: #e0e0e0 !important; /* Цвет иконки в темной теме */ } label.wpm_jqhfu-file-container.file-attachment-button:hover > span.iconmoon { color: #ff9800 !important; /* Цвет иконки при ховере */ } label.wpm_jqhfu-file-container.file-attachment-button > span.selected-file-name { color: #b0b0b0 !important; /* Цвет текста выбранного файла в темной теме */ } /* Блок вывода ДЗ в темной теме */ #lesson-tasks > div > div.question-answer-row { background-color: #333 !important; /* Темный фон */ box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important; /* Внутренняя тень */ } } /* - КОНЕЦ СТИЛЕЙ ДЛЯ ВНУТРЕННИХ СТРАНИЦ УРОКА - */ /* round-avatar-css-free.css */ /* Задайте своё человеческое название файла между '' */ /* --human-name-css: 'Круглые аватары'; */ /* Укажите имя автора между '' */ /* --human-author-css: 'Игорь Лохман'; */ /* Задайте путь до аватара автора между "" */ /* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */ /* Задайте своё человеческое описание файла между '' */ /* --human-description-css: 'Закругляет аватары в комментариях и в домашних заданиях.'; */ /* ------------------------- */ /* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */ /* ------------------------- */ /* Круглые Аватары в комментариях */ .comments-list .comment .comment-meta-wrap .comment-avatar img { border-radius: 100%; } /* Круглое превью аватара ученика в ДЗ */ .content-wrap .discussion-form-wrap .discussion-form .author img { border-radius: 100%; } /* Круглое превью аватара админа в ДЗ */ .discussion-list .comment-item .comment .comment-meta-wrap .comment-avatar img { border-radius: 100%; }