.main .launcher .popup-settings { position: absolute; width: 432px; height: 881px; left: 1019px; top: 0px; z-index: 3; border-radius: 20px; background: var(--background2); } .main .launcher .popup-settings .popup-header { display: flex; margin-left: 40px; margin-top: 15px; width: 199px; height: 52px } .main .launcher .popup-settings .popup-header .icon { /*margin-left: 60px; margin-top: 15px;*/ width: 25px; height: 25px; } .main .launcher .popup-settings .popup-header p { margin-top: 17px; text-transform: uppercase; margin-left: 25px; font-family: 'Montserrat-Italic'; font-style: italic; font-weight: 600; font-size: 22px; line-height: 27px; letter-spacing: 0.04em; color: #FFFFFF; } .main .launcher .popup-settings .popup-header .popup-close { margin-top: 5px; display: flex; justify-content: center; align-items: center; width: 35px; height: 45px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; } .main .launcher .popup-settings .popup-header .popup-close:hover { opacity: 0.5; } .main .launcher .popup-settings .popup-footer { justify-content: space-between; width: 390px; height: 780px; /*max-height: none;*/ overflow-y: scroll; margin-left: 44px; margin-top:12px; } .main .launcher .popup-settings .popup-footer::-webkit-scrollbar { width: 8px; } .main .launcher .popup-settings .popup-footer::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); border-radius:4px; } .main .launcher .popup-settings .popup-footer .item { display: flex; justify-content: center; align-items: center; width: 340px; height: 50px; margin-right: 10px; border-radius: 10px; background: var(--background3); border: 1.1px solid rgba(255, 255, 255, 0.049); cursor: pointer; margin-top: 10px; transition: background-color 0.2s ease; } .main .launcher .popup-settings .popup-footer .item:hover { background-color: var(--background4); } .main .launcher .popup-settings .popup-footer .item p { display: flex; justify-content: center; align-items: center; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 27px; letter-spacing: 0.04em; color: white; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; } .main .launcher .popup-settings .popup-footer .text { margin-top: 40px; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; /*color: rgba(255, 255, 255, 0.47);*/ color: #986DA1; } .main .launcher .popup-settings .popup-footer .icon { margin-right: 5px; width: 18px; height: 18px; vertical-align: sub; } .main .launcher .popup-settings .popup-footer .password { display: flex; justify-content: center; align-items: center; width: 340px; height: 50px; margin-right: 10px; background: var(--background3); border: 1.1px solid rgba(255, 255, 255, 0.049); margin-top: 10px; border-radius: 10px; transition: background-color 0.2s ease; } .main .launcher .popup-settings .popup-footer .password:hover { background-color: var(--background4); } .main .launcher .popup-settings .popup-footer .password input { width: 330px; height: 30px; border: none; outline: none; background: transparent; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 52px; letter-spacing: 0.04em; color: white; text-align: center; } .popup-feedback-container { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; max-width: 340px; } .popup-feedback { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.04em; color: #986DA1; transition: color 0.2s ease; } .popup-feedback:hover { color: #986da16d; } .popup-feedback.right { text-align: right; cursor: auto; text-decoration: none; color: #986DA1; } .switch-container { display: flex; align-items: center; gap: 21px; /* Расстояние между текстом и переключателем */ margin-bottom: 8px; flex-wrap: wrap; /* Разрешаем перенос текста */ } .switch-text { white-space: normal; /* Разрешаем переносить текст */ word-wrap: break-word; /* Разрешаем перенос длинных слов */ max-width: 280px; /* Максимальная ширина текста */ flex-grow: 1; /* Текст будет растягиваться, если нужно */ font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.04em; color: white; } .switch { position: relative; display: inline-block; width: 40px; /* фиксированная ширина */ height: 24px; /* фиксированная высота */ flex-shrink: 0; /* Отключаем изменение размера кнопки */ } .switch input { opacity: 0; width: 0; height: 0; } .switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; border-radius: 24px; background: var(--background3); border: 1.1px solid rgba(255, 255, 255, 0.049); transition: background-color 0.2s ease; } .slider:hover { background-color: var(--background4); } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 2.0px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #986DA1; } input:checked + .slider:before { transform: translateX(16px); } .inline-select { position: relative; display: flex; align-items: center; margin-top: 15px; } .label-text { max-width: 225px; white-space: normal; word-wrap: break-word; margin-right: 12px; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.04em; color: white; } .select_group { /*display: none;*/ display: none; } .custom-select { position: absolute; top: 0px; left: 232px; width: 110px; height: 30px; font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 700; font-size: 13px; line-height: 27px; letter-spacing: 0.04em; color: white; background-color: var(--background3); border: 1.1px solid rgba(255, 255, 255, 0.049); border-radius: 3px; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; padding: 0 8px; box-sizing: border-box; transition: background-color 0.2s ease; } .custom-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); } .custom-select:hover { background-color: var(--background4); } .selected { pointer-events: none; } .select-options { position: absolute; left: auto; top: 100%; width: auto; max-height: 120px; /* Показываем примерно 4 элемента */ overflow-y: auto; background-color: var(--background3); border-radius: 3px; margin-top: 4px; list-style: none; padding: 0; display: none; z-index: 1000; box-sizing: border-box; text-align: center; } .custom-select.open .select-options { display: block; } .custom-select.open-up .select-options { bottom: 100%; top: auto; margin-top: 0; margin-bottom: 4px; } .select-options li { padding: 4px 8px; cursor: pointer; font-size: 13px; color: #fff; } .select-options li:hover { background-color: rgba(255, 255, 255, 0.1); } .select-options { max-height: 150px; overflow-y: auto; } .select-options::-webkit-scrollbar { width: 3px; /* ширина вертикальной полосы */ } .select-options::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); /* цвет "ползунка" */ border-radius: 2px; } .select-options::-webkit-scrollbar-track { background: transparent; /* фон дорожки */ }