@media (max-width: 960px) {
html,
body {
max-width: 100vw;
}
body:not(.page-admin) {
overflow-x: hidden;
--ait-mobile-flash-top: 84px;
}
body.page-admin.shell-admin {
overflow-x: hidden;
--ait-mobile-flash-top: var(--ait-admin-mobile-topbar-height, 92px);
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest,
body:not(.page-admin):not([data-authenticated="1"]).shell-app {
--ait-public-mobile-auth-topbar-height: 136px;
--ait-mobile-flash-top: var(--ait-public-mobile-auth-topbar-height);
}
body .flash-stack[data-flash-stack],
body.theme-light .flash-stack[data-flash-stack],
body.theme-dark .flash-stack[data-flash-stack] {
position: fixed;
inset-inline: 12px;
left: 12px;
right: 12px;
top: calc(var(--ait-mobile-flash-top, 88px) + env(safe-area-inset-top, 0px) + 10px);
bottom: auto;
width: auto;
min-width: 0;
max-width: calc(100vw - 24px);
margin:0;
transform: none;
translate: none;
box-sizing: border-box;
display: grid;
place-items: stretch;
gap:10px;
pointer-events: none;
z-index: 5000;
}
body .flash-stack[data-flash-stack] > .flash,
body.theme-light .flash-stack[data-flash-stack] > .flash,
body.theme-dark .flash-stack[data-flash-stack] > .flash {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin:0;
overflow-wrap: anywhere ;
word-break: normal ;
text-align:center;
pointer-events: auto;
}
}
@media (max-width: 640px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items:center;
justify-content:flex-start;
gap:12px;
width: 100%;
max-width: 100vw;
min-height: var(--ait-public-mobile-auth-topbar-height, 136px);
padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 12px;
overflow: visible;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-left,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-left {
box-sizing: border-box;
display: flex;
align-items:center;
gap:14px;
flex: 0 0 100%;
width: 100%;
min-width: 0;
max-width: 100%;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .brand-title,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .brand-title {
min-width: 0;
max-width: calc(100vw - 116px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right {
box-sizing: border-box;
display: grid;
visibility: visible;
pointer-events: auto;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items:stretch;
justify-content:stretch;
gap:10px;
flex: 0 0 100%;
width: 100%;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 0;
max-height: none;
padding:0;
margin:0;
overflow: visible;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right > a,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right > a {
box-sizing: border-box;
display: inline-flex;
align-items:center;
justify-content:center;
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 48px;
padding-inline:12px;
margin:0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 380px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest,
body:not(.page-admin):not([data-authenticated="1"]).shell-app {
--ait-public-mobile-auth-topbar-height: 186px;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right {
grid-template-columns: 1fr;
}
}
@media (max-width: 960px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest,
body:not(.page-admin):not([data-authenticated="1"]).shell-app {
--ait-public-mobile-auth-topbar-height: 104px;
--ait-mobile-flash-top: var(--ait-public-mobile-auth-topbar-height);
}
body .flash-stack[data-flash-stack],
body.theme-light .flash-stack[data-flash-stack],
body.theme-dark .flash-stack[data-flash-stack] {
position: fixed;
left: 12px;
right: 12px;
top: calc(var(--ait-mobile-flash-top, 84px) + env(safe-area-inset-top, 0px) + 8px);
width: auto;
max-width: calc(100vw - 24px);
min-width: 0;
margin:0;
transform: none;
translate: none;
z-index: 5000;
}
body .flash-stack[data-flash-stack] > .flash {
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere ;
word-break: normal ;
}
}
@media (max-width: 640px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "brand auth";
align-items:center;
gap:8px;
min-height: var(--ait-public-mobile-auth-topbar-height, 104px);
height: auto;
padding:calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
max-width: 100vw;
overflow: visible;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-left,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-left {
grid-area: brand;
display: flex;
align-items:center;
gap:8px;
width: auto;
min-width: 0;
max-width: 100%;
flex: 1 1 auto;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .brand-title,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .brand-title {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right {
grid-area: auth;
display: inline-flex;
visibility: visible;
pointer-events: auto;
align-items:center;
justify-content:flex-end;
gap:6px;
width: auto;
max-width: min(58vw, 240px);
min-width: 0;
height: auto;
min-height: 0;
padding:0;
margin:0;
overflow: visible;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right > a,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right > a {
box-sizing: border-box;
display: inline-flex;
align-items:center;
justify-content:center;
flex: 0 1 auto;
width: auto;
min-width: 0;
max-width: 118px;
min-height: 34px;
padding:0 9px;
border-radius:12px;
font-size:12px;
line-height:1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 380px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest,
body:not(.page-admin):not([data-authenticated="1"]).shell-app {
--ait-public-mobile-auth-topbar-height: 112px;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "brand" "auth";
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right {
justify-content:flex-start;
max-width: 100%;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right > a,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right > a {
max-width: 132px;
}
}