/* THE PHONE'S SIDE MENU (class.side_menu.php, side_menu.js) - swipe the page right and the whole page slides over to show the menu sitting behind it. Pilot: side_menu::PILOT_USER_IDS. The panel is fixed under everything (z-index 0, hidden until it is needed); the page - the fixed header (.mob_prev_header, or the admin portal's .navbar_upper_container), the layout table (.smenu_page, landing_page::modern_body), the lower nav, the phone calendar overlay - is translated by --smenu_w, which side_menu.js sets on . The same panel serves the staff side, the employer portal and the admin portal (class.side_menu.php builds each). The scrim rides along on top of the page: it is what a tap lands on to close, and it carries the page's edge shadow. Rows and cards are the desk account drawer's nud_* (css/staff_sidebar.css). html.smenu_dragging: the finger is driving it (inline transforms, no transitions) html.smenu_open: it is open (the css transforms below) html.smenu_anim: a settle is under way (transitions on) - side_menu.js takes it off after */ .smenu_panel, .smenu_scrim { display: none; } @media (max-width: 767px) { .smenu_panel { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 320px; background: #16323a; color: #fff; z-index: 0; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); visibility: hidden; /* a little behind the page until it is pulled: it catches up as the page slides (the parallax ChatGPT's has), and side_menu.js drives the same value with the finger */ transform: translate3d(-28%, 0, 0); transition: visibility 0s linear 0.28s; } html.smenu_dragging .smenu_panel, html.smenu_open .smenu_panel { visibility: visible; transition-delay: 0s; } html.smenu_open .smenu_panel { transform: none; } .smenu_head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; } .smenu_head .nud_who { min-width: 0; } .smenu_body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; padding: 18px 14px 6px; } .smenu_body::-webkit-scrollbar { display: none; } .smenu_foot { flex-shrink: 0; padding: 6px 14px calc(env(safe-area-inset-bottom, 0px) + 10px); border-top: 1px solid rgba(255,255,255,0.12); } /* the rail's colours for the two coloured rows (css/staff_sidebar.css) */ .smenu_todo_item.is_pending { color: #fff4c2; } .smenu_todo_item.is_pending i { color: #ffd54f; } .smenu_todo_item.is_pending .nud_badge { background: #dc3545; } .smenu_upgrade_item i { color: #d58cff; } /* the heart in the site's pink (the Create a Schedule button's #d6469f, lifted for the dark) */ .smenu_favorites i { color: #ff8ac9; } /* the scrim: over the header (10) and the lower nav (5), so a tap anywhere on the shifted page closes the menu. it moves with the page and darkens as the menu opens */ .smenu_scrim { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 11; background: rgba(0,0,0,0); box-shadow: -14px 0 28px rgba(0,0,0,0.28); visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.28s; } html.smenu_dragging .smenu_scrim, html.smenu_open .smenu_scrim { visibility: visible; pointer-events: auto; transition-delay: 0s; } html.smenu_open .smenu_scrim { background: rgba(0,0,0,0.12); } /* what slides. the layout table is static, so at rest it would paint under a fixed panel - which is why the panel stays hidden until it is needed. while it is on screen the page has to paint above it wherever a page happens to echo its navbar, hence the explicit stacking here */ html.smenu_dragging .smenu_page, html.smenu_anim .smenu_page, html.smenu_open .smenu_page { position: relative; z-index: 1; } /* .navbar_upper_container: the admin portal's fixed top bar (the staff and employer sides hide theirs on a phone and use .mob_prev_header instead) */ html.smenu_open .mob_prev_header, html.smenu_open .navbar_upper_container, html.smenu_open .lower_navbar_container, html.smenu_open .smenu_page, html.smenu_open .mac_cal_wrap, html.smenu_open .smenu_scrim { transform: translate3d(var(--smenu_w, 280px), 0, 0); } html.smenu_anim .mob_prev_header, html.smenu_anim .navbar_upper_container, html.smenu_anim .lower_navbar_container, html.smenu_anim .smenu_page, html.smenu_anim .mac_cal_wrap, html.smenu_anim .smenu_scrim, html.smenu_anim .smenu_panel { transition: transform 0.28s cubic-bezier(0.32, 0, 0.15, 1), background 0.28s linear, visibility 0s linear 0.28s; } html.smenu_anim.smenu_open .smenu_panel, html.smenu_anim.smenu_open .smenu_scrim { transition-delay: 0s; } /* the page behind does not scroll while the menu is open (side_menu.js also swallows the touches that land on the scrim) */ html.smenu_open body { overflow: hidden; } } /* a drawer opened from the menu rides the page's transition to the left edge (side_menu.js), so it wears the page's edge shadow while it is on its way */ .smenu_ride_window { box-shadow: -14px 0 28px rgba(0,0,0,0.28); } /* the referrals drawer holds the /refer page: the page's outer container loses its page gutters */ .smenu_ref_drawer .content_outer_container { padding: 0; margin: 0; max-width: none; } /* THE FAVORITES DRAWER (side_menu::display_favorites): the event drawer's stacked head over settings_row groups, the event's poster as the row's icon box. not phone-only - the drawer is an add_window, which works at any width */ .smenu_fav_body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 24px; background: #eef3f3; } .smenu_fav_body .settings_group_title:first-child { margin-top: 12px; } .smenu_fav_thumb { background-color: #e2efef; background-size: cover; background-position: center; width: 44px; height: 44px; border-radius: 9px; } .smenu_fav_row .settings_row_label { flex: 1; min-width: 0; } /* the name on one line; the employer ยท dates line may wrap, a two-day range is long */ .smenu_fav_row .settings_row_label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smenu_fav_row .settings_row_sub { white-space: normal; } .smenu_fav_empty { text-align: center; padding: 72px 24px 0; color: #6b7280; } .smenu_fav_empty i { font-size: 40px; color: #c9d8d9; display: block; margin-bottom: 14px; } .smenu_fav_empty_title { font-size: 17px; font-weight: 700; color: #1f2a2b; margin-bottom: 6px; } .smenu_fav_empty_sub { font-size: 14px; line-height: 1.45; }