/** * AppMaker app-shell styles. * * Scoped under `am-` and applied on top of the active theme; nothing here * restyles theme content, it only adds the app chrome and its motion. */ /* ------------------------------------------------------------------ tokens */ :root { --am-accent: #2563eb; --am-theme: #111827; --am-bg: #ffffff; --am-progress: var( --am-accent ); --am-progress-height: 3px; --am-transition: 320ms; --am-nav-height: 0px; --am-splash-bg: var( --am-bg ); --am-splash-logo-size: 128px; --am-ease: cubic-bezier( .32, .72, 0, 1 ); --am-ease-out: cubic-bezier( .16, 1, .3, 1 ); --am-safe-top: env( safe-area-inset-top, 0px ); --am-safe-bottom: env( safe-area-inset-bottom, 0px ); --am-safe-left: env( safe-area-inset-left, 0px ); --am-safe-right: env( safe-area-inset-right, 0px ); --am-sheet-bg: #ffffff; --am-sheet-fg: #111827; --am-sheet-muted: #6b7280; --am-sheet-line: rgba( 0, 0, 0, .08 ); } @media ( prefers-color-scheme: dark ) { :root { --am-sheet-bg: #171b26; --am-sheet-fg: #f3f4f6; --am-sheet-muted: #9ca3af; --am-sheet-line: rgba( 255, 255, 255, .1 ); } } /* --------------------------------------------------------------- app shell */ html.am-standalone body { /* Installed apps have no browser chrome to absorb an overscroll. */ overscroll-behavior-y: none; } html.am-momentum, html.am-momentum body { -webkit-overflow-scrolling: touch; } html.am-standalone { padding-left: var( --am-safe-left ); padding-right: var( --am-safe-right ); } /* Keep page content clear of the tab bar and the home indicator. The tab bar can be enabled outside standalone mode too, so this is not scoped to it. */ html.am-active body { padding-bottom: var( --am-nav-height ); } /* Core reserves 32px at the top of for the admin bar; both the bar and the reservation have to go, or the app opens with a grey band. */ html.am-standalone #wpadminbar { display: none !important; } html.am-standalone { margin-top: 0 !important; } html.am-standalone body.admin-bar { margin-top: 0 !important; padding-top: 0; } html.am-active a, html.am-active button, html.am-active .am-nav__item { -webkit-tap-highlight-color: transparent; } html.am-standalone .am-nav, html.am-standalone .am-splash, html.am-standalone .am-install { -webkit-user-select: none; user-select: none; } /* ------------------------------------------------------------------ splash */ .am-splash { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; /* The fallback is not cosmetic. Without it, a missing --am-splash-bg makes the background invalid, the overlay renders fully transparent, and the page underneath looks fine while every tap lands on an invisible sheet. */ background: var( --am-splash-bg, #ffffff ); opacity: 1; transition: opacity 420ms var( --am-ease ), transform 420ms var( --am-ease ); will-change: opacity, transform; /* Failsafe: if the runtime never loads — a blocked script, a 404, a theme JS error — the splash still gets out of the way instead of trapping the visitor behind a sheet they cannot see. */ animation: am-splash-failsafe 1ms linear 4s forwards; } @keyframes am-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Hidden once the class is gone, but only after the exit animation has had its frame — removing the class and animating out happen in the same tick. */ html:not( .am-splashing ) .am-splash:not( .is-leaving ) { display: none; } .am-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem; text-align: center; } .am-splash__logo { width: var( --am-splash-logo-size ); height: var( --am-splash-logo-size ); object-fit: contain; border-radius: 24%; } .am-splash__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var( --am-sheet-fg ); } .am-splash__tagline { font-size: .85rem; color: var( --am-sheet-muted ); margin-top: -.5rem; } /* Splash exit variants. */ .am-splash.is-leaving { opacity: 0; pointer-events: none; } .am-splash--exit-zoom-out.is-leaving { transform: scale( 1.12 ); } .am-splash--exit-slide-up.is-leaving { transform: translateY( -100% ); opacity: 1; } .am-splash--exit-curtain.is-leaving { clip-path: inset( 0 0 100% 0 ); opacity: 1; } /* Logo animations. */ .am-splash__logo--fade { animation: am-fade-in 700ms var( --am-ease-out ) both; } .am-splash__logo--zoom { animation: am-zoom-in 620ms var( --am-ease-out ) both; } .am-splash__logo--pulse { animation: am-zoom-in 620ms var( --am-ease-out ) both, am-pulse 2s 620ms ease-in-out infinite; } .am-splash__logo--float { animation: am-zoom-in 620ms var( --am-ease-out ) both, am-float 3s 620ms ease-in-out infinite; } .am-splash__logo--reveal { animation: am-reveal 800ms var( --am-ease ) both; } @keyframes am-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes am-zoom-in { from { opacity: 0; transform: scale( .72 ); } to { opacity: 1; transform: scale( 1 ); } } @keyframes am-pulse { 0%, 100% { transform: scale( 1 ); } 50% { transform: scale( 1.06 ); } } @keyframes am-float { 0%, 100% { transform: translateY( 0 ); } 50% { transform: translateY( -10px ); } } @keyframes am-reveal { from { opacity: 0; clip-path: inset( 0 0 100% 0 ); transform: translateY( 12px ); } to { opacity: 1; clip-path: inset( 0 0 0 0 ); transform: none; } } /* ---------------------------------------------------------------- spinners */ .am-spinner { display: inline-flex; align-items: center; justify-content: center; color: var( --am-accent ); } .am-spinner--dots { gap: .4rem; } .am-spinner--dots span { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: am-bounce 1.1s ease-in-out infinite; } .am-spinner--dots span:nth-child( 2 ) { animation-delay: .14s; } .am-spinner--dots span:nth-child( 3 ) { animation-delay: .28s; } @keyframes am-bounce { 0%, 80%, 100% { transform: translateY( 0 ); opacity: .4; } 40% { transform: translateY( -7px ); opacity: 1; } } .am-spinner--ring { width: 28px; height: 28px; border: 2.5px solid color-mix( in srgb, currentColor 22%, transparent ); border-top-color: currentColor; border-radius: 50%; animation: am-spin .8s linear infinite; } @keyframes am-spin { to { transform: rotate( 360deg ); } } .am-spinner--bar { width: 120px; height: 3px; border-radius: 3px; background: color-mix( in srgb, currentColor 20%, transparent ); overflow: hidden; position: relative; } .am-spinner--bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: currentColor; animation: am-slide 1.2s var( --am-ease ) infinite; } @keyframes am-slide { 0% { transform: translateX( -100% ); } 100% { transform: translateX( 260% ); } } /* The 12-spoke iOS activity indicator. */ .am-spinner--ios { position: relative; width: 26px; height: 26px; } .am-spinner--ios span { position: absolute; inset: 0; transform: rotate( calc( var( --i ) * 30deg ) ); } .am-spinner--ios span::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: currentColor; opacity: .18; animation: am-ios-fade 1s linear infinite; animation-delay: calc( var( --i ) * -83ms ); } @keyframes am-ios-fade { 0% { opacity: 1; } 100% { opacity: .18; } } /* ---------------------------------------------------------- progress bar */ .am-progress { position: fixed; top: var( --am-safe-top ); left: 0; right: 0; height: var( --am-progress-height ); z-index: 2147482900; pointer-events: none; opacity: 0; transition: opacity 200ms ease; } .am-progress.is-active { opacity: 1; } .am-progress__bar { height: 100%; background: var( --am-progress ); transform: scaleX( 0 ); transform-origin: 0 50%; transition: transform 200ms var( --am-ease ); box-shadow: 0 0 10px color-mix( in srgb, var( --am-progress ) 60%, transparent ); } html[ dir="rtl" ] .am-progress__bar { transform-origin: 100% 50%; } /* ------------------------------------------------------ page transitions */ /* Native cross-document transitions where the engine supports them. */ @view-transition { navigation: auto; } html[ data-am-transition="ios" ]::view-transition-old( root ) { animation: am-vt-out-ios var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="ios" ]::view-transition-new( root ) { animation: am-vt-in-ios var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="material" ]::view-transition-new( root ) { animation: am-vt-in-material var( --am-transition ) var( --am-ease-out ) both; } html[ data-am-transition="fade" ]::view-transition-old( root ), html[ data-am-transition="fade" ]::view-transition-new( root ) { animation-duration: var( --am-transition ); } html[ data-am-transition="slide-up" ]::view-transition-new( root ) { animation: am-vt-in-up var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="zoom" ]::view-transition-new( root ) { animation: am-vt-in-zoom var( --am-transition ) var( --am-ease-out ) both; } @keyframes am-vt-out-ios { to { transform: translateX( -22% ); opacity: .55; } } @keyframes am-vt-in-ios { from { transform: translateX( 100% ); } } @keyframes am-vt-in-material { from { transform: translateY( 24px ); opacity: 0; } } @keyframes am-vt-in-up { from { transform: translateY( 100% ); } } @keyframes am-vt-in-zoom { from { transform: scale( .92 ); opacity: 0; } } html[ dir="rtl" ] { --am-vt-dir: -1; } /* JS fallback for engines without cross-document view transitions. */ html.am-leaving body, html.am-entering body { will-change: transform, opacity; } html[ data-am-transition="ios" ].am-leaving body { animation: am-page-out-ios var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="ios" ].am-entering body { animation: am-page-in-ios var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="material" ].am-leaving body { animation: am-page-out-fade calc( var( --am-transition ) * .7 ) ease both; } html[ data-am-transition="material" ].am-entering body { animation: am-page-in-material var( --am-transition ) var( --am-ease-out ) both; } html[ data-am-transition="fade" ].am-leaving body { animation: am-page-out-fade calc( var( --am-transition ) * .7 ) ease both; } html[ data-am-transition="fade" ].am-entering body { animation: am-fade-in var( --am-transition ) ease both; } html[ data-am-transition="slide-up" ].am-leaving body { animation: am-page-out-down calc( var( --am-transition ) * .8 ) var( --am-ease ) both; } html[ data-am-transition="slide-up" ].am-entering body { animation: am-page-in-up var( --am-transition ) var( --am-ease ) both; } html[ data-am-transition="zoom" ].am-leaving body { animation: am-page-out-zoom calc( var( --am-transition ) * .8 ) var( --am-ease ) both; } html[ data-am-transition="zoom" ].am-entering body { animation: am-page-in-zoom var( --am-transition ) var( --am-ease-out ) both; } @keyframes am-page-out-ios { to { transform: translateX( -18% ); opacity: .5; } } @keyframes am-page-in-ios { from { transform: translateX( 14% ); opacity: .4; } } @keyframes am-page-out-fade { to { opacity: 0; } } @keyframes am-page-in-material { from { transform: translateY( 20px ); opacity: 0; } } @keyframes am-page-out-down { to { transform: translateY( 6%); opacity: .2; } } @keyframes am-page-in-up { from { transform: translateY( 26px ); opacity: 0; } } @keyframes am-page-out-zoom { to { transform: scale( .96 ); opacity: 0; } } @keyframes am-page-in-zoom { from { transform: scale( 1.03 ); opacity: 0; } } /* -------------------------------------------------------- swipe-back hint */ .am-swipe-hint { position: fixed; inset: 0; z-index: 2147482800; pointer-events: none; --am-swipe: 0; background: linear-gradient( to right, rgba( 0, 0, 0, .28 ), transparent 42% ); opacity: var( --am-swipe ); } .am-swipe-hint.is-forward { background: linear-gradient( to left, rgba( 0, 0, 0, .28 ), transparent 42% ); } .am-swipe-hint__arrow { position: absolute; top: 50%; left: calc( 6px + var( --am-swipe ) * 26px ); width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba( 255, 255, 255, .94 ); box-shadow: 0 6px 20px rgba( 0, 0, 0, .22 ); transform: scale( calc( .6 + var( --am-swipe ) * .4 ) ); transition: background 160ms ease; } .am-swipe-hint.is-forward .am-swipe-hint__arrow { left: auto; right: calc( 6px + var( --am-swipe ) * 26px ); } .am-swipe-hint__arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-left: 2.4px solid #111827; border-bottom: 2.4px solid #111827; transform: rotate( 45deg ) translate( 1px, -1px ); } .am-swipe-hint.is-forward .am-swipe-hint__arrow::before { transform: rotate( -135deg ) translate( 1px, -1px ); } .am-swipe-hint.is-armed .am-swipe-hint__arrow { background: var( --am-accent ); } .am-swipe-hint.is-armed .am-swipe-hint__arrow::before { border-color: #fff; } html.am-swiping body { transform: translateX( calc( var( --am-swipe, 0 ) * 6% ) ); transition: transform 60ms linear; } /* ------------------------------------------------------ pull to refresh */ .am-ptr { position: fixed; top: calc( var( --am-safe-top ) + 8px ); left: 50%; z-index: 2147482850; --am-pull: 0; pointer-events: none; transform: translate( -50%, calc( -140% + var( --am-pull ) * 120% ) ); opacity: 0; transition: opacity 180ms ease; } .am-ptr.is-visible { opacity: calc( .35 + var( --am-pull ) * .65 ); } .am-ptr__spinner { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var( --am-accent ); background: var( --am-sheet-bg ); box-shadow: 0 4px 18px rgba( 0, 0, 0, .18 ); } .am-ptr__spinner svg { transform: rotate( calc( var( --am-pull ) * 300deg ) ); transition: transform 60ms linear; } .am-ptr.is-armed .am-ptr__spinner { color: #fff; background: var( --am-accent ); } .am-ptr.is-refreshing { transform: translate( -50%, 20px ); opacity: 1; transition: transform 240ms var( --am-ease-out ); } .am-ptr.is-refreshing svg { animation: am-spin .75s linear infinite; transition: none; } .am-status-tap { position: fixed; top: 0; left: 0; right: 0; height: max( var( --am-safe-top ), 24px ); z-index: 2147482700; } html:not( .am-standalone ) .am-status-tap { display: none; } /* ------------------------------------------------------- bottom nav bar */ .am-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2147482600; display: flex; justify-content: space-around; align-items: stretch; padding-bottom: var( --am-safe-bottom ); background: var( --am-nav-bg, var( --am-sheet-bg ) ); color: var( --am-sheet-fg ); border-top: 1px solid var( --am-sheet-line ); transition: transform 260ms var( --am-ease ); } .am-nav--standalone-only { display: none; } html.am-standalone .am-nav--standalone-only { display: flex; } .am-nav.is-hidden { transform: translateY( 100% ); } .am-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 8px 4px; position: relative; overflow: hidden; color: var( --am-sheet-muted ); text-decoration: none; font-size: 10.5px; font-weight: 500; line-height: 1.2; transition: color 180ms ease, transform 180ms var( --am-ease-out ); } .am-nav__item.is-active { color: var( --am-nav-active, var( --am-accent ) ); } .am-nav__item:active { transform: scale( .93 ); } .am-nav__icon { display: grid; place-items: center; } .am-nav__icon svg { width: 24px; height: 24px; } .am-nav--icons-only .am-nav__label { display: none; } .am-nav__badge { position: absolute; top: 5px; inset-inline-start: 55%; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; } /* iOS: hairline border, blurred material. */ .am-nav--ios { background: color-mix( in srgb, var( --am-nav-bg, var( --am-sheet-bg ) ) 82%, transparent ); -webkit-backdrop-filter: saturate( 180% ) blur( 20px ); backdrop-filter: saturate( 180% ) blur( 20px ); } /* Material: elevated, no border, pill indicator behind the active icon. */ .am-nav--material { border-top: 0; box-shadow: 0 -1px 14px rgba( 0, 0, 0, .1 ); } .am-nav--material .am-nav__item.is-active .am-nav__icon { position: relative; } .am-nav--material .am-nav__item.is-active .am-nav__icon::before { content: ""; position: absolute; inset: -5px -14px; border-radius: 999px; background: color-mix( in srgb, var( --am-nav-active, var( --am-accent ) ) 16%, transparent ); animation: am-zoom-in 240ms var( --am-ease-out ) both; } /* Floating: detached rounded bar. */ .am-nav--floating { left: 12px; right: 12px; bottom: calc( var( --am-safe-bottom ) + 12px ); padding-bottom: 0; border: 0; border-radius: 22px; box-shadow: 0 10px 34px rgba( 0, 0, 0, .2 ); overflow: hidden; } /* Glass: translucent over content. */ .am-nav--glass { background: color-mix( in srgb, var( --am-nav-bg, var( --am-sheet-bg ) ) 60%, transparent ); -webkit-backdrop-filter: blur( 26px ) saturate( 160% ); backdrop-filter: blur( 26px ) saturate( 160% ); border-top-color: rgba( 255, 255, 255, .16 ); } /* ---------------------------------------------------------- install sheet */ .am-install { position: fixed; inset: 0; z-index: 2147482950; display: flex; opacity: 0; pointer-events: none; transition: opacity 280ms ease; } .am-install.is-open { opacity: 1; pointer-events: auto; } .am-install__panel { background: var( --am-sheet-bg ); color: var( --am-sheet-fg ); box-shadow: 0 -8px 40px rgba( 0, 0, 0, .28 ); padding: 1.4rem 1.25rem calc( 1.25rem + var( --am-safe-bottom ) ); transform: translateY( 100% ); transition: transform 340ms var( --am-ease ); width: 100%; } .am-install.is-open .am-install__panel { transform: none; } /* Bottom sheet (default). */ .am-install--sheet { align-items: flex-end; background: rgba( 0, 0, 0, .38 ); } .am-install--sheet .am-install__panel { border-radius: 22px 22px 0 0; max-width: 32rem; margin: 0 auto; } .am-install--sheet .am-install__panel::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 999px; background: var( --am-sheet-line ); margin: -.5rem auto 1rem; } /* Banners. */ .am-install--banner-top, .am-install--banner-bottom { background: transparent; pointer-events: none; } .am-install--banner-top { align-items: flex-start; } .am-install--banner-bottom { align-items: flex-end; } .am-install--banner-top .am-install__panel, .am-install--banner-bottom .am-install__panel { pointer-events: auto; max-width: 34rem; margin: 0 auto; border-radius: 18px; box-shadow: 0 8px 30px rgba( 0, 0, 0, .22 ); } .am-install--banner-top .am-install__panel { margin-top: calc( var( --am-safe-top ) + 10px ); transform: translateY( -140% ); } .am-install--banner-bottom .am-install__panel { margin-bottom: calc( var( --am-safe-bottom ) + 10px + var( --am-nav-height ) ); } .am-install--banner-top .am-install__panel, .am-install--banner-bottom .am-install__panel { width: calc( 100% - 20px ); } /* Centred card. */ .am-install--card { align-items: center; justify-content: center; background: rgba( 0, 0, 0, .45 ); } .am-install--card .am-install__panel { max-width: 22rem; margin: 1rem; border-radius: 22px; text-align: center; transform: scale( .9 ); opacity: 0; transition: transform 300ms var( --am-ease-out ), opacity 220ms ease; } .am-install--card.is-open .am-install__panel { transform: none; opacity: 1; } .am-install--card .am-install__head { flex-direction: column; text-align: center; } .am-install__head { display: flex; gap: .9rem; align-items: center; } .am-install__icon { width: 56px; height: 56px; border-radius: 15px; flex: none; box-shadow: 0 4px 14px rgba( 0, 0, 0, .18 ); } .am-install__title { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; } .am-install__text { font-size: .86rem; line-height: 1.6; color: var( --am-sheet-muted ); } .am-install__steps { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: .55rem; counter-reset: am-step; } .am-install__steps li { display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border-radius: 13px; background: color-mix( in srgb, var( --am-sheet-fg ) 6%, transparent ); font-size: .85rem; } .am-install__glyph { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var( --am-accent ); color: #fff; font-size: .8rem; } .am-install__actions { display: flex; gap: .6rem; margin-top: 1.15rem; } .am-install__btn { flex: 1; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; min-height: 46px; padding: 0 1rem; border-radius: 13px; background: var( --am-accent ); color: #fff; transition: transform 140ms ease, opacity 140ms ease; } .am-install__btn:active { transform: scale( .97 ); opacity: .9; } .am-install__btn--ghost { background: color-mix( in srgb, var( --am-sheet-fg ) 8%, transparent ); color: var( --am-sheet-fg ); } /* ------------------------------------------------- download source picker */ .am-sources { display: grid; gap: .5rem; margin-top: 1.15rem; } .am-source { display: flex; align-items: center; gap: .8rem; width: 100%; appearance: none; border: 1px solid var( --am-sheet-line ); cursor: pointer; font: inherit; text-align: start; padding: .85rem 1rem; border-radius: 14px; background: transparent; color: var( --am-sheet-fg ); transition: transform 140ms ease, background 140ms ease; } .am-source:active { transform: scale( .985 ); background: color-mix( in srgb, var( --am-sheet-fg ) 6%, transparent ); } .am-source__glyph { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: color-mix( in srgb, var( --am-accent ) 14%, transparent ); color: var( --am-accent ); } .am-source__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .am-source__label { font-size: .92rem; font-weight: 600; } .am-source__note { font-size: .76rem; color: var( --am-sheet-muted ); } /* Chevron points the way text flows, so it flips in RTL automatically. */ .am-source__chevron { flex: none; width: 8px; height: 8px; border-top: 2px solid var( --am-sheet-muted ); border-inline-end: 2px solid var( --am-sheet-muted ); transform: rotate( 45deg ); } html[ dir="rtl" ] .am-source__chevron { transform: rotate( -135deg ); } /* Arrow pointing at the iOS share button, which sits in the bottom bar on iPhone and the top bar on iPad. */ .am-install__pointer { position: absolute; bottom: 4px; left: 50%; width: 16px; height: 16px; margin-left: -8px; background: var( --am-sheet-bg ); transform: rotate( 45deg ); } @media ( min-width: 768px ) { .am-install__pointer { display: none; } } /* ------------------------------------------------ floating install button */ .am-fab { position: fixed; z-index: 2147482940; display: inline-flex; align-items: center; gap: .5rem; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem; line-height: 1; padding: .85rem 1.25rem; border-radius: 999px; background: var( --am-accent ); color: #fff; box-shadow: 0 8px 24px -4px color-mix( in srgb, var( --am-accent ) 55%, transparent ), 0 4px 10px rgba( 0, 0, 0, .16 ); /* Hidden until the runtime decides this visitor can actually install. */ opacity: 0; visibility: hidden; transform: translateY( 14px ) scale( .94 ); transition: opacity 300ms var( --am-ease-out ), transform 300ms var( --am-ease-out ), visibility 0s 300ms; } .am-fab.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .am-fab:active { transform: scale( .95 ); } .am-fab__label { white-space: nowrap; } /* An installed app never needs its own download button. */ html.am-standalone .am-fab { display: none; } .am-fab--mobile-only { display: none; } @media ( max-width: 860px ) { .am-fab--mobile-only { display: inline-flex; } } /* Positions, offset past the tab bar and the home indicator. */ .am-fab--bottom-end { inset-inline-end: 16px; bottom: calc( 16px + var( --am-safe-bottom ) + var( --am-nav-height ) ); } .am-fab--bottom-start { inset-inline-start: 16px; bottom: calc( 16px + var( --am-safe-bottom ) + var( --am-nav-height ) ); } .am-fab--bottom-center { inset-inline-start: 50%; bottom: calc( 16px + var( --am-safe-bottom ) + var( --am-nav-height ) ); transform: translateX( -50% ) translateY( 14px ) scale( .94 ); } .am-fab--bottom-center.is-visible { transform: translateX( -50% ); } .am-fab--bottom-center:active { transform: translateX( -50% ) scale( .95 ); } .am-fab--top-end { inset-inline-end: 16px; top: calc( 16px + var( --am-safe-top ) ); transform: translateY( -14px ) scale( .94 ); } .am-fab--top-start { inset-inline-start: 16px; top: calc( 16px + var( --am-safe-top ) ); transform: translateY( -14px ) scale( .94 ); } /* Shapes. */ .am-fab--circle { padding: 0; width: 56px; height: 56px; justify-content: center; border-radius: 50%; } .am-fab--bar { inset-inline: 12px; justify-content: center; border-radius: 16px; padding: 1rem; font-size: .95rem; } .am-fab--bar.am-fab--bottom-center { transform: translateY( 14px ) scale( .98 ); } .am-fab--bar.am-fab--bottom-center.is-visible { transform: none; } /* ------------------------------------------ inline install button (shortcode) */ .am-install-btn { display: inline-flex; align-items: center; gap: .5rem; appearance: none; cursor: pointer; font: inherit; font-weight: 600; transition: transform 140ms ease, opacity 140ms ease; } .am-install-btn:active { transform: scale( .97 ); } .am-install-btn--button { border: 0; padding: .8rem 1.4rem; border-radius: 12px; background: var( --am-accent ); color: #fff; min-height: 46px; } .am-install-btn--link { border: 0; background: none; padding: 0; color: var( --am-accent ); text-decoration: underline; text-underline-offset: 3px; } /* Inside an installed app the offer is meaningless. */ html.am-standalone .am-install-btn { display: none; } /* ---------------------------------------------------- connection banner */ .am-connection { position: fixed; top: calc( var( --am-safe-top ) + 8px ); left: 50%; z-index: 2147482990; padding: .5rem 1rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .8rem; font-weight: 600; box-shadow: 0 6px 22px rgba( 0, 0, 0, .22 ); transform: translate( -50%, -180% ); transition: transform 340ms var( --am-ease-out ); pointer-events: none; } .am-connection.is-visible { transform: translate( -50%, 0 ); } .am-connection.is-online { background: #16a34a; } /* ------------------------------------------------------------- toasts */ .am-toasts { position: fixed; left: 50%; bottom: calc( var( --am-safe-bottom ) + var( --am-nav-height ) + 16px ); z-index: 2147482980; transform: translateX( -50% ); display: flex; flex-direction: column; gap: .5rem; width: min( 92vw, 30rem ); pointer-events: none; } .am-toast { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 14px; background: #1f2937; color: #f9fafb; font-size: .86rem; box-shadow: 0 8px 28px rgba( 0, 0, 0, .3 ); opacity: 0; transform: translateY( 14px ) scale( .97 ); transition: opacity 260ms ease, transform 260ms var( --am-ease-out ); pointer-events: auto; } .am-toast.is-visible { opacity: 1; transform: none; } .am-toast--success { background: #15803d; } .am-toast--error { background: #b91c1c; } .am-toast__text { flex: 1; } .am-toast__action { appearance: none; border: 0; background: rgba( 255, 255, 255, .16 ); color: inherit; font: inherit; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; cursor: pointer; } /* -------------------------------------------------------------- ripple */ .am-ripple-host { overflow: hidden; } .am-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; pointer-events: none; transform: scale( 0 ); animation: am-ripple 600ms var( --am-ease-out ) forwards; } @keyframes am-ripple { to { transform: scale( 2.4 ); opacity: 0; } } /* -------------------------------------------------- images and skeletons */ .am-img { opacity: 0; transition: opacity 420ms ease; } .am-img.is-loaded { opacity: 1; } .am-skeleton { position: relative; overflow: hidden; border-radius: 10px; background: color-mix( in srgb, currentColor 10%, transparent ); color: inherit; } .am-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, color-mix( in srgb, currentColor 14%, transparent ), transparent ); transform: translateX( -100% ); animation: am-shimmer 1.4s infinite; } @keyframes am-shimmer { 100% { transform: translateX( 100% ); } } html[ data-am-skeleton="pulse" ] .am-skeleton::after { display: none; } html[ data-am-skeleton="pulse" ] .am-skeleton { animation: am-skeleton-pulse 1.5s ease-in-out infinite; } @keyframes am-skeleton-pulse { 50% { opacity: .45; } } /* ------------------------------------------------------- busy buttons */ .am-busy { position: relative; color: transparent !important; pointer-events: none; } .am-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2.2px solid rgba( 255, 255, 255, .35 ); border-top-color: #fff; border-radius: 50%; animation: am-spin .7s linear infinite; } /* -------------------------------------------------------- accessibility */ @media ( prefers-reduced-motion: reduce ) { .am-splash, .am-splash__logo, .am-install__panel, .am-toast, .am-connection, .am-nav, .am-nav__item, .am-img { animation: none !important; transition-duration: 1ms !important; } html.am-leaving body, html.am-entering body { animation: none !important; } .am-ripple { display: none; } } @media print { .am-splash, .am-nav, .am-install, .am-toasts, .am-progress, .am-connection, .am-ptr, .am-status-tap { display: none !important; } }