Шаблон страницы входа: изображение слева
Добавляет современное оформление для системных страниц входа, регистрации и обратной связи GetCourse. Форма располагается справа, а слева размещается изображение, иллюстрация или фирменный баннер. Шаблон адаптирован для компьютеров и мобильных устройств.
9 готовых цветовых решений
Выберите вариант, который лучше всего подходит под дизайн вашей школы: белый, чёрный, розовый, фиолетовый, голубой, оливково-бежевый, терракотово-песочный, мятно-изумрудный или янтарно-горчичный.
Каждый вариант полностью готов к установке. Все основные цвета вынесены в подписанные переменные, поэтому при необходимости вы сможете самостоятельно изменить фон, текст, границы, акценты и другие элементы по подробной инструкции.
Единый стиль для трёх страниц
Оформление можно использовать для страницы входа, регистрации пользователей и формы обратной связи. Все страницы будут выполнены в едином стиле.

Важно: код предназначен для страниц, созданных в старом конструкторе GetCourse. На страницы нового дизайна установить такой поиск нельзя, так как в них нет возможности добавлять собственные HTML-, CSS- и JavaScript-коды в нужную область страницы.
Как установить шаблон страницы входа: изображение слева
1. ЭТАП: Редактирование страницы входа
Откройте страницу входа /cms/system/login в режиме редактирования, кнопка "Настроить вид".
Удалите всё, что ниже блока "Область: PAGE"
Должно получиться так ⬇️
Импортируем основной блок формы
Показать код импорта блока ⬇️
Должно получиться так ⬇️
Для блока "Область: PAGE" ставим настройки → внутр отступ 0 → внеш отступ 0 сверху 20
В блоке "Секция" настройка "Изображение" вставляем ссылку на картинку, которая будет отображаться в левой части формы
В блоке "Секция" внутри есть блок "Изображение" - это для логотипа. Нажмите "Файл - загрузить" и загрузите логотип. Если логотип не нужен, то можно удалить блок "Изображение"
Далее выберите цветовую гамму, скопируйте код для неё и вставьте по кнопке "</>". И не забудьте после вставки кода сохранить изменения.
HTML код ⬇️
<div class="lx-training-search" data-lx-training-search="">
  <div class="lx-training-search__field">
    <svg class="lx-training-search__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M10.8 18.1a7.3 7.3 0 1 1 0-14.6 7.3 7.3 0 0 1 0 14.6Zm5.2-2.1 4.4 4.4" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
    </svg>
    <input type="search" class="lx-training-search__input" placeholder="Найти тренинг или урок" autocomplete="off">
    <button type="button" class="lx-training-search__clear" aria-label="Очистить поиск">
      ×
    </button>
  </div>
  <div class="lx-training-search__status" aria-live="polite"></div>
  <div class="lx-training-search__results" hidden=""></div>
</div>
Сразу под ним добавьте блок JavaScript и вставьте JavaScript-код
JavaScript-код ⬇️
!function(){let e=null,t=0,n=null;function r(e){return String(e||"").toLowerCase().replace(/ё/g,"е").replace(/\s+/g," ").trim()}function s(e){return String(e||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function l(){return Array.from(document.querySelectorAll(".stream-table tr.training-row"))}function i(){return Array.from(document.querySelectorAll(".lx-trainings-section"))}function a(){l().forEach(function(e){e.classList.remove("lx-search-hidden")}),i().forEach(function(e){e.classList.remove("lx-search-empty-section")})}function c(e){return String(e||"").replace(/\s+/g," ").replace(/^\s+|\s+$/g,"")}function o(e,o){let u=r(e);if(o.clear.classList.toggle("is-visible",!!u),!u){a(),o.status.textContent="",o.results.hidden=!0,o.results.innerHTML="";return}if(u.length<3){a(),o.status.textContent="Введите минимум 3 символа.",o.results.hidden=!0,o.results.innerHTML="";return}let d=function e(t){let n=r(t),s=l(),a=0;return s.forEach(function(e){let t=e.querySelector(".stream-title"),s=e.querySelector(".lx-description"),l=e.querySelector("b"),i=r([t?t.textContent:"",s?s.textContent:"",l?l.textContent:""].join(" ")),c=i.includes(n);e.classList.toggle("lx-search-hidden",!c),c&&a++}),i().forEach(function(e){let t=e.querySelectorAll("tr.training-row:not(.lx-search-hidden)");e.classList.toggle("lx-search-empty-section",0===t.length)}),a}(u);o.status.textContent=d?"Найдено тренингов: "+d+". Ищу совпадения в уроках…":"По тренингам ничего не найдено. Ищу совпадения в уроках…";let f=++t;!function e(l,i,a){let o=(n||((n=document.createElement("iframe")).className="lx-search-frame",n.setAttribute("aria-hidden","true"),n.tabIndex=-1,document.body.appendChild(n)),n);o.onload=function(){setTimeout(function(){if(a===t)try{let e=o.contentDocument||o.contentWindow.document,n=function e(t){let n=t.querySelector("#sp-results");if(!n)return[];let r=Array.from(n.querySelectorAll("a[href]")).filter(function(e){let t=e.getAttribute("href")||"";return -1!==t.indexOf("/teach/control/lesson/view")||-1!==t.indexOf("/teach/control/stream/view")||-1!==t.indexOf("/pl/teach/control/lesson/view")||-1!==t.indexOf("/pl/teach/control/stream/view")}),s=[],l=new Set;return r.forEach(function(e){var t;let n=e.getAttribute("href")||"";if(!n||l.has(n))return;l.add(n);let r=e.closest("li, article, .sp-result, .sp-result-item, .search-result, .lesson-item, .training-item, div"),i=c(e.textContent),a=c(r?r.textContent:e.textContent),o=a.replace(i,"").trim();i&&(0!==n.indexOf("http")&&(n=new URL(n,window.location.origin).href),s.push({href:n,title:i,description:o,type:(t=n,/\/lesson\/view/i.test(t)?"Урок":/\/stream\/view/i.test(t)?"Тренинг":"Материал")}))}),s.slice(0,8)}(e);(function e(t,n,l){if(!l||r(l).length<3){t.hidden=!0,t.innerHTML="";return}if(!n.length){t.hidden=!1,t.innerHTML='<div class="lx-search-result__empty">По урокам ничего не найдено</div>';return}t.hidden=!1,t.innerHTML=n.map(function(e){return`
        <a class="lx-search-result" href="${s(e.href)}">
          <span class="lx-search-result__top">
            <span class="lx-search-result__type">${s(e.type)}</span>
            <span class="lx-search-result__title">${s(e.title)}</span>
          </span>
          ${e.description?`<span class="lx-search-result__text">${s(e.description)}</span>`:""}
        </a>
      `}).join("")})(i.results,n,l),n.length?i.status.textContent="Найдены совпадения по тренингам и урокам.":i.status.textContent="По карточкам поиск выполнен, по урокам совпадений нет."}catch(u){i.status.textContent="По карточкам поиск выполнен. Результаты уроков не удалось загрузить.",i.results.hidden=!0,i.results.innerHTML=""}},900)},o.src="/pl/search/search-lesson?q="+encodeURIComponent(l)}(u,o,f)}function u(){let t=document.querySelector("[data-lx-training-search]");if(!t||"1"===t.dataset.lxSearchReady)return;let n=t.querySelector(".lx-training-search__input"),r=t.querySelector(".lx-training-search__clear"),s=t.querySelector(".lx-training-search__status"),l=t.querySelector(".lx-training-search__results");if(!n||!r||!s||!l)return;t.dataset.lxSearchReady="1";let i={input:n,clear:r,status:s,results:l};n.addEventListener("input",function(){clearTimeout(e),e=setTimeout(function(){o(n.value,i)},650)}),r.addEventListener("click",function(){n.value="",n.focus(),o("",i)}),document.addEventListener("click",function(e){t.contains(e.target)||(l.hidden=!0)}),n.addEventListener("focus",function(){l.innerHTML.trim()&&(l.hidden=!1)})}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",u):u(),window.addEventListener("load",u)}();
В том же режиме редактирования страницы по кнопке </>, перейдите в раздел со стилями страницы и вставьте CSS-код выбранного цветового варианта. Выбрать можно ниже
Светлые оттенки
Показать код ⬇️
/* Светлые оттенки. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #ffffff;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #ffffff;
    /* Основной текст */
    --lx-text: #202634;
    /* Вторичный текст */
    --lx-muted: #707b8c;
    /* Текст подсказки */
    --lx-placeholder: #9ba4b2;
    /* Иконка поиска */
    --lx-icon: #8b95a5;
    /* Акцентный цвет */
    --lx-accent: #5b91ff;
    /* Цвет границы */
    --lx-border: #e3e7ed;
    /* Цвет разделителей */
    --lx-divider: #edf0f4;
    /* Фон кнопки очистки */
    --lx-clear-bg: #f3f5f8;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #e9edf3;
    /* Цвет кнопки очистки */
    --lx-clear-color: #8b95a5;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #202634;
    /* Фон списка результатов */
    --lx-results-bg: rgba(255, 255, 255, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #f4f7ff;
    /* Фон метки типа */
    --lx-badge-bg: #eaf2ff;
    /* Цвет метки типа */
    --lx-badge-color: #467ad8;
    /* Тень поля */
    --lx-shadow: 0 1px 2px rgba(20, 31, 47, .03), 0 12px 30px rgba(20, 31, 47, .07);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(20, 31, 47, .14);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(91, 145, 255, .10);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Темные оттенки
Показать код ⬇️
/* Темные оттенки. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: rgba(20, 31, 47, .88);
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #141f2f;
    /* Основной текст */
    --lx-text: #f6f8ff;
    /* Вторичный текст */
    --lx-muted: #aeb8c9;
    /* Текст подсказки */
    --lx-placeholder: #8d9ab0;
    /* Иконка поиска */
    --lx-icon: #91a0b6;
    /* Акцентный цвет */
    --lx-accent: #5ba4ff;
    /* Цвет границы */
    --lx-border: rgba(255, 255, 255, .09);
    /* Цвет разделителей */
    --lx-divider: rgba(255, 255, 255, .07);
    /* Фон кнопки очистки */
    --lx-clear-bg: rgba(255, 255, 255, .06);
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: rgba(255, 255, 255, .11);
    /* Цвет кнопки очистки */
    --lx-clear-color: #b8c5d9;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #ffffff;
    /* Фон списка результатов */
    --lx-results-bg: rgba(13, 22, 34, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: rgba(91, 164, 255, .10);
    /* Фон метки типа */
    --lx-badge-bg: rgba(92, 201, 255, .13);
    /* Цвет метки типа */
    --lx-badge-color: #8fc8ff;
    /* Тень поля */
    --lx-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .14);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(91, 164, 255, .10);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Светло-розовые оттенки
Показать код ⬇️
/* Светло-розовые оттенки. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #fff7fa;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #ffffff;
    /* Основной текст */
    --lx-text: #4b2636;
    /* Вторичный текст */
    --lx-muted: #926679;
    /* Текст подсказки */
    --lx-placeholder: #b88b9f;
    /* Иконка поиска */
    --lx-icon: #c98ca6;
    /* Акцентный цвет */
    --lx-accent: #df679d;
    /* Цвет границы */
    --lx-border: #f0d6e1;
    /* Цвет разделителей */
    --lx-divider: #f4e3ea;
    /* Фон кнопки очистки */
    --lx-clear-bg: #f8e5ed;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #f1ccdc;
    /* Цвет кнопки очистки */
    --lx-clear-color: #b96f8f;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #943f65;
    /* Фон списка результатов */
    --lx-results-bg: rgba(255, 250, 252, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #fff0f6;
    /* Фон метки типа */
    --lx-badge-bg: #f9dce8;
    /* Цвет метки типа */
    --lx-badge-color: #c44f82;
    /* Тень поля */
    --lx-shadow: 0 1px 2px rgba(116, 45, 76, .03), 0 12px 30px rgba(116, 45, 76, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(116, 45, 76, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(232, 117, 168, .12);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Светло-фиолетовые оттенки
Показать код ⬇️
/* Светло-фиолетовые оттенки. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #f7f5ff;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #ffffff;
    /* Основной текст */
    --lx-text: #332952;
    /* Вторичный текст */
    --lx-muted: #746b91;
    /* Текст подсказки */
    --lx-placeholder: #9d95ba;
    /* Иконка поиска */
    --lx-icon: #9b91c8;
    /* Акцентный цвет */
    --lx-accent: #8069d7;
    /* Цвет границы */
    --lx-border: #ded9f3;
    /* Цвет разделителей */
    --lx-divider: #ece8f7;
    /* Фон кнопки очистки */
    --lx-clear-bg: #ebe7fa;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #dcd5f5;
    /* Цвет кнопки очистки */
    --lx-clear-color: #8477b6;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #5c499f;
    /* Фон списка результатов */
    --lx-results-bg: rgba(251, 250, 255, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #f1edff;
    /* Фон метки типа */
    --lx-badge-bg: #e5defb;
    /* Цвет метки типа */
    --lx-badge-color: #6f57ca;
    /* Тень поля */
    --lx-shadow: 0 1px 2px rgba(67, 51, 126, .03), 0 12px 30px rgba(67, 51, 126, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(67, 51, 126, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(137, 113, 224, .12);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Светло-голубой оттенок

Показать код ⬇️
/* Светло-голубые оттенки. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #eef6ff;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #f8fbff;
    /* Основной текст */
    --lx-text: #20324d;
    /* Вторичный текст */
    --lx-muted: #667b98;
    /* Текст подсказки */
    --lx-placeholder: #8094ae;
    /* Иконка поиска */
    --lx-icon: #6f8fb4;
    /* Акцентный цвет */
    --lx-accent: #3979c9;
    /* Цвет границы */
    --lx-border: #cbdff3;
    /* Цвет разделителей */
    --lx-divider: #dce9f6;
    /* Фон кнопки очистки */
    --lx-clear-bg: #dcebf8;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #c9dff3;
    /* Цвет кнопки очистки */
    --lx-clear-color: #6786a9;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #305f96;
    /* Фон списка результатов */
    --lx-results-bg: rgba(247, 251, 255, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #e6f1fc;
    /* Фон метки типа */
    --lx-badge-bg: #d7eaff;
    /* Цвет метки типа */
    --lx-badge-color: #326daf;
    /* Тень поля */
    --lx-shadow: 0 1px 2px rgba(38, 87, 135, .03), 0 12px 30px rgba(38, 87, 135, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(38, 87, 135, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(57, 121, 201, .12);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Оливково-бежевый оттенок
Показать код ⬇️
/* Оливково-бежевый оттенок. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #f3f1e8;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #faf9f4;
    /* Основной текст */
    --lx-text: #35402f;
    /* Вторичный текст */
    --lx-muted: #77806f;
    /* Текст подсказки */
    --lx-placeholder: #929b88;
    /* Иконка поиска */
    --lx-icon: #84927a;
    /* Акцентный цвет */
    --lx-accent: #637852;
    /* Цвет границы */
    --lx-border: #d8ddcd;
    /* Цвет разделителей */
    --lx-divider: #e2e5da;
    /* Фон кнопки очистки */
    --lx-clear-bg: #e2e5d8;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #d2d8c6;
    /* Цвет кнопки очистки */
    --lx-clear-color: #74806b;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #46533d;
    /* Фон списка результатов */
    --lx-results-bg: rgba(247, 246, 239, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #e9eddf;
    /* Фон метки типа */
    --lx-badge-bg: #dce4d1;
    /* Цвет метки типа */
    --lx-badge-color: #586c49;
    /* Тень поля */
    --lx-shadow: 0 1px 2px rgba(52, 65, 45, .04), 0 14px 34px rgba(52, 65, 45, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(52, 65, 45, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(112, 135, 92, .13);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Терракотово-песочный оттенок
Показать код ⬇️
/* Терракотово-песочный оттенок. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #fff3ec;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #fffaf7;
    /* Основной текст */
    --lx-text: #4c2d22;
    /* Вторичный текст */
    --lx-muted: #956b5a;
    /* Текст подсказки */
    --lx-placeholder: #b1816d;
    /* Иконка поиска */
    --lx-icon: #bb8068;
    /* Акцентный цвет */
    --lx-accent: #cf6240;
    /* Цвет границы */
    --lx-border: #edcdbf;
    /* Цвет разделителей */
    --lx-divider: #f1ded5;
    /* Фон кнопки очистки */
    --lx-clear-bg: #f6ded3;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #ecc4b3;
    /* Цвет кнопки очистки */
    --lx-clear-color: #ae684e;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #83432e;
    /* Фон списка результатов */
    --lx-results-bg: rgba(255, 248, 244, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #fbe7dd;
    /* Фон метки типа */
    --lx-badge-bg: #f3d2c3;
    /* Цвет метки типа */
    --lx-badge-color: #a24f33;
    /* Тень поля */
    --lx-shadow: 0 2px 4px rgba(104, 54, 34, .03), 0 14px 34px rgba(104, 54, 34, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(104, 54, 34, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(211, 103, 68, .12);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Мятно-изумрудный оттенок
Показать код ⬇️
/* Мятно-изумрудный оттенок. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #ecf8f3;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #f7fffb;
    /* Основной текст */
    --lx-text: #21463a;
    /* Вторичный текст */
    --lx-muted: #608478;
    /* Текст подсказки */
    --lx-placeholder: #79a091;
    /* Иконка поиска */
    --lx-icon: #6f9f8e;
    /* Акцентный цвет */
    --lx-accent: #2d8f72;
    /* Цвет границы */
    --lx-border: #c8e4da;
    /* Цвет разделителей */
    --lx-divider: #dceee7;
    /* Фон кнопки очистки */
    --lx-clear-bg: #d8eee6;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #bfe1d4;
    /* Цвет кнопки очистки */
    --lx-clear-color: #4f8874;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #236b55;
    /* Фон списка результатов */
    --lx-results-bg: rgba(245, 255, 251, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #e2f4ed;
    /* Фон метки типа */
    --lx-badge-bg: #cceadf;
    /* Цвет метки типа */
    --lx-badge-color: #28785f;
    /* Тень поля */
    --lx-shadow: 0 2px 4px rgba(24, 78, 61, .03), 0 14px 34px rgba(24, 78, 61, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(24, 78, 61, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(45, 143, 114, .12);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Янтарно-горчичный оттенок
Показать код ⬇️
/* Янтарно-горчичный оттенок. Автор кода: https://t.me/GetCourse_Code */
.lx-training-search {
    /* Фон поля */
    --lx-field-bg: #fff7dc;
    /* Фон поля при фокусе */
    --lx-field-focus-bg: #fffdf3;
    /* Основной текст */
    --lx-text: #4d3a12;
    /* Вторичный текст */
    --lx-muted: #87713e;
    /* Текст подсказки */
    --lx-placeholder: #a68b50;
    /* Иконка поиска */
    --lx-icon: #a8863d;
    /* Акцентный цвет */
    --lx-accent: #c48a15;
    /* Цвет границы */
    --lx-border: #ead79d;
    /* Цвет разделителей */
    --lx-divider: #f0e4ba;
    /* Фон кнопки очистки */
    --lx-clear-bg: #f4e6b5;
    /* Фон кнопки очистки при наведении */
    --lx-clear-hover-bg: #ead38a;
    /* Цвет кнопки очистки */
    --lx-clear-color: #9b7623;
    /* Цвет кнопки очистки при наведении */
    --lx-clear-hover-color: #72520e;
    /* Фон списка результатов */
    --lx-results-bg: rgba(255, 252, 237, .98);
    /* Фон результата при наведении */
    --lx-hover-bg: #f9edc0;
    /* Фон метки типа */
    --lx-badge-bg: #f0dea0;
    /* Цвет метки типа */
    --lx-badge-color: #8c6511;
    /* Тень поля */
    --lx-shadow: 0 2px 4px rgba(91, 65, 12, .03), 0 14px 34px rgba(91, 65, 12, .08);
    /* Тень списка результатов */
    --lx-results-shadow: 0 24px 60px rgba(91, 65, 12, .16);
    /* Цвет обводки при фокусе */
    --lx-focus-ring: rgba(196, 138, 21, .13);
    position: relative;
    z-index: 20;
    width: 100%;
    margin: 0 0 34px;
    font-family: "Manrope", "Inter", Arial, sans-serif
}

.lx-training-search,
.lx-training-search * {
    box-sizing: border-box
}

.xdget-html .html-content .lx-training-search {
    margin: 0 0 34px !important
}

.lx-training-search__field {
    position: relative;
    width: 100%
}

.lx-training-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--lx-icon);
    pointer-events: none;
    transition: color .2s ease
}

.lx-training-search__input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    padding: 0 54px 0 52px !important;
    border: 1px solid var(--lx-border) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: var(--lx-field-bg) !important;
    box-shadow: var(--lx-shadow) !important;
    color: var(--lx-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease
}

.lx-training-search__input::placeholder {
    color: var(--lx-placeholder) !important;
    font-weight: 500
}

.lx-training-search__field:focus-within .lx-training-search__input {
    border-color: var(--lx-accent) !important;
    background: var(--lx-field-focus-bg) !important;
    box-shadow: 0 0 0 4px var(--lx-focus-ring), var(--lx-shadow) !important
}

.lx-training-search__field:focus-within .lx-training-search__icon {
    color: var(--lx-accent)
}

.lx-training-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 10px;
    background: var(--lx-clear-bg);
    color: var(--lx-clear-color);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease
}

.lx-training-search__clear.is-visible {
    display: grid
}

.lx-training-search__clear:hover {
    background: var(--lx-clear-hover-bg);
    color: var(--lx-clear-hover-color)
}

.lx-training-search__clear:active {
    transform: translateY(-50%) scale(.94)
}

.lx-training-search__status {
    min-height: 20px;
    margin-top: 9px;
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.4
}

.lx-training-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid var(--lx-border);
    border-radius: 16px;
    background: var(--lx-results-bg);
    box-shadow: var(--lx-results-shadow);
    backdrop-filter: blur(16px)
}

.lx-training-search__results[hidden] {
    display: none !important
}

.lx-search-result {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lx-divider);
    color: var(--lx-text) !important;
    text-decoration: none !important;
    transition: background-color .16s ease, transform .16s ease
}

.lx-search-result:last-child {
    border-bottom: 0
}

.lx-search-result:hover {
    background: var(--lx-hover-bg);
    transform: translateX(3px)
}

.lx-search-result__top {
    display: flex;
    align-items: center;
    gap: 9px
}

.lx-search-result__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--lx-badge-bg);
    color: var(--lx-badge-color);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.lx-search-result__title {
    color: var(--lx-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3
}

.lx-search-result__text,
.lx-search-result__empty {
    color: var(--lx-muted);
    font-size: 13px;
    line-height: 1.35
}

.lx-search-result__empty {
    padding: 18px;
    text-align: center
}

.stream-table tr.training-row.lx-search-hidden,
.lx-trainings-section.lx-search-empty-section {
    display: none !important
}

.lx-search-frame {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}
Как самостоятельно изменить цвета поиска

Все настройки цветов находятся в начале CSS-кода внутри блока .lx-training-search.


Чтобы изменить оформление, найдите нужную переменную и замените значение цвета после двоеточия. Остальную часть CSS-кода редактировать не нужно.


Например, сейчас указан голубой акцентный цвет:

/* Акцентный цвет */

--lx-accent: #5b91ff;


Чтобы сделать акцент зелёным, замените только код цвета после решетки #:

/* Акцентный цвет */

--lx-accent: #4f8a61;


Основные переменные ⬇️

Цвет фона самой строки поиска

/* Фон поля */

--lx-field-bg: #ffffff;


Цвет поля после клика по строке поиска

/* Фон поля при фокусе */

--lx-field-focus-bg: #ffffff;


Цвет введённого текста и названий найденных тренингов и уроков

/* Основной текст */

--lx-text: #202634;


Цвет описаний результатов, статуса поиска и сообщения «Ничего не найдено»

/* Вторичный текст */

--lx-muted: #707b8c;


Цвет подсказки «Найти тренинг или урок»

/* Текст подсказки */

--lx-placeholder: #9ba4b2;


Цвет иконки поиска в обычном состоянии

/* Иконка поиска */

--lx-icon: #8b95a5;


Основной акцентный цвет

Используется для иконки поиска и границы поля после клика.

/* Акцентный цвет */

--lx-accent: #5b91ff;


Цвет границы строки поиска и выпадающего списка

/* Цвет границы */

--lx-border: #e3e7ed;


Цвет линий между найденными результатами

/* Цвет разделителей */

--lx-divider: #edf0f4;


Кнопка очистки поиска ⬇️

Цвет фона кнопки с крестиком

/* Фон кнопки очистки */

--lx-clear-bg: #f3f5f8;


Цвет фона кнопки с крестиком при наведении курсора

/* Фон кнопки очистки при наведении */

--lx-clear-hover-bg: #e9edf3;


Цвет крестика в обычном состоянии

/* Цвет кнопки очистки */

--lx-clear-color: #8b95a5;


Цвет крестика при наведении курсора

/* Цвет кнопки очистки при наведении */

--lx-clear-hover-color: #202634;


Выпадающий список результатов ⬇️

Цвет фона списка с найденными тренингами и уроками

/* Фон списка результатов */

--lx-results-bg: rgba(255,255,255,.98);


Цвет отдельного результата при наведении курсора

/* Фон результата при наведении */

--lx-hover-bg: #f4f7ff;


Цвет фона метки «Урок» или «Тренинг»

/* Фон метки типа */

--lx-badge-bg: #eaf2ff;


Цвет текста метки «Урок» или «Тренинг»

/* Цвет метки типа */

--lx-badge-color: #467ad8;


Тени и обводка ⬇️

Тень вокруг строки поиска

/* Тень поля */

--lx-shadow: 0 1px 2px rgba(20,31,47,.03), 0 12px 30px rgba(20,31,47,.07);


Чтобы полностью убрать тень, укажите:

/* Тень поля */

--lx-shadow: none;


Тень выпадающего списка результатов

/* Тень списка результатов */

--lx-results-shadow: 0 24px 60px rgba(20,31,47,.14);


Чтобы полностью убрать тень, укажите:

/* Тень списка результатов */

--lx-results-shadow: none;


Цвет полупрозрачной обводки после клика по строке поиска

/* Цвет обводки при фокусе */

--lx-focus-ring: rgba(91,145,255,.10);


В каком формате указывать цвета

Обычный цвет указывается в формате HEX: #ffffff


Цвет с прозрачностью указывается в формате RGBA: rgba(255,255,255,.98)


Последнее значение отвечает за прозрачность:

1 — полностью непрозрачный цвет.

.5 — прозрачность 50%.

0 — полностью прозрачный цвет.


После изменения переменных сохраните настройки страницы и повторно опубликуйте её. Перед редактированием рекомендуется сохранить копию исходного CSS-кода.

Остались вопросы?
По вопросам установки, настройки или изменения оформления поиска напишите в Telegram:
https://t.me/GetCourseCode
Made on
Tilda