/* Phone tab bar (both designs): the mobile app's floating glass capsule — Активы · Доходы · YouFiHub orb · Расходы · Аналитика. Hidden above 768px, where the sections stay in the header segmented control. */ .yf-bottom-nav { display: none; } @media (max-width: 767.98px) { body.yf-has-bottom-nav { --yf-bottom-nav-offset: clamp(6px, env(safe-area-inset-bottom, 0px), 16px); } /* Browser toolbars already occupy their own viewport area; do not reserve the full home inset twice. */ body.yf-dashboard-auth .modal { padding-inline: 0 !important; } /* Capped theme dialogs must centre within the viewport, not keep Bootstrap's 8px left margin. */ body.yf-dashboard-auth .modal .modal-dialog { width: calc(100% - 16px); margin-inline: auto; } .yf-bottom-nav { --bn-ink: #6a7a73; --bn-active: #0c7a5b; --bn-glider: rgba(12, 122, 91, .12); --bn-orb: linear-gradient(135deg, #17b384 0%, #0c8a66 52%, #0a6e52 100%); --bn-orb-shadow: rgba(12, 122, 91, .7); --bn-orb-ink: #fff; --bn-pad: 6px; --bn-slot: calc((100% - var(--bn-pad) * 2) / 5); position: fixed; z-index: 1030; left: 50%; bottom: var(--yf-bottom-nav-offset, 6px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; width: min(calc(100% - 24px), 440px); height: 64px; padding: 0 var(--bn-pad); border-radius: 32px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .56)); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 0 0 .5px rgba(15, 23, 42, .1), 0 14px 34px -12px rgba(15, 23, 42, .32), 0 3px 8px rgba(15, 23, 42, .06); font-family: inherit; -webkit-tap-highlight-color: transparent; } body.dark-theme .yf-bottom-nav { --bn-ink: #9aaba4; --bn-active: #6ee7b7; --bn-glider: rgba(255, 255, 255, .1); --bn-orb: linear-gradient(135deg, #45e3a9 0%, #26c48e 55%, #17a676 100%); --bn-orb-shadow: rgba(38, 196, 142, .55); --bn-orb-ink: #04130e; background: linear-gradient(180deg, rgba(44, 48, 50, .74), rgba(24, 28, 30, .64)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 .5px rgba(255, 255, 255, .08), 0 16px 40px -12px rgba(0, 0, 0, .9); } body.yf-cookie-open .yf-bottom-nav { display: none; } /* Selection pill slides between the five columns (the hub column never gets it). */ .yf-bottom-nav__glider { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: calc(var(--bn-pad) + var(--bn-slot) * var(--nav-column, 0) + 3px); width: calc(var(--bn-slot) - 6px); border-radius: 26px; background: var(--bn-glider); opacity: 0; transform: scale(.7); transition: left 480ms cubic-bezier(.32, 1.2, .5, 1), opacity 200ms ease, transform 320ms cubic-bezier(.32, 1.2, .5, 1); pointer-events: none; } .yf-bottom-nav.has-active .yf-bottom-nav__glider { opacity: 1; transform: none; } .yf-bottom-nav__item { position: relative; z-index: 1; display: grid; min-width: 0; align-content: center; justify-items: center; gap: 2px; padding: 0 2px; border-radius: 26px; color: var(--bn-ink) !important; font-size: 10.5px; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; text-decoration: none !important; transition: color 240ms ease; } .yf-bottom-nav__item i { font-size: 23px; line-height: 1; transition: transform 280ms cubic-bezier(.32, 1.25, .5, 1); } .yf-bottom-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .yf-bottom-nav__item.is-active { color: var(--bn-active) !important; } .yf-bottom-nav__item:active i { transform: scale(.86); } .yf-bottom-nav__item:focus-visible { outline: 2px solid var(--bn-active); outline-offset: -3px; } /* Middle slot: the header's #tasks-btn is moved here by bottomNav.js. */ .yf-bottom-nav__hub { position: relative; z-index: 1; display: grid; min-width: 0; } .yf-bottom-nav #tasks-btn { position: relative; display: grid !important; align-content: end; justify-items: center; gap: 3px; height: 100%; min-width: 0; margin: 0 !important; padding: 0 0 7px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--bn-active) !important; font-size: 10.5px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; } .yf-bottom-nav #tasks-btn .yf-hub-orb { position: relative; display: grid; width: 50px; height: 50px; margin: -22px 0 0 !important; place-items: center; border-radius: 50%; color: var(--bn-orb-ink); background: var(--bn-orb); box-shadow: 0 10px 22px -8px var(--bn-orb-shadow), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 0, 0, .12); transition: transform 280ms cubic-bezier(.32, 1.25, .5, 1); } .yf-bottom-nav #tasks-btn .yf-hub-orb::after { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 80% at 30% 12%, rgba(255, 255, 255, .4), transparent 55%); content: ""; pointer-events: none; } .yf-bottom-nav #tasks-btn .yf-hub-glyph { position: relative; z-index: 1; width: 25px; height: 25px; } /* The tiles carry the colours of the first cards (Активы, Доходы, Расходы, Аналитика); a white outline separates them from the green orb */ .yf-bottom-nav #tasks-btn .yf-hub-glyph { color: #fff; } .yf-bottom-nav #tasks-btn .yf-hub-glyph rect:nth-child(1) { fill: #0f6b50; } .yf-bottom-nav #tasks-btn .yf-hub-glyph rect:nth-child(2) { fill: #1f6fe5; } .yf-bottom-nav #tasks-btn .yf-hub-glyph rect:nth-child(3) { fill: #8c2c48; } .yf-bottom-nav #tasks-btn .yf-hub-glyph rect:nth-child(4) { fill: #4a5a7c; } .yf-bottom-nav #tasks-btn .yf-hub-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .yf-bottom-nav #tasks-btn:active .yf-hub-orb { transform: scale(.9); } .yf-bottom-nav #tasks-btn .yf-youfi-indicator { top: -6px; right: calc(50% - 25px); width: 12px; height: 12px; border: 2px solid #fff; } body.dark-theme .yf-bottom-nav #tasks-btn .yf-youfi-indicator { border-color: #1c2124; } /* Demo accounts have no YouFiHub: four tabs share the capsule. */ body.yf-demo-mode .yf-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); --bn-slot: calc((100% - var(--bn-pad) * 2) / 4); } body.yf-demo-mode .yf-bottom-nav__hub { display: none; } /* The tab bar replaces the header section tabs and the header YouFiHub entry on phones; AI stays on top. */ body.yf-has-bottom-nav .yf-authorized-nav > .yf-youfihub-nav-item { display: none !important; } body.yf-has-bottom-nav .yf-section-nav > .nav-element:not(#ai-link) { display: none !important; } body.yf-has-bottom-nav .yf-section-nav:not(:has(#ai-link)) { display: none !important; } body.yf-has-bottom-nav { padding-bottom: calc(78px + var(--yf-bottom-nav-offset)) !important; } body.yf-has-bottom-nav .yf-error-report__trigger { bottom: calc(78px + var(--yf-bottom-nav-offset)) !important; } } @media (max-width: 575.98px) { body.yf-dashboard-auth .modal .modal-fullscreen-sm-down { width: 100%; } } @media (max-width: 767.98px) and (display-mode: standalone) { body.yf-has-bottom-nav { --yf-bottom-nav-offset: max(6px, env(safe-area-inset-bottom, 0px)); } } @media (max-width: 359.98px) { .yf-bottom-nav { width: calc(100% - 16px); --bn-pad: 4px; } .yf-bottom-nav__item, .yf-bottom-nav #tasks-btn { font-size: 10px; } .yf-bottom-nav #tasks-btn .yf-hub-orb { width: 46px; height: 46px; } } @media (prefers-reduced-motion: reduce) { .yf-bottom-nav__glider, .yf-bottom-nav__item i, .yf-bottom-nav #tasks-btn .yf-hub-orb { transition: none; } }