/* rex.css -- tiny custom layer on top of AdminLTE skin-blue. Kept minimal: overrides only where AdminLTE default is off from Bold's look. */ /* ---- Layout: pin topbar + sidebar to viewport, only content scrolls ---- AdminLTE's `layout-fixed` class alone leaks on mobile (sidebar offcanvas inherits body scroll). Force-pin everything and give the sidebar its own independent scroll. Works on desktop AND mobile. */ html, body { height: 100%; overflow: hidden; } /* body never scrolls */ .main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; } .main-sidebar { position: fixed !important; top: 50px; bottom: 0; left: 0; height: auto !important; /* AdminLTE min-height fights us otherwise */ overflow-y: auto; /* sidebar has its own scroll */ overflow-x: hidden; -webkit-overflow-scrolling: touch; } .content-wrapper { position: fixed !important; top: 50px; bottom: 0; left: 230px; right: 0; /* .main-sidebar is 230px wide by default */ overflow-y: auto; /* only the content scrolls */ -webkit-overflow-scrolling: touch; min-height: 0 !important; } .main-footer { position: fixed !important; bottom: 0; left: 230px; right: 0; z-index: 1030; color: #7a7a7a; padding: 8px 15px; } .content-wrapper { padding-bottom: 40px; } /* room for the fixed footer */ /* Mobile: sidebar slides in via .sidebar-open on ; take back the content-wrapper's left offset since the sidebar is off-canvas below the md breakpoint. */ @media (max-width: 767px) { .content-wrapper, .main-footer { left: 0; } .main-sidebar { transform: translate(-230px, 0); transition: transform 0.3s ease-in-out; } body.sidebar-open .main-sidebar { transform: translate(0, 0); } /* Kill AdminLTE's push-content behavior; sidebar overlays instead. */ body.sidebar-open .content-wrapper { left: 0 !important; } } /* ---- Modal fixes for the fixed-layout world --------------------------- Bootstrap-3 defaults conflict with my position:fixed navbar/sidebar: (a) modal-backdrop ended up above modal (fixed by z-index below); (b) modal-header title was clipped by the fixed navbar even with a big margin-top on the dialog. Cleanest is to just hide the navbar + sidebar entirely while any modal is open -- Bootstrap toggles `.modal-open` on for us, so the CSS below fires automatically on show and reverts on close. */ .modal { z-index: 1060 !important; } .modal-backdrop { z-index: 1050 !important; /* Bulletproof: make the backdrop purely visual, never intercept touches. Bootstrap 3's click-outside-to-close is disabled as a side effect -- users close via the × / Close / Cancel buttons which now always work. */ pointer-events: none !important; opacity: 0.4 !important; } .modal-open .modal { overflow-y: auto !important; } /* And make sure nothing inside the modal has pointer-events blocked either. */ .modal, .modal-dialog, .modal-content, .modal-content * { pointer-events: auto !important; } .modal-dialog { margin-top: 20px !important; margin-bottom: 20px; } @media (min-width: 768px) { .modal-dialog { margin-top: 40px !important; } } body.modal-open .main-header, body.modal-open .main-sidebar, body.modal-open .main-footer { display: none !important; } body.modal-open .content-wrapper { top: 0 !important; left: 0 !important; } /* Dashboard tile row spacing -- match Bold's slight vertical breathing */ .small-box .icon > i { top: 10px; } /* Toastr top-right stack a touch tighter */ #toast-container > .toast { opacity: 1; } /* Messages chat-list post block (used in /messages) */ .msg-post { background: #fff; border: 1px solid #f0f0f0; border-radius: 4px; padding: 12px 14px; margin-bottom: 8px; position: relative; } .msg-post .msg-head { color: #999; font-size: 12px; margin-bottom: 4px; display: flex; justify-content: space-between; } .msg-post .msg-body { color: #333; word-break: break-word; white-space: pre-wrap; } .msg-post .msg-badges { margin-top: 6px; } .msg-post .msg-badges .label { margin-right: 4px; } .msg-day-sep { color: #6c757d; font-size: 12px; font-weight: 600; padding: 12px 0 6px; border-bottom: 1px dashed #dfdfdf; margin-bottom: 8px; } /* Pair QR modal */ .pair-code { font-family: Menlo, Consolas, monospace; font-size: 24px; letter-spacing: 3px; padding: 8px 16px; background: #f7f7f7; border-radius: 4px; text-align: center; } .pair-qr-wrap { text-align: center; padding: 12px 0; } .pair-qr-wrap img { border: 6px solid #fff; box-shadow: 0 0 0 1px #ddd; } /* Slight refinement on select2 to match adminlte inputs */ .select2-container--default .select2-selection--single { height: 34px !important; border-color: #d2d6de !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; } /* Excel dropzone (Bulk Send) */ .dropzone { border: 2px dashed #3c8dbc; border-radius: 6px; padding: 48px 20px; text-align: center; color: #6c757d; background: #fafbfc; cursor: pointer; } .dropzone.dragover { background: #eaf3fb; color: #3c8dbc; } .dropzone input[type="file"] { display: none; } /* Cyan info banner */ .rex-hint { background: #00c0ef; color: #fff; padding: 14px 18px; border-radius: 4px; margin-bottom: 16px; } .rex-hint b { display: block; font-size: 15px; margin-bottom: 2px; } /* Login */ .login-page { background: #d2d6de; } .login-box { margin: 7% auto; } .login-logo b { color: #3c8dbc; }