/* * Commodatum Library Management System theme. * The --cmd-* colour tokens below are the defaults; Settings > Personalization can * re-point --cmd-blue* (primary) and --cmd-orange* (secondary) via brand_style_tag(). * Loaded after the AdminPro template styles (templates/nav.php) and replaces its * gradient/pastel look with the Commodatum logo palette: royal blue + orange on white. */ /* Inter, self-hosted (fonts/inter/VERSION.txt): no page waits on the internet. One variable file per subset covers 400-800. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --cmd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --cmd-blue: #143B8F; --cmd-blue-dark: #0F2C6B; --cmd-blue-soft: #E8EDF8; --cmd-blue-faint: #F4F6FB; --cmd-white: #fff; --cmd-orange: #E86C00; --cmd-orange-dark: #C25A00; --cmd-orange-soft: #FDF0E3; --cmd-green: #17784A; /* AA on white and on --cmd-green-soft */ --cmd-green-soft: #E5F4EC; --cmd-red: #C0392B; --cmd-red-soft: #FBEAE8; --cmd-amber: #92600F; /* AA on white and on --cmd-amber-soft */ --cmd-amber-soft: #FDF5E3; --cmd-ink: #1E2A44; --cmd-muted: #5F6984; /* AA on white, --cmd-blue-faint and --cmd-blue-soft */ --cmd-line: #E3E8F2; --cmd-line-strong: #CDD5E5; /* input and neutral button borders */ /* Text/icons on primary (--cmd-blue*) and secondary (--cmd-orange*) surfaces. White by default; brand_style_tag() switches them to --cmd-ink when a school's colour is too light for white text. */ --cmd-on-blue: #fff; --cmd-on-orange: #fff; /* Brand colours used as text on white/light surfaces. Same as the brand colours by default; brand_style_tag() darkens a light school colour until it reads on white (WCAG 4.5:1). */ --cmd-blue-ink: var(--cmd-blue); --cmd-blue-ink-dark: var(--cmd-blue-dark); --cmd-orange-ink: #B35300; /* the default orange is 3.2:1 as text; this shade reads at 5:1 */ --cmd-orange-ink-dark: #994700; /* Type scale (Inter) */ --cmd-fs-xs: 12px; --cmd-fs-sm: 13px; --cmd-fs-base: 14px; --cmd-fs-md: 16px; --cmd-fs-lg: 18px; --cmd-fs-xl: 22px; --cmd-fs-2xl: 28px; --cmd-lh: 1.5; /* Spacing (4px base) */ --cmd-space-1: 4px; --cmd-space-2: 8px; --cmd-space-3: 12px; --cmd-space-4: 16px; --cmd-space-5: 20px; --cmd-space-6: 24px; --cmd-space-7: 32px; --cmd-space-8: 40px; /* Radius */ --cmd-radius-sm: 6px; --cmd-radius: 10px; --cmd-radius-lg: 14px; --cmd-radius-pill: 999px; /* Elevation: tinted with the primary colour, so shadows follow Personalization */ --cmd-shadow-sm: 0 1px 2px color-mix(in srgb, var(--cmd-blue-dark) 7%, transparent); --cmd-shadow: 0 1px 2px color-mix(in srgb, var(--cmd-blue-dark) 6%, transparent), 0 4px 14px color-mix(in srgb, var(--cmd-blue-dark) 6%, transparent); --cmd-shadow-md: 0 8px 22px color-mix(in srgb, var(--cmd-blue-dark) 14%, transparent); --cmd-shadow-lg: 0 20px 50px color-mix(in srgb, var(--cmd-blue-dark) 25%, transparent); /* Motion */ --cmd-ease: cubic-bezier(.2, .8, .2, 1); --cmd-dur-fast: 120ms; --cmd-dur: 200ms; --cmd-dur-slow: 320ms; /* Focus: keyboard focus ring in the secondary colour */ --cmd-focus-ring: 2px solid var(--cmd-orange); /* Layout */ --cmd-header-h: 64px; --cmd-sidebar-w: 220px; --cmd-sidebar-mini: 72px; --cmd-gap: 24px; } /* ---------- Type ---------- */ /* Replaces the template's 'Open Sans' (style.css, form.css, x-editor-style.css). Icons keep their own font (.fa). */ html, body, button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, .btn, .form-control, .dropdown-menu, .tooltip, .popover, .modal, .ui-datepicker, .x-editor-custom .popover { font-family: var(--cmd-font); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Numbers line up in columns: fines, dates, counts, accession numbers */ .table td, .table th, .cmd-stats strong, .cmd-badge, .cmd-chip-n, .cmd-code { font-variant-numeric: tabular-nums; } /* ---------- Focus and motion ---------- */ /* Keyboard focus ring (style.css removes the browser outline on links). Text fields keep their own blue glow. */ html :is(a, button, summary, select, [role="button"], [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible { outline: var(--cmd-focus-ring); outline-offset: 2px; } /* One switch for every token-driven transition */ @media (prefers-reduced-motion: reduce) { :root { --cmd-dur-fast: 0ms; --cmd-dur: 0ms; --cmd-dur-slow: 0ms; } } /* ---------- Page ---------- */ body.materialdesign, .materialdesign .content-inner-all, .materialdesign .wrapper-pro { background: var(--cmd-blue-faint); color: var(--cmd-ink); } .materialdesign a { color: var(--cmd-blue-ink); } .materialdesign a:hover, .materialdesign a:focus { color: var(--cmd-orange-ink-dark); text-decoration: none; } /* ---------- Sticky footer: footer sits at the bottom on short pages ---------- */ html, body.materialdesign { min-height: 100%; } .materialdesign .content-inner-all { display: flex; flex-direction: column; min-height: 100vh; } .materialdesign .content-inner-all > * { flex: 0 0 auto; } .materialdesign .content-inner-all > .footer-copyright-area { margin-top: auto; } /* Public catalog (search.php) */ body.cmd-public { display: flex; flex-direction: column; min-height: 100vh; } body.cmd-public .cmd-public-main { flex: 1 0 auto; width: 100%; } body.cmd-public .cmd-public-footer { margin-top: auto; } /* ---------- Cards / panels ---------- */ .materialdesign .sparkline12-list, .materialdesign .sparkline11-list, .materialdesign .breadcome-list, .materialdesign .menu-animate-list, .materialdesign .user-profile-wrap, .materialdesign .dashtwo-order-list, .materialdesign .login-bg, .materialdesign .cmd-card { background: var(--cmd-white); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius-lg); box-shadow: var(--cmd-shadow-sm); } .materialdesign .shadow-reset { box-shadow: var(--cmd-shadow); } .materialdesign .sparkline12-hd { padding: 16px 20px 12px; border-bottom: 1px solid var(--cmd-line); background: transparent; } .materialdesign .sparkline12-graph { padding: 16px 20px 20px; } .materialdesign .main-sparkline12-hd h1, .materialdesign .login-title h1, .materialdesign .cmd-card-title { color: var(--cmd-blue-ink); font-size: 19px; font-weight: 600; margin: 6px 0; letter-spacing: .1px; } .materialdesign .main-sparkline12-hd h1 small { color: var(--cmd-muted); font-size: 13px; font-weight: 400; } .materialdesign .main-sparkline12-hd h1 small a { color: var(--cmd-orange-ink-dark); } .materialdesign .login-title h1 { font-size: 22px; } .materialdesign .login-bg { border-top: 3px solid var(--cmd-orange); } /* ---------- Header and account menu ---------- */ /* Light, translucent header (Phase 2): the brand colour lives in the accents, so any school colour works. */ .materialdesign .header-top-area, .materialdesign .fixed-header-top { background: color-mix(in srgb, var(--cmd-white) 88%, transparent); box-shadow: none; height: auto; min-height: var(--cmd-header-h); } .materialdesign .fixed-header-top { border-bottom: 1px solid var(--cmd-line); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); } /* .header-top-area stays in the flow as a spacer for the fixed bar, so it also sets the gap to the first card */ .materialdesign .header-top-area { margin-bottom: var(--cmd-gap); background: transparent; } .materialdesign .cmd-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cmd-space-3); min-height: var(--cmd-header-h); } .materialdesign .cmd-header-row::before, .materialdesign .cmd-header-row::after { display: none; } /* Bootstrap clearfix would count as flex items */ .materialdesign .cmd-header-left { display: flex; align-items: center; gap: var(--cmd-space-3); min-width: 0; } .materialdesign .cmd-header-row .bar-button-pro { margin: 0; } .materialdesign .cmd-header-row .admin-logo { padding: 0; margin: 0; } .materialdesign .cmd-header-row .header-right-info .navbar-nav { float: none; margin: 0; padding: 0; width: auto; } .materialdesign .cmd-header-row .header-right-info .navbar-nav > li { float: none; } .materialdesign .header-drl-controller-btn.btn-info { width: 38px; height: 38px; padding: 0; border-radius: var(--cmd-radius-sm); background: transparent; border: 1px solid var(--cmd-line); color: var(--cmd-ink); transition: background var(--cmd-dur-fast) var(--cmd-ease), border-color var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .header-drl-controller-btn.btn-info:hover, .materialdesign .header-drl-controller-btn.btn-info:focus, .materialdesign .header-drl-controller-btn.btn-info:active { background: var(--cmd-blue-faint); border-color: var(--cmd-blue-soft); color: var(--cmd-blue-ink); box-shadow: none; } .materialdesign .cmd-header-title { overflow: hidden; color: var(--cmd-ink); font-size: var(--cmd-fs-lg); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; } .materialdesign .logo-wrap-pro img { width: 36px; max-height: 36px; height: auto; object-fit: contain; } .materialdesign .header-right-info .cmd-account-toggle { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--cmd-radius-pill); color: var(--cmd-ink); transition: background var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .header-right-info .cmd-account-toggle:hover, .materialdesign .header-right-info .cmd-account-toggle:focus, .materialdesign .header-right-info .open > .cmd-account-toggle { background: var(--cmd-blue-faint); color: var(--cmd-ink); } .materialdesign .header-right-info .cmd-account-toggle .fa-angle-down { color: var(--cmd-muted); } .materialdesign .header-right-info .cmd-account-toggle.is-active { background: var(--cmd-blue-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cmd-blue) 25%, transparent); } .materialdesign .cmd-account-menu .cmd-menu-item.is-active { background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-weight: 600; } .materialdesign .cmd-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cmd-orange); color: var(--cmd-on-orange); font-weight: 700; font-size: var(--cmd-fs-sm); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 2px var(--cmd-white), 0 0 0 3px color-mix(in srgb, var(--cmd-orange) 35%, transparent); } .materialdesign .cmd-account-toggle .cmd-account-name { font-size: var(--cmd-fs-base); font-weight: 600; line-height: 1.15; } .materialdesign .cmd-account-toggle .cmd-account-role { font-size: var(--cmd-fs-xs); color: var(--cmd-muted); display: block; font-weight: 500; } .materialdesign .header-right-info .cmd-account-menu.dropdown-menu { background: var(--cmd-white); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius-lg); box-shadow: var(--cmd-shadow-lg); width: 280px; padding: 0; margin-top: 8px; overflow: hidden; } .materialdesign .cmd-account-menu .cmd-account-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: linear-gradient(135deg, var(--cmd-blue-faint), var(--cmd-white)); border-bottom: 1px solid var(--cmd-line); } .materialdesign .cmd-account-menu .cmd-account-head .cmd-avatar { width: 42px; height: 42px; font-size: var(--cmd-fs-md); } .materialdesign .cmd-account-menu .cmd-account-head strong { display: block; color: var(--cmd-ink); font-size: var(--cmd-fs-md); } .materialdesign .cmd-account-menu .cmd-account-head span { color: var(--cmd-muted); font-size: var(--cmd-fs-sm); } .materialdesign .cmd-account-menu .cmd-role-badge { margin-top: 4px; } .materialdesign .cmd-account-menu .cmd-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; color: var(--cmd-ink); background: var(--cmd-white); border: 0; text-align: left; font-size: var(--cmd-fs-base); } .materialdesign .cmd-account-menu .cmd-menu-item i { width: 16px; color: var(--cmd-blue-ink); } .materialdesign .cmd-account-menu .cmd-menu-item:hover, .materialdesign .cmd-account-menu .cmd-menu-item:focus { background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); } .materialdesign .cmd-account-menu .cmd-menu-item.cmd-danger i, .materialdesign .cmd-account-menu .cmd-menu-item.cmd-danger { color: var(--cmd-red); } .materialdesign .cmd-account-menu .cmd-menu-item.cmd-danger:hover { background: var(--cmd-red-soft); } .materialdesign .cmd-account-menu form { margin: 0; border-top: 1px solid var(--cmd-line); } /* ---------- Sidebar ---------- */ .left-sidebar-pro { width: var(--cmd-sidebar-w); } #sidebar { min-width: var(--cmd-sidebar-w); max-width: var(--cmd-sidebar-w); transition: min-width var(--cmd-dur) var(--cmd-ease), max-width var(--cmd-dur) var(--cmd-ease); } #sidebar.active { min-width: var(--cmd-sidebar-mini); max-width: var(--cmd-sidebar-mini); } .fixed-header-top { left: var(--cmd-sidebar-w); } .content-inner-all { margin-left: var(--cmd-sidebar-w); } .fixed-header-top, .content-inner-all { transition: left var(--cmd-dur) var(--cmd-ease), margin-left var(--cmd-dur) var(--cmd-ease); } .mini-navbar .fixed-header-top { left: var(--cmd-sidebar-mini); } .mini-navbar .content-inner-all { margin-left: var(--cmd-sidebar-mini); } .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.open .left-menu-dropdown { left: var(--cmd-sidebar-w); } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.open .left-menu-dropdown { left: var(--cmd-sidebar-mini); } .materialdesign #sidebar { background: var(--cmd-white); color: var(--cmd-ink); border-right: 1px solid var(--cmd-line); box-shadow: none; } /* Brand block: logo + school name + product line in one compact row; any logo shape fits the 44px box */ .materialdesign #sidebar .sidebar-header { padding: var(--cmd-space-4) var(--cmd-space-3) var(--cmd-space-2); background: var(--cmd-white); border-bottom: 0; text-align: left; } .materialdesign #sidebar .cmd-brand { display: flex; align-items: center; gap: var(--cmd-space-3); padding: var(--cmd-space-2); border-radius: var(--cmd-radius); color: var(--cmd-ink); text-decoration: none; } .materialdesign #sidebar .cmd-brand:hover { background: var(--cmd-blue-faint); } .materialdesign #sidebar .cmd-brand-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; } .materialdesign #sidebar .sidebar-header .cmd-brand-logo img { display: block; width: 44px; height: 44px; max-width: none; max-height: none; border-radius: 0; object-fit: contain; } .materialdesign #sidebar .cmd-brand-text { display: flex; flex-direction: column; min-width: 0; } .materialdesign #sidebar .cmd-brand-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--cmd-ink); font-size: var(--cmd-fs-base); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .materialdesign #sidebar .cmd-brand-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1px; color: var(--cmd-muted); font-size: var(--cmd-fs-xs); line-height: 1.3; } #sidebar.active .sidebar-header { padding: var(--cmd-space-4) var(--cmd-space-2) var(--cmd-space-2); } #sidebar.active .cmd-brand { justify-content: center; padding: var(--cmd-space-2) 0; } #sidebar.active .cmd-brand-text { display: none; } #sidebar.active .sidebar-header img { display: block; } /* Group labels (Workspace, Collection, Administration); a thin divider in the narrow sidebar */ .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.cmd-nav-group { float: none; width: 100%; padding: var(--cmd-space-4) var(--cmd-space-5) var(--cmd-space-1); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.cmd-nav-group span { color: var(--cmd-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.cmd-nav-group { padding: var(--cmd-space-3) var(--cmd-space-4) var(--cmd-space-1); } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.cmd-nav-group span { display: block; height: 1px; overflow: hidden; background: var(--cmd-line); color: transparent; } /* Items: tall, rounded, icon column; active = soft brand tint + secondary marker. :visited beats style.css's grey a:visited. */ .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li { float: none; width: 100%; } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:visited { position: relative; display: flex; align-items: center; gap: var(--cmd-space-3); min-height: 40px; margin: 2px var(--cmd-space-3); padding: 0 var(--cmd-space-3); border: 0; border-radius: var(--cmd-radius-sm); color: var(--cmd-ink); background: transparent; font-size: var(--cmd-fs-base); font-weight: 500; transition: background var(--cmd-dur-fast) var(--cmd-ease), color var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a .big-icon { width: 20px; margin: 0; color: var(--cmd-muted); font-size: 16px; text-align: center; transition: color var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:hover, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:focus, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.open > a { background: var(--cmd-blue-faint); color: var(--cmd-blue-ink); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:hover .big-icon, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:focus .big-icon { color: var(--cmd-blue-ink); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a:visited, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a:hover, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a:focus { background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-weight: 600; } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a .big-icon { color: var(--cmd-blue-ink); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cmd-orange); } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a { justify-content: center; margin: 2px var(--cmd-space-2); padding: 0; } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a .big-icon { font-size: 18px; } #sidebar.active .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li.active > a::before { left: -8px; } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li .left-menu-dropdown { background: var(--cmd-white); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); box-shadow: var(--cmd-shadow-md); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li .left-menu-dropdown a { color: var(--cmd-blue-ink); } .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li .left-menu-dropdown a:hover, .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li .left-menu-dropdown a:focus { background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); } /* ---------- Mobile menu (meanmenu, ≤991px) ---------- */ .materialdesign .mobile-menu-area { background: #fff; border-bottom: 1px solid var(--cmd-line); } /* meanmenu.min.css sets .mean-bar to z-index 999999, which paints "MENU" over Bootstrap modals (1050) and backdrops (1040). The nav is in normal flow, so it only needs to sit above page content and below the fixed header (999). */ .materialdesign .mean-container .mean-bar { z-index: 998; } .materialdesign .mean-container .mean-nav { background: var(--cmd-blue); } .materialdesign .mean-container .mean-nav ul li, .materialdesign .mean-container .mean-nav ul li a { background: #fff; color: var(--cmd-blue-ink); } .materialdesign .mean-container .mean-nav ul li a:hover, .materialdesign .mean-container .mean-nav ul li a:focus, .materialdesign .mean-container .mean-nav ul li.active > a { background: var(--cmd-blue); color: var(--cmd-on-blue); } /* The template's `a { transition: all .3s }` animates meanmenu's text-indent swap (-9999em -> 0), sliding the X in from the left. */ .materialdesign .mean-container a.meanmenu-reveal { color: var(--cmd-blue-ink); transition: color .3s; } .materialdesign .mean-container a.meanmenu-reveal span { background: var(--cmd-blue); } /* ---------- Focus ---------- */ .materialdesign .left-custom-menu-adp-wrap ul.left-sidebar-menu-pro li > a:focus-visible, .materialdesign .nav-tabs > li > a:focus-visible, .materialdesign a.cmd-link:focus-visible, .materialdesign .mean-container .mean-nav ul li a:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: 2px; } /* ---------- Page layout helpers ---------- */ .cmd-narrow { max-width: 960px; margin: 0 auto; } .row > .cmd-narrow { float: none; } .cmd-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .materialdesign .cmd-card-head .cmd-card-title { margin: 0; } .cmd-card-head .cmd-back { display: inline-block; margin-top: 4px; font-size: 13px; } .cmd-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Copies page: one card + table per volume (pages/accession.php) */ .cmd-vol-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .materialdesign .cmd-vol-bar-label { margin: 0; font-weight: 500; color: var(--cmd-muted); } .materialdesign .cmd-vol-bar .cmd-filter { width: auto; min-width: 180px; max-width: 280px; height: 34px; } .cmd-vol-card { margin-bottom: 22px; } .cmd-vol-card:last-child { margin-bottom: 0; } .cmd-vol-card[hidden] { display: none; } .modal-adminpro-general [hidden] { display: none; } .materialdesign #addcopy_volume_fixed { font-weight: 600; color: var(--cmd-ink); } .cmd-vol-head { margin-bottom: 8px; } .materialdesign .cmd-vol-title { margin: 0; font-size: 16px; color: var(--cmd-ink); } .materialdesign .cmd-vol-title .cmd-vol-year { font-weight: 400; color: var(--cmd-muted); } .materialdesign .cmd-vol-title small { display: block; margin-top: 2px; color: var(--cmd-muted); font-size: 12px; font-weight: 400; } .cmd-inline-form { display: flex; align-items: center; gap: 8px; margin: 0; } .cmd-inline-form .input-group { width: 260px; max-width: 100%; } .materialdesign .cmd-inline-label { margin: 0; font-weight: 500; color: var(--cmd-muted); white-space: nowrap; } .materialdesign td.cmd-actions { white-space: nowrap; } /* Books list: four row actions as a 2x2 grid instead of one wide line */ .cmd-actions-2x2 { display: flex; flex-wrap: wrap; gap: 4px; width: 200px; } .materialdesign td.cmd-actions .cmd-actions-2x2 > .btn { flex: 0 0 calc(50% - 2px); margin: 0; text-align: center; } .cmd-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--cmd-line); margin-top: 6px; } .cmd-form-actions .btn { margin-top: 10px; } .cmd-code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 13px; letter-spacing: .3px; } .materialdesign a.cmd-icon-link { margin-left: 6px; color: var(--cmd-muted); } .materialdesign a.cmd-icon-link:hover, .materialdesign a.cmd-icon-link:focus { color: var(--cmd-orange-ink-dark); } @media (max-width: 767px) { .cmd-head-actions, .cmd-inline-form { width: 100%; } .cmd-inline-form .input-group { width: auto; flex: 1; } .materialdesign .cmd-vol-bar .cmd-filter { flex: 1; max-width: none; } .cmd-vol-head .btn { flex: 1 1 auto; } } /* ---------- Modal forms (templates/modal.php) ---------- */ .materialdesign .modal-adminpro-general .modal-body { text-align: left; padding: 22px 24px 8px; } .materialdesign .modal-adminpro-general .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 18px; border-top: 1px solid var(--cmd-line); } .materialdesign .modal-adminpro-general .modal-footer .btn + .btn { margin-left: 0; } .materialdesign .modal-adminpro-general .modal-body label { display: block; margin-bottom: 5px; font-size: 13px; } .materialdesign .modal-adminpro-general .modal-body .help-block { margin: 5px 0 0; font-size: 12px; color: var(--cmd-muted); } .materialdesign .modal-adminpro-general .modal-body p.cmd-confirm { font-size: 15px; line-height: 1.5; padding-bottom: 14px; } .materialdesign .modal-adminpro-general .form-control { height: 38px; } .materialdesign .modal-adminpro-general .has-feedback .form-control-feedback { top: 27px; color: var(--cmd-muted); } /* Import Borrowers (#ImportBorrowerModal, js/batch-import.js) */ .cmd-import-zone { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cmd-line); } .cmd-import-zone:last-child { border-bottom: 0; margin-bottom: 0; } .materialdesign .modal-adminpro-general .modal-body .cmd-import-step { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--cmd-ink); } .cmd-import-guide summary { cursor: pointer; } .cmd-import-template { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } /* Split download button (main part + format menu with radio rows) */ .cmd-split.btn-group { display: inline-flex; } .cmd-split.btn-group.hidden { display: none !important; } .materialdesign .cmd-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .materialdesign .cmd-split > .cmd-split-toggle { margin-left: 0; padding-left: 12px; padding-right: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .45); background: var(--cmd-orange-dark); border-color: var(--cmd-orange-dark); } .cmd-split-fmt { margin-left: 2px; font-weight: 400; opacity: .85; } .materialdesign .cmd-split .cmd-format-menu { min-width: 300px; padding: 16px 10px 10px; margin-top: 8px; border: 1px solid var(--cmd-line); border-radius: 12px; box-shadow: 0 12px 32px color-mix(in srgb, var(--cmd-blue-dark) 18%, transparent); } .materialdesign .cmd-split.dropup .cmd-format-menu { margin: 0 0 8px; } .materialdesign .cmd-split .cmd-format-title { margin: 0 12px 10px; font-size: 15px; font-weight: 700; color: var(--cmd-ink); text-align: left; } .materialdesign .cmd-split .cmd-format-menu label.cmd-format-option { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 13px 14px; border-radius: 10px; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--cmd-ink); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .12s; } .materialdesign .cmd-split .cmd-format-menu label.cmd-format-option:last-child { margin-bottom: 0; } .materialdesign .cmd-split .cmd-format-menu label.cmd-format-option:hover { background: var(--cmd-blue-faint); } .materialdesign .cmd-split .cmd-format-menu label.cmd-format-option:has(input:checked) { background: var(--cmd-orange-soft); } /* Custom radio: outlined ring, filled centre when picked */ .materialdesign .cmd-split .cmd-format-option input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 22px; height: 22px; margin: 0; border: 2px solid var(--cmd-orange); border-radius: 50%; background: var(--cmd-white); cursor: pointer; } .materialdesign .cmd-split .cmd-format-option input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cmd-orange); } .materialdesign .cmd-split .cmd-format-option input[type="radio"]:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 2px; } .materialdesign .cmd-split .cmd-format-option input[type="radio"]:disabled { border-color: var(--cmd-line); cursor: not-allowed; } .materialdesign .cmd-split .cmd-format-option strong { font-weight: 700; } .materialdesign .cmd-split .cmd-format-option span { color: var(--cmd-muted); font-size: 13px; } .materialdesign .cmd-split .cmd-format-option input:disabled ~ * { opacity: .5; } .cmd-import-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; } .cmd-import-summary .cmd-badge { white-space: normal; } .cmd-import-sep { color: var(--cmd-muted); } .cmd-import-results { max-height: 320px; overflow-y: auto; border: 1px solid var(--cmd-line); border-radius: 8px; } .cmd-import-results:empty { display: none; } .materialdesign .cmd-import-results .table { margin: 0; } .materialdesign .cmd-import-results thead th { position: sticky; top: 0; z-index: 1; background: var(--cmd-white); } .cmd-import-results .cmd-badge { white-space: normal; } .materialdesign .cmd-import-guide-table { margin: 6px 0 0; font-size: 13px; } .materialdesign .modal-adminpro-general .modal-footer.cmd-import-footer { flex-wrap: wrap; } /* Import options, drop zone, column matching and the Fix form (js/batch-import.js) */ .cmd-import-options { margin: 0 0 10px; padding: 0; border: 0; min-width: 0; } .cmd-import-options:last-child { margin-bottom: 0; } .materialdesign .cmd-import-legend { margin: 0 0 4px; padding: 0; border: 0; font-size: 13px; font-weight: 600; color: var(--cmd-ink); } .cmd-import-legend .cmd-sub { display: inline; margin-left: 4px; font-weight: 400; } .cmd-import-options .radio { margin: 4px 0; } .cmd-import-options .radio .cmd-sub { display: block; } .cmd-import-defaults { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; } .cmd-import-defaults .form-group { margin-bottom: 0; } .cmd-import-drop { padding: 10px; border: 2px dashed var(--cmd-line); border-radius: 8px; background: var(--cmd-blue-faint); transition: border-color .15s, background-color .15s; } .cmd-import-drop.is-over { border-color: var(--cmd-blue); background: var(--cmd-blue-soft); } .cmd-import-drop .cmd-hint { margin: 6px 0 0; } .cmd-import-sheet { max-width: 320px; margin: 10px 0 0; } .cmd-import-map { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--cmd-line); border-radius: 8px; } .cmd-import-map summary { cursor: pointer; font-weight: 600; color: var(--cmd-ink); } .cmd-import-map summary .cmd-badge { margin-left: 6px; white-space: normal; } .materialdesign .cmd-import-map-table { margin: 6px 0 0; font-size: 13px; } .cmd-import-map-table th[scope="row"] label { margin: 0; font-weight: 600; } .cmd-import-map-table td.cmd-sub { display: table-cell; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-import-result .cmd-badge { display: inline-block; margin: 0 4px 2px 0; } .cmd-import-result .cmd-import-note { color: var(--cmd-amber); } .cmd-import-fix-btn { margin-top: 2px; } .materialdesign .cmd-import-edit > td { background: var(--cmd-blue-faint); } .cmd-import-fix { padding: 6px 2px; } .cmd-import-fix-note { margin: 0 0 6px; color: var(--cmd-red); } .cmd-import-fix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; } .cmd-import-fix-grid .form-group { margin-bottom: 8px; } .cmd-import-fix-grid .control-label { font-size: 12px; margin-bottom: 2px; } .cmd-import-fix-grid .help-block { margin: 2px 0 0; font-size: 12px; } .cmd-import-fix-actions { display: flex; gap: 6px; } .cmd-import-map-table select { min-width: 140px; } @media (max-width: 767px) { .cmd-import-defaults { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* Bootstrap's .table-responsive stops wrapping on phones; the report and the Fix form must wrap to fit */ .materialdesign .table-responsive > .cmd-import-table > tbody > tr > td, .materialdesign .table-responsive > .cmd-import-map-table > tbody > tr > * { white-space: normal; } .cmd-import-map-table th:nth-child(2), .cmd-import-map-table td.cmd-sub { display: none; } } /* ---------- Issue / Return / Renew (borrow.php, returnbook.php, renew.php) ---------- */ .cmd-switch-area { margin-bottom: 15px; } .materialdesign .cmd-scan-card { padding: 20px 22px 22px; margin-bottom: 24px; } .materialdesign .cmd-scan-card .cmd-card-title { margin: 0 0 16px; } .materialdesign .cmd-scan-card .cmd-card-head { margin-bottom: 16px; } /* Lost Book: pick one of the borrower's loans (the template hides native radios; show these) */ .cmd-lost-pick { border: 0; margin: 0 0 15px; padding: 0; min-width: 0; } .materialdesign .cmd-lost-pick legend { border: 0; margin: 0 0 5px; font-size: 14px; font-weight: 700; color: var(--cmd-ink); } .cmd-lost-pick .cmd-circ-item { align-items: center; gap: 10px; cursor: pointer; } .cmd-lost-pick input[type="radio"] { position: static; opacity: 1; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cmd-blue); } .materialdesign .cmd-scan-card .cmd-lost-pick label.cmd-circ-body { display: flex; flex-direction: column; margin: 0; font-weight: 400; cursor: pointer; pointer-events: auto; } .cmd-lost-link { margin: 10px 0 0; text-align: center; } /* Return Book: admin fine waiver (the template hides native checkboxes; show this one, as .cmd-overlays does) */ .cmd-waive .checkbox { margin: 0 0 8px; } .materialdesign .cmd-scan-card .cmd-waive .checkbox label { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; margin: 0; font-weight: 600; color: var(--cmd-ink); cursor: pointer; } .cmd-waive .checkbox input[type="checkbox"] { position: static; opacity: 1; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cmd-blue); } .materialdesign .cmd-scan-card .cmd-card-head .cmd-card-title { margin: 0; } .materialdesign .cmd-scan-card label { display: block; margin-bottom: 5px; } .materialdesign .cmd-scan-card .form-control { height: 38px; } .materialdesign .cmd-scan-card .form-control.cmd-scan { height: 48px; padding: 0 14px; font-size: var(--cmd-fs-md); font-weight: 500; letter-spacing: .02em; } .materialdesign .cmd-scan-card .input-group-btn > .cmd-scan-btn { min-height: 48px; min-width: 52px; font-size: var(--cmd-fs-md); } /* Editable lookup fields (name/title suggestions) share the scan fields' border */ .materialdesign .cmd-scan-card .form-control.cmd-scan, .materialdesign .cmd-scan-card .form-control.cmd-lookup, .materialdesign .cmd-scan-card .form-control.cmd-date-edit { border: 2px solid color-mix(in srgb, var(--cmd-blue) 22%, var(--cmd-line-strong)); } .materialdesign .cmd-scan-card .form-control.cmd-scan:focus, .materialdesign .cmd-scan-card .form-control.cmd-lookup:focus, .materialdesign .cmd-scan-card .form-control.cmd-date-edit:focus { border-color: var(--cmd-blue); background: color-mix(in srgb, var(--cmd-blue-faint) 60%, var(--cmd-white)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cmd-blue) 18%, transparent); } .materialdesign .cmd-scan-card .cmd-scan-btn { height: 44px; min-width: 46px; } /* Lookup suggestions (js/lookup-suggest.js) */ .cmd-suggest-host { position: relative; } .cmd-suggest { position: absolute; z-index: 1060; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 290px; overflow-y: auto; background: var(--cmd-white); border: 1px solid var(--cmd-line); border-radius: 8px; box-shadow: var(--cmd-shadow); } .cmd-suggest[hidden] { display: none; } .cmd-suggest-item { padding: 7px 12px; cursor: pointer; line-height: 1.35; color: var(--cmd-ink); } .cmd-suggest-item.cmd-active { background: var(--cmd-blue-soft); color: var(--cmd-blue-ink-dark); } .cmd-suggest-meta { display: block; font-size: 12px; color: var(--cmd-muted); } .cmd-suggest-empty { padding: 7px 12px; font-size: 13px; color: var(--cmd-muted); } .materialdesign .cmd-scan-card .form-control.cmd-date-edit:not([disabled]) { background: var(--cmd-white); } /* Renew: the table row whose loan is loaded in the form */ .materialdesign .table > tbody > tr.cmd-row-selected > td { background: var(--cmd-blue-soft); } .materialdesign .table > tbody > tr.cmd-row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--cmd-blue); } /* Status messages under scan fields can be a sentence long: wrap inside the card */ .cmd-scan-card [role="status"].cmd-badge { white-space: normal; max-width: 100%; border-radius: 10px; } .cmd-dates-bar { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin: 0 0 14px; } .cmd-dates-bar .cmd-hint { margin: 2px 0 0; } .cmd-dates-bar .btn { flex: none; } .materialdesign .cmd-scan-card .form-control[disabled] { background: var(--cmd-blue-faint); cursor: not-allowed; } .cmd-hint { margin: 5px 0 6px; font-size: 12px; color: var(--cmd-muted); } .materialdesign .cmd-optional { font-weight: 400; color: var(--cmd-muted); } .materialdesign .cmd-status-field { margin-right: 0; } .materialdesign .cmd-status-field .login-user { top: 0; height: 38px; width: 38px; line-height: 38px; padding: 0; border-radius: 0 7px 7px 0; } .materialdesign .cmd-fine.cmd-fine-due { background: var(--cmd-orange-soft); border-color: var(--cmd-orange); color: var(--cmd-orange-ink-dark); font-weight: 700; } .materialdesign .btn.cmd-submit { margin-top: 6px; padding: 11px 16px; font-size: 16px; } .materialdesign .btn.cmd-submit[disabled] { background: var(--cmd-blue-soft); border-color: transparent; color: color-mix(in srgb, var(--cmd-blue-ink) 60%, var(--cmd-white)); opacity: 1; cursor: not-allowed; box-shadow: none; } /* Books picker on Issue Book */ .materialdesign .cmd-pick-table .cmd-pick-cell { min-width: 200px; } .materialdesign .cmd-pick-table .cmd-copy-pick { height: 32px; font-size: 13px; } .materialdesign .cmd-pick-table tr.cmd-row-picked > td { background: var(--cmd-orange-soft) !important; } .materialdesign .cmd-pick-table tr.cmd-row-picked > td:first-child { box-shadow: inset 3px 0 0 var(--cmd-orange); } .cmd-unavailable { color: var(--cmd-muted); font-size: 13px; font-style: italic; } /* Desk list: the books handled with one Issue / Return / Renew button (js/circ-list.js) */ .cmd-scan-card [hidden] { display: none !important; } /* Issue: class details (level group, level, course/strand, class section); the group decides which boxes show */ .materialdesign .cmd-scan-card .cmd-class-box { min-width: 0; margin: 0 0 14px; padding: 10px 14px 2px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: color-mix(in srgb, var(--cmd-blue-faint) 55%, var(--cmd-white)); } .cmd-class-box legend.cmd-legend { display: block; float: none; width: auto; margin: 0 0 8px; padding: 0 4px; border: 0; font-size: var(--cmd-fs-sm); font-weight: 600; color: var(--cmd-ink); } .cmd-class-box .form-group { margin-bottom: 10px; } .cmd-class-box .cmd-hint { margin: 0 0 10px; } .cmd-class-box .cmd-hint:empty { display: none; } #issue-staff-note, #issue-block-hint { margin: 0 0 12px; } .cmd-circ-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 6px; } .cmd-circ-head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--cmd-ink); } .cmd-circ-head .btn-link { padding: 0; font-size: 13px; } .cmd-circ-list { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); max-height: 360px; overflow-y: auto; } .cmd-circ-list:empty { display: none; } .cmd-circ-empty { margin: 0 0 10px; padding: 12px; border: 1px dashed var(--cmd-line); border-radius: var(--cmd-radius); font-size: 13px; color: var(--cmd-muted); text-align: center; } .cmd-circ-item { position: relative; display: flex; align-items: flex-start; gap: 6px; padding: 8px 6px 8px 12px; border-top: 1px solid var(--cmd-line); } .cmd-circ-item:first-child { border-top: 0; } .cmd-circ-item.is-selected { background: var(--cmd-blue-soft); box-shadow: inset 3px 0 0 var(--cmd-blue); } /* The whole row selects it; inputs and Remove sit above that button */ .cmd-circ-pick { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; } .cmd-circ-pick:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: -2px; } .cmd-circ-body { position: relative; flex: 1; min-width: 0; pointer-events: none; } .cmd-circ-body input, .cmd-circ-body select, .cmd-circ-body button, .cmd-circ-body a { pointer-events: auto; } .cmd-circ-title { display: block; font-weight: 600; color: var(--cmd-ink); line-height: 1.3; overflow-wrap: anywhere; } .cmd-circ-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--cmd-muted); } .cmd-circ-meta .cmd-badge { margin-left: 4px; } .cmd-circ-due { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--cmd-muted); } .materialdesign .cmd-scan-card .cmd-circ-due label { display: inline; margin: 0; font-weight: 400; } .materialdesign .cmd-scan-card .cmd-circ-due .form-control { width: auto; height: 30px; padding: 2px 6px; font-size: 13px; } .cmd-circ-remove { position: relative; flex: none; padding: 2px 8px; color: var(--cmd-muted); } .cmd-circ-remove:hover, .cmd-circ-remove:focus { color: var(--cmd-red); } .cmd-circ-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; padding: 12px 16px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: var(--cmd-blue-faint); font-size: var(--cmd-fs-sm); font-weight: 600; } .cmd-circ-total b { font-size: var(--cmd-fs-xl); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .cmd-circ-total.cmd-fine-due { border-color: color-mix(in srgb, var(--cmd-orange) 35%, transparent); background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); } .materialdesign .cmd-card-title small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--cmd-muted); } /* ---------- Report / log filters ---------- */ .cmd-report-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .cmd-report-tools form { margin: 0; } .cmd-filter-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; } .materialdesign .cmd-filter-field label { display: block; margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--cmd-muted); } .materialdesign .cmd-filter-field .form-control { height: 34px; width: 160px; } @media (max-width: 767px) { .cmd-report-tools, .cmd-filter-form { width: 100%; } .cmd-filter-field { flex: 1 1 130px; } .materialdesign .cmd-filter-field .form-control { width: 100%; } } /* ---------- Settings / account forms ---------- */ .cmd-narrow.cmd-narrow-form { max-width: 640px; } .cmd-summary { font-size: 16px; margin: 4px 0 6px; color: var(--cmd-ink); } .cmd-summary strong { color: var(--cmd-blue-ink); font-size: 20px; } .materialdesign .modal-body .cmd-modal-footer-inline { margin: 14px -24px -8px; } /* ---------- Borrower profile (b_profile.php) ---------- */ .cmd-back-row { margin: 0 0 14px; } .materialdesign .cmd-profile-card { padding: 22px; margin-bottom: 24px; } .cmd-profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .cmd-profile-head .cmd-grow { min-width: 0; } .materialdesign .cmd-avatar.cmd-avatar-lg { width: 58px; height: 58px; font-size: 21px; } .cmd-profile-name { margin: 0; color: var(--cmd-ink); font-size: 20px; } .cmd-profile-id { color: var(--cmd-muted); } .cmd-profile-badges { margin-top: 6px; } .cmd-profile-badges .cmd-badge + .cmd-badge { margin-left: 4px; } .materialdesign .cmd-detail-table { margin-bottom: 16px; } .materialdesign .cmd-detail-table th { width: 42%; color: var(--cmd-muted); font-weight: 400; border-top: 1px solid var(--cmd-line); } .cmd-btn-row { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- Tabs (Books / Reports / Settings sub-navigation, circulation switch) ---------- */ /* Segmented control: a soft brand-tinted track; the current page is a raised white chip. Scrolls sideways on phones. */ .materialdesign .menu-list-wrap { padding: 0; margin-bottom: var(--cmd-space-4); background: transparent; border: 0; box-shadow: none; } .materialdesign .menu-list-wrap .nav-tabs, .materialdesign .cmd-switch { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto; padding: 4px; background: var(--cmd-blue-soft); border: 1px solid color-mix(in srgb, var(--cmd-blue) 10%, transparent); border-radius: var(--cmd-radius-lg); scrollbar-width: none; } .materialdesign .menu-list-wrap .nav-tabs::-webkit-scrollbar, .materialdesign .cmd-switch::-webkit-scrollbar { display: none; } .materialdesign .menu-list-wrap .nav-tabs::before, .materialdesign .menu-list-wrap .nav-tabs::after { display: none; } /* Bootstrap clearfix */ .materialdesign .menu-list-wrap .nav-tabs > li { float: none; margin: 0; } .materialdesign .menu-list-wrap .nav-tabs > li > a, .materialdesign .cmd-switch > .btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; white-space: nowrap; border: 0; border-radius: var(--cmd-radius); background: transparent; box-shadow: none; color: color-mix(in srgb, var(--cmd-ink) 72%, transparent); font-size: var(--cmd-fs-sm); font-weight: 500; line-height: 1.4; transition: background var(--cmd-dur-fast) var(--cmd-ease), color var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .menu-list-wrap .nav-tabs > li > a:hover, .materialdesign .menu-list-wrap .nav-tabs > li > a:focus, .materialdesign .cmd-switch > .btn:hover, .materialdesign .cmd-switch > .btn:focus { background: color-mix(in srgb, var(--cmd-white) 55%, transparent); color: var(--cmd-ink); } .materialdesign .menu-list-wrap .nav-tabs > li.active > a, .materialdesign .menu-list-wrap .nav-tabs > li.active > a:hover, .materialdesign .menu-list-wrap .nav-tabs > li.active > a:focus, .materialdesign .cmd-switch > .btn[aria-current="page"], .materialdesign .cmd-switch > .btn[aria-current="page"]:hover, .materialdesign .cmd-switch > .btn[aria-current="page"]:focus { background: var(--cmd-white); color: var(--cmd-blue-ink); font-weight: 600; box-shadow: var(--cmd-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--cmd-blue) 12%, transparent); } .materialdesign .cmd-switch > .btn .fa { opacity: .85; } .materialdesign .cmd-switch > .btn + .btn { margin-left: 0; } /* ---------- Buttons ---------- */ /* Phase 3: one height scale (36px, 30px small), 600 weight, soft lift on hover, pressed state. Class meanings unchanged. */ .materialdesign .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--cmd-radius-sm); font-weight: 600; font-size: var(--cmd-fs-sm); line-height: 1.3; white-space: nowrap; transition: background-color var(--cmd-dur-fast) var(--cmd-ease), border-color var(--cmd-dur-fast) var(--cmd-ease), color var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease), transform var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .btn:active:not([disabled]) { transform: scale(.98); } .materialdesign .btn[disabled], .materialdesign .btn.disabled { cursor: not-allowed; opacity: .55; box-shadow: none; } .materialdesign .btn-primary, .materialdesign .login-button, .materialdesign .login-button-pro .login-button { background: var(--cmd-blue); border-color: var(--cmd-blue); color: var(--cmd-on-blue); box-shadow: 0 1px 2px color-mix(in srgb, var(--cmd-blue-dark) 25%, transparent); } .materialdesign .btn-primary:hover, .materialdesign .btn-primary:focus-visible, .materialdesign .btn-primary:active, .materialdesign .login-button:hover, .materialdesign .login-button:focus-visible, .materialdesign .login-button:active { background: var(--cmd-blue-dark); border-color: var(--cmd-blue-dark); color: var(--cmd-on-blue); box-shadow: 0 4px 12px color-mix(in srgb, var(--cmd-blue-dark) 28%, transparent); } .materialdesign .login-button[disabled] { background: color-mix(in srgb, var(--cmd-blue) 45%, var(--cmd-white)); border-color: transparent; opacity: 1; } /* Secondary actions (edit, search, view): outlined primary */ .materialdesign .btn-info { background: var(--cmd-white); border: 1px solid color-mix(in srgb, var(--cmd-blue) 55%, var(--cmd-white)); color: var(--cmd-blue-ink); } .materialdesign .btn-info:hover, .materialdesign .btn-info:focus-visible, .materialdesign .btn-info:active, .materialdesign .btn-info.active, .materialdesign .open > .dropdown-toggle.btn-info { background: var(--cmd-blue); border-color: var(--cmd-blue); color: var(--cmd-on-blue); } /* Search buttons attached to inputs are filled */ .materialdesign .input-group-btn .btn-info, .materialdesign .input-group-btn .btn-flat { background: var(--cmd-blue); border-color: var(--cmd-blue); color: var(--cmd-on-blue); } .materialdesign .input-group-btn .btn-info:hover, .materialdesign .input-group-btn .btn-flat:hover { background: var(--cmd-blue-dark); border-color: var(--cmd-blue-dark); } /* Status colours stay fixed for every school (not brand) */ .materialdesign .btn-success { background: var(--cmd-green); border-color: var(--cmd-green); color: #fff; } .materialdesign .btn-success:hover, .materialdesign .btn-success:focus-visible { background: color-mix(in srgb, var(--cmd-green) 82%, #000); border-color: color-mix(in srgb, var(--cmd-green) 82%, #000); color: #fff; } .materialdesign .btn-danger { background: var(--cmd-white); border: 1px solid color-mix(in srgb, var(--cmd-red) 55%, var(--cmd-white)); color: var(--cmd-red); } .materialdesign .btn-danger:hover, .materialdesign .btn-danger:focus-visible { background: var(--cmd-red); border-color: var(--cmd-red); color: #fff; } /* Cancel / neutral actions */ .materialdesign .btn-default, .materialdesign .btn-default:visited { background: var(--cmd-white); border: 1px solid var(--cmd-line-strong); color: var(--cmd-ink); } .materialdesign .btn-default:hover, .materialdesign .btn-default:focus-visible, .materialdesign .btn-default:active { background: var(--cmd-blue-faint); border-color: color-mix(in srgb, var(--cmd-blue) 45%, var(--cmd-white)); color: var(--cmd-blue-ink); } .materialdesign .btn-warning { background: var(--cmd-orange); border-color: var(--cmd-orange); color: var(--cmd-on-orange); } .materialdesign .btn-warning:hover, .materialdesign .btn-warning:focus-visible { background: var(--cmd-orange-dark); border-color: var(--cmd-orange-dark); color: var(--cmd-on-orange); box-shadow: 0 4px 12px color-mix(in srgb, var(--cmd-orange) 30%, transparent); } .materialdesign .btn-link { min-height: 0; } .materialdesign .btn:focus-visible { outline: var(--cmd-focus-ring); outline-offset: 2px; } .materialdesign .btn-sm, .materialdesign .btn-group-sm > .btn { min-height: 30px; padding: 4px 10px; font-size: var(--cmd-fs-xs); } .materialdesign .btn-lg { min-height: 44px; padding: 10px 20px; font-size: var(--cmd-fs-md); } .materialdesign td .btn + .btn { margin-left: 4px; } /* Split / grouped buttons keep their joined corners */ .materialdesign .btn-group > .btn { border-radius: 0; } .materialdesign .btn-group > .btn:first-child { border-top-left-radius: var(--cmd-radius-sm); border-bottom-left-radius: var(--cmd-radius-sm); } .materialdesign .btn-group > .btn:last-child, .materialdesign .btn-group > .dropdown-toggle { border-top-right-radius: var(--cmd-radius-sm); border-bottom-right-radius: var(--cmd-radius-sm); } /* "+ Add" call-to-action in card headers */ .materialdesign .cmd-btn-add { background: var(--cmd-orange); border-color: var(--cmd-orange); color: var(--cmd-on-orange); box-shadow: 0 1px 2px color-mix(in srgb, var(--cmd-orange) 30%, transparent); } .materialdesign .cmd-btn-add:hover, .materialdesign .cmd-btn-add:focus-visible { background: var(--cmd-orange-dark); border-color: var(--cmd-orange-dark); color: var(--cmd-on-orange); box-shadow: 0 4px 12px color-mix(in srgb, var(--cmd-orange) 30%, transparent); } /* ---------- Forms ---------- */ .materialdesign .form-control, .materialdesign .login-input-area input, .materialdesign .login-input-area select { height: 38px; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-radius-sm); box-shadow: none; color: var(--cmd-ink); font-size: var(--cmd-fs-base); transition: border-color var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign textarea.form-control, .materialdesign select[multiple].form-control { height: auto; } /* Bootstrap-style checkboxes (input inside the label): style.css hides the input and draws a fake box on label::before that only ticks for an input placed *before* the label, so it never showed the checked state. Show the real one instead. */ .checkbox label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; cursor: pointer; } .checkbox label:has(> input[type="checkbox"])::before, .checkbox label:has(> input[type="checkbox"])::after { content: none; display: none; } .checkbox label > input[type="checkbox"] { position: static; opacity: 1; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cmd-blue); cursor: pointer; } .checkbox label > input[type="checkbox"][disabled] { cursor: not-allowed; } /* Number fields: no browser spinner (it pops in on focus/hover); type or use arrow keys */ .materialdesign input[type="number"].form-control { -moz-appearance: textfield; appearance: textfield; } .materialdesign input[type="number"].form-control::-webkit-inner-spin-button, .materialdesign input[type="number"].form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .materialdesign .form-control::placeholder { color: color-mix(in srgb, var(--cmd-muted) 80%, transparent); } .materialdesign .form-control:hover:not(:focus):not([readonly]):not([disabled]) { border-color: color-mix(in srgb, var(--cmd-blue) 35%, var(--cmd-line-strong)); } .materialdesign .input-group .form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .materialdesign .input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; min-height: 38px; } .materialdesign .form-control:focus, .materialdesign .login-input-area input:focus, .materialdesign .login-input-area select:focus { border-color: var(--cmd-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmd-blue) 16%, transparent); outline: 0; } .materialdesign .has-error .form-control { border-color: var(--cmd-red); } .materialdesign .has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmd-red) 16%, transparent); } /* Add/Edit Borrower inline checks (js/borrower-form.js): red message for a problem, blue note for a shared email or number */ .cmd-borrower-form .has-error .form-control { border-color: var(--cmd-red); } .cmd-borrower-form .has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmd-red) 16%, transparent); } .cmd-borrower-form .has-error label { color: var(--cmd-ink); } .cmd-borrower-form .has-error .cmd-hint { color: color-mix(in srgb, var(--cmd-red) 82%, var(--cmd-ink)); } .cmd-borrower-form .has-error .cmd-hint::before { content: "\f06a"; font-family: FontAwesome; margin-right: 5px; } .cmd-borrower-form .cmd-has-info .cmd-hint { color: var(--cmd-blue-ink); } .cmd-borrower-form .cmd-hint .fa { margin-right: 3px; } .cmd-borrower-form .cmd-hint .cmd-code { font-size: 11px; color: var(--cmd-muted); } .cmd-borrower-form .cmd-hint:empty { display: none; } .cmd-borrower-form .form-group { margin-bottom: 12px; } .cmd-hint-fix { padding: 0; border: 0; background: none; color: var(--cmd-blue-ink); font-weight: 600; text-decoration: underline; cursor: pointer; } .cmd-hint-fix:focus-visible { outline: var(--cmd-focus-ring); outline-offset: 2px; } /* Inline checks on book, copy and account forms (js/form-check.js, forms .cmd-check-form): red blocks saving, amber asks to check, blue informs */ .cmd-check-form .has-error .form-control, .cmd-check-form .has-error .chosen-container .chosen-choices, .cmd-check-form .has-error .chosen-container .chosen-single { border-color: var(--cmd-red); } .cmd-check-form .has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmd-red) 16%, transparent); } .cmd-check-form .has-error label { color: var(--cmd-ink); } .materialdesign .cmd-check-form .has-error .login-input-area input { border-color: var(--cmd-red); } .cmd-check-form .cmd-hint.cmd-hint-error { color: color-mix(in srgb, var(--cmd-red) 82%, var(--cmd-ink)); } .cmd-check-form .cmd-hint.cmd-hint-warn { color: var(--cmd-amber); } .cmd-check-form .cmd-hint.cmd-hint-info { color: var(--cmd-blue-ink); } .cmd-check-form .cmd-hint.cmd-hint-error::before { content: "\f06a"; font-family: FontAwesome; margin-right: 5px; } .cmd-check-form .cmd-hint.cmd-hint-warn::before { content: "\f071"; font-family: FontAwesome; margin-right: 5px; } .cmd-check-form .cmd-hint .fa { margin-right: 3px; } .cmd-check-form .cmd-hint a { color: inherit; text-decoration: underline; } .cmd-check-form .cmd-hint .cmd-code { font-size: 11px; } .cmd-check-form .cmd-hint:empty { display: none; } .materialdesign .login-input-head p, .materialdesign label { color: var(--cmd-ink); font-weight: 600; font-size: var(--cmd-fs-sm); } .materialdesign .login-input-area input[readonly], .materialdesign .form-control[readonly] { background: var(--cmd-blue-faint); } .materialdesign .form-control[disabled] { background: var(--cmd-blue-faint); color: var(--cmd-muted); } .materialdesign .input-group-addon { min-width: 40px; background: var(--cmd-blue-faint); border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-radius-sm); color: var(--cmd-muted); } .materialdesign .input-group-addon:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .materialdesign .input-group-addon:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .materialdesign .input-group-addon + .form-control, .materialdesign .input-group .form-control:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ---------- Tables ---------- */ /* Phase 3: zebra-free rows with a hover tint, quiet uppercase headers, roomier cells, an empty state with an icon */ .materialdesign .table { color: var(--cmd-ink); margin-bottom: 0; } .materialdesign .table > thead > tr > th, .materialdesign .fixed-table-container thead th { background: var(--cmd-blue-faint); color: var(--cmd-muted); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--cmd-line) !important; vertical-align: middle; } .materialdesign .fixed-table-container thead th .th-inner { padding: 11px 12px; } .materialdesign .table-bordered, .materialdesign .table-bordered > tbody > tr > td, .materialdesign .table-bordered > thead > tr > th, .materialdesign .fixed-table-container { border-color: var(--cmd-line); } .materialdesign .table-bordered > tbody > tr > td, .materialdesign .table-bordered > thead > tr > th { border-left-color: transparent; border-right-color: transparent; } .materialdesign .fixed-table-container { border-radius: var(--cmd-radius); overflow: hidden; } .materialdesign .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; } .materialdesign .table > tbody > tr { transition: background var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .table > tbody > tr:hover, .materialdesign .hover-table > tbody > tr:hover { background: color-mix(in srgb, var(--cmd-blue-soft) 60%, transparent) !important; } .materialdesign .table > tbody > tr > td { vertical-align: middle; padding: 10px 12px; font-size: var(--cmd-fs-sm); } .materialdesign .table-success, .materialdesign tr.table-success > td { background: transparent; } .materialdesign .fixed-table-toolbar .search input { height: 36px; border-radius: var(--cmd-radius-sm); min-width: 220px; } .materialdesign .fixed-table-toolbar .cmd-search-with-in { display: flex; gap: 6px; } /* "Search in" dropdown (js/table-filters.js) */ .materialdesign .fixed-table-toolbar .cmd-search-in { flex: none; width: auto; height: 36px; border-radius: var(--cmd-radius-sm); } .materialdesign .fixed-table-toolbar .btn-default { background: var(--cmd-white); border: 1px solid var(--cmd-line-strong); color: var(--cmd-blue-ink); } .materialdesign .fixed-table-toolbar .btn-default:hover { background: var(--cmd-blue-soft); } .materialdesign .pagination > li > a, .materialdesign .pagination > li > span { margin: 0 2px; border: 0; border-radius: var(--cmd-radius-sm) !important; color: var(--cmd-blue-ink); } .materialdesign .pagination > li > a:hover { background: var(--cmd-blue-faint); } .materialdesign .pagination > .active > a, .materialdesign .pagination > .active > a:hover, .materialdesign .pagination > .active > span { background: var(--cmd-blue); border-color: var(--cmd-blue); color: var(--cmd-on-blue); } .materialdesign .fixed-table-pagination .pagination-info { color: var(--cmd-muted); } .materialdesign .no-records-found td { color: var(--cmd-muted); text-align: center; padding: 32px 16px !important; } .materialdesign .no-records-found td::before { content: "\f01c"; display: block; margin-bottom: 8px; font: normal normal normal 26px/1 FontAwesome; color: color-mix(in srgb, var(--cmd-muted) 55%, transparent); } /* Clickable cell content */ .materialdesign a.cmd-link { color: var(--cmd-blue-ink); font-weight: 600; border-bottom: 1px dashed color-mix(in srgb, var(--cmd-blue-ink) 35%, transparent); } .materialdesign a.cmd-link:hover, .materialdesign a.cmd-link:focus { color: var(--cmd-orange-ink-dark); border-bottom-color: var(--cmd-orange); } .materialdesign .cmd-sub { display: block; color: var(--cmd-muted); font-size: var(--cmd-fs-xs); font-weight: 400; } /* Level / Section cells (ui_level_cell): level, then "course or strand · class section"; muted when unknown or from an earlier school year */ .cmd-level { display: block; } .cmd-level.cmd-level-dim { color: var(--cmd-muted); } .materialdesign .cmd-num { font-variant-numeric: tabular-nums; } /* Checkout rows (ui_checkouts(), ui_lines()): one row per checkout; per-book cells hold one line per book, the same height in every column */ .materialdesign .cmd-grp-line { display: flex; flex-direction: column; justify-content: center; min-height: 3.2em; } .materialdesign td.text-center .cmd-grp-line { align-items: center; white-space: nowrap; } .materialdesign td.text-right .cmd-grp-line { align-items: flex-end; white-space: nowrap; } .materialdesign td:not(.text-center):not(.text-right) .cmd-grp-line { align-items: flex-start; } .materialdesign .cmd-grp-line + .cmd-grp-line { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cmd-line); } /* ---------- Badges ---------- */ .cmd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--cmd-radius-pill); font-size: var(--cmd-fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); } .cmd-badge.cmd-ok { background: var(--cmd-green-soft); color: var(--cmd-green); } .cmd-badge.cmd-bad { background: var(--cmd-red-soft); color: var(--cmd-red); } .cmd-badge.cmd-warn { background: var(--cmd-amber-soft); color: var(--cmd-amber); } .cmd-badge.cmd-accent { background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); } .cmd-badge.cmd-muted { background: color-mix(in srgb, var(--cmd-muted) 12%, var(--cmd-white)); color: var(--cmd-muted); } /* ---------- Modals ---------- */ /* Phase 3b: white header with the title in the primary colour and a thin secondary accent bar, soft blurred backdrop, 180 ms fade + scale (no bounce), danger look for delete/deactivate (Customwidth-popup-WarningModal), bottom sheet on phones. */ .modal-backdrop { background: var(--cmd-blue-dark); } .modal-backdrop.in { opacity: .38; } .modal.in { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal.fade .modal-dialog { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity var(--cmd-dur) var(--cmd-ease), transform var(--cmd-dur) var(--cmd-ease); } .modal.in .modal-dialog { opacity: 1; transform: none; } .materialdesign .modal-content { position: relative; border-radius: var(--cmd-radius-lg); border: 0; overflow: hidden; box-shadow: var(--cmd-shadow-lg); } .materialdesign .modal-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cmd-orange); z-index: 1; } .materialdesign .modal-adminpro-general .modal-header.header-color-modal { padding: 22px 24px 14px; background: var(--cmd-white); border-bottom: 1px solid var(--cmd-line); color: var(--cmd-ink); } .materialdesign .modal-adminpro-general .modal-header.header-color-modal h4 { color: var(--cmd-blue-ink); font-size: var(--cmd-fs-lg); font-weight: 700; letter-spacing: -.01em; } .materialdesign .modal-adminpro-general .modal-close-area .close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--cmd-radius-sm); background: transparent; color: var(--cmd-muted); opacity: 1; text-shadow: none; transition: background var(--cmd-dur-fast) var(--cmd-ease), color var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign .modal-adminpro-general .modal-close-area .close:hover, .materialdesign .modal-adminpro-general .modal-close-area .close:focus { background: var(--cmd-blue-faint); color: var(--cmd-ink); } .materialdesign .modal-adminpro-general .modal-close-area { top: 16px; right: 16px; } .materialdesign .modal-body h2 { color: var(--cmd-blue-ink); } /* Danger dialogs: red accent bar and a warning icon before the title; the primary-colour title becomes ink */ .materialdesign .Customwidth-popup-WarningModal .modal-content::before { background: var(--cmd-red); } .materialdesign .Customwidth-popup-WarningModal .modal-header.header-color-modal h4 { display: flex; align-items: center; gap: 10px; color: var(--cmd-ink); } .materialdesign .Customwidth-popup-WarningModal .modal-header.header-color-modal h4::before { content: "\f071"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cmd-red-soft); color: var(--cmd-red); font: normal normal normal 16px/1 FontAwesome; } .materialdesign .Customwidth-popup-WarningModal .modal-footer .btn-danger { background: var(--cmd-red); border-color: var(--cmd-red); color: #fff; } .materialdesign .Customwidth-popup-WarningModal .modal-footer .btn-danger:hover, .materialdesign .Customwidth-popup-WarningModal .modal-footer .btn-danger:focus { background: color-mix(in srgb, var(--cmd-red) 85%, #000); border-color: color-mix(in srgb, var(--cmd-red) 85%, #000); } /* While a dialog's form posts (ajax-forms.js): spinner on the button, close controls dimmed */ .materialdesign .btn.cmd-btn-busy { opacity: .8; cursor: progress; } .cmd-modal-busy .modal-close-area .close, .cmd-modal-busy [data-dismiss="modal"] { opacity: .45; pointer-events: none; } /* Phones: dialogs become bottom sheets with the buttons always in view */ @media (max-width: 576px) { .modal .modal-dialog { position: absolute; left: 0; right: 0; bottom: 0; width: auto; margin: 0; } .modal.fade .modal-dialog { transform: translateY(40px); } .modal.in .modal-dialog { transform: none; } .materialdesign .modal-content { display: flex; flex-direction: column; max-height: 92vh; border-radius: var(--cmd-radius-lg) var(--cmd-radius-lg) 0 0; } .materialdesign .modal-content > form { display: flex; flex-direction: column; min-height: 0; } .materialdesign .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .materialdesign .modal-footer { position: sticky; bottom: 0; background: var(--cmd-white); } } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog, .modal.in .modal-dialog { transition: none; transform: none; } } /* cmdConfirm() (js/cmd-dialog.js): native "are you sure?" box */ .cmd-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--cmd-radius-lg); background: var(--cmd-white); color: var(--cmd-ink); box-shadow: var(--cmd-shadow-lg); overflow: hidden; animation: cmd-dialog-in var(--cmd-dur) var(--cmd-ease); } .cmd-dialog::backdrop { background: color-mix(in srgb, var(--cmd-blue-dark) 40%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cmd-fade-in var(--cmd-dur) var(--cmd-ease); } .cmd-dialog.cmd-dialog-out { animation: cmd-dialog-out 120ms var(--cmd-ease) forwards; } .cmd-dialog-box { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 24px 24px 20px; border-top: 4px solid var(--cmd-orange); } .cmd-dialog-danger .cmd-dialog-box { border-top-color: var(--cmd-red); } .cmd-dialog-icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-size: 18px; } .cmd-dialog-danger .cmd-dialog-icon { background: var(--cmd-red-soft); color: var(--cmd-red); } .cmd-dialog-title { margin: 6px 0 4px; color: var(--cmd-ink); font-size: var(--cmd-fs-lg); font-weight: 700; letter-spacing: -.01em; } .cmd-dialog-msg { margin: 0; color: var(--cmd-ink); font-size: var(--cmd-fs-base); line-height: var(--cmd-lh); overflow-wrap: anywhere; } .cmd-dialog-detail { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--cmd-radius-sm); background: var(--cmd-blue-faint); color: var(--cmd-ink); font-size: var(--cmd-fs-sm); font-weight: 600; } .cmd-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .cmd-dialog .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 16px; border-radius: var(--cmd-radius-sm); font-weight: 600; font-size: var(--cmd-fs-sm); } .cmd-dialog .btn-default { background: var(--cmd-white); border: 1px solid var(--cmd-line-strong); color: var(--cmd-ink); } .cmd-dialog .btn-default:hover, .cmd-dialog .btn-default:focus { background: var(--cmd-blue-faint); } .cmd-dialog .btn-primary { background: var(--cmd-blue); border: 1px solid var(--cmd-blue); color: var(--cmd-on-blue); } .cmd-dialog .btn-primary:hover, .cmd-dialog .btn-primary:focus { background: var(--cmd-blue-dark); } .cmd-dialog .cmd-btn-danger-solid { background: var(--cmd-red); border: 1px solid var(--cmd-red); color: #fff; } .cmd-dialog .cmd-btn-danger-solid:hover, .cmd-dialog .cmd-btn-danger-solid:focus { background: color-mix(in srgb, var(--cmd-red) 85%, #000); } .cmd-dialog .btn:focus-visible { outline: var(--cmd-focus-ring); outline-offset: 2px; } @keyframes cmd-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes cmd-dialog-out { to { opacity: 0; transform: scale(.97); } } @keyframes cmd-fade-in { from { opacity: 0; } } @media (max-width: 576px) { .cmd-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--cmd-radius-lg) var(--cmd-radius-lg) 0 0; } .cmd-dialog-actions .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .cmd-dialog, .cmd-dialog::backdrop, .cmd-dialog.cmd-dialog-out { animation: none; } } /* ---------- Toasts (js/ajax-forms.js) ---------- */ #ajax-toast-box { position: fixed; top: calc(var(--cmd-header-h) + 12px); right: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; width: 380px; max-width: calc(100vw - 36px); } .cmd-toast { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 16px; overflow: hidden; background: var(--cmd-white); color: var(--cmd-ink); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); box-shadow: var(--cmd-shadow-lg); font-size: var(--cmd-fs-base); line-height: 1.45; cursor: pointer; animation: cmd-toast-in var(--cmd-dur-slow) var(--cmd-ease); transition: opacity var(--cmd-dur) var(--cmd-ease), transform var(--cmd-dur) var(--cmd-ease); } .cmd-toast i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 15px; background: var(--cmd-green-soft); color: var(--cmd-green); } .cmd-toast.cmd-toast-error i { background: var(--cmd-red-soft); color: var(--cmd-red); } /* Time left: drains over --cmd-toast-ms (set per toast); paused while hovered */ .cmd-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cmd-green); transform-origin: left; animation: cmd-toast-drain var(--cmd-toast-ms, 4000ms) linear forwards; } .cmd-toast.cmd-toast-error .cmd-toast-bar { background: var(--cmd-red); } .cmd-toast.cmd-toast-paused .cmd-toast-bar { animation-play-state: paused; } .cmd-toast.cmd-toast-hide { opacity: 0; transform: translateX(24px); } @keyframes cmd-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes cmd-toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .cmd-toast { animation: none; } .cmd-toast-bar { animation: none; transform: scaleX(.5); } } /* Skeleton shimmer for content that is still loading (cards, tiles, table bodies) */ .cmd-skeleton { position: relative; overflow: hidden; border-radius: var(--cmd-radius-sm); background: color-mix(in srgb, var(--cmd-blue-soft) 70%, var(--cmd-white)); color: transparent !important; } .cmd-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cmd-white) 70%, transparent), transparent); animation: cmd-shimmer 1.2s infinite; } @keyframes cmd-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .cmd-skeleton::after { animation: none; } } /* In-place updates (js/pjax.js): the region being re-fetched is dimmed and inert */ .cmd-loading { opacity: .6; pointer-events: none; transition: opacity .15s; } @media (prefers-reduced-motion: reduce) { .cmd-loading { transition: none; } } /* ---------- Dashboard ---------- */ .cmd-dashboard .cmd-kpi { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 24px; background: #fff; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); box-shadow: var(--cmd-shadow); color: var(--cmd-ink); transition: transform .15s, box-shadow .15s, border-color .15s; } .cmd-dashboard a.cmd-kpi:hover, .cmd-dashboard a.cmd-kpi:focus { transform: translateY(-2px); border-color: var(--cmd-blue); box-shadow: 0 8px 22px color-mix(in srgb, var(--cmd-blue-dark) 14%, transparent); color: var(--cmd-ink); } .cmd-dashboard .cmd-kpi-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); } .cmd-dashboard .cmd-kpi-icon.cmd-accent { background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); } .cmd-dashboard .cmd-kpi-icon.cmd-ok { background: var(--cmd-green-soft); color: var(--cmd-green); } .cmd-dashboard .cmd-kpi-icon.cmd-bad { background: var(--cmd-red-soft); color: var(--cmd-red); } .cmd-dashboard .cmd-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--cmd-ink); font-variant-numeric: tabular-nums; } .cmd-dashboard .cmd-kpi-label { color: var(--cmd-muted); font-size: 13px; margin-top: 2px; } .cmd-dashboard .cmd-chart-card { padding: 18px 20px 20px; margin-bottom: 24px; } .cmd-dashboard .cmd-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cmd-dashboard .cmd-chart-head p { color: var(--cmd-muted); margin: 0; font-size: 13px; } .cmd-dashboard .cmd-chart-box { position: relative; height: 300px; } .cmd-dashboard .cmd-chart-box.cmd-short { height: 260px; } .cmd-dashboard .cmd-year-picker { display: flex; align-items: center; gap: 8px; } .cmd-dashboard .cmd-year-picker label { margin: 0; color: var(--cmd-muted); font-weight: 500; } .cmd-dashboard .cmd-year-picker select { width: auto; } .cmd-dashboard .cmd-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--cmd-muted); } .cmd-dashboard .cmd-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; } .cmd-dashboard .cmd-list { list-style: none; margin: 0; padding: 0; } .cmd-dashboard .cmd-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cmd-line); } .cmd-dashboard .cmd-list li:last-child { border-bottom: 0; } .cmd-dashboard .cmd-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .cmd-dashboard .cmd-list .cmd-grow { flex: 1; min-width: 0; } .cmd-dashboard .cmd-list .cmd-grow a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-dashboard .cmd-empty { color: var(--cmd-muted); text-align: center; padding: 18px 0; margin: 0; } /* ---------- Footer ---------- */ /* Quiet single line (Phase 2): school on the left, Commodatum credit on the right; stacks on phones */ .materialdesign .footer-copyright-area { padding: 0; background: transparent; border-top: 1px solid var(--cmd-line); box-shadow: none; } .materialdesign .footer-copy-right p, .materialdesign .footer-copy-right a { color: var(--cmd-blue-ink); } .materialdesign .footer-copy-right a:hover, .materialdesign .footer-copy-right a:focus { color: var(--cmd-orange-ink-dark); } .materialdesign .footer-copy-right { text-align: left; } /* brand_footer_html() in install/branding.php, shared with the public pages */ .cmd-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cmd-space-2) var(--cmd-space-4); padding: var(--cmd-space-3) 0; text-align: left; } .cmd-footer-brand { display: flex; align-items: center; gap: var(--cmd-space-2); min-width: 0; } .cmd-footer-logo { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .cmd-footer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .cmd-footer-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; line-height: 1.3; } .cmd-footer-name strong { color: var(--cmd-ink); font-size: var(--cmd-fs-sm); font-weight: 600; overflow-wrap: anywhere; } .cmd-footer-name span { color: var(--cmd-muted); font-size: var(--cmd-fs-xs); font-weight: 400; } .cmd-footer-name span::before { content: "\00B7"; margin-right: 6px; } .cmd-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--cmd-space-3); color: var(--cmd-muted); font-size: var(--cmd-fs-xs); font-weight: 400; } .cmd-footer-copy { white-space: nowrap; } .cmd-footer-powered { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .cmd-footer-powered strong { color: var(--cmd-ink); font-weight: 600; } .cmd-footer-mark { width: 16px; height: 16px; object-fit: contain; } .cmd-footer-sep { width: 1px; height: 14px; background: var(--cmd-line); } .cmd-public-footer .cmd-footer { max-width: 1400px; margin: 0 auto; padding: 0; } @media (max-width: 575px) { .cmd-footer { flex-direction: column; justify-content: center; text-align: center; } .cmd-footer-name { justify-content: center; } } /* ---------- Settings > Personalization (pages/personalization.php) ---------- */ #brand_form .sparkline12-graph, #cover_form .sparkline12-graph { text-align: left; } .cmd-brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cmd-gap); align-items: start; } .cmd-brand-logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cmd-brand-logo-box { width: 96px; height: 96px; flex: none; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px dashed var(--cmd-line-strong); border-radius: var(--cmd-radius); background: var(--cmd-blue-faint); } .cmd-brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; } /* The coloured-background slot shows the logo on the primary colour, as the public header will */ .cmd-brand-logo-box-dark { border-style: solid; border-color: transparent; background: var(--cmd-blue); } .cmd-brand-logo-box-dark img.cmd-logo-tile { padding: 4px; border-radius: 8px; background: var(--cmd-white); } .cmd-optional { color: var(--cmd-muted); font-weight: 400; } .cmd-brand-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cmd-brand-color { display: flex; align-items: center; gap: 10px; } .cmd-brand-color input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-radius-sm); background: var(--cmd-white); cursor: pointer; flex: none; } .cmd-brand-color .form-control { text-transform: uppercase; } .cmd-brand-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: var(--cmd-radius-sm); background: var(--cmd-blue-faint); color: var(--cmd-ink); font-size: var(--cmd-fs-sm); } .cmd-brand-note i { margin-top: 2px; color: var(--cmd-blue-ink); } .cmd-brand-note[hidden] { display: none; } /* Live preview: each sample is painted inline by the page script with the same colours the site will use */ .cmd-brand-preview { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius-lg); background: var(--cmd-blue-faint); } .cmd-brand-preview .pv-cap { margin: 4px 0 0; color: var(--cmd-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .cmd-brand-preview .pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--cmd-radius); } .cmd-brand-preview .pv-head img { width: 32px; height: 32px; object-fit: contain; } .cmd-brand-preview .pv-head img.cmd-logo-tile { padding: 2px; border-radius: 6px; background: #fff; } .cmd-brand-preview .pv-head strong { font-size: var(--cmd-fs-sm); overflow-wrap: anywhere; } .cmd-brand-preview .pv-app { display: grid; grid-template-columns: 140px 1fr; overflow: hidden; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: #fff; } .cmd-brand-preview .pv-side { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-right: 1px solid var(--cmd-line); } .cmd-brand-preview .pv-brand { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; } .cmd-brand-preview .pv-brand img { width: 24px; height: 24px; object-fit: contain; } .cmd-brand-preview .pv-brand strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--cmd-ink); font-size: 11.5px; line-height: 1.2; } .cmd-brand-preview .pv-nav { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-left: 3px solid transparent; border-radius: 6px; color: var(--cmd-ink); font-size: 12px; font-weight: 600; } .cmd-brand-preview .pv-nav-idle { font-weight: 500; } .cmd-brand-preview .pv-main { padding: 10px 12px; } .cmd-brand-preview .pv-title { display: block; margin-bottom: 4px; font-size: var(--cmd-fs-md); } .cmd-brand-preview .pv-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; } .cmd-brand-preview .pv-btn { display: inline-block; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; } .cmd-brand-preview .pv-dialog { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 4px solid; border-radius: var(--cmd-radius); background: #fff; box-shadow: var(--cmd-shadow-sm); } @media (max-width: 991px) { .cmd-brand-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cmd-brand-colors { grid-template-columns: 1fr; } .cmd-brand-preview .pv-app { grid-template-columns: 1fr; } .cmd-brand-preview .pv-side { border-right: 0; border-bottom: 1px solid var(--cmd-line); } } /* ---------- Login / register (index.php, register.php) ---------- */ #adminpro-form .cmd-auth-brand, #adminpro-register-form .cmd-auth-brand { margin-bottom: 20px; text-align: center; } #adminpro-form .cmd-auth-brand img, #adminpro-register-form .cmd-auth-brand img { display: block; width: 104px; max-width: 100%; height: auto; margin: 0 auto 12px; } #adminpro-form .cmd-auth-brand h1, #adminpro-register-form .cmd-auth-brand h1, #adminpro-register-form .login-title h1 { color: var(--cmd-blue-ink); font-size: 24px; line-height: 1.25; } #adminpro-form .login-input-head p, #adminpro-register-form .login-input-head p { color: var(--cmd-blue-ink); } .cmd-auth { max-width: 420px; margin: 0 auto; padding: 48px 16px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .cmd-auth.cmd-auth-wide { max-width: 560px; } .materialdesign .cmd-auth .login-bg { padding: 28px 28px 24px; } .cmd-auth .cmd-auth-brand h1 { margin: 0 0 4px; } .cmd-auth .cmd-auth-sub { color: var(--cmd-muted); margin: 0; font-size: 14px; } .cmd-auth .cmd-auth-back { margin: 0 0 12px; } .cmd-auth label { display: block; margin-bottom: 0; } .cmd-auth .login-input-area { margin-right: 0; } .cmd-auth .login-input-area input[type="text"], .cmd-auth .login-input-area input[type="password"] { height: 42px; margin: 6px 0 0; } .cmd-auth .login-input-area .login-user { top: 6px; height: 42px; line-height: 42px; border-left-color: #CDD5E5; } .cmd-auth select.form-control { height: 42px; margin-top: 6px; } .cmd-auth .login-button-pro { margin-top: 8px; } .cmd-auth .login-button { height: 44px; font-size: 15px; } .cmd-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; margin-bottom: 16px; border-radius: 8px; font-size: 14px; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); } .cmd-alert.cmd-alert-error { background: var(--cmd-red-soft); color: var(--cmd-red); border-left: 4px solid var(--cmd-red); } .cmd-alert i { margin-top: 2px; } /* ---------- Tablet / mobile: header scrolls with the page, no sidebar ---------- */ @media (max-width: 991px) { .materialdesign .header-top-area { margin-bottom: 0; } .fixed-header-top, .mini-navbar .fixed-header-top { position: relative; left: 0; } .content-inner-all, .mini-navbar .content-inner-all { margin-left: 0; } .materialdesign .mobile-menu-area { margin-bottom: var(--cmd-gap); } .materialdesign .cmd-header-row .logo-wrap-pro, .materialdesign .cmd-header-row .admin-logo { display: block; } } @media (max-width: 767px) { .cmd-dashboard .cmd-chart-box { height: 240px; } .materialdesign .fixed-table-toolbar .search input { min-width: 0; } .materialdesign .cmd-account-toggle .cmd-account-text { display: none; } /* keep the account menu a floating dropdown instead of Bootstrap's inline mobile list */ .materialdesign .cmd-header-row .navbar-nav .open .dropdown-menu { position: absolute; right: 0; left: auto; background: #fff; } } /* Dashboard spacing and compact stat cards in the 6-up row */ .cmd-dashboard .cmd-kpi { padding: 16px; gap: 12px; } .cmd-dashboard .cmd-kpi-label { line-height: 1.3; } /* Equal-height cards: the KPI row at every width (its columns have xs–lg widths), chart/list rows once they sit side by side */ .cmd-dashboard .cmd-kpi-row { display: flex; flex-wrap: wrap; } .cmd-dashboard .cmd-row-eq::before, .cmd-dashboard .cmd-row-eq::after { display: none; } .cmd-dashboard .cmd-row-eq > [class*="col-"] { display: flex; flex-direction: column; } .cmd-dashboard .cmd-row-eq > [class*="col-"] > .cmd-kpi, .cmd-dashboard .cmd-row-eq > [class*="col-"] > .cmd-card { flex: 1 1 auto; } @media (min-width: 1200px) { .cmd-dashboard .cmd-row-eq { display: flex; flex-wrap: wrap; } } @media (max-width: 767px) { .cmd-dashboard .cmd-kpi-row > [class*="col-"] { padding-left: 6px; padding-right: 6px; } .cmd-dashboard .cmd-kpi { padding: 12px; gap: 10px; margin-bottom: 12px; } .cmd-dashboard .cmd-kpi-icon { width: 36px; height: 36px; font-size: 16px; } .cmd-dashboard .cmd-kpi-value { font-size: 20px; } } @media (min-width: 1200px) and (max-width: 1499px) { .cmd-dashboard .cmd-kpi-icon { width: 40px; height: 40px; font-size: 18px; } .cmd-dashboard .cmd-kpi-value { font-size: 22px; } } /* Column filters (js/table-filters.js); toolbar: search + buttons on top (right), filters on their own full-width row below */ .materialdesign .fixed-table-toolbar:has(> .cmd-filters) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters)::before, .materialdesign .fixed-table-toolbar:has(> .cmd-filters)::after { display: none; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters) > * { float: none !important; margin: 0; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters) > .search { order: 1; margin-left: auto; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters) > .columns { order: 2; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters) > .cmd-filters { order: 3; flex: 1 1 100%; } .materialdesign .cmd-filters { float: left; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; } .materialdesign .cmd-filters .cmd-filter { width: auto; min-width: 140px; max-width: 220px; height: 34px; } .materialdesign .cmd-filters .cmd-filter.cmd-filter-on { border-color: var(--cmd-orange); background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); font-weight: 600; } .materialdesign .cmd-filters .cmd-filter option { background: var(--cmd-white); color: var(--cmd-ink); font-weight: 400; } /* the open list stays plain; only the closed control shows the active state */ .materialdesign .cmd-filters .cmd-filter-clear { color: var(--cmd-red); padding-left: 4px; } @media (max-width: 767px) { .materialdesign .cmd-filters { float: none; } .materialdesign .cmd-filters .cmd-filter { flex: 1 1 140px; max-width: none; } .materialdesign .fixed-table-toolbar:has(> .cmd-filters) > .search { flex: 1 1 auto; margin-left: 0; } } /* ---------- Row selection (js/table-select.js) ---------- */ .materialdesign th.cmd-select-col, .materialdesign td:has(> .cmd-row-pick) { width: 38px; text-align: center; } .materialdesign .cmd-select-all, .materialdesign .cmd-row-pick { width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; accent-color: var(--cmd-blue); } .materialdesign .btn.disabled[data-cmd-select-action] { opacity: .6; } /* ---------- Print Labels (pages/labels.php, js/labels.js) ---------- */ .cmd-labels [hidden] { display: none !important; } /* the flex rules below must not reveal hidden boxes */ .cmd-labels .sparkline12-graph { text-align: left; } .cmd-labels .cmd-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--cmd-orange); color: var(--cmd-on-orange); font-size: 13px; font-weight: 700; vertical-align: 2px; } .cmd-labels.mode-roll .cmd-sheet-only, .cmd-labels.mode-sheet .cmd-roll-only, .cmd-labels.kind-borrowers .cmd-copies-only { display: none !important; } .cmd-labels .cmd-mt-6 { margin-top: 6px; } .cmd-more { border: 1px solid var(--cmd-line); border-radius: 8px; margin: 4px 0 12px; background: var(--cmd-blue-faint); } .cmd-more > summary { cursor: pointer; padding: 9px 12px; color: var(--cmd-blue-ink); font-weight: 600; font-size: 13px; } .cmd-more[open] > summary { border-bottom: 1px solid var(--cmd-line); } .cmd-more-body { padding: 12px; background: var(--cmd-white); border-radius: 0 0 8px 8px; } .cmd-labels .cmd-inline-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cmd-labels .cmd-inline-fields .form-control { flex: 1 1 140px; width: auto; } .cmd-labels .cmd-results { border: 1px solid var(--cmd-line); border-radius: 8px; } .cmd-labels .cmd-results-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--cmd-line); background: var(--cmd-blue-faint); } .cmd-labels .cmd-results-list { max-height: 260px; overflow: auto; } .cmd-labels .cmd-result { display: grid; grid-template-columns: 20px auto 1fr; gap: 2px 8px; padding: 6px 10px; margin: 0; border-bottom: 1px solid var(--cmd-line); font-weight: 400; cursor: pointer; } .cmd-labels .cmd-result:hover { background: var(--cmd-blue-soft); } .cmd-labels .cmd-result .cmd-sub { grid-column: 2 / 4; } .cmd-labels .cmd-r-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-labels .cmd-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 0 12px 6px 0; cursor: pointer; } .cmd-labels .cmd-check input { margin: 0; } .cmd-labels .cmd-roll-only.form-group { display: flex; align-items: flex-end; } .cmd-labels .cmd-q-tools .btn[aria-pressed="true"], .cmd-labels .cmd-sheet-tabs .btn[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--cmd-orange); } .cmd-labels .form-control[readonly] { cursor: not-allowed; } .cmd-labels fieldset, .cmd-labels .cmd-more-body, .cmd-labels .cmd-sheet-only, .cmd-labels .cmd-measure, .cmd-labels .cmd-measure-fields { overflow-x: clip; } .cmd-labels .cmd-jump { display: none; } .cmd-labels .cmd-legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--cmd-muted); } .cmd-labels .cmd-legend-row li { display: inline-flex; align-items: center; gap: 5px; } .cmd-labels .cmd-sw { display: inline-block; width: 16px; height: 12px; border: 1px solid var(--cmd-muted); border-radius: 2px; background: var(--cmd-blue-faint); } .cmd-labels .cmd-sw.is-used { background: var(--cmd-line); background-image: linear-gradient(to top right, transparent 46%, var(--cmd-muted) 46% 54%, transparent 54%); } .cmd-labels .cmd-sw.is-label { background: var(--cmd-white); border-color: var(--cmd-blue); } .cmd-labels .cmd-sw.is-pinned { background: var(--cmd-white); border: 2px solid var(--cmd-orange); } .cmd-labels .cmd-sw.is-over { background: var(--cmd-red-soft); border: 1px dashed var(--cmd-red); } .cmd-labels .cmd-queue-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .cmd-labels .cmd-queue-tools { display: flex; align-items: center; gap: 6px; } .cmd-labels .cmd-queue-tools select { width: auto; } .cmd-labels .cmd-queue { list-style: none; margin: 6px 0 0; padding: 0; max-height: 360px; overflow: auto; border: 1px solid var(--cmd-line); border-radius: 8px; } .cmd-labels .cmd-queue-empty { padding: 16px; color: var(--cmd-muted); text-align: center; } .cmd-labels .cmd-queue-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--cmd-line); } .cmd-labels .cmd-queue-item:last-child { border-bottom: 0; } .cmd-labels .cmd-queue-item.cmd-pinning { background: var(--cmd-orange-soft); } .cmd-labels .cmd-q-main { min-width: 0; display: flex; flex-direction: column; } .cmd-labels .cmd-q-main .cmd-code { font-weight: 700; color: var(--cmd-blue-ink); } .cmd-labels .cmd-q-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-labels .cmd-q-tools { display: flex; align-items: center; gap: 4px; flex: none; } .cmd-labels .cmd-q-qty { width: 62px; text-align: center; } .cmd-labels fieldset { border: 0; } /* the browser/template default draws thin lines down the sides of each group */ .cmd-labels .cmd-legend { font-size: 13px; font-weight: 600; color: var(--cmd-ink); border: 0; margin: 0 0 6px; } .cmd-labels .cmd-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cmd-labels .cmd-choice label { margin: 0; cursor: pointer; position: relative; } .cmd-labels .cmd-choice input { position: absolute; opacity: 0; } .cmd-labels .cmd-choice span { display: block; height: 100%; padding: 9px 10px; border: 2px solid var(--cmd-line); border-radius: 8px; font-weight: 600; color: var(--cmd-blue-ink); font-size: 13px; line-height: 1.3; } .cmd-labels .cmd-choice small { color: var(--cmd-muted); font-weight: 400; } .cmd-labels .cmd-choice input:checked + span { border-color: var(--cmd-blue); background: var(--cmd-blue-soft); } .cmd-labels .cmd-choice input:focus-visible + span { outline: 2px solid var(--cmd-orange); outline-offset: 2px; } .cmd-labels .cmd-units { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .cmd-labels .cmd-measure { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; } .cmd-labels .cmd-measure-art { flex: none; width: 130px; } .cmd-labels .cmd-measure-fields { flex: 1; min-width: 0; } .cmd-labels .cmd-measure-art .pg { fill: var(--cmd-white); stroke: var(--cmd-ink); stroke-width: .8; } .cmd-labels .cmd-measure-art .lb { fill: var(--cmd-blue-soft); stroke: var(--cmd-blue); stroke-width: .8; } .cmd-labels .cmd-measure-art .dm { stroke: var(--cmd-orange); stroke-width: 1; } .cmd-labels .cmd-measure-art .t { fill: var(--cmd-orange-dark); font-size: 8px; font-weight: 700; } .cmd-labels .cmd-key { display: inline-block; min-width: 16px; padding: 0 3px; border-radius: 4px; background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); text-align: center; } .cmd-labels .cmd-toggles { display: flex; flex-wrap: wrap; } .cmd-labels .cmd-fill { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cmd-labels .cmd-fill .cmd-check { margin-bottom: 0; } .cmd-labels .cmd-sheet-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cmd-labels .cmd-map-tools { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .cmd-labels .cmd-map-buttons { display: flex; gap: 4px; flex-wrap: wrap; } .cmd-labels .cmd-preview-wrap { background: var(--cmd-blue-soft); border-radius: 8px; padding: 12px; text-align: center; } .cmd-labels .cmd-preview { width: 100%; max-height: 620px; touch-action: pan-y pinch-zoom; user-select: none; } .cmd-labels .cmd-preview.is-dragging { touch-action: none; } .cmd-labels.mode-roll .cmd-preview { max-width: 320px; max-height: 520px; } .cmd-labels .cmd-pv-page { fill: var(--cmd-white); stroke: var(--cmd-muted); stroke-width: .4; } .cmd-labels .cmd-pv-cell { fill: var(--cmd-blue-faint); stroke: var(--cmd-muted); stroke-width: .35; cursor: pointer; } .cmd-labels .cmd-pv-cell:hover, .cmd-labels .cmd-pv-cell:focus { fill: var(--cmd-blue-soft); stroke: var(--cmd-blue); outline: none; } .cmd-labels .cmd-pv-cell.is-used { fill: var(--cmd-line); stroke: var(--cmd-muted); } .cmd-labels .cmd-pv-cell.is-label { fill: var(--cmd-white); stroke: var(--cmd-blue); stroke-width: .5; } .cmd-labels .cmd-pv-cell.is-pinned { stroke: var(--cmd-orange); stroke-width: .9; } .cmd-labels .cmd-pv-cell.is-flash { fill: var(--cmd-orange-soft); stroke: var(--cmd-orange); stroke-width: 1.2; } .cmd-labels .cmd-pv-cell.is-over { fill: var(--cmd-red-soft); stroke: var(--cmd-red); stroke-dasharray: 1 .6; } .cmd-labels .cmd-pv-x { stroke: var(--cmd-muted); stroke-width: .4; pointer-events: none; } .cmd-labels .cmd-pv-num { fill: var(--cmd-muted); text-anchor: middle; pointer-events: none; } .cmd-labels .cmd-pv-code { fill: var(--cmd-ink); text-anchor: middle; font-weight: 700; pointer-events: none; } .cmd-labels .cmd-pv-bars { fill: var(--cmd-ink); opacity: .75; pointer-events: none; } .cmd-labels .cmd-pv-pin { fill: var(--cmd-orange); pointer-events: none; } .cmd-labels .cmd-pv-head { fill: var(--cmd-blue); text-anchor: middle; font-weight: 700; cursor: pointer; dominant-baseline: middle; paint-order: stroke; stroke: transparent; stroke-width: 3px; } .cmd-labels .cmd-pv-head:hover { fill: var(--cmd-orange-dark); } .cmd-labels .cmd-pv-cell:focus-visible, .cmd-labels .cmd-pv-head:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: 1px; } .cmd-labels .cmd-placement-table tbody tr:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: -2px; } .cmd-labels h1, .cmd-labels h2 { scroll-margin-top: calc(var(--cmd-header-h) + 56px); } .cmd-labels .cmd-used-text { margin-top: 10px; } .cmd-labels .cmd-totals { margin: 10px 0; font-weight: 600; color: var(--cmd-ink); } .cmd-labels .cmd-placement-scroll { max-height: 260px; overflow: auto; margin-bottom: 8px; } .cmd-labels .cmd-placement-table tbody tr { cursor: pointer; } .cmd-labels .cmd-queue, .cmd-labels .cmd-placement-scroll, .cmd-labels .cmd-sticky-col { position: relative; } /* keeps .sr-only text inside the scroll box, so it can't stretch the page */ .cmd-labels .cmd-print-steps { padding-left: 20px; margin: 0 0 12px; } .cmd-labels .cmd-print-steps li { margin-bottom: 12px; } .cmd-labels .cmd-print-steps .cmd-hint { display: block; margin-top: 4px; } .cmd-labels .cmd-after-print { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--cmd-green-soft); } .cmd-labels .cmd-label-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--cmd-blue-faint); color: var(--cmd-ink); } .cmd-labels .cmd-label-summary > span { margin-right: auto; } .cmd-labels .cmd-q-main .cmd-q-label, .cmd-labels .cmd-result .cmd-q-label { align-self: flex-start; margin-top: 3px; font-size: 11px; white-space: normal; max-width: 100%; } .cmd-labels .cmd-result .cmd-q-label { grid-column: 2 / 4; justify-self: start; } .cmd-label-state { margin-left: 4px; font-size: 11px; vertical-align: middle; } .cmd-label-count { margin-left: 2px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .cmd-labels .cmd-alert .close { margin-left: auto; } @media (min-width: 1200px) { .cmd-labels > .container-fluid > .row { display: flex; } .cmd-labels > .container-fluid > .row::before, .cmd-labels > .container-fluid > .row::after { display: none; } /* Map and Print stay in view beside the long setup column; the column scrolls itself when the window is short */ .cmd-labels .cmd-sticky-col { position: sticky; top: calc(var(--cmd-header-h) + var(--cmd-gap)); align-self: flex-start; max-height: calc(100vh - var(--cmd-header-h) - 2 * var(--cmd-gap)); overflow-y: auto; } } @media (min-width: 1200px) and (max-width: 1439px) { .cmd-labels .cmd-measure { flex-direction: column; } .cmd-labels .cmd-measure-art { align-self: center; } } @media (max-width: 1199px) { .cmd-labels .cmd-jump { display: flex; justify-content: space-between; position: sticky; top: var(--cmd-header-h); z-index: 5; padding: 6px 16px; margin-bottom: 8px; background: var(--cmd-blue-soft); border-bottom: 1px solid var(--cmd-line); font-size: 13px; font-weight: 600; } } @media (pointer: coarse) { .cmd-labels .cmd-drag-hint { display: none; } } @media (max-width: 767px) { .cmd-labels .cmd-preview.cmd-pv-wide .cmd-pv-num { display: none; } /* cells are named by their aria-label */ .cmd-labels .cmd-choice { grid-template-columns: 1fr; } .cmd-labels .cmd-measure { flex-direction: column; } .cmd-labels .cmd-measure-art { width: 160px; align-self: center; } } /* ---------- Public catalog (index.php) ---------- */ .cmd-public-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--cmd-header-h); padding: 8px var(--cmd-gap); background: var(--cmd-blue); border-bottom: 1px solid color-mix(in srgb, var(--cmd-on-blue) 14%, transparent); box-shadow: inset 0 -3px 0 var(--cmd-orange); color: var(--cmd-on-blue); } .materialdesign .cmd-public-brand { display: flex; align-items: center; gap: 10px; color: var(--cmd-on-blue); font-size: 18px; font-weight: 700; } .materialdesign .cmd-public-brand:hover, .materialdesign .cmd-public-brand:focus { color: var(--cmd-on-blue); } .cmd-public-brand img { width: 40px; height: 40px; object-fit: contain; } .cmd-public-brand img.cmd-logo-tile { background: #fff; border-radius: 8px; padding: 3px; } .materialdesign .cmd-public-brand:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: 2px; } .cmd-public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .cmd-public-actions form { margin: 0; } .cmd-volumes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; min-width: 190px; } .cmd-volumes li > span:first-child { white-space: nowrap; color: var(--cmd-muted); } .cmd-volumes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; } .cmd-volumes li + li { border-top: 1px solid var(--cmd-line); } .cmd-volumes .cmd-badge { font-size: 11px; } .cmd-isbn-line { display: block; margin-top: 4px; font-size: 11px; color: var(--cmd-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .cmd-volumes .cmd-isbn-line { margin-top: 0; } .cmd-public-user { font-weight: 600; } .cmd-public-main { max-width: 1400px; margin: 0 auto; padding: var(--cmd-gap); } .cmd-public-search { display: flex; gap: 8px; max-width: 760px; } .cmd-public-search .form-control { box-sizing: border-box; } .cmd-public-search .cmd-search-field { flex: none; width: auto; min-width: 120px; } /* "Search in" dropdown (?field=) */ .cmd-auth .cmd-search-books { margin-top: 10px; height: 44px; line-height: 30px; font-size: 15px; } .cmd-public .cmd-title { font-weight: 600; color: var(--cmd-ink); } .cmd-public-empty { padding: 22px; text-align: center; color: var(--cmd-muted); } .materialdesign .cmd-public-filters { float: none; margin: 14px 0 0; } /* search.php: server-side filters under the search box */ .cmd-public-footer { padding: var(--cmd-space-3) var(--cmd-gap); text-align: center; background: var(--cmd-white); border-top: 1px solid var(--cmd-line); color: var(--cmd-muted); font-size: var(--cmd-fs-xs); font-weight: 400; } @media (max-width: 768px) { .cmd-public-header { padding: 8px 16px; } .materialdesign .cmd-public-brand { font-size: 15px; } .cmd-public-main { padding: 16px; } } @media (max-width: 480px) { .cmd-public-search { flex-direction: column; width: 100%; } .cmd-public-long { display: none; } .materialdesign .cmd-public-filters .cmd-filter { flex-basis: 100%; } } /* Password strength meter (ui_password_meter() + js/password-meter.js) */ .cmd-pw-meter { margin-top: 8px; } .cmd-pw-bar { height: 6px; border-radius: 3px; background: var(--cmd-line); overflow: hidden; } .cmd-pw-fill { display: block; height: 100%; width: 0; background: var(--cmd-line); transition: width .2s ease, background-color .2s ease; } .cmd-pw-meter[data-level="1"] .cmd-pw-fill { width: 25%; background: var(--cmd-red); } .cmd-pw-meter[data-level="2"] .cmd-pw-fill { width: 50%; background: var(--cmd-amber); } .cmd-pw-meter[data-level="3"] .cmd-pw-fill { width: 75%; background: var(--cmd-blue); } .cmd-pw-meter[data-level="4"] .cmd-pw-fill { width: 100%; background: var(--cmd-green); } .cmd-pw-text { min-height: 18px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--cmd-muted); } .cmd-pw-meter[data-level="1"] .cmd-pw-text { color: var(--cmd-red); } .cmd-pw-meter[data-level="2"] .cmd-pw-text { color: var(--cmd-amber); } .cmd-pw-meter[data-level="3"] .cmd-pw-text { color: var(--cmd-blue-ink); } .cmd-pw-meter[data-level="4"] .cmd-pw-text { color: var(--cmd-green); } .cmd-pw-rules { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--cmd-muted); } .cmd-pw-rules li::before { content: "\2022"; margin-right: 5px; } .cmd-pw-rules li.is-met { color: var(--cmd-green); } .cmd-pw-rules li.is-met::before { content: "\2713"; } .cmd-pw-field { position: relative; } .cmd-pw-field .form-control { padding-right: 44px; } .cmd-pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--cmd-muted); font-size: 16px; cursor: pointer; } .cmd-auth .login-input-area .cmd-pw-toggle { top: 6px; bottom: auto; width: 42px; height: 42px; border-left: 1px solid var(--cmd-line); } .cmd-pw-toggle:hover, .cmd-pw-toggle[aria-pressed="true"] { color: var(--cmd-blue-ink); } .cmd-pw-toggle:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: -2px; } .cmd-auth .login-input-area .cmd-pw-input { padding-right: 48px; } /* Add Book page: the template centres text inside .login-form-area; keep form labels left-aligned like the modals */ .cmd-narrow > form.sparkline12-list .sparkline12-graph { text-align: left; } .cmd-scan-card input[type=date][readonly]::-webkit-calendar-picker-indicator { display: none; } /* Copies page: call number, ISBN and edition under the title */ .cmd-book-summary { margin: 2px 0 6px; font-size: 13px; } /* Add Copies: range line under Accession Number / Quantity */ .cmd-copy-range { margin: -6px 0 12px; } .cmd-copy-range:empty { display: none; } /* Feedback icons inside a grid column: anchor to the input, not the column gutter (Add Books Book ID lock) */ .has-feedback[class*="col-"] > .form-control-feedback { right: 15px; color: var(--cmd-muted); } /* Column picker on phones: the toolbar wraps the button to the left, so open the menu rightwards instead of off-screen */ @media (max-width: 767px) { .fixed-table-toolbar .columns .dropdown-menu { left: 0; right: auto; max-width: calc(100vw - 32px); } } /* ---------- Analytics + dashboard chart cards (pages/analytics.php, pages/dashboard.php, js/cmd-charts.js) ---------- */ .cmd-analytics-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; } .materialdesign .cmd-analytics-head .cmd-card-title { margin: 0; font-size: 22px; } .cmd-analytics-head .cmd-hint { margin: 2px 0 0; font-size: 13px; } .cmd-analytics-tools { display: flex; gap: 8px; flex-wrap: wrap; } .materialdesign .cmd-analytics-controls { padding: 18px 18px 20px; margin-bottom: 24px; } .materialdesign .cmd-analytics-controls label, .cmd-control-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--cmd-muted); } .cmd-analytics-controls .cmd-hint:empty { display: none; } @media (min-width: 992px) { .cmd-analytics-controls { position: sticky; top: 80px; } } .cmd-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; } .cmd-chart-controls .cmd-push { margin-left: auto; display: flex; gap: 8px; align-items: center; } .cmd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cmd-range-host { position: relative; } .materialdesign .cmd-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--cmd-line); border-radius: 999px; background: var(--cmd-white); color: var(--cmd-ink); font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .12s, border-color .12s; } .materialdesign .cmd-chip:hover { border-color: var(--cmd-blue); } .materialdesign .cmd-chip.is-active { background: var(--cmd-blue-soft); border-color: var(--cmd-blue); color: var(--cmd-blue-ink-dark); font-weight: 600; } .materialdesign .cmd-chip:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 2px; } .materialdesign select.cmd-chip { height: 30px; padding: 0 8px; width: auto; } .cmd-lost-chips { margin-top: 8px; } .cmd-range-pop { position: absolute; z-index: 1050; top: 100%; left: 0; width: 320px; max-width: 100%; margin-top: 6px; padding: 14px; background: var(--cmd-white); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); box-shadow: 0 12px 32px color-mix(in srgb, var(--cmd-blue-dark) 18%, transparent); } .cmd-range-pop[hidden] { display: none; } .cmd-range-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .cmd-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .materialdesign .cmd-range-fields label { display: block; margin: 0 0 3px; font-size: 12px; font-weight: 600; color: var(--cmd-muted); } .cmd-range-fields .form-control { padding: 4px 6px; } .cmd-range-msg { min-height: 18px; margin: 6px 0; font-size: 12px; color: var(--cmd-red); } .cmd-range-actions { display: flex; justify-content: flex-end; gap: 6px; } .materialdesign .cmd-type-group .btn.active { background: var(--cmd-blue); border-color: var(--cmd-blue); color: var(--cmd-on-blue); box-shadow: none; } .materialdesign .cmd-type-group .btn[disabled] { opacity: .45; } .cmd-analytics-controls .cmd-type-group { display: flex; flex-wrap: wrap; } .cmd-analytics-controls .cmd-type-group .btn { flex: 1 1 auto; } .cmd-dashboard .cmd-chart-box.cmd-chart-tall { height: 420px; } .cmd-is-loading .cmd-chart-box { opacity: .55; transition: opacity .15s; } .cmd-analytics-alert { margin: 0 0 10px; } /* Analytics KPI tiles (drawn by js/analytics.js from payload.kpis): value, label, change badge vs the previous period, hint */ .cmd-analytics .cmd-kpi-body { flex: 1; min-width: 0; } .cmd-analytics .cmd-kpi-value.cmd-kpi-text { font-size: 16px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .cmd-kpi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; color: var(--cmd-muted); line-height: 1.3; } .cmd-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--cmd-blue-faint); color: var(--cmd-muted); } .cmd-delta-good { background: var(--cmd-green-soft); color: var(--cmd-green); } .cmd-delta-bad { background: var(--cmd-red-soft); color: var(--cmd-red); } .cmd-delta .fa { font-size: 13px; } /* Highlight sentences above the analytics chart */ .cmd-insights { list-style: none; margin: 0 0 14px; padding: 10px 14px; background: var(--cmd-blue-faint); border: 1px solid var(--cmd-line); border-radius: 8px; font-size: 13px; color: var(--cmd-ink); } .cmd-insights[hidden] { display: none; } .cmd-insights li + li { margin-top: 4px; } .cmd-insights .fa { color: var(--cmd-orange-ink); width: 14px; text-align: center; } .cmd-overlays { border: 0; padding: 0; margin: 0 0 15px; min-width: 0; } .cmd-overlays legend.cmd-control-label { border: 0; width: auto; } .cmd-overlays .checkbox { margin: 0 0 4px; } .cmd-overlays .checkbox label { display: inline-flex; align-items: center; gap: 8px; padding-left: 0; font-size: 13px; font-weight: 400; color: var(--cmd-ink); } .cmd-overlays .checkbox input[type="checkbox"] { position: static; opacity: 1; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cmd-blue); } .cmd-overlays .checkbox input[disabled] { cursor: not-allowed; } .cmd-dashboard .cmd-chart-card .cmd-hint:empty { display: none; } .cmd-table-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--cmd-line); border-radius: 8px; } .cmd-table-scroll[hidden] { display: none; } .materialdesign .cmd-table-scroll .table { margin: 0; } .materialdesign .cmd-table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--cmd-white); } .materialdesign .cmd-table-scroll tfoot th, .materialdesign .cmd-table-scroll tfoot td { font-weight: 700; background: var(--cmd-blue-faint); } .cmd-chart-card .cmd-table-scroll { margin-top: 14px; } .cmd-split .cmd-format-menu input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--cmd-orange); } .cmd-dashboard .cmd-chart-head a.cmd-chart-link { font-size: 13px; white-space: nowrap; } @media (max-width: 767px) { .cmd-dashboard .cmd-chart-box.cmd-chart-tall { height: 320px; } .cmd-chart-controls .cmd-push { margin-left: 0; } .cmd-analytics-tools { width: 100%; } } /* ---------- Custom Report builder (pages/customreport.php, js/customreport.js) ---------- */ @media (min-width: 992px) { .cmd-analytics-controls.cmd-cr-builder { position: static; } } .cmd-cr-step { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--cmd-line); } .cmd-cr-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .materialdesign .cmd-cr-step-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--cmd-ink); } .cmd-cr-step-title span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-size: 12px; } .materialdesign .cmd-cr-builder label { margin-top: 8px; } .cmd-cr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cmd-cr-builder .cmd-hint { margin-top: 6px; } .cmd-cr-builder .cmd-type-group { margin-bottom: 4px; } .cmd-cr-order { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--cmd-line); border-radius: 8px; max-height: 260px; overflow-y: auto; } .cmd-cr-order li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--cmd-line); font-size: 13px; } .cmd-cr-order li:last-child { border-bottom: 0; } .cmd-cr-order-btns { display: flex; gap: 3px; flex: none; } .cmd-cr-filter { margin: 0 0 8px; border: 1px solid var(--cmd-line); border-radius: 8px; padding: 0 10px; } .cmd-cr-filter > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--cmd-ink); cursor: pointer; } .cmd-cr-filter[open] > summary { border-bottom: 1px solid var(--cmd-line); } .cmd-cr-checks { padding: 4px 0; } .cmd-cr-scroll { max-height: 190px; overflow-y: auto; } .materialdesign .cmd-cr-group { margin: 0 0 6px; padding: 0; border: 0; } .materialdesign .cmd-cr-group legend { margin: 6px 0 2px; padding: 0; border: 0; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--cmd-muted); } .materialdesign .cmd-cr-builder label.cmd-cr-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 2px; font-size: 13px; font-weight: 400; color: var(--cmd-ink); cursor: pointer; } .cmd-cr-check input { flex: none; margin: 0; accent-color: var(--cmd-blue); } .materialdesign .cmd-cr-builder label.cmd-cr-flag { margin: 0 0 8px; } .cmd-cr-field { margin-bottom: 8px; } /* normalize.css (loaded after Bootstrap) makes search inputs content-box: size them like the other controls; js/customreport.js adds its own clear button */ .cmd-cr-builder input[type="search"].form-control { box-sizing: border-box; } .cmd-cr-search { position: relative; } .cmd-cr-builder .cmd-cr-search .form-control { padding-right: 32px; } .cmd-cr-search-clear { position: absolute; top: 0; right: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--cmd-muted); cursor: pointer; } .cmd-cr-search-clear[hidden] { display: none; } .cmd-cr-search-clear:hover { color: var(--cmd-ink); } .cmd-cr-search-clear:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: -2px; border-radius: 6px; } .cmd-cr-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cmd-cr-applied { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; } .cmd-cr-applied li { padding: 3px 10px; border-radius: 999px; background: var(--cmd-blue-faint); border: 1px solid var(--cmd-line); font-size: 12px; color: var(--cmd-ink); } .cmd-cr-preview { max-height: 560px; } .materialdesign .cmd-cr-preview td { white-space: nowrap; } @media (max-width: 767px) { .cmd-cr-sort { grid-template-columns: 1fr; } } /* ---------- Inventory Check (pages/inventory_check.php, js/inventory-check.js) ---------- */ .cmd-inv-scan .input-group { width: 240px; } .materialdesign .cmd-inv-scan .form-control { height: 38px; font-size: 15px; } .cmd-inv-start-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto; gap: 12px; align-items: end; } .cmd-inv-start-fields .form-group { margin-bottom: 0; } .cmd-inv-start { margin-bottom: 18px; } .materialdesign .cmd-inv-h2 { margin: 6px 0 10px; font-size: 16px; font-weight: 700; color: var(--cmd-blue-ink); } .cmd-inv-live { min-height: 28px; margin: 4px 0 10px; } .cmd-inv-live .cmd-badge { white-space: normal; border-radius: 10px; } .cmd-inv-chips { margin-bottom: 12px; } .cmd-inv-n { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--cmd-blue-faint); color: var(--cmd-muted); font-size: 12px; font-weight: 600; text-align: center; } .materialdesign .cmd-chip.is-active .cmd-inv-n { background: var(--cmd-white); color: var(--cmd-blue-ink-dark); } .cmd-inv-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--cmd-line); border-radius: 8px; background: var(--cmd-blue-faint); } .cmd-inv-bulk[hidden] { display: none; } .cmd-head-actions[hidden] { display: none; } /* its display:flex would otherwise show Inventory Check controls with no session open */ .cmd-inv-bulk-n { font-weight: 600; color: var(--cmd-ink); margin-right: 4px; } .materialdesign #inv_table td.cmd-actions .btn + .btn { margin-left: 4px; } .materialdesign #inv_table tr.cmd-inv-flash > td { animation: cmd-inv-flash 1.6s ease-out; } @keyframes cmd-inv-flash { from { background-color: var(--cmd-orange-soft); } to { background-color: transparent; } } .cmd-inv-loans { margin-top: 16px; } .cmd-inv-loans[hidden] { display: none; } .materialdesign .cmd-inv-loans summary { cursor: pointer; font-weight: 600; color: var(--cmd-blue-ink); margin-bottom: 8px; } .cmd-inv .dropdown-menu .cmd-sub { display: block; padding-left: 18px; } /* Continuous scan dialog: big scan box, newest scans on top in a scrolling list */ .materialdesign .cmd-inv-cont #inv_cont_scan { height: 44px; font-size: 18px; } .cmd-inv-cont #inv_cont_form { margin-bottom: 6px; } .cmd-inv-cont .modal-body .cmd-inv-h2 { /* beats modals.css .modal-adminpro-general .modal-body h2 */ margin: 6px 0 8px; font-size: 16px; font-weight: 700; color: var(--cmd-blue-ink); } .cmd-inv-cont-list { max-height: 50vh; overflow-y: auto; } .cmd-inv-cont-list thead th { position: sticky; top: 0; background: var(--cmd-white); z-index: 1; } .materialdesign #inv_cont_table tr.cmd-inv-flash > td { animation: cmd-inv-flash 1.6s ease-out; } form.cmd-mark-found, form.cmd-mark-missing { display: inline; margin: 0; } .cmd-cell-action { margin-top: 6px; } /* a button under a cell's badge (Books > All copies: Mark found) */ #return-markfound { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } #return-markfound[hidden] { display: none; } @media (max-width: 767px) { .cmd-inv-scan .input-group { width: auto; flex: 1; } .cmd-inv-start-fields { grid-template-columns: 1fr; } .cmd-inv .cmd-head-actions > .btn, .cmd-inv .cmd-head-actions > .btn-group { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .materialdesign #inv_table tr.cmd-inv-flash > td, .materialdesign #inv_cont_table tr.cmd-inv-flash > td { animation: none; background-color: var(--cmd-orange-soft); } } /* ---------- Declare lost (pages/returnbook.php) ---------- */ .materialdesign .cmd-lost-btn { margin-top: 10px; } .cmd-lost-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--cmd-line); border-radius: 8px; background: var(--cmd-blue-faint); } .cmd-lost-summary dt { font-weight: 600; color: var(--cmd-muted); } .cmd-lost-summary dd { margin: 0; color: var(--cmd-ink); overflow-wrap: anywhere; } @media (max-width: 480px) { .cmd-lost-summary { grid-template-columns: 1fr; } .cmd-lost-summary dd { margin-bottom: 6px; } } /* ---------- Sortable plain tables (cmdSortPlainTable in js/table-filters.js) ---------- */ .materialdesign button.cmd-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; text-align: inherit; cursor: pointer; } .materialdesign button.cmd-sort .fa { color: var(--cmd-muted); font-size: 11px; } .materialdesign th[aria-sort="ascending"] button.cmd-sort .fa, .materialdesign th[aria-sort="descending"] button.cmd-sort .fa { color: var(--cmd-blue-ink); } .materialdesign button.cmd-sort:hover { color: var(--cmd-blue-ink); } .materialdesign button.cmd-sort:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 2px; border-radius: 4px; } /* ---------- Email templates (pages/email_templates.php, js/email-templates.js) ---------- */ .cmd-tpl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .cmd-tpl-actions { display: flex; gap: 8px; margin-left: auto; } .cmd-tpl-state:empty { display: none; } .cmd-tpl-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--cmd-gap); align-items: start; } @media (max-width: 1199px) { .cmd-tpl-grid { grid-template-columns: minmax(0, 1fr); } } .cmd-tpl-editor { height: 720px; border-top: 1px solid var(--cmd-line); } .cmd-tpl-narrow { display: none; padding: 0 20px 16px; } @media (max-width: 767px) { .cmd-tpl-editor { display: none; } .cmd-tpl-narrow { display: block; } } .cmd-tpl-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cmd-tpl-envelope { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 13px; } .cmd-tpl-envelope dt { color: var(--cmd-muted); font-weight: 400; } .cmd-tpl-envelope dd { margin: 0; color: var(--cmd-ink); overflow-wrap: anywhere; } #tpl_prev_subject { font-weight: 700; } .cmd-tpl-frame { display: flex; justify-content: center; background: var(--cmd-blue-faint); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); padding: 8px; } #tpl_preview { display: block; width: 100%; max-width: 100%; height: 560px; border: 1px solid var(--cmd-line); border-radius: 6px; background: var(--cmd-white); transition: width .2s; } @media (prefers-reduced-motion: reduce) { #tpl_preview { transition: none; } } #tpl_prev_warn { display: block; margin-bottom: 8px; white-space: normal; border-radius: 8px; } #tpl_prev_warn[hidden] { display: none; } .cmd-tpl-sub { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--cmd-ink); } /* GrapesJS panels in the brand colours */ .cmd-tpl .gjs-one-bg { background-color: var(--cmd-blue-dark); } .cmd-tpl .gjs-two-color { color: #E8EDF8; } .cmd-tpl .gjs-three-bg { background-color: var(--cmd-orange); color: var(--cmd-on-orange); } .cmd-tpl .gjs-four-color, .cmd-tpl .gjs-four-color-h:hover { color: var(--cmd-orange-ink); } /* Blocks as one row each (icon + name): readable in the narrow side panel */ .cmd-tpl .gjs-block { display: flex; align-items: center; gap: 10px; width: calc(100% - 10px); min-height: 0; margin: 4px 5px; padding: 8px 10px; text-align: left; } .cmd-tpl .gjs-block__media { margin: 0; flex: none; width: 30px; text-align: center; } .cmd-tpl .gjs-block__media i, .cmd-tpl .gjs-block__media svg { font-size: 20px !important; width: 22px; height: 22px; } .cmd-tpl .gjs-block-label { font-size: 12px; line-height: 1.3; } .cmd-tpl .sparkline12-graph, .cmd-tpl .cmd-card-head { text-align: left; } .cmd-tpl-fields { padding: 0 20px 12px; } .cmd-tpl-fields .cmd-hint { margin-top: 0; } /* ---------- Public landing page (index.php), shared public header, login page (login.php) ---------- */ .cmd-skip { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 8px 14px; border-radius: 8px; background: var(--cmd-white); color: var(--cmd-blue-ink); font-weight: 700; box-shadow: var(--cmd-shadow); } .materialdesign .cmd-skip:focus { top: 8px; } .cmd-public-nav { display: flex; gap: 4px; margin-left: 12px; } .materialdesign .cmd-public-nav a { padding: 6px 12px; border-radius: 8px; color: var(--cmd-on-blue); font-weight: 600; opacity: .85; } .materialdesign .cmd-public-nav a:hover, .materialdesign .cmd-public-nav a:focus { opacity: 1; color: var(--cmd-on-blue); background: color-mix(in srgb, var(--cmd-on-blue) 12%, transparent); } .materialdesign .cmd-public-nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--cmd-orange); border-radius: 8px 8px 0 0; } .materialdesign .cmd-public-nav a:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: 2px; } .cmd-landing .cmd-public-main { display: flex; flex-direction: column; gap: 28px; padding-top: 0; padding-bottom: 40px; } .cmd-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(-1 * var(--cmd-gap)); padding: 64px var(--cmd-gap) 88px; color: var(--cmd-on-blue); text-align: center; background: radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--cmd-white) 12%, transparent) 0, transparent 40%), linear-gradient(135deg, var(--cmd-blue) 0%, var(--cmd-blue-dark) 100%); } /* Faint dot texture over the hero, fading out towards the bottom. It is the no-JS look: js/public-home.js adds .is-live and the canvas dots below take over. */ .cmd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--cmd-on-blue) 16%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); pointer-events: none; transition: opacity 700ms var(--cmd-ease); } .cmd-hero.is-live::before { opacity: 0; } .cmd-hero > * { max-width: 760px; margin-left: auto; margin-right: auto; } /* Secondary-colour glow: rests top right, then glides after the pointer (js/public-home.js sets the transform) */ .cmd-hero > .cmd-hero-glow { position: absolute; left: 85%; top: 10%; z-index: -1; width: clamp(420px, 62vw, 960px); max-width: none; margin: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cmd-orange) 32%, transparent) 0, color-mix(in srgb, var(--cmd-orange) 11%, transparent) 55%, transparent 100%); transform: translate(-50%, -50%); pointer-events: none; will-change: transform; } .cmd-hero.is-live > .cmd-hero-glow { left: 0; top: 0; } /* Drifting dots, larger and brighter near the pointer; same fade towards the bottom as the static texture */ .cmd-hero > .cmd-hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0; transition: opacity 700ms var(--cmd-ease); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%); } .cmd-hero.is-live > .cmd-hero-canvas { opacity: 1; } .cmd-hero-kicker { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cmd-orange-soft); } .materialdesign .cmd-hero h1 { margin-top: 0; margin-bottom: 12px; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: var(--cmd-on-blue); } .cmd-hero-sub { margin-bottom: 26px; font-size: 16px; line-height: 1.5; opacity: .9; } .cmd-hero-search { position: relative; display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: var(--cmd-white); box-shadow: 0 18px 40px color-mix(in srgb, var(--cmd-blue-dark) 40%, transparent), 0 0 0 6px color-mix(in srgb, var(--cmd-white) 14%, transparent); } .cmd-hero-field { flex: none; height: 50px; padding: 0 10px; border: 0; border-right: 1px solid var(--cmd-line); border-radius: 10px; background: transparent; color: var(--cmd-ink); font-size: 15px; font-weight: 600; } /* "Search in" dropdown */ .cmd-hero-field:focus { outline: 2px solid var(--cmd-blue); outline-offset: 0; } .cmd-hero-input { position: relative; flex: 1; min-width: 0; display: flex; } .cmd-hero-input > .fa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cmd-muted); font-size: 18px; line-height: 1; pointer-events: none; } .cmd-hero-search input { flex: 1; min-width: 0; height: 50px; padding: 0 14px 0 46px; border: 0; border-radius: 10px; background: transparent; color: var(--cmd-ink); font-size: 17px; } .cmd-hero-search input:focus { outline: 2px solid var(--cmd-blue); outline-offset: 0; } .cmd-hero-search .btn { height: 50px; padding: 0 26px; border-radius: 10px; font-size: 16px; font-weight: 700; } .cmd-hero-sections { --cmd-more-dur: 480ms; --cmd-more-ease: cubic-bezier(.22, 1, .36, 1); margin-top: 22px; } .cmd-hero-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .cmd-hero-label { font-size: 14px; opacity: .85; } .materialdesign .cmd-hero-sections .cmd-chip { height: 34px; border-color: color-mix(in srgb, var(--cmd-on-blue) 35%, transparent); background: color-mix(in srgb, var(--cmd-on-blue) 10%, transparent); color: var(--cmd-on-blue); font-weight: 600; } .materialdesign .cmd-hero-sections .cmd-chip:hover, .materialdesign .cmd-hero-sections .cmd-chip:focus { border-color: var(--cmd-on-blue); background: color-mix(in srgb, var(--cmd-on-blue) 20%, transparent); color: var(--cmd-on-blue); } .materialdesign .cmd-hero-sections .cmd-chip:focus-visible { outline-color: var(--cmd-orange); } .cmd-hero-sections .cmd-chip .cmd-chip-n { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cmd-on-blue) 20%, transparent); font-size: 12px; } .cmd-hero-sections .cmd-chip .fa-star { color: var(--cmd-orange-soft); font-size: 12px; } /* "+N more": a button at the end of the row. Its panel opens underneath by animating the grid row 0fr -> 1fr (a height that needs no measuring), the rest of the page glides down with it, and the extra chips fade down one after another. Collapsed, the panel is visibility:hidden so its links leave the tab order. Without JS (no .is-js) the button is hidden and the panel is simply open. */ .materialdesign .cmd-hero-more-btn { font-family: inherit; } .cmd-hero-more-btn .fa { font-size: 11px; transition: transform var(--cmd-more-dur) var(--cmd-more-ease); } .cmd-hero-more-btn[aria-expanded="true"] .fa { transform: rotate(180deg); } .cmd-more-label { display: inline-grid; } .cmd-more-label > span { grid-area: 1 / 1; text-align: center; transition: opacity 220ms var(--cmd-ease), transform 320ms var(--cmd-more-ease); } .cmd-more-label .cmd-more-open, .cmd-hero-more-btn[aria-expanded="true"] .cmd-more-closed { opacity: 0; transform: translateY(6px); } .cmd-hero-more-btn[aria-expanded="true"] .cmd-more-closed { transform: translateY(-6px); } .cmd-hero-more-btn[aria-expanded="true"] .cmd-more-open { opacity: 1; transform: none; } .cmd-hero-more-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--cmd-more-dur) var(--cmd-more-ease), visibility 0s linear var(--cmd-more-dur); } .cmd-hero-sections.is-open .cmd-hero-more-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; } .cmd-hero-more-list { min-height: 0; overflow: hidden; } .cmd-hero-more-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 6px 6px; } .cmd-hero-more-chips .cmd-chip { opacity: 0; transform: translateY(-10px); transition: opacity 140ms var(--cmd-ease), transform 140ms var(--cmd-ease), background-color .12s, border-color .12s; } .cmd-hero-sections.is-open .cmd-hero-more-chips .cmd-chip { opacity: 1; transform: none; transition: opacity 300ms var(--cmd-ease) calc(var(--i, 0) * 28ms + 80ms), transform 420ms var(--cmd-more-ease) calc(var(--i, 0) * 28ms + 80ms), background-color .12s, border-color .12s; } .cmd-hero-sections:not(.is-js) .cmd-hero-more-btn { display: none; } .cmd-hero-sections:not(.is-js) .cmd-hero-more-panel { grid-template-rows: 1fr; visibility: visible; } .cmd-hero-sections:not(.is-js) .cmd-hero-more-chips .cmd-chip { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cmd-hero-sections { --cmd-more-dur: 0ms; } .cmd-more-label > span, .cmd-hero-more-chips .cmd-chip, .cmd-hero-sections.is-open .cmd-hero-more-chips .cmd-chip { transition: none; } .cmd-hero::before, .cmd-hero > .cmd-hero-canvas { transition: none; } } .cmd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; width: 100%; margin: -60px auto 0; padding: 0; list-style: none; position: relative; } .cmd-stats li { padding: 18px 20px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: var(--cmd-white); box-shadow: var(--cmd-shadow); text-align: center; } .cmd-stats strong { display: block; color: var(--cmd-blue-ink); font-size: 28px; font-weight: 800; line-height: 1.1; } .cmd-stats span { color: var(--cmd-muted); font-size: 14px; } .cmd-shelf, .cmd-info { max-width: 1200px; width: 100%; margin: 0 auto; } .cmd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .materialdesign .cmd-section-head h2 { margin: 0; color: var(--cmd-ink); font-size: 22px; font-weight: 700; } .materialdesign .cmd-section-head a { font-weight: 600; white-space: nowrap; } .cmd-section-head-actions { display: flex; align-items: center; gap: 14px; } /* New arrivals: a few cards stay at the left and scroll natively; when they overflow, js/public-home.js (.is-marquee) loops them slowly. Pause: the button, hovering or focusing a card. Reduced motion keeps the native scroll. */ .materialdesign .cmd-shelf-pause { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--cmd-line-strong); border-radius: var(--cmd-radius-pill); background: var(--cmd-white); color: var(--cmd-muted); font-size: 12px; line-height: 1; cursor: pointer; transition: color var(--cmd-dur-fast), border-color var(--cmd-dur-fast), background-color var(--cmd-dur-fast); } .materialdesign .cmd-shelf-pause:hover { border-color: var(--cmd-blue); color: var(--cmd-blue-ink); background: var(--cmd-blue-soft); } .cmd-shelf:not(.is-marquee) .cmd-shelf-pause { display: none; } .cmd-shelf.is-marquee .cmd-shelf-viewport { overflow: hidden; overflow: clip; touch-action: pan-y pinch-zoom;-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); } .cmd-shelf.is-marquee .cmd-shelf-list { width: max-content; padding-left: 0; padding-right: 0; overflow: visible; scroll-snap-type: none; will-change: transform; } .cmd-shelf-list { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 16px; margin: 0; padding: 4px 4px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; overscroll-behavior-x: contain; } .cmd-book-card { display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; } .materialdesign .cmd-book-card > a { display: flex; flex-direction: column; gap: 4px; color: var(--cmd-ink); } .materialdesign .cmd-book-card > a:hover .cmd-book-title, .materialdesign .cmd-book-card > a:focus .cmd-book-title { color: var(--cmd-blue-ink); text-decoration: underline; } .materialdesign .cmd-book-card > a:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 4px; border-radius: 6px; } .cmd-book-cover { position: relative; display: block; aspect-ratio: 2 / 3; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: var(--cmd-blue-soft); box-shadow: var(--cmd-shadow); } .cmd-book-cover .cmd-cover { display: flex; width: 100%; height: 100%; object-fit: cover; } .cmd-cover-empty { align-items: center; justify-content: center; background: linear-gradient(160deg, var(--cmd-blue-soft) 0%, var(--cmd-blue-faint) 100%); color: var(--cmd-blue-ink); font-size: 34px; font-weight: 800; letter-spacing: .04em; } .cmd-book-tag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--cmd-orange); color: var(--cmd-on-orange); font-size: 11px; font-weight: 700; } .cmd-book-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.3; } .cmd-book-author { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--cmd-muted); font-size: 13px; } .cmd-book-card .cmd-badge { align-self: flex-start; white-space: normal; } .cmd-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .cmd-info-card { padding: 20px 22px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: var(--cmd-white); box-shadow: var(--cmd-shadow); } .materialdesign .cmd-info-card h3 { margin: 0 0 12px; color: var(--cmd-ink); font-size: 17px; font-weight: 700; } .cmd-info-card h3 .fa { width: 20px; color: var(--cmd-orange-ink); } .cmd-info-card p { margin-bottom: 10px; } .cmd-info-card .cmd-info-label { margin-bottom: 2px; color: var(--cmd-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .cmd-loan-list { margin: 0; padding: 0; list-style: none; } .cmd-loan-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cmd-line); } .cmd-loan-list li:last-child { border-bottom: 0; } .cmd-loan-list strong { color: var(--cmd-blue-ink); white-space: nowrap; } .cmd-steps { margin: 0; padding-left: 20px; } .cmd-steps li { margin-bottom: 8px; line-height: 1.45; } .cmd-credit { margin: 8px 0 0; color: var(--cmd-muted); font-size: 12px; font-weight: 400; } /* Settings > Personalization: sub-heading inside a card */ .materialdesign .cmd-section-title { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--cmd-line); color: var(--cmd-ink); font-size: 16px; font-weight: 700; } /* Login: brand panel + form panel, one column on phones */ body.cmd-login-page { min-height: 100vh; background: var(--cmd-blue-faint); } .cmd-login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; } .cmd-login-brand { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 48px 56px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--cmd-orange) 28%, transparent) 0, transparent 38%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--cmd-white) 10%, transparent) 0, transparent 45%), linear-gradient(160deg, var(--cmd-blue) 0%, var(--cmd-blue-dark) 100%); border-right: 4px solid var(--cmd-orange); color: var(--cmd-on-blue); } .cmd-login-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--cmd-on-blue) 14%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 75%); mask-image: linear-gradient(160deg, #000 0%, transparent 75%); pointer-events: none; } .cmd-login-logo img { width: 88px; height: 88px; margin-bottom: 18px; object-fit: contain; } .cmd-login-logo img.cmd-logo-tile { padding: 8px; border-radius: 18px; background: var(--cmd-white); box-shadow: 0 8px 24px color-mix(in srgb, var(--cmd-blue-dark) 35%, transparent); } .materialdesign .cmd-login-logo:focus-visible { outline: 2px solid var(--cmd-orange); outline-offset: 4px; border-radius: 18px; } .cmd-login-school { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; } .cmd-login-system { margin: 0 0 14px; font-size: 16px; opacity: .85; } .cmd-login-tagline { max-width: 360px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; opacity: .85; } .materialdesign .cmd-login-public { align-self: flex-start; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--cmd-on-blue) 35%, transparent); border-radius: 10px; color: var(--cmd-on-blue); font-weight: 600; } .materialdesign .cmd-login-public:hover, .materialdesign .cmd-login-public:focus { background: color-mix(in srgb, var(--cmd-on-blue) 12%, transparent); color: var(--cmd-on-blue); } .cmd-login-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 32px 24px; } .materialdesign .cmd-login-back { width: 100%; max-width: 400px; color: var(--cmd-muted); font-weight: 600; } .materialdesign .cmd-login-back:hover, .materialdesign .cmd-login-back:focus { color: var(--cmd-blue-ink); } .cmd-login-card { width: 100%; max-width: 400px; padding: 32px; border: 1px solid var(--cmd-line); border-top: 3px solid var(--cmd-orange); border-radius: var(--cmd-radius); background: var(--cmd-white); box-shadow: var(--cmd-shadow); } .materialdesign .cmd-login-card h1 { margin: 0 0 6px; color: var(--cmd-ink); font-size: 26px; font-weight: 800; } .cmd-login-sub { margin-bottom: 20px; color: var(--cmd-muted); font-size: 14px; } .cmd-login-card label { color: var(--cmd-ink); font-weight: 600; } .cmd-login-card .form-control { height: 46px; border-radius: 8px; font-size: 15px; } .cmd-login-card .cmd-pw-toggle { width: 46px; } .cmd-login-caps { margin: 6px 0 0; color: var(--cmd-amber); font-size: 13px; font-weight: 600; } .cmd-login-card .cmd-login-submit { height: 48px; margin-top: 6px; border-radius: 8px; font-size: 16px; font-weight: 700; } .cmd-login-help { margin: 18px 0 0; color: var(--cmd-muted); font-size: 13px; text-align: center; } @media (max-width: 991px) { .cmd-public-nav { order: 3; width: 100%; margin-left: 0; } .cmd-login { grid-template-columns: 1fr; } .cmd-login-brand { flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; padding: 16px; border-right: 0; border-bottom: 3px solid var(--cmd-orange); } .cmd-login-logo img { width: 52px; height: 52px; margin: 0; } .cmd-login-logo img.cmd-logo-tile { padding: 5px; border-radius: 12px; } .cmd-login-school { font-size: 20px; } .cmd-login-system { margin: 0; font-size: 14px; } .cmd-login-tagline, .materialdesign .cmd-login-public { display: none; } .cmd-login-panel { justify-content: flex-start; padding: 20px 16px 32px; } } @media (max-width: 768px) { .cmd-hero { margin: 0 -16px; padding: 36px 16px 68px; } .materialdesign .cmd-hero h1 { font-size: 30px; } .cmd-hero-sub { font-size: 15px; } .cmd-stats { gap: 8px; margin-top: -48px; } .cmd-stats li { padding: 12px 8px; } .cmd-stats strong { font-size: 22px; } .cmd-stats span { font-size: 12px; } .cmd-shelf-list { grid-auto-columns: 138px; gap: 12px; } .cmd-login-card { padding: 24px 20px; } } @media (max-width: 480px) { .cmd-hero-search { flex-direction: column; } .cmd-hero-search input { flex: none; } .cmd-hero-field { border-right: 0; border-bottom: 1px solid var(--cmd-line); } .cmd-hero-search .btn { width: 100%; } } @media (prefers-reduced-motion: no-preference) { .cmd-shelf-list { scroll-behavior: smooth; } } .cmd-alert[hidden], .cmd-login-caps[hidden] { display: none; } /* ---------- Motion (redesign Phase 4) ---------- */ /* Page-to-page cross-fade (opted in per page by templates/nav.php; scanner pages opt out). Sidebar and header stay put. */ #sidebar { view-transition-name: cmd-sidebar; } .materialdesign .fixed-header-top { view-transition-name: cmd-header; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--cmd-ease); } ::view-transition-group(cmd-sidebar), ::view-transition-group(cmd-header) { animation-duration: 0s; } /* In-place updates (js/pjax.js): new content fades up from the dimmed loading state */ .cmd-swap-in { animation: cmd-swap-in var(--cmd-dur) var(--cmd-ease); } @keyframes cmd-swap-in { from { opacity: .55; } to { opacity: 1; } } /* Issue / Return / Renew lists (js/circ-list.js): a new book slides in, a repeat scan pulses, a removed row folds away */ .cmd-circ-item.cmd-circ-new { animation: cmd-row-in var(--cmd-dur-slow) var(--cmd-ease); } .cmd-circ-item.cmd-circ-nudge { animation: cmd-row-nudge 600ms var(--cmd-ease); } .cmd-circ-item.cmd-circ-out { opacity: 0; transform: translateX(16px); transition: opacity 160ms var(--cmd-ease), transform 160ms var(--cmd-ease); } @keyframes cmd-row-in { from { opacity: 0; transform: translateY(-6px); background: var(--cmd-blue-soft); } to { opacity: 1; transform: none; } } @keyframes cmd-row-nudge { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmd-orange) 45%, transparent); } } /* Books after Register Book (book.php?new=): the new title is listed first, tinted, and flashes once */ .materialdesign table tr.cmd-row-new > td { background-color: color-mix(in srgb, var(--cmd-orange-soft) 55%, transparent); } .materialdesign table tr.cmd-row-new > td:first-child { box-shadow: inset 3px 0 0 var(--cmd-orange); } .materialdesign table tr.cmd-row-new.cmd-row-flash > td { animation: cmd-inv-flash 1.6s ease-out; } /* A dialog opened over another (Register Book > Add author / Add publisher): above it, with its own backdrop */ .modal.cmd-modal-stacked { z-index: 1070; } .modal-backdrop.cmd-backdrop-stacked { z-index: 1060; } /* Dropdowns (account menu, table toolbars, split buttons) pop in */ .open > .dropdown-menu { animation: cmd-pop-in var(--cmd-dur-fast) var(--cmd-ease); transform-origin: top right; } @keyframes cmd-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } /* Cards that link somewhere lift slightly on hover */ .materialdesign a.cmd-kpi { transition: transform var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease), border-color var(--cmd-dur-fast) var(--cmd-ease); } @media (prefers-reduced-motion: reduce) { .cmd-swap-in, .cmd-circ-item.cmd-circ-new, .cmd-circ-item.cmd-circ-nudge, .open > .dropdown-menu, .materialdesign table tr.cmd-row-new.cmd-row-flash > td { animation: none; } .cmd-circ-item.cmd-circ-out { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- Dashboard welcome (redesign Phase 5) ---------- */ /* Greeting, today's state and the four most common tasks. Brand tints only, so it follows Personalization. */ .cmd-welcome { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--cmd-space-6); align-items: center; margin-bottom: var(--cmd-space-5); padding: var(--cmd-space-6); overflow: hidden; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius-lg); box-shadow: var(--cmd-shadow-sm); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cmd-orange) 14%, transparent) 0, transparent 38%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--cmd-blue) 10%, transparent) 0, transparent 45%), linear-gradient(135deg, var(--cmd-white) 0%, var(--cmd-blue-faint) 100%); } .cmd-welcome-date { margin: 0 0 4px; color: var(--cmd-muted); font-size: var(--cmd-fs-sm); font-weight: 600; letter-spacing: .02em; } .materialdesign .cmd-welcome-title { margin: 0 0 var(--cmd-space-2); color: var(--cmd-ink); font-size: var(--cmd-fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .cmd-welcome-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--cmd-ink); font-size: var(--cmd-fs-base); } .cmd-welcome-alert { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--cmd-radius-pill); background: var(--cmd-red-soft); color: var(--cmd-red); font-weight: 700; } .cmd-welcome-ok { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--cmd-radius-pill); background: var(--cmd-green-soft); color: var(--cmd-green); font-weight: 700; } .cmd-welcome-meta { color: var(--cmd-muted); } .cmd-welcome-sub a { font-weight: 600; } .cmd-welcome-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cmd-space-3); } .materialdesign a.cmd-action { display: flex; align-items: center; gap: var(--cmd-space-3); padding: var(--cmd-space-3) var(--cmd-space-4); border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: color-mix(in srgb, var(--cmd-white) 85%, transparent); color: var(--cmd-ink); text-decoration: none; transition: transform var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease), border-color var(--cmd-dur-fast) var(--cmd-ease); } .materialdesign a.cmd-action:hover, .materialdesign a.cmd-action:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cmd-blue) 35%, var(--cmd-line)); box-shadow: var(--cmd-shadow-md); color: var(--cmd-ink); } .cmd-action-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--cmd-radius); background: var(--cmd-blue-soft); color: var(--cmd-blue-ink); font-size: 18px; } .cmd-action:nth-child(2) .cmd-action-icon { background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); } .cmd-action-text { display: flex; flex-direction: column; min-width: 0; } .cmd-action-text strong { font-size: var(--cmd-fs-base); font-weight: 700; } .cmd-action-text span { overflow: hidden; color: var(--cmd-muted); font-size: var(--cmd-fs-xs); white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 1199px) { .cmd-welcome { grid-template-columns: 1fr; } } @media (max-width: 575px) { .cmd-welcome { padding: var(--cmd-space-4); } .materialdesign .cmd-welcome-title { font-size: var(--cmd-fs-xl); } .cmd-welcome-actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .materialdesign a.cmd-action:hover { transform: none; } } /* Email template editor: GrapesJS sizes its views panel at 15% of the editor, too narrow for its four buttons under ~1100px (the last one pushed the page wider). Slightly tighter buttons fit at every width. */ .cmd-tpl-editor .gjs-pn-views .gjs-pn-btn { min-width: 22px; margin-right: 0; padding: 5px 3px; font-size: 16px; } /* Closed Days (Settings > Loan Periods): Mon–Sun toggle buttons over real checkboxes; checked = closed */ .cmd-weekdays { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; } .cmd-weekdays .cmd-legend { width: auto; margin: 0 0 8px; border: 0; font-size: var(--cmd-fs-sm); font-weight: 600; color: var(--cmd-ink); } .cmd-weekdays-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 640px; } .cmd-day { position: relative; margin: 0; font-weight: inherit; cursor: pointer; } .cmd-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cmd-day-face { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px 9px; border: 1.5px solid var(--cmd-line-strong); border-radius: var(--cmd-radius); background: var(--cmd-white); color: var(--cmd-ink); user-select: none; transition: background-color var(--cmd-dur-fast) var(--cmd-ease), border-color var(--cmd-dur-fast) var(--cmd-ease), box-shadow var(--cmd-dur-fast) var(--cmd-ease), transform var(--cmd-dur-fast) var(--cmd-ease); } .cmd-day-name { font-size: var(--cmd-fs-md); font-weight: 700; line-height: 1.2; } .cmd-day-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cmd-green); } .cmd-day-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cmd-day-state::after { content: "Open"; } .cmd-day:hover .cmd-day-face { border-color: color-mix(in srgb, var(--cmd-blue) 45%, var(--cmd-white)); background: var(--cmd-blue-faint); } .cmd-day input:checked + .cmd-day-face { border-color: var(--cmd-blue); background: var(--cmd-blue); color: var(--cmd-on-blue); box-shadow: 0 4px 12px color-mix(in srgb, var(--cmd-blue) 28%, transparent); } .cmd-day:hover input:checked + .cmd-day-face { border-color: var(--cmd-blue-dark); background: var(--cmd-blue-dark); } .cmd-day input:checked + .cmd-day-face .cmd-day-state { color: var(--cmd-on-blue); } .cmd-day input:checked + .cmd-day-face .cmd-day-state::after { content: "Closed"; } .cmd-day input:focus-visible + .cmd-day-face { outline: var(--cmd-focus-ring); outline-offset: 2px; } .cmd-day:active .cmd-day-face { transform: scale(.96); } .cmd-weekdays-summary { margin: 10px 0 0; font-size: var(--cmd-fs-sm); font-weight: 600; color: var(--cmd-blue-ink); } .cmd-weekdays-summary.cmd-weekdays-error { color: var(--cmd-red); } @media (max-width: 480px) { .cmd-weekdays-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .cmd-day:active .cmd-day-face { transform: none; } } /* Tags: small chips under a title or in the Tags column (ui_tags()); each links to the titles with that tag */ .cmd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .materialdesign a.cmd-tag { display: inline-block; max-width: 100%; padding: 2px 8px; border: 1px solid var(--cmd-blue-soft); border-radius: var(--cmd-radius-pill); background: var(--cmd-blue-faint); color: var(--cmd-blue-ink-dark); font-size: 12px; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: border-color .12s, background-color .12s; } .materialdesign a.cmd-tag:hover, .materialdesign a.cmd-tag:focus { border-color: var(--cmd-blue); background: var(--cmd-blue-soft); text-decoration: none; } .materialdesign a.cmd-tag:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 1px; } .cmd-tag-new { margin-top: 6px; } @media (prefers-reduced-motion: reduce) { .materialdesign a.cmd-tag { transition: none; } } /* search.php multi-tag filter: picked tags as removable chips (catalog_tag_chips()) */ .cmd-tag-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; } .materialdesign a.cmd-tag.cmd-tag-on { padding: 3px 10px; border-color: var(--cmd-orange); background: var(--cmd-orange-soft); color: var(--cmd-orange-ink-dark); font-size: 13px; font-weight: 600; } .materialdesign a.cmd-tag.cmd-tag-on:hover, .materialdesign a.cmd-tag.cmd-tag-on:focus { border-color: var(--cmd-orange-ink-dark); background: var(--cmd-orange-soft); } /* Register / Edit Book "More details" (ui_book_details()): optional catalog fields, collapsed by default */ .cmd-more > summary .cmd-sub { font-weight: 400; margin-left: 6px; } .cmd-more-body .form-group:last-child { margin-bottom: 0; } .cmd-more-body textarea.form-control { resize: vertical; min-height: 64px; } /* Covers on Holdings (title thumbnail button, volume cards) and in the cover dialogs; ui_cover() fills each box */ .cmd-cover-btn, .cmd-vol-cover, .cmd-cover-field-preview { flex: 0 0 auto; display: inline-flex; overflow: hidden; border-radius: 6px; background: var(--cmd-blue-faint); box-shadow: 0 0 0 1px var(--cmd-line); } .cmd-cover-btn { width: 56px; height: 80px; padding: 0; border: 0; cursor: pointer; } .cmd-cover-btn:hover, .cmd-cover-btn:focus-visible { box-shadow: 0 0 0 2px var(--cmd-orange); } .cmd-vol-cover { width: 40px; height: 56px; } .cmd-cover-field { display: flex; gap: 12px; align-items: flex-start; } .cmd-cover-field > div { flex: 1 1 auto; min-width: 0; } .cmd-cover-field-preview { width: 72px; height: 104px; } .cmd-cover-field-preview img.cmd-cover { background: var(--cmd-white); } .cmd-cover-btn .cmd-cover, .cmd-vol-cover .cmd-cover, .cmd-cover-field-preview .cmd-cover { display: flex; width: 100%; height: 100%; object-fit: cover; } .cmd-cover-btn .cmd-cover-empty, .cmd-vol-cover .cmd-cover-empty, .cmd-cover-field-preview .cmd-cover-empty { font-size: 16px; } .cmd-grow { flex: 1 1 auto; min-width: 0; } .cmd-vol-head .cmd-vol-title { flex: 1 1 200px; min-width: 0; } .materialdesign .cmd-vol-title .cmd-vol-name { font-weight: 400; color: var(--cmd-ink); } .cmd-vol-meta { flex: 1 1 100%; order: 3; font-size: 12px; color: var(--cmd-muted); } .cmd-vol-meta .cmd-tags { margin-left: 6px; } .cmd-vol-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed var(--cmd-line); border-radius: 8px; } .cmd-vol-empty .cmd-hint { margin: 0; } .materialdesign .cmd-vol-head .cmd-vol-title, .cmd-vol-meta { text-align: left; } /* Public title page (book_view.php) and catalog cards (search.php) */ .cmd-opac { padding: 20px; } .cmd-opac-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--cmd-muted); } .cmd-opac-top { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; } .cmd-opac-cover { width: 180px; margin: 0; } .cmd-book-cover .cmd-cover { display: flex; width: 100%; height: 100%; object-fit: cover; } .cmd-opac-kicker { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--cmd-muted); } .materialdesign .cmd-opac-title { margin: 0; font-size: 26px; line-height: 1.25; color: var(--cmd-blue-ink); } .cmd-opac-resp { margin: 4px 0 0; color: var(--cmd-muted); } .cmd-opac-by { margin: 6px 0 0; font-size: 15px; } .cmd-opac-avail { margin: 10px 0 0; } .cmd-opac-fields { display: grid; gap: 6px; margin: 14px 0 0; } .cmd-opac-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; } .cmd-opac-row dt { font-weight: 600; color: var(--cmd-muted); } .cmd-opac-row dd { margin: 0; overflow-wrap: anywhere; } .cmd-opac-row .cmd-tags { margin-top: 0; } .cmd-opac-summary { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--cmd-orange); background: var(--cmd-blue-faint); border-radius: 0 var(--cmd-radius-sm) var(--cmd-radius-sm) 0; } .cmd-opac-desc-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--cmd-muted); text-transform: uppercase; letter-spacing: .04em; } .cmd-opac-desc.is-clamped .cmd-opac-desc-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .cmd-opac-desc-toggle { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--cmd-blue-ink); font-weight: 600; cursor: pointer; } .cmd-opac-desc-toggle:hover { text-decoration: underline; } .cmd-opac-desc-toggle:focus-visible { outline: 2px solid var(--cmd-blue); outline-offset: 2px; border-radius: 2px; } .cmd-opac-tabs { margin-top: 24px; } .cmd-opac .tab-content { padding-top: 14px; } .cmd-opac-holdings th { white-space: nowrap; } .cmd-opac-vols, .cmd-opac-series { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .cmd-opac-vols li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius-sm); } .materialdesign .cmd-opac-vols a { display: flex; align-items: center; gap: 10px; color: var(--cmd-ink); } .cmd-opac-vols .cmd-sub { display: block; } .cmd-opac-vol-cover { flex: 0 0 auto; display: inline-flex; width: 36px; height: 52px; overflow: hidden; border-radius: 4px; background: var(--cmd-blue-faint); } .cmd-opac-vol-cover .cmd-cover { display: flex; width: 100%; height: 100%; object-fit: cover; } .cmd-opac-vol-cover .cmd-cover-empty, .cmd-result-cover .cmd-cover-empty { font-size: 14px; } .cmd-opac-series li { padding: 6px 0; border-bottom: 1px solid var(--cmd-line); } /* Catalog result cards */ .cmd-result-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .cmd-result { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: var(--cmd-white); } .cmd-result-cover { display: flex; width: 72px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--cmd-radius-sm); background: var(--cmd-blue-faint); } .cmd-result-cover .cmd-cover { display: flex; width: 100%; height: 100%; object-fit: cover; } .materialdesign .cmd-result-title { display: inline; font-size: 16px; font-weight: 700; color: var(--cmd-blue-ink); } .cmd-result-by { margin: 2px 0 0; } .cmd-result-meta { margin: 2px 0 0; font-size: 13px; color: var(--cmd-muted); } .cmd-result-side { text-align: right; } .cmd-result-side .cmd-badge { white-space: normal; } .cmd-result-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cmd-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; } @media (max-width: 600px) { .cmd-opac { padding: 14px; } .cmd-opac-top { grid-template-columns: 1fr; } .cmd-opac-cover { width: 140px; } .cmd-opac-row { grid-template-columns: 1fr; gap: 0; } .cmd-result { grid-template-columns: 56px minmax(0, 1fr); } .cmd-result-cover { width: 56px; } .cmd-result-side { grid-column: 2; text-align: left; } } .cmd-result, .cmd-opac, .cmd-result-bar { text-align: left; } .cmd-result-bar > span:last-child { display: inline-flex; align-items: center; gap: 6px; } .cmd-result-bar label { margin: 0; font-weight: 600; } .materialdesign .cmd-result-bar .cmd-filter { width: auto; } /* Register Book > Fetch details (js/isbn-fetch.js) */ .cmd-isbn-fetch { margin-bottom: 14px; padding: 12px 14px 4px; border: 1px solid var(--cmd-line); border-radius: var(--cmd-radius); background: var(--cmd-blue-faint); text-align: left; } .cmd-isbn-fetch-btn { padding-top: 25px; } .cmd-isbn-fetch-btn .btn { width: 100%; } .cmd-ok-text { color: var(--cmd-blue-ink); } .cmd-new-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 12px; text-align: left; } .cmd-new-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; border: 1px dashed var(--cmd-orange); border-radius: var(--cmd-radius-pill); background: var(--cmd-white); } .materialdesign .cmd-new-chip .form-control { width: auto; min-width: 160px; height: 26px; padding: 2px 6px; } @media (max-width: 767px) { .cmd-isbn-fetch-btn { padding-top: 25px; } } .cmd-new-chips[hidden] { display: none; }