/* ============================================================ Личный кабинет — стили (Фаза 1-2). Тема Anime. ВАЖНО: тема сайта агрессивно задаёт цвета (.night a:link{color:cyan}, .night button{background:#15485c} и т.п.), поэтому ключевые визуальные свойства форсируем !important — иначе перебивается. Иконки .fal уже объявлены в (main.tpl); догружаем нужные глифы. ============================================================ */ .lk .fa-user::before,.mls .fa-user::before{content:'\f007'} .lk .fa-lock::before{content:'\f023'} .lk .fa-bookmark::before{content:'\f02e'} .lk .fa-envelope::before{content:'\f0e0'} .lk .fa-comment::before{content:'\f075'} .lk .fa-bolt::before{content:'\f0e7'} .lk .fa-store::before{content:'\f54e'} .lk .fa-list::before{content:'\f03a'} .lk .fa-id-badge::before{content:'\f2c1'} .lk .fa-right-from-bracket::before{content:'\f2f5'} .lk .fa-gauge::before{content:'\f624'} .lk .fa-chevron-down::before,.mls .fa-chevron-down::before{content:'\f078'} /* ---------- токены ---------- */ .lk,.mls{ --acc:#c50725; --acc-h:#a50620; --panel:#ffffff; --panel-2:#f3f5f8; --hover:#eef1f5; --text:#182028; --muted:#727c88; --line:#e7eaee; --field:#f2f4f7; --field-line:#dfe3e8; --link:#c50725; --shadow:0 16px 40px rgba(18,28,42,.18); font-family:'GothamProRegular',sans-serif; } .night .lk,.night .mls{ --panel:#0f2a38; --panel-2:#13323f; --hover:rgba(255,255,255,.07); --text:#eaf2f7; --muted:#8fa8b8; --line:rgba(255,255,255,.09); --field:#0b222d; --field-line:rgba(255,255,255,.13); --link:#57c6e6; --shadow:0 18px 46px rgba(0,0,0,.55); } .lk{position:relative;display:inline-flex;align-items:center} /* ---------- триггер в шапке ---------- */ .lk-trigger{ display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 16px; border:0!important;border-radius:22px!important;cursor:pointer;font-family:inherit; font-size:14px;font-weight:600;line-height:1;transition:background .15s,transform .04s; } .lk-trigger:active{transform:translateY(1px)} /* гость — красная CTA */ .lk--guest .lk-trigger{background:var(--acc)!important;color:#fff!important} .lk--guest .lk-trigger:hover{background:var(--acc-h)!important} .lk--guest .lk-trigger .fal{color:#fff!important;font-size:15px} /* залогинен — нейтральная пилюля с аватаром */ .lk--user .lk-trigger{background:var(--panel-2)!important;color:var(--text)!important;padding:4px 12px 4px 4px} .lk--user .lk-trigger:hover{background:var(--hover)!important} .lk-avatar{ width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:linear-gradient(135deg,var(--acc),#e5342f);color:#fff!important; font-size:15px;font-weight:700;overflow:hidden; } .lk-avatar .fal{color:#fff!important;font-size:15px} .lk-avatar img{width:100%;height:100%;object-fit:cover} .lk-avatar--lg{width:46px;height:46px;flex-basis:46px;font-size:20px} .lk-trigger .fa-chevron-down{color:var(--muted)!important;font-size:11px} /* ---------- панель дропдауна ---------- */ .lk-menu{ position:absolute;top:calc(100% + 12px);right:0;z-index:1200;width:304px;max-width:92vw;padding:8px; background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:16px; box-shadow:var(--shadow)!important;color:var(--text)!important;animation:lk-pop .16s ease; } .lk-menu[hidden]{display:none!important} @keyframes lk-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .lk-menu::before{ content:'';position:absolute;top:-6px;right:24px;width:12px;height:12px; background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg); } /* ---------- форма входа ---------- */ .lk-menu__head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 12px} .lk-menu__title{font-weight:700;font-size:16px;color:var(--text)!important} .lk-menu__close{ width:30px;height:30px;border:0!important;border-radius:9px!important;background:var(--panel-2)!important; color:var(--muted)!important;font-size:18px;line-height:1;cursor:pointer; } .lk-menu__close:hover{background:var(--hover)!important;color:var(--acc)!important} .lk-auth{display:flex;flex-direction:column;gap:10px;padding:0 8px 8px} .lk-field{ display:flex;align-items:center;gap:10px;padding:0 14px;height:46px; background:var(--field)!important;border:1px solid var(--field-line)!important;border-radius:12px; } .lk-field:focus-within{border-color:var(--acc)!important} .lk-field .fal{color:var(--muted)!important;font-size:15px} .lk-field input{ flex:1;border:0!important;outline:0;background:transparent!important;color:var(--text)!important; font-size:14px;font-family:inherit;box-shadow:none!important;height:auto!important;padding:0!important; } .lk-field input::placeholder{color:var(--muted)!important;opacity:1} .lk-remember{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)!important;cursor:pointer;padding:2px} .lk-remember input{width:16px;height:16px;accent-color:var(--acc)} .lk-btn{ height:48px;border:0!important;border-radius:12px!important;font-size:15px;font-weight:700; cursor:pointer;font-family:inherit;transition:background .15s,transform .04s; } .lk-btn:active{transform:translateY(1px)} .lk-btn--primary{background:var(--acc)!important;color:#fff!important} .lk-btn--primary:hover{background:var(--acc-h)!important} .lk-auth__foot{display:flex;justify-content:space-between;padding:12px 8px 4px;font-size:13px} .lk-auth__foot a,.lk-auth__foot a:link,.lk-auth__foot a:visited{ color:var(--muted)!important;font-weight:600!important;text-decoration:none; } .lk-auth__foot a:hover{color:var(--acc)!important} .lk-social{display:flex;gap:8px;padding:2px 8px 6px} .lk-social a{ flex:1;height:42px;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--panel-2)!important;color:var(--text)!important;border-radius:12px; font-size:13px;font-weight:600;text-decoration:none; } .lk-social a:hover{background:var(--hover)!important} /* ---------- меню пользователя ---------- */ .lk-profile{ display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;text-decoration:none; background:var(--panel-2)!important;color:var(--text)!important;margin-bottom:6px; } .lk-profile:hover{background:var(--hover)!important} .lk-profile__name{font-weight:700;font-size:15px;line-height:1.25;color:var(--text)!important;display:block} .lk-profile__sub{font-size:12px;color:var(--muted)!important} .lk-nav{display:flex;flex-direction:column;gap:2px} .lk-nav a,.lk-nav a:link,.lk-nav a:visited{ display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;text-decoration:none!important; color:var(--text)!important;font-size:14px;font-weight:600!important;transition:background .12s; } .lk-nav a:hover{background:var(--hover)!important} .lk-nav .fal{width:20px;text-align:center;color:var(--muted)!important;font-size:16px;flex:0 0 20px} .lk-nav a:hover .fal{color:var(--acc)!important} .lk-count{ margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:10px;display:inline-flex; align-items:center;justify-content:center;background:var(--acc)!important;color:#fff!important; font-size:11px;font-weight:700; } .lk-soon{cursor:default;opacity:.85} .lk-soon:hover{background:transparent!important} .lk-soon,.lk-soon .fal{color:var(--muted)!important} .lk-soon em{ margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--muted)!important;background:var(--panel-2)!important; border-radius:6px;padding:3px 7px; } .lk-sep{height:1px;background:var(--line);margin:7px 4px;border:0} .lk-logout,.lk-logout:link,.lk-logout:visited{color:var(--acc)!important} .lk-logout .fal{color:var(--acc)!important} /* ---------- фокус ---------- */ .lk a:focus-visible,.lk button:focus-visible,.lk input:focus-visible, .mls button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media (prefers-reduced-motion:reduce){.lk-menu{animation:none}.lk-trigger,.lk-btn{transition:none}} @media (max-width:520px){ .lk-menu{position:fixed;top:auto;bottom:10px;right:2vw;left:2vw;width:auto} .lk-menu::before{display:none} } /* ============================================================ Мои Списки — кнопка «В список» на карточке (без грубых бордеров) ============================================================ */ .mls{position:relative;display:block;font-family:'GothamProRegular',sans-serif} .mls-trigger{ display:flex!important;align-items:center;gap:10px;width:100%;min-height:46px;padding:12px 16px; border:0!important;border-radius:10px!important;cursor:pointer;font-family:inherit; background:var(--panel-2)!important;color:var(--text)!important;font-size:14px;font-weight:600; box-shadow:inset 0 0 0 1px var(--line);transition:background .15s; } .mls-trigger:hover{background:var(--hover)!important} .mls--active .mls-trigger{box-shadow:none} .mls-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;box-sizing:border-box} .mls:not(.mls--active) .mls-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)} .mls-label{flex:1;text-align:left;color:var(--text)!important} .mls-trigger .fa-chevron-down{color:var(--muted)!important;font-size:11px;transition:transform .18s} .mls:has(.mls-menu:not([hidden])) .fa-chevron-down{transform:rotate(180deg)} .mls-menu{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;padding:7px; background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:13px; box-shadow:var(--shadow)!important;animation:lk-pop .16s ease; } .mls-menu[hidden]{display:none!important} .mls-opt{ display:flex!important;align-items:center;gap:12px;width:100%;padding:11px 11px;border:0!important; border-radius:9px!important;background:transparent!important;color:var(--text)!important; font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s; } .mls-opt:hover{background:var(--hover)!important} .mls-opt i{width:15px;height:15px;flex:0 0 15px;border-radius:4px;background:var(--c,#c9ccd1);box-shadow:0 1px 2px rgba(0,0,0,.2)} .mls-opt.is-active{color:var(--acc)!important;background:var(--hover)!important} .mls-opt.is-active::after{content:'\2713';margin-left:auto;font-weight:800;font-size:13px;color:var(--acc)!important} .mls-remove{margin-top:5px;padding-top:13px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--acc)!important} .mls-remove:hover{background:var(--hover)!important} .mls-remove i{display:none} .mls[data-status="0"] .mls-remove,.mls:not([data-status]) .mls-remove{display:none!important} @media (prefers-reduced-motion:reduce){.mls-menu{animation:none}.mls-trigger,.mls-opt,.fa-chevron-down{transition:none}} /* ---------- Переключатель темы: чёткое inline-SVG солнце в тёмной теме ---------- */ .night .theme-toggle{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'%20fill='%23fff'/%3E%3Cpath%20d='M12%202.5v2.2M12%2019.3v2.2M2.5%2012h2.2M19.3%2012h2.2M5.4%205.4l1.55%201.55M17.05%2017.05l1.55%201.55M18.6%205.4l-1.55%201.55M6.95%2017.05l-1.55%201.55'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E")!important; background-size:21px!important;background-position:center!important;background-repeat:no-repeat!important; }