/* Settings/language feature styles. */ .settings-developer-card { margin-top: 4px; } .settings-developer-panel { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(132, 157, 206, 0.22); } .settings-dev-avatar-modal-card { max-width: 520px; } .settings-dev-avatar-meta { min-height: 18px; font-size: 13px; color: #d9e7ff; } .settings-dev-avatar-error { min-height: 18px; color: #f0a9b3; } .settings-dev-avatar-result { gap: 8px; } /* ===== Выбор языка со стартового экрана ===== */ .language-screen { width: min(100%, 430px); margin-inline: auto; } .language-choice-card { padding: 16px; background: rgba(38, 43, 52, 0.74); border: 1px solid rgba(255, 255, 255, 0.10); } .language-choice-hint { margin: 0 0 4px; text-align: center; } .language-choice-grid { display: grid; gap: 10px; } .language-choice-option { min-height: 64px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid rgba(210, 222, 241, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; transform: none; transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease; } .language-choice-option:hover { border-color: rgba(210, 222, 241, 0.16); background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; transform: none; filter: brightness(1.12); } .language-choice-option:active { color: #ffffff; background: rgba(0, 0, 0, 0.12); border: 0; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-choice-option:focus-visible { border: 1px solid rgba(210, 222, 241, 0.16); background: rgba(255, 255, 255, 0.035); box-shadow: none; color: #ffffff; outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; transform: none; } .language-choice-option.is-selected, .language-choice-option.is-selected:hover, .language-choice-option.is-selected:focus-visible { border: 1px solid rgba(92, 190, 255, 0.62); background: rgba(39, 141, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10); } .language-choice-option.is-selected:active { border: 1px solid rgba(92, 190, 255, 0.62); background: rgba(39, 141, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-choice-name { font-size: 17px; font-weight: 650; } .language-choice-code { color: rgba(255,255,255,.5); font-size: 13px; font-weight: 700; letter-spacing: .08em; } /* ===== Вложенные настройки: тот же рамочный язык действий ===== */ .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab) { border: 1px solid rgba(183, 203, 235, 0.28); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%), rgba(8, 19, 42, .58); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px rgba(0,0,0,.18); color: #ffffff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 14px; transform: none; } .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):hover { border-color: rgba(213, 225, 247, 0.42); background: linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%), rgba(10, 24, 52, .68); color: #ffffff; transform: none; filter: brightness(1.12); } .screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):active { transform: none; filter: brightness(0.9); } /* Language selector: actual two-position switch with explicit confirmation. */ .language-segmented-control { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; min-height: 58px; border: 1px solid rgba(190, 210, 238, .18); border-radius: 18px; background: rgba(12, 22, 40, .72); overflow: hidden; } .language-segmented-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid rgba(99, 190, 255, .52); border-radius: 14px; background: linear-gradient(180deg, rgba(76, 166, 255, .28), rgba(30, 105, 204, .20)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(63,160,255,.14); transition: transform 180ms ease; } .language-choice-card[data-language="en"] .language-segmented-thumb { transform: translateX(100%); } .language-segment { position: relative; z-index: 1; min-height: 50px; padding: 0 12px; border: 0; background: transparent; background-image: none; box-shadow: none; color: #fff; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 16px; font-weight: 650; transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease; } .language-segment:hover { color: #fff; background: transparent; border: 0; box-shadow: none; filter: brightness(1.12); } .language-segment:active { color: #fff; background: rgba(0, 0, 0, 0.12); border: 0; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08); transform: translateY(1px) scale(0.97); filter: brightness(0.9); } .language-segment:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; } .language-segment::before, .language-segment::after { background: transparent; background-image: none; border-color: transparent; box-shadow: none; } .language-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .language-choice-actions .shine-btn { height: 50px; }