/* Neuwied (appCode 56564) - Kiosk & Webapp customizations */ /* Kich hoat bang class .kiosk-mode gan vao va trong setUpMenu() */ .kiosk-navbar { display: none; } /* 1. Layout */ body.kiosk-mode .view-content { display: grid; grid-template-columns: 1fr minmax(0, 100%) 1fr; position: relative; } body.kiosk-mode .max-with-900, body.kiosk-mode .max-with-1200 { max-width: 100%; } /* 2. Toggler in header (teal background) */ body.kiosk-mode .kt-aside__brand-tools-new { display: inline-flex; align-items: center; } body.kiosk-mode .kt-aside__brand-tools-new #kt_aside_toggler { min-width: 56px; min-height: 56px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; } body.kiosk-mode .kt-aside__brand-tools-new .kt-svg-icon { transform: scale(2); margin: 0; } body.kiosk-mode .kt-aside__brand-tools-new .kt-svg-icon path { fill: #ffffff; opacity: 1; } /* 3. Toggler in sidebar (light background) */ body.kiosk-mode .kt-aside__brand-tools #kt_aside_toggler { min-width: 56px; min-height: 56px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; } body.kiosk-mode .kt-aside__brand-tools .kt-svg-icon { transform: scale(2); margin: 0; } body.kiosk-mode .kt-aside__brand-tools .kt-svg-icon path { fill: #1894ac; opacity: 1; } /* 4. Bottom navigation bar */ body.kiosk-mode .kiosk-navbar { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; display: flex; background: #1894ac; box-shadow: 0 -2px 12px rgba(0, 0, 0, .2); z-index: 2000; } body.kiosk-mode .kiosk-navbtn { flex: 1; border: 0; background: transparent; color: #fff; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; cursor: pointer; } body.kiosk-mode .kiosk-navbtn:hover, body.kiosk-mode .kiosk-navbtn:focus, body.kiosk-mode .kiosk-navbtn:visited { color: #fff; text-decoration: none; } body.kiosk-mode .kiosk-navbtn:active { background: rgba(0, 0, 0, .15); } body.kiosk-mode .kiosk-navbtn + .kiosk-navbtn { border-left: 1px solid rgba(255, 255, 255, .25); } body.kiosk-mode .kiosk-navbtn .fa { font-size: 22px; } body.kiosk-mode #page-wrapper { padding-bottom: 64px; } /* 5. Scrollbar - !important de thang the style dong trong config.js */ html.kiosk-mode::-webkit-scrollbar, body.kiosk-mode ::-webkit-scrollbar { width: 20px !important; } html.kiosk-mode::-webkit-scrollbar-track, body.kiosk-mode ::-webkit-scrollbar-track { background: #e8e8e8 !important; } html.kiosk-mode::-webkit-scrollbar-thumb, body.kiosk-mode ::-webkit-scrollbar-thumb { background: #1894ac !important; border-radius: 10px !important; border: 3px solid #e8e8e8 !important; } html.kiosk-mode { scrollbar-width: auto; scrollbar-color: #1894ac #e8e8e8; } /* 6. Kiosk mode - large portrait screens */ @media (min-width: 1000px) and (min-height: 1600px) { body.kiosk-mode .kt-aside__brand-tools-new #kt_aside_toggler, body.kiosk-mode .kt-aside__brand-tools #kt_aside_toggler { min-width: 80px; min-height: 80px; } body.kiosk-mode .kt-aside__brand-tools-new .kt-svg-icon, body.kiosk-mode .kt-aside__brand-tools .kt-svg-icon { transform: scale(3); } body.kiosk-mode .kiosk-navbar { height: 110px; } body.kiosk-mode .kiosk-navbtn { font-size: 20px; gap: 6px; } body.kiosk-mode .kiosk-navbtn .fa { font-size: 36px; } body.kiosk-mode #page-wrapper { padding-bottom: 110px; } html.kiosk-mode::-webkit-scrollbar, body.kiosk-mode ::-webkit-scrollbar { width: 28px !important; } html.kiosk-mode::-webkit-scrollbar-thumb, body.kiosk-mode ::-webkit-scrollbar-thumb { border-radius: 14px !important; border: 5px solid #e8e8e8 !important; } }