/* =================================================================== SETTINGS WIDGET CSS — Universal Shraddha | Xtremsoft Technologies | 20260430 Updated: Logout button RIGHT-ALIGNED fix for ALL themes Fixed: panel-collapse / Bootstrap accordion view issue HOW TO USE: Add this line inside on every page: =================================================================== */ /* ===== Gear button (fixed bottom-right) ===== */ .settings-btn { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background-color: #022857; color: white; border: none; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* ===== Floating panel ===== */ .settings-panel { display: none; position: fixed; bottom: 80px; right: 20px; background: white; border: 1px solid #ddd; border-radius: 10px; padding: 12px; z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,0.25); min-width: 185px; } /* ===== Option buttons inside panel ===== */ .settings-option { display: block; width: 100%; margin-bottom: 6px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; background: white; cursor: pointer; text-align: left; font-size: 13px; } .settings-option:hover { background-color: #f0f0f0; } /* =================================================================== BOOTSTRAP ACCORDION / COLLAPSE FIX panel-collapse, .collapse and .collapsing must NEVER have a forced background-color. Bootstrap toggles display on these elements and any forced inline or !important background breaks the toggle, causing the panel body content (including view images) to stay hidden even after the eye icon is clicked. .panel, .panel-heading and .panel-body CAN receive the theme color because they are always visible wrappers — only the collapsible inner container must stay transparent. =================================================================== */ .panel-collapse, .panel-collapse.collapse, .panel-collapse.collapsing, .panel-collapse.in { background-color: transparent !important; background-image: none !important; } /* =================================================================== NAVBAR LAYOUT FIX Locks the navbar flex layout so the logout button stays RIGHT-ALIGNED in ALL themes — default, yellow, blue, red, dark. These rules use maximum specificity so no theme can override them. =================================================================== */ /* Main navbar bar — always horizontal flex */ body .navbar, body #navbar { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; width: 100% !important; padding: 5px 0px 10px 0px !important; } /* Navbar brand wrapper — locked to the left */ body .navbar .navbar-brand-wrapper, body .navbar-brand-wrapper { -webkit-box-flex: 0 !important; -ms-flex: 0 0 auto !important; flex: 0 0 auto !important; margin-right: auto !important; margin-left: 0 !important; } /* Collapse wrapper — flex row, pushed to right */ body .navbar-collapse.navbar-menu-wrapper, body .collapse.navbar-collapse { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; float: none !important; } /* Navbar nav list — horizontal row, right side */ body .navbar-nav, body .navbar .navbar-nav { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; margin-left: auto !important; float: none !important; padding-left: 0 !important; list-style: none !important; } /* Logout nav item — always far right */ body .navbar .nav-item.btn-contact-us, body .navbar .nav-item.btn-contact-us.pull-right, body .nav-item.btn-contact-us { margin-left: auto !important; float: none !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } /* Logout image inside the anchor */ body .nav-item.btn-contact-us img { width: 30px !important; height: 30px !important; display: block !important; } /* =================================================================== DARK MODE FIX Dark mode applies filter:invert(1) hue-rotate(180deg) on . Counter-invert header/nav so it looks normal and layout is kept. =================================================================== */ /* Remove any filter bleeding into navbar children */ body header, body header *, body nav, body nav *, body .navbar, body .navbar * { -webkit-filter: none !important; filter: none !important; } /* Counter-invert the navbar itself so dark mode invert cancels out */ body header, body nav, body .navbar { -webkit-filter: invert(1) hue-rotate(180deg) !important; filter: invert(1) hue-rotate(180deg) !important; } /* =================================================================== MOBILE — keep logout right-aligned on small screens =================================================================== */ @media screen and (max-width: 991px) { body .navbar-collapse.navbar-menu-wrapper, body .collapse.navbar-collapse { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } body .navbar-nav { -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; margin-left: auto !important; } body .nav-item.btn-contact-us { margin-left: auto !important; float: none !important; } /* Hide the logo duplicate that appears in mobile collapse menu */ body .navbar-collapse .d-flex.align-items-center { display: none !important; } } /* ===== END SETTINGS WIDGET CSS ===== */