Авторизация по номеру телефона

Кастомизация стилей компонента, цвета

Для изменения цвета кнопок и ссылок, необходимо в шаблон сайта добавить следующие стили, заменив цвет. Для примера будет использован цвет #d75cb6

Стили можно разместить в файле /bitrix/templates/{название_шаблона_сайта}/template_style.css

Для Intec разместить стили нужно в файле /bitrix/templates/{название_шаблона_сайта}/css/custom.css


body .bxmaker-authuserphone-button:focus{
     outline: none;
}

body .bxmaker-authuserphone-button .bxmaker-authuserphone-button__inner {
	background-color: #d75cb6;
}

body .bxmaker-authuserphone-button:hover .bxmaker-authuserphone-button__inner {
	background-color: #d75cb6;
}

body .bxmaker-authuserphone-input-phone--focus .bxmaker-authuserphone-input-phone__field,
body  .bxmaker-authuserphone-input-phone--hover .bxmaker-authuserphone-input-phone__field, 
body  .bxmaker-authuserphone-input-phone:hover .bxmaker-authuserphone-input-phone__field
{
	border-color: #d75cb6;
}

body .bxmaker-authuserphone-input--focus .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input--hover .bxmaker-authuserphone-input__field,
body .bxmaker-authuserphone-input:hover .bxmaker-authuserphone-input__field
{
	border-color: #d75cb6;
}


body .bxmaker-authuserphone-input-password--focus .bxmaker-authuserphone-input-password__field, 
body .bxmaker-authuserphone-input-password--hover .bxmaker-authuserphone-input-password__field, 
body .bxmaker-authuserphone-input-password:hover .bxmaker-authuserphone-input-password__field
{
	border-color: #d75cb6;
}

body .bxmaker-authuserphone-input-code--focus .bxmaker-authuserphone-input-code__field,
body  .bxmaker-authuserphone-input-code--hover .bxmaker-authuserphone-input-code__field,
body  .bxmaker-authuserphone-input-code:hover .bxmaker-authuserphone-input-code__field
{
    border-color: #d75cb6;
}

body a.bxmaker-authuserphone-link, 
body a.bxmaker-authuserphone-link:visited 
{
	color: #d75cb6;
}

body a.bxmaker-authuserphone-link:active, 
body a.bxmaker-authuserphone-link:hover 
{
    color: #d75cb6;
}

body .bxmaker-authuserphone-input-phone__validation,
body .bxmaker-authuserphone-message--error {
    color: #ff0000;
}

Темная тема

Для того чтобы указать цвета для темной темы, нужно использовать следующие стили

/* Dark mode */
@media (prefers-color-scheme: dark) {

 /* здесь стили для темной темы, например: */
    body {
        background-color: black;
        color: white;
    }
}