) keep a full line of their own. Bootstrap columns are left alone: they keep their own widths (the report home puts .col-lg-3 stat widgets in the same row - forcing them to 100% stacked them full width). */ .content .row:has(> .col-md-menu) > :not([class*="col-"]) { flex: 0 0 100%; max-width: 100%; } .content .row > .col-md-menu { display: flex; } .content .row > .col-md-menu > a { display: block; width: 100%; } .content .row > .col-md-menu .menu-box { height: calc(100% - 15px); } html[data-theme="light"] .menu-box:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: var(--ux-shadow2); } html[data-theme="dark"] .menu-box:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); } html[data-theme="light"] .menu-box-content a, html[data-theme="light"] a.text-black .menu-box { color: var(--ux-ink); } /* ================= module sub-menu (left list on sub pages) ================= */ html[data-theme] .box .nav-stacked { padding: 8px; } html[data-theme] .box .nav-stacked > li > a { border-radius: var(--ux-r-md); border-left: 0; padding: 10px 12px; transition: background-color 0.15s ease, color 0.15s ease; } html[data-theme] .box .nav-stacked > li { border-bottom: 0; } html[data-theme="light"] .nav-stacked > li > a { color: var(--ux-ink); } html[data-theme="light"] .nav-stacked > li > a:hover { background-color: var(--ux-tint); } html[data-theme="light"] .nav-stacked > li.active > a, html[data-theme="light"] .nav-stacked > li.active > a:hover, html[data-theme="light"] .nav-stacked > li.active > a:focus { background: #244186; /* original skin blue (user request 2026-09-20) */ color: #fff; } /* ================= buttons ================= */ body:not(.login-page) .btn, body:not(.login-page) .btn.btn-flat { border-radius: var(--ux-r-sm); font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, filter 0.15s ease; } body:not(.login-page) .btn:hover { box-shadow: 0 4px 12px rgba(15, 27, 61, 0.16); } body:not(.login-page) .btn:active { transform: translateY(1px); box-shadow: none; } /* .btn-primary keeps the original skin green (#27903a); only shape and hover shadow are ours */ html[data-theme="light"] body:not(.login-page) .btn-default { background: #fff; border-color: var(--ux-stroke2); color: var(--ux-ink); } html[data-theme="light"] body:not(.login-page) .btn-default:hover { background: var(--ux-tint); } /* ================= form fields ================= */ body:not(.login-page) .form-control, body:not(.login-page) select, body:not(.login-page) textarea, body:not(.login-page) input[type="text"], body:not(.login-page) input[type="password"], body:not(.login-page) input[type="number"], body:not(.login-page) input[type="email"], body:not(.login-page) input[type="date"], body:not(.login-page) input[type="search"] { border-radius: var(--ux-r-sm) !important; /* AdminLTE forces .form-control to 0 !important */ font-family: inherit; /* follow the system font ($config_value[168]) */ transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } html[data-theme="light"] body:not(.login-page) .form-control, html[data-theme="light"] body:not(.login-page) select, html[data-theme="light"] body:not(.login-page) textarea, html[data-theme="light"] body:not(.login-page) input[type="text"], html[data-theme="light"] body:not(.login-page) input[type="password"], html[data-theme="light"] body:not(.login-page) input[type="number"] { border-color: var(--ux-stroke2); color: var(--ux-ink); box-shadow: none; } body:not(.login-page) .form-control:focus, body:not(.login-page) select:focus, body:not(.login-page) textarea:focus, body:not(.login-page) input[type="text"]:focus, body:not(.login-page) input[type="password"]:focus, body:not(.login-page) input[type="number"]:focus { border-color: #2563eb !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important; outline: none; } /* input groups: joined inner edges stay square */ body:not(.login-page) .input-group > .form-control:first-child, body:not(.login-page) .input-group > .input-group-btn:first-child > .btn, body:not(.login-page) .input-group > .input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body:not(.login-page) .input-group > .form-control:last-child, body:not(.login-page) .input-group > .input-group-btn:last-child > .btn, body:not(.login-page) .input-group > .input-group-addon:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body:not(.login-page) .input-group > .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; } /* ================= tables ================= */ .table > thead > tr > th { font-weight: 600; } .table > tbody > tr { transition: background-color 0.12s ease; } html[data-theme="light"] .table > thead > tr > th, html[data-theme="light"] .table > tbody > tr > td, html[data-theme="light"] .table > tbody > tr > th { border-color: rgba(15, 27, 61, 0.07); } html[data-theme="light"] .table > thead > tr > th { background: var(--ux-tint); color: var(--ux-ink); border-bottom: 1px solid var(--ux-stroke); } html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f8faff; } html[data-theme="light"] .table-hover > tbody > tr:hover { background-color: #edf3ff; } /* ================= alerts ================= */ .alert, .callout, html[data-theme] .alert, html[data-theme] .callout { border-radius: 7px; } /* red banners (.alert-danger / .alert.small-box.bg-pink) keep the original skin look: solid #dd4b39 with white text (user request 2026-09-20) */ html[data-theme="light"] .alert.small-box.bg-purple { background: #f3f0ff !important; border: 1px solid #ddd6fe !important; border-left: 4px solid #7c3aed !important; color: #4c1d95 !important; box-shadow: var(--ux-shadow); } html[data-theme="light"] .alert-info { background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-left: 4px solid #2563eb !important; color: #1e3a8a !important; } html[data-theme="light"] .alert-success { background: #ecfdf3 !important; border: 1px solid #bbf7d0 !important; border-left: 4px solid #16a34a !important; color: #14532d !important; } html[data-theme="light"] .alert-warning { background: #fffbeb !important; border: 1px solid #fde68a !important; border-left: 4px solid #d97706 !important; color: #78350f !important; } /* helpers for the soft (non-red) alerts only */ html[data-theme="light"] .alert.small-box.bg-purple font[color="white" i], html[data-theme="light"] .alert.small-box.bg-purple font[color="#ffffff" i] { color: inherit; } html[data-theme="light"] .alert.bg-purple a, html[data-theme="light"] .alert-info a, html[data-theme="light"] .alert-success a, html[data-theme="light"] .alert-warning a { color: inherit !important; font-weight: 600; } html[data-theme="light"] .alert.bg-purple .close, html[data-theme="light"] .alert-info .close, html[data-theme="light"] .alert-success .close, html[data-theme="light"] .alert-warning .close { color: inherit; opacity: 0.55; } /* ================= small parts ================= */ .pagination > li > a, .pagination > li > span { border-radius: var(--ux-r-sm) !important; margin: 0 2px; } .label, .badge { border-radius: 5px; font-weight: 500; } .main-footer { padding: 12px 22px; font-size: 13px; } /* footer colours: left to the original skin (solid white). A translucent white let the grey .wrapper behind it show through. */ /* thin rounded scrollbars (Chrome / Edge) */ html { scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(15, 27, 61, 0.24); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 27, 61, 0.4); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.22); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.35); } } /* * Page-entrance animation (2026-09-20). One shot when a page opens, then still: * nothing loops. animation-fill-mode is "backwards" on purpose - when it ends the * element has NO transform left, so position:fixed children (modals) are not * re-anchored. 2026-09-20: slowed x1.6 and travel distances widened (user: slower, more visible). Switched off for users who ask the OS for reduced motion. */ @media screen and (prefers-reduced-motion: no-preference) { /* 2026-09-20: fade only (user request) - the three names are kept so the rules below stay as they are */ @keyframes rmsInUp { from { opacity: 0; } to { opacity: 1; } } @keyframes rmsInDown { from { opacity: 0; } to { opacity: 1; } } @keyframes rmsInLeft { from { opacity: 0; } to { opacity: 1; } } @keyframes rmsInFade { from { opacity: 0; } to { opacity: 1; } } /* page title, then banners */ .content-wrapper > .content-header { animation: rmsInDown 0.56s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .content .alert { animation: rmsInDown 0.64s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s backwards; } /* module menu cards + section titles (pms_home etc.): a quick cascade */ .content .row > .col-md-menu, .content .row > h1, .content .row > .col-md-12 { animation: rmsInUp 0.61s cubic-bezier(0.2, 0.7, 0.2, 1) 0.67s backwards; } .content .row > :nth-child(1) { animation-delay: 0.06s; } .content .row > :nth-child(2) { animation-delay: 0.11s; } .content .row > :nth-child(3) { animation-delay: 0.16s; } .content .row > :nth-child(4) { animation-delay: 0.21s; } .content .row > :nth-child(5) { animation-delay: 0.26s; } .content .row > :nth-child(6) { animation-delay: 0.3s; } .content .row > :nth-child(7) { animation-delay: 0.35s; } .content .row > :nth-child(8) { animation-delay: 0.4s; } .content .row > :nth-child(9) { animation-delay: 0.45s; } .content .row > :nth-child(10) { animation-delay: 0.48s; } .content .row > :nth-child(11) { animation-delay: 0.51s; } .content .row > :nth-child(12) { animation-delay: 0.54s; } .content .row > :nth-child(13) { animation-delay: 0.58s; } .content .row > :nth-child(14) { animation-delay: 0.61s; } .content .row > :nth-child(15) { animation-delay: 0.64s; } /* content boxes: side menu first, main box right after */ .content .box { animation: rmsInUp 0.64s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s backwards; } .content .col-md-9 .box, .content .col-md-8 .box { animation-delay: 0.22s; } /* module sub-menu items slide in from the left */ .box .nav-stacked > li { animation: rmsInLeft 0.48s ease-out 0.8s backwards; } .box .nav-stacked > li:nth-child(1) { animation-delay: 0.19s; } .box .nav-stacked > li:nth-child(2) { animation-delay: 0.24s; } .box .nav-stacked > li:nth-child(3) { animation-delay: 0.29s; } .box .nav-stacked > li:nth-child(4) { animation-delay: 0.34s; } .box .nav-stacked > li:nth-child(5) { animation-delay: 0.38s; } .box .nav-stacked > li:nth-child(6) { animation-delay: 0.43s; } .box .nav-stacked > li:nth-child(7) { animation-delay: 0.48s; } .box .nav-stacked > li:nth-child(8) { animation-delay: 0.53s; } .box .nav-stacked > li:nth-child(9) { animation-delay: 0.58s; } .box .nav-stacked > li:nth-child(10) { animation-delay: 0.62s; } .box .nav-stacked > li:nth-child(11) { animation-delay: 0.67s; } .box .nav-stacked > li:nth-child(12) { animation-delay: 0.72s; } /* first screenful of table rows fades in (opacity only: rows do not take transforms well) */ .box .table > tbody > tr:nth-child(-n+14) { animation: rmsInFade 0.56s ease-out 0.48s backwards; } } /* * Page-loading indicator (2026-09-20). index.php prints and its * closing script sets opacity to 1 on window load. Instead of the washed-out page we keep * the page at full opacity and use that inline style as the "still loading" flag: * while it says 0.5 a thin bar runs along the top edge; when the script rewrites it the bar * fades out. No change to index.php. The bar is the only looping motion and only exists * while the page loads; as a safety net it hides itself after 20 s even if "load" never fires. */ @media screen { body { opacity: 1 !important; } @keyframes rmsLoadRun { from { background-position: -100% 0; } to { background-position: 200% 0; } } /* left -> right */ @keyframes rmsLoadHide { to { opacity: 0; visibility: hidden; } } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background-color: rgba(255, 255, 255, 0.25); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 35%, #7dd3fc 50%, #ffffff 65%, rgba(255, 255, 255, 0) 100%); background-size: 45% 100%; background-repeat: no-repeat; box-shadow: 0 0 8px rgba(125, 211, 252, 0.8); } body[style*="opacity: 0.5"]::before { opacity: 1; animation: rmsLoadRun 1.1s linear infinite, rmsLoadHide 0.3s linear 20s forwards; } /* ---- .table-responsive: the stray frame of a narrow window (2026-09-21) -- css-bootstrap-rcheva.css frames EVERY .table-responsive with a fixed 1px #ddd line (plus 15px margin) below 768px, and index.php wraps almost every page in one of those divs, so narrowing the window drew a light-grey box round pages that have nothing to scroll sideways - and because the colour is fixed, the dark theme showed it as a bright line. The frame is dropped here and handed back only while the wrapper really does scroll sideways: the block in sys_css.php sets .uix-scrollx on it (and takes it off again) whenever the page loads or the window resizes. The line colour is deliberately theme-neutral - it has to read on white and on the dark card alike. */ @media (max-width: 767px) { .table-responsive { margin-bottom: 0; border: 0; } .table-responsive.uix-scrollx { margin-bottom: 15px; border: 1px solid rgba(128, 132, 145, 0.45); border-radius: var(--ux-r-md); } } } /* =========================================================================== Mail icon (2026-09-22): the circular envelope button of sms_home (mail_ux.css a.mbx-stdmail) now stands wherever mail_comp.png / sms_writemail.png used to be printed. common_function.php rms_mail_icon() prints the markup (8 places: sendmailto, sendmailtostd, people_name format 2, mail_read, mail_reply, mms_check, sms_writemail). Both themes; exports keep the old picture. Revert: restore bak\*.bak_20260922_mailico and drop this block. =========================================================================== */ @media screen { .rms-mailico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 2px; vertical-align: middle; box-sizing: border-box; color: rgba(15, 27, 61, 0.62); background: #ffffff; border: 1px solid rgba(15, 27, 61, 0.22); border-radius: 50%; -webkit-transition: background-color .12s, border-color .12s, color .12s; transition: background-color .12s, border-color .12s, color .12s; } .rms-mailico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rms-mailico-lg { width: 32px; height: 32px; } /* 2026-09-22: base size raised to 32px = a.mbx-stdmail of mail_ux.css, so the mail and QR buttons of the sms_home picture grid match; -lg kept for the call sites */ ul.users-list .rms-mailico { margin: 4px 0 0; vertical-align: baseline; } /* sits beside a.mbx-stdmail (margin 4px 0 0, inline-flex baseline) */ a:hover > .rms-mailico, a:focus > .rms-mailico, a.rms-maillink:hover .rms-mailico, a.rms-maillink:focus .rms-mailico { color: #ffffff; background: #244186; border-color: #244186; } a.rms-maillink { display: inline-flex; align-items: center; gap: 6px; } html[data-theme="dark"] .rms-mailico { color: rgba(230, 230, 230, 0.66); background: #2b2b2b; border-color: #5a5a5a; } html[data-theme="dark"] a:hover > .rms-mailico, html[data-theme="dark"] a:focus > .rms-mailico, html[data-theme="dark"] a.rms-maillink:hover .rms-mailico, html[data-theme="dark"] a.rms-maillink:focus .rms-mailico { color: #ffffff; background: #3a5ca8; border-color: #3a5ca8; } /* QR icon (2026-09-22): rms_qr_icon() prints the same circle with a QR-code glyph; rms-qrico-nav = the 40px picture of the top bar (white ring on the red / dark bar) */ .rms-qrico svg { stroke-width: 1.8; } .rms-qrico-nav, html[data-theme="dark"] .rms-qrico-nav { display: flex; width: 36px; height: 36px; margin: 5px 8px 0 0; /* block (no line-box strut) inside the floated link: 3px logo padding + 5px = centre at 26px, level with the theme toggle (15px link padding + 22px icon) */ color: #ffffff; background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); } .rms-qrico-nav svg { width: 18px; height: 18px; } a:hover > .rms-qrico-nav, a:focus > .rms-qrico-nav, html[data-theme="dark"] a:hover > .rms-qrico-nav, html[data-theme="dark"] a:focus > .rms-qrico-nav { color: #ffffff; background: rgba(255, 255, 255, 0.28); border-color: #ffffff; } } @media print { .rms-mailico { display: none !important; } } /* =========================================================================== Frame notices - .rms-note (2026-09-22, replaces .rms-oldb of the same day) One shape for every banner the frame puts above a page: icon + title + one explaining line + the action that clears it, in three levels .rms-note-bad red something is blocked right now .rms-note-warn amber act on it soon .rms-note-info blue good to know It replaces the old idiom - div.alert.small-box.bg-pink|bg-purple with center + font color=white + b + big inside it - which painted a reminder and a blocked screen in the same loud red, hid its own link inside the sentence, and could be closed on every level. Printed by rms_note() in rms_note.php. Call sites 2026-09-22: page-header.php old database (bad) index.php unanswered poll (info) x2, old OS (warn), old password (warn) sms_home_login.php old password (warn) pms_home.php teaching licence about to expire (warn / bad) Revert: restore bak\*.bak_20260922_231500 + bak\*.bak_20260922_234500. =========================================================================== */ @media screen { .rms-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid transparent; border-left-width: 4px; border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.06); animation: rms-note-in .34s ease-out both; } .rms-note-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; } .rms-note-txt { flex: 1 1 260px; min-width: 0; line-height: 1.45; } .rms-note-t { display: block; font-weight: 700; font-size: 14.5px; } .rms-note-s { display: block; font-size: 12.5px; opacity: .82; } .rms-note-code { font-family: Consolas, monospace; font-size: 11.5px; padding: 1px 5px; border-radius: 4px; } .rms-note-txt a { color: inherit; text-decoration: underline; } @keyframes rms-note-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* the action of the banner - a real button, not a link buried in the text */ .rms-note a.rms-note-btn, .rms-note a.rms-note-btn:link, .rms-note a.rms-note-btn:visited { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid transparent; color: #ffffff; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; -webkit-transition: background-color .15s, box-shadow .15s, transform .12s; transition: background-color .15s, box-shadow .15s, transform .12s; } .rms-note a.rms-note-btn:hover, .rms-note a.rms-note-btn:focus { color: #ffffff; text-decoration: none; transform: translateY(-1px); } .rms-note a.rms-note-btn:active { transform: none; } .rms-note a.rms-note-btn-ghost, .rms-note a.rms-note-btn-ghost:link, .rms-note a.rms-note-btn-ghost:visited { background: transparent; color: inherit; border-color: currentColor; } .rms-note a.rms-note-btn-ghost:hover, .rms-note a.rms-note-btn-ghost:focus { background: rgba(255, 255, 255, 0.6); color: inherit; box-shadow: none; } html[data-theme="dark"] .rms-note a.rms-note-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); } /* close button - only the level that prints one (info) gets it */ .rms-note .rms-note-x { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: inherit; opacity: .45; font-size: 20px; line-height: 1; cursor: pointer; } .rms-note .rms-note-x:hover { opacity: .9; } .rms-note-bad { border-color: #f3c2c2; border-left-color: #d64545; background: #fdf1f1; color: #7f1d1d; } .rms-note-bad .rms-note-ico { background: #f9dcdc; color: #d64545; } .rms-note-bad .rms-note-code { background: #f9dcdc; color: #7f1d1d; } .rms-note-bad a.rms-note-btn { background: #d64545; border-color: #d64545; } .rms-note-bad a.rms-note-btn:hover, .rms-note-bad a.rms-note-btn:focus { background: #b83636; border-color: #b83636; box-shadow: 0 2px 6px rgba(214, 69, 69, 0.35); } .rms-note-warn { border-color: #fae0b0; border-left-color: #d97706; background: #fffaf0; color: #7c3a06; } .rms-note-warn .rms-note-ico { background: #fdeccd; color: #c67c00; } .rms-note-warn .rms-note-code { background: #fdeccd; color: #7c3a06; } .rms-note-warn a.rms-note-btn { background: #d97706; border-color: #d97706; } .rms-note-warn a.rms-note-btn:hover, .rms-note-warn a.rms-note-btn:focus { background: #b45f05; border-color: #b45f05; box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35); } .rms-note-info { border-color: #c9ddfb; border-left-color: #2563eb; background: #eff6ff; color: #1e3a8a; } .rms-note-info .rms-note-ico { background: #dbe9fd; color: #2563eb; } .rms-note-info .rms-note-code { background: #dbe9fd; color: #1e3a8a; } .rms-note-info a.rms-note-btn { background: #2563eb; border-color: #2563eb; } .rms-note-info a.rms-note-btn:hover, .rms-note-info a.rms-note-btn:focus { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35); } html[data-theme="dark"] .rms-note-bad { border-color: rgba(224, 90, 90, 0.42); border-left-color: #e05a5a; background: rgba(224, 90, 90, 0.14); color: #f3c9c9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .rms-note-bad .rms-note-ico { background: rgba(224, 90, 90, 0.22); color: #ea8080; } html[data-theme="dark"] .rms-note-bad .rms-note-code { background: rgba(224, 90, 90, 0.22); color: #f3c9c9; } html[data-theme="dark"] .rms-note-bad a.rms-note-btn { background: #c24444; border-color: #c24444; } html[data-theme="dark"] .rms-note-bad a.rms-note-btn:hover { background: #d95a5a; border-color: #d95a5a; } html[data-theme="dark"] .rms-note-warn { border-color: rgba(224, 160, 32, 0.40); border-left-color: #e0a020; background: rgba(224, 160, 32, 0.14); color: #f2ddb4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .rms-note-warn .rms-note-ico { background: rgba(224, 160, 32, 0.22); color: #e8b955; } html[data-theme="dark"] .rms-note-warn .rms-note-code { background: rgba(224, 160, 32, 0.22); color: #f2ddb4; } html[data-theme="dark"] .rms-note-warn a.rms-note-btn { background: #b8790f; border-color: #b8790f; } html[data-theme="dark"] .rms-note-warn a.rms-note-btn:hover { background: #d18c14; border-color: #d18c14; } html[data-theme="dark"] .rms-note-info { border-color: rgba(91, 155, 224, 0.40); border-left-color: #5b9be0; background: rgba(91, 155, 224, 0.14); color: #cfe0f5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .rms-note-info .rms-note-ico { background: rgba(91, 155, 224, 0.22); color: #85b6ea; } html[data-theme="dark"] .rms-note-info .rms-note-code { background: rgba(91, 155, 224, 0.22); color: #cfe0f5; } html[data-theme="dark"] .rms-note-info a.rms-note-btn { background: #3a72c0; border-color: #3a72c0; } html[data-theme="dark"] .rms-note-info a.rms-note-btn:hover { background: #4b86d6; border-color: #4b86d6; } @media (max-width: 560px) { .rms-note { padding: 10px 12px; } .rms-note a.rms-note-btn { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .rms-note { animation: none; } .rms-note a.rms-note-btn { transition: none; } } } /* on paper a notice stays, but as a plain line: a report printed while the system is on the old database must not look like one from the live system */ @media print { .rms-note { display: block; margin: 0 0 8px; padding: 0; border: 0; border-bottom: 1px solid #000000; background: none; color: #000000; box-shadow: none; animation: none; font-size: 12px; } .rms-note-ico, .rms-note a.rms-note-btn, .rms-note .rms-note-x { display: none !important; } .rms-note-code { background: none; padding: 0; } } /* --------------------------------------------------------------------------- .rms-notepage - the full page state that rms_note_page() prints when a page cannot go on and is about to exit() (a student who may not see a grade report, a bad link). It used to be one floating red bar on an empty white page. The level classes above supply the colours. --------------------------------------------------------------------------- */ @media screen { .rms-notepage { display: flex; align-items: center; justify-content: center; min-height: 72vh; padding: 24px 16px; box-sizing: border-box; } .rms-notepage-box { width: 100%; max-width: 560px; padding: 30px 26px 26px; border: 1px solid transparent; border-left-width: 4px; border-radius: 12px; text-align: center; box-shadow: 0 1px 2px rgba(15, 27, 61, 0.06), 0 10px 30px rgba(15, 27, 61, 0.08); animation: rms-note-in .34s ease-out both; } .rms-notepage-ico { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; } .rms-notepage-t { font-size: 18px; font-weight: 700; line-height: 1.45; } .rms-notepage-s { margin-top: 6px; font-size: 13.5px; line-height: 1.6; opacity: .82; } .rms-notepage-a { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rms-notepage-box .rms-note-ico { display: none; } .rms-notepage-box.rms-note-bad .rms-notepage-ico { background: #f9dcdc; color: #d64545; } .rms-notepage-box.rms-note-warn .rms-notepage-ico { background: #fdeccd; color: #c67c00; } .rms-notepage-box.rms-note-info .rms-notepage-ico { background: #dbe9fd; color: #2563eb; } html[data-theme="dark"] .rms-notepage-box.rms-note-bad .rms-notepage-ico { background: rgba(224, 90, 90, 0.22); color: #ea8080; } html[data-theme="dark"] .rms-notepage-box.rms-note-warn .rms-notepage-ico { background: rgba(224, 160, 32, 0.22); color: #e8b955; } html[data-theme="dark"] .rms-notepage-box.rms-note-info .rms-notepage-ico { background: rgba(91, 155, 224, 0.22); color: #85b6ea; } @media (max-width: 560px) { .rms-notepage { min-height: 60vh; } .rms-notepage-box { padding: 24px 18px 20px; } .rms-notepage-t { font-size: 16.5px; } } } @media print { .rms-notepage { display: block; min-height: 0; padding: 0; } .rms-notepage-box { max-width: none; padding: 0; border: 0; box-shadow: none; text-align: left; animation: none; } .rms-notepage-ico, .rms-notepage-a { display: none !important; } } /* ---- month calendars: day cells grew taller on every touch / scroll on iPhone (2026-09-24) ---- chk_home, pms_note, sms_home_note, sms_home_extact, sch_report and bud_installment print each day as

. WebKit (Safari AND Chrome on iOS) sizes that div to the cell's height, the cell's padding then makes the cell taller, and the next layout pass repeats it - each touch or scroll added a few px. The div paints nothing, so auto height looks the same everywhere. */ td > div[style="height:100%;width:100%"] { height: auto !important; } /* ...and seven equal day columns on those calendars (2026-09-24, user request; chk_home does it in chk_home_ux.css). The first row is the month nav (colspan 2/3/2, width=33% each), which made Sun/Mon and Fri/Sat wider, and in the automatic layout a day with a long note widened its whole column. The tables whose day cells hold the div above get class rms-daycal from a small script in sys_css.php (2026-09-28: was table:has(...) - Chrome re-checked that selector on every row while a page loaded, and chk_teacher_week, 4,000 rows / 20 MB, froze the tab for minutes). */ table.rms-daycal { table-layout: fixed; } table.rms-daycal > tbody > tr > td { width: auto !important; overflow-wrap: break-word; word-wrap: break-word; } /* ---- top bar icons as inline SVG (2026-09-24, user request: sharper than the header-0N.png pictures) ---- header.php prints